Skip to content

Commit b01fbf2

Browse files
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]>
1 parent f598966 commit b01fbf2

File tree

2 files changed

+3
-2
lines changed

2 files changed

+3
-2
lines changed

starters/tailwind/src/TagGroup.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,12 @@ const tagStyles = tv({
4343
true: 'bg-blue-600 text-white border-transparent forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-color-adjust-none'
4444
},
4545
isDisabled: {
46-
true: 'bg-gray-100 text-gray-300 forced-colors:text-[GrayText]'
46+
true: 'bg-gray-100 dark:bg-transparent dark:border-white/20 text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]'
4747
}
4848
},
4949
compoundVariants: (Object.keys(colors) as Color[]).map((color) => ({
5050
isSelected: false,
51+
isDisabled: false,
5152
color,
5253
class: colors[color]
5354
}))

starters/tailwind/stories/TagGroup.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default meta;
1515
export const Example = (args: any) => (
1616
<TagGroup {...args}>
1717
<Tag>Chocolate</Tag>
18-
<Tag>Mint</Tag>
18+
<Tag isDisabled>Mint</Tag>
1919
<Tag>Strawberry</Tag>
2020
<Tag>Vanilla</Tag>
2121
</TagGroup>

0 commit comments

Comments
 (0)