react-tags: add appearance

packages/react-components/react-tags/etc/react-tags.api.md

@@ -74,7 +74,7 @@ export type TagGroupState<Value = string> = ComponentState<TagGroupSlots> & Requ
 
 // @public
 export type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {
-    appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
+    appearance?: 'filled' | 'outline' | 'brand';
     disabled?: boolean;
     dismissible?: boolean;
     shape?: 'rounded' | 'circular';

packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx

@@ -36,7 +36,7 @@ export const useInteractionTag_unstable = (
   const id = useId('fui-Tag', props.id);
 
   const {
-    appearance = 'filled-lighter',
+    appearance = 'filled',
     disabled = false,
     dismissible = contextDismissible,
     shape = 'rounded',

packages/react-components/react-tags/src/components/InteractionTag/useInteractionTagStyles.styles.ts

@@ -30,10 +30,6 @@ const useRootStyles = makeStyles({
     alignItems: 'center',
     boxSizing: 'border-box',
     width: 'fit-content',
-
-    backgroundColor: tokens.colorNeutralBackground3,
-    color: tokens.colorNeutralForeground2,
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
   },
 
   rounded: shorthands.borderRadius(tokens.borderRadiusMedium),
@@ -71,27 +67,56 @@ const useContentButtonStyles = makeStyles({
     "media secondary"
     `,
 
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+    ...createCustomFocusIndicatorStyle({
+      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+      zIndex: 1,
+    }),
+  },
+
+  filled: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    color: tokens.colorNeutralForeground2,
     ':hover': {
       cursor: 'pointer',
+      backgroundColor: tokens.colorNeutralBackground3Hover,
+      color: tokens.colorNeutralForeground2Hover,
+    },
+    ':hover:active': {
+      backgroundColor: tokens.colorNeutralBackground3Pressed,
+      color: tokens.colorNeutralForeground2Pressed,
     },
   },
-
-  rounded: createCustomFocusIndicatorStyle(
-    {
-      ...shorthands.borderRadius(tokens.borderRadiusMedium),
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      zIndex: 1,
+  outline: {
+    backgroundColor: tokens.colorSubtleBackground,
+    color: tokens.colorNeutralForeground2,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+    ':hover': {
+      cursor: 'pointer',
+      backgroundColor: tokens.colorSubtleBackgroundHover,
+      color: tokens.colorNeutralForeground2Hover,
     },
-    { enableOutline: true },
-  ),
-  circular: createCustomFocusIndicatorStyle(
-    {
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      zIndex: 1,
+    ':hover:active': {
+      backgroundColor: tokens.colorSubtleBackgroundPressed,
+      color: tokens.colorNeutralForeground2Pressed,
     },
-    { enableOutline: true },
-  ),
+  },
+  brand: {
+    backgroundColor: tokens.colorBrandBackground2,
+    color: tokens.colorBrandForeground2,
+    ':hover': {
+      cursor: 'pointer',
+      backgroundColor: tokens.colorBrandBackground2Hover,
+      color: tokens.colorBrandForeground2Hover,
+    },
+    ':hover:active': {
+      backgroundColor: tokens.colorBrandBackground2Pressed,
+      color: tokens.colorBrandForeground2Pressed,
+    },
+  },
+
+  rounded: shorthands.borderRadius(tokens.borderRadiusMedium),
+  circular: shorthands.borderRadius(tokens.borderRadiusCircular),
 
   medium: {
     paddingRight: '7px',
@@ -103,6 +128,27 @@ const useContentButtonStyles = makeStyles({
     paddingRight: '5px',
   },
 });
+const useContentButtonDisabledStyles = makeStyles({
+  filled: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorNeutralBackgroundDisabled,
+    color: tokens.colorNeutralForegroundDisabled,
+    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
+  },
+  outline: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorSubtleBackground,
+    color: tokens.colorNeutralForegroundDisabled,
+    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+  },
+  brand: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorNeutralBackgroundDisabled,
+    color: tokens.colorNeutralForegroundDisabled,
+    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
+  },
+});
+
 /**
  * Styles for content slot when InteractionTag is without leading media/icon
  */
@@ -121,10 +167,15 @@ const useContentButtonWithoutMediaStyles = makeStyles({
  * Styles for content slot when InteractionTag has dismiss button
  */
 const useDismissibleContentButtonStyles = makeStyles({
-  base: createCustomFocusIndicatorStyle({
+  base: {
     borderTopRightRadius: tokens.borderRadiusNone,
     borderBottomRightRadius: tokens.borderRadiusNone,
-  }),
+    borderRightStyle: 'none',
+    ...createCustomFocusIndicatorStyle({
+      borderTopRightRadius: tokens.borderRadiusNone,
+      borderBottomRightRadius: tokens.borderRadiusNone,
+    }),
+  },
   medium: {
     paddingRight: tokens.spacingHorizontalS,
   },
@@ -151,30 +202,66 @@ const useDismissButtonStyles = makeStyles({
     height: '100%',
     alignItems: 'center',
 
+    ...createCustomFocusIndicatorStyle(shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)),
+
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
+
     // divider:
-    ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
+    borderLeftColor: tokens.colorNeutralStroke1,
     borderTopLeftRadius: tokens.borderRadiusNone,
     borderBottomLeftRadius: tokens.borderRadiusNone,
+  },
 
+  filled: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    color: tokens.colorNeutralForeground2,
     ':hover': {
       cursor: 'pointer',
+      backgroundColor: tokens.colorNeutralBackground3Hover,
+      color: tokens.colorNeutralForeground2BrandHover,
+    },
+    ':hover:active': {
+      backgroundColor: tokens.colorNeutralBackground3Pressed,
+      color: tokens.colorNeutralForeground2BrandPressed,
+    },
+  },
+  outline: {
+    backgroundColor: tokens.colorSubtleBackground,
+    color: tokens.colorNeutralForeground2,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+    ':hover': {
+      cursor: 'pointer',
+      backgroundColor: tokens.colorSubtleBackgroundHover,
+      color: tokens.colorNeutralForeground2BrandHover,
+    },
+    ':hover:active': {
+      backgroundColor: tokens.colorSubtleBackgroundPressed,
+      color: tokens.colorNeutralForeground2BrandPressed,
+    },
+  },
+  brand: {
+    backgroundColor: tokens.colorBrandBackground2,
+    color: tokens.colorBrandForeground2,
+    borderLeftColor: tokens.colorBrandStroke2, // divider
+    ':hover': {
+      cursor: 'pointer',
+      backgroundColor: tokens.colorBrandBackground2Hover,
+      color: tokens.colorBrandForeground2Hover,
+    },
+    ':hover:active': {
+      backgroundColor: tokens.colorBrandBackground2Pressed,
+      color: tokens.colorBrandForeground2Pressed,
     },
   },
 
-  rounded: createCustomFocusIndicatorStyle({
-    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-    borderTopLeftRadius: tokens.borderRadiusNone,
-    borderBottomLeftRadius: tokens.borderRadiusNone,
+  rounded: {
     borderTopRightRadius: tokens.borderRadiusMedium,
     borderBottomRightRadius: tokens.borderRadiusMedium,
-  }),
-  circular: createCustomFocusIndicatorStyle({
-    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-    borderTopLeftRadius: tokens.borderRadiusNone,
-    borderBottomLeftRadius: tokens.borderRadiusNone,
+  },
+  circular: {
     borderTopRightRadius: tokens.borderRadiusCircular,
     borderBottomRightRadius: tokens.borderRadiusCircular,
-  }),
+  },
 
   medium: {
     fontSize: mediumIconSize,
@@ -192,6 +279,28 @@ const useDismissButtonStyles = makeStyles({
     paddingRight: '5px',
   },
 });
+const useDismissButtonDisabledStyles = makeStyles({
+  filled: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorNeutralBackgroundDisabled,
+    color: tokens.colorNeutralForegroundDisabled,
+    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
+    borderLeftColor: tokens.colorNeutralStrokeDisabled, // divider
+  },
+  outline: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorSubtleBackground,
+    color: tokens.colorNeutralForegroundDisabled,
+    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+  },
+  brand: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorNeutralBackgroundDisabled,
+    color: tokens.colorNeutralForegroundDisabled,
+    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
+    borderLeftColor: tokens.colorNeutralStrokeDisabled, // divider
+  },
+});
 
 /**
  * Apply styling to the InteractionTag slots based on the state
@@ -200,16 +309,19 @@ export const useInteractionTagStyles_unstable = (state: InteractionTagState): In
   const rootStyles = useRootStyles();
 
   const contentButtonStyles = useContentButtonStyles();
+  const contentButtonDisabledStyles = useContentButtonDisabledStyles();
   const contentButtonWithoutMediaStyles = useContentButtonWithoutMediaStyles();
   const dismissibleContentButtonStyles = useDismissibleContentButtonStyles();
 
+  const dismissButtonStyles = useDismissButtonStyles();
+  const dismissButtonDisabledStyles = useDismissButtonDisabledStyles();
+
   const iconStyles = useIconStyles();
   const mediaStyles = useMediaStyles();
   const primaryTextStyles = usePrimaryTextStyles();
   const secondaryTextStyles = useSecondaryTextStyles();
-  const dismissButtonStyles = useDismissButtonStyles();
 
-  const { shape, size } = state;
+  const { shape, size, appearance } = state;
 
   state.root.className = mergeClasses(
     interactionTagClassNames.root,
@@ -224,6 +336,7 @@ export const useInteractionTagStyles_unstable = (state: InteractionTagState): In
       interactionTagClassNames.content,
 
       contentButtonStyles.base,
+      state.disabled ? contentButtonDisabledStyles[appearance] : contentButtonStyles[appearance],
       contentButtonStyles[shape],
       contentButtonStyles[size],
 
@@ -274,6 +387,7 @@ export const useInteractionTagStyles_unstable = (state: InteractionTagState): In
     state.dismissButton.className = mergeClasses(
       interactionTagClassNames.dismissButton,
       dismissButtonStyles.base,
+      state.disabled ? dismissButtonDisabledStyles[appearance] : dismissButtonStyles[appearance],
       dismissButtonStyles[shape],
       dismissButtonStyles[size],
       state.dismissButton.className,

packages/react-components/react-tags/src/components/Tag/Tag.types.ts

@@ -37,7 +37,7 @@ export type TagSlots = {
  * Tag Props
  */
 export type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {
-  appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
+  appearance?: 'filled' | 'outline' | 'brand';
   disabled?: boolean;
   dismissible?: boolean;
   shape?: 'rounded' | 'circular';

packages/react-components/react-tags/src/components/Tag/useTag.tsx

@@ -33,7 +33,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
   const id = useId('fui-Tag', props.id);
 
   const {
-    appearance = 'filled-lighter',
+    appearance = 'filled',
     disabled = false,
     dismissible = contextDismissible,
     shape = 'rounded',