fix(v6): Fix TagCount styling (patternfly#237)

* fix(v6): Fix TagCount styling * Update tokens
fhlavac · Aug 18, 2024 · 14ed14d · 14ed14d
1 parent 7167a94
commit 14ed14d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git 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<TagCountProps> = ({
   ouiaId = 'TagCount',
   ...props 
 }: TagCountProps) => {
-  const classes = useStyles();
+  const classes = useStyles(!count);
   const tagClasses = clsx(classes.buttonTagCount, className);
   return (
     <Button aria-label="Tag count" {...props} variant="plain" isDisabled={!count} className={tagClasses} ouiaId={ouiaId} {...props}>
       <Icon iconSize={iconSize} data-ouia-component-id={`${ouiaId}-icon`}>
-        <TagIcon />
+        <TagIcon className={classes.tagIcon} />
       </Icon>
       <span className={classes.tagText} data-ouia-component-id={`${ouiaId}-text`}>{count}</span>
     </Button>

diff --git 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`]
             >
               <svg
                 aria-hidden="true"
-                class="pf-v6-svg"
+                class="pf-v6-svg tagIcon-0-2-2 tagIcon-d0-0-2-4"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -41,7 +41,7 @@ exports[`TagCount component should render a disabled tag count with no value 1`]
             </span>
           </span>
           <span
-            class="tagText-0-2-2"
+            class="tagText-0-2-3"
             data-ouia-component-id="TagCount-text"
           />
         </span>
@@ -71,7 +71,7 @@ exports[`TagCount component should render a disabled tag count with no value 1`]
           >
             <svg
               aria-hidden="true"
-              class="pf-v6-svg"
+              class="pf-v6-svg tagIcon-0-2-2 tagIcon-d0-0-2-4"
               fill="currentColor"
               height="1em"
               role="img"
@@ -85,7 +85,7 @@ exports[`TagCount component should render a disabled tag count with no value 1`]
           </span>
         </span>
         <span
-          class="tagText-0-2-2"
+          class="tagText-0-2-3"
           data-ouia-component-id="TagCount-text"
         />
       </span>
@@ -171,7 +171,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="pf-v6-svg"
+                class="pf-v6-svg tagIcon-0-2-2 tagIcon-d1-0-2-5"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -185,7 +185,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
             </span>
           </span>
           <span
-            class="tagText-0-2-2"
+            class="tagText-0-2-3"
             data-ouia-component-id="TagCount-text"
           >
             11
@@ -216,7 +216,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="pf-v6-svg"
+              class="pf-v6-svg tagIcon-0-2-2 tagIcon-d1-0-2-5"
               fill="currentColor"
               height="1em"
               role="img"
@@ -230,7 +230,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
           </span>
         </span>
         <span
-          class="tagText-0-2-2"
+          class="tagText-0-2-3"
           data-ouia-component-id="TagCount-text"
         >
           11