From 48797492632454fe236ce2e3751615038cb63b53 Mon Sep 17 00:00:00 2001
From: Filip Hlavac <filip.hlavac01@gmail.com>
Date: Thu, 1 Aug 2024 14:30:25 +0200
Subject: [PATCH 1/2] fix(v6): Fix TagCount styling

---
 packages/module/src/TagCount/TagCount.tsx        | 14 +++++++++-----
 .../__snapshots__/TagCount.test.tsx.snap         | 16 ++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx
index 08ab1c8d..1af5ab7a 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--200) var(--pf-t--global--spacer--300)'
+  },
+
+  tagIcon: {
+    color: 'var(--pf-t--global--icon--color--100)',
   },
 
   tagText: {
-    marginLeft: 'var(--pf-v5-global--spacer--sm)',
-    fontSize: 'var(--pf-v5-global--FontSize--sm)'
+    marginLeft: 'var(--pf-t--global--spacer--200)',
+    fontSize: 'var(--pf-t--global--font--size--200)'
   }
 });
 
@@ -40,7 +44,7 @@ const TagCount: React.FunctionComponent<TagCountProps> = ({
   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
index fe57b8f0..4aef790e 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`]
             >
               <svg
                 aria-hidden="true"
-                class="pf-v6-svg"
+                class="pf-v6-svg tagIcon-0-2-2"
                 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"
               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"
                 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"
               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

From 0dc33de8745d2ee106635a50fd4894d1693ef81f Mon Sep 17 00:00:00 2001
From: Filip Hlavac <filip.hlavac01@gmail.com>
Date: Tue, 6 Aug 2024 11:42:38 +0200
Subject: [PATCH 2/2] Update tokens

---
 packages/module/src/TagCount/TagCount.tsx          | 14 +++++++-------
 .../TagCount/__snapshots__/TagCount.test.tsx.snap  |  8 ++++----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx
index 1af5ab7a..a9b6381f 100644
--- a/packages/module/src/TagCount/TagCount.tsx
+++ b/packages/module/src/TagCount/TagCount.tsx
@@ -8,16 +8,16 @@ const useStyles = createUseStyles({
   buttonTagCount: {
     display: 'flex',
     alignItems: 'center',
-    padding: 'var(--pf-t--global--spacer--200) var(--pf-t--global--spacer--300)'
+    padding: 'var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md)'
   },
 
-  tagIcon: {
-    color: 'var(--pf-t--global--icon--color--100)',
-  },
+  tagIcon: (isDisabled: boolean) => ({
+    color: `var(--pf-t--global--icon--color--${isDisabled ? '200' : '100'})`,
+  }),
 
   tagText: {
-    marginLeft: 'var(--pf-t--global--spacer--200)',
-    fontSize: 'var(--pf-t--global--font--size--200)'
+    marginLeft: 'var(--pf-t--global--spacer--sm)',
+    fontSize: 'var(--pf-t--global--font--size--sm)'
   }
 });
 
@@ -39,7 +39,7 @@ 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}>
diff --git a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
index 4aef790e..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`]
             >
               <svg
                 aria-hidden="true"
-                class="pf-v6-svg tagIcon-0-2-2"
+                class="pf-v6-svg tagIcon-0-2-2 tagIcon-d0-0-2-4"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -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 tagIcon-0-2-2"
+              class="pf-v6-svg tagIcon-0-2-2 tagIcon-d0-0-2-4"
               fill="currentColor"
               height="1em"
               role="img"
@@ -171,7 +171,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="pf-v6-svg tagIcon-0-2-2"
+                class="pf-v6-svg tagIcon-0-2-2 tagIcon-d1-0-2-5"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -216,7 +216,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="pf-v6-svg tagIcon-0-2-2"
+              class="pf-v6-svg tagIcon-0-2-2 tagIcon-d1-0-2-5"
               fill="currentColor"
               height="1em"
               role="img"