From b01fbf219d19f3a116ef976de5e06dc4749b1776 Mon Sep 17 00:00:00 2001
From: steveoh <sgourley@utah.gov>
Date: Tue, 29 Oct 2024 11:19:39 -0600
Subject: [PATCH] fix(tailwind): correct disabled tag styles (#7247)

* fix(taggroup): add isDisabled to compoundVariants

this allows the styles defined in isDisabled to be applied

* test(taggroup): add disabled item

this shows the disabled styles in action

* style(taggroup): add dark text colors to improve contrast

* style(taggroup): update dark mode disabled styles

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
---
 starters/tailwind/src/TagGroup.tsx             | 3 ++-
 starters/tailwind/stories/TagGroup.stories.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/starters/tailwind/src/TagGroup.tsx b/starters/tailwind/src/TagGroup.tsx
index 6d5b8f72f28..8dd534ae6c8 100644
--- a/starters/tailwind/src/TagGroup.tsx
+++ b/starters/tailwind/src/TagGroup.tsx
@@ -43,11 +43,12 @@ const tagStyles = tv({
       true: 'bg-blue-600 text-white border-transparent forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-color-adjust-none'
     },
     isDisabled: {
-      true: 'bg-gray-100 text-gray-300 forced-colors:text-[GrayText]'
+      true: 'bg-gray-100 dark:bg-transparent dark:border-white/20 text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]'
     }
   },
   compoundVariants: (Object.keys(colors) as Color[]).map((color) => ({
     isSelected: false,
+    isDisabled: false,
     color,
     class: colors[color]
   }))
diff --git a/starters/tailwind/stories/TagGroup.stories.tsx b/starters/tailwind/stories/TagGroup.stories.tsx
index 7efc7f1cd33..19c6dd7557b 100644
--- a/starters/tailwind/stories/TagGroup.stories.tsx
+++ b/starters/tailwind/stories/TagGroup.stories.tsx
@@ -15,7 +15,7 @@ export default meta;
 export const Example = (args: any) => (
   <TagGroup {...args}>
     <Tag>Chocolate</Tag>
-    <Tag>Mint</Tag>
+    <Tag isDisabled>Mint</Tag>
     <Tag>Strawberry</Tag>
     <Tag>Vanilla</Tag>
   </TagGroup>