diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx index 08ab1c8d..a9b6381f 100644 --- a/packages/module/src/TagCount/TagCount.tsx +++ b/packages/module/src/TagCount/TagCount.tsx @@ -6,14 +6,18 @@ import { createUseStyles } from 'react-jss' const useStyles = createUseStyles({ buttonTagCount: { - color: 'var(--pf-v5-global--icon--Color--light)', display: 'flex', - alignItems: 'center' + alignItems: 'center', + padding: 'var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md)' }, + tagIcon: (isDisabled: boolean) => ({ + color: `var(--pf-t--global--icon--color--${isDisabled ? '200' : '100'})`, + }), + tagText: { - marginLeft: 'var(--pf-v5-global--spacer--sm)', - fontSize: 'var(--pf-v5-global--FontSize--sm)' + marginLeft: 'var(--pf-t--global--spacer--sm)', + fontSize: 'var(--pf-t--global--font--size--sm)' } }); @@ -35,12 +39,12 @@ const TagCount: React.FunctionComponent = ({ ouiaId = 'TagCount', ...props }: TagCountProps) => { - const classes = useStyles(); + const classes = useStyles(!count); const tagClasses = clsx(classes.buttonTagCount, className); return ( diff --git a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap index fe57b8f0..36e2bd5f 100644 --- a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap +++ b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap @@ -27,7 +27,7 @@ exports[`TagCount component should render a disabled tag count with no value 1`] > @@ -71,7 +71,7 @@ exports[`TagCount component should render a disabled tag count with no value 1`] > @@ -171,7 +171,7 @@ exports[`TagCount component should render a tag count of 11 1`] = ` > 11 @@ -216,7 +216,7 @@ exports[`TagCount component should render a tag count of 11 1`] = ` > 11