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 <[email protected]>
adobe · Oct 29, 2024 · b01fbf2 · b01fbf2 · rspbot · Oct 29, 2024
1 parent f598966
commit b01fbf2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git 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
@@ -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>