feat(react-tag): Added selected state for Tag and InteractionTag

apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx

@@ -110,6 +110,40 @@ export const SizeExtraSmallWithMedia = () => (
   </InteractionTag>
 );
 
+// selected
+export const Selected = () => (
+  <InteractionTag selected>
+    <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
+      Primary Text
+    </InteractionTagPrimary>
+    <InteractionTagSecondary />
+  </InteractionTag>
+);
+export const SelectedHighContrast = getStoryVariant(Selected, HIGH_CONTRAST);
+export const SelectedDarkMode = getStoryVariant(Selected, DARK_MODE);
+
+export const OutlineSelected = () => (
+  <InteractionTag appearance="outline" selected>
+    <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
+      Primary Text
+    </InteractionTagPrimary>
+    <InteractionTagSecondary />
+  </InteractionTag>
+);
+export const OutlineSelectedHighContrast = getStoryVariant(OutlineSelected, HIGH_CONTRAST);
+export const OutlineSelectedDarkMode = getStoryVariant(OutlineSelected, DARK_MODE);
+
+export const BrandSelected = () => (
+  <InteractionTag appearance="brand" selected>
+    <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
+      Primary Text
+    </InteractionTagPrimary>
+    <InteractionTagSecondary />
+  </InteractionTag>
+);
+export const BrandSelectedHighContrast = getStoryVariant(BrandSelected, HIGH_CONTRAST);
+export const BrandSelectedDarkMode = getStoryVariant(BrandSelected, DARK_MODE);
+
 const useBoxSizingContainerStyles = makeStyles({
   container: {
     boxSizing: 'border-box',

apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx

@@ -81,3 +81,28 @@ export const SizeExtraSmallWithMedia = () => (
     Primary Text
   </Tag>
 );
+
+// selected
+export const Selected = () => (
+  <Tag selected dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const SelectedHighContrast = getStoryVariant(Selected, HIGH_CONTRAST);
+export const SelectedDarkMode = getStoryVariant(Selected, DARK_MODE);
+
+export const OutlineSelected = () => (
+  <Tag appearance="outline" selected dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const OutlineSelectedHighContrast = getStoryVariant(OutlineSelected, HIGH_CONTRAST);
+export const OutlineSelectedDarkMode = getStoryVariant(OutlineSelected, DARK_MODE);
+
+export const BrandSelected = () => (
+  <Tag appearance="brand" selected dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandSelectedHighContrast = getStoryVariant(BrandSelected, HIGH_CONTRAST);
+export const BrandSelectedDarkMode = getStoryVariant(BrandSelected, DARK_MODE);

change/@fluentui-react-tags-1bd0d3f5-fdd3-4ed1-958f-b083a09a07f5.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Added selected state for Tag and InteractionTag",
+  "packageName": "@fluentui/react-tags",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -45,12 +45,13 @@ export type InteractionTagPrimarySlots = {
 };
 
 // @public
-export type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'> & Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>> & UseTagAvatarContextValuesOptions;
+export type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'> & Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>> & UseTagAvatarContextValuesOptions;
 
 // @public
 export type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<InteractionTagSlots>> & {
     appearance?: TagAppearance;
     disabled?: boolean;
+    selected?: boolean;
     shape?: TagShape;
     size?: TagSize;
     value?: Value;
@@ -71,15 +72,15 @@ export type InteractionTagSecondarySlots = {
 };
 
 // @public
-export type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'>>;
+export type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> & Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'>>;
 
 // @public (undocumented)
 export type InteractionTagSlots = {
     root: NonNullable<Slot<'div'>>;
 };
 
 // @public
-export type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> & Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'shape' | 'size' | 'value'>> & {
+export type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> & Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size' | 'value'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
     interactionTagPrimaryId: string;
 };
@@ -155,6 +156,7 @@ export type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {
     appearance?: TagAppearance;
     disabled?: boolean;
     dismissible?: boolean;
+    selected?: boolean;
     shape?: TagShape;
     size?: TagSize;
     value?: Value;
@@ -177,7 +179,7 @@ export type TagSlots = {
 };
 
 // @public
-export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'>> & UseTagAvatarContextValuesOptions;
+export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'selected' | 'shape' | 'size'>> & UseTagAvatarContextValuesOptions;
 
 // @public (undocumented)
 export type TagValue = string;

packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.types.ts

@@ -28,6 +28,14 @@ export type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<Inter
    */
   disabled?: boolean;
 
+  /**
+   * An InteractionTag can be selected.
+   * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.
+   *
+   * @default false
+   */
+  selected?: boolean;
+
   /**
    * An InteractionTag can have rounded or circular shape.
    *
@@ -52,7 +60,7 @@ export type InteractionTagProps<Value = TagValue> = ComponentProps<Partial<Inter
  * State used in rendering InteractionTag
  */
 export type InteractionTagState<Value = TagValue> = ComponentState<InteractionTagSlots> &
-  Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'shape' | 'size' | 'value'>> & {
+  Required<Pick<InteractionTagProps, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size' | 'value'>> & {
     /**
      * Event handler from TagGroup context that allows TagGroup to dismiss the tag
      */

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

@@ -30,6 +30,7 @@ export const useInteractionTag_unstable = (
   const {
     appearance = contextAppearance ?? 'filled',
     disabled = false,
+    selected = false,
     shape = 'rounded',
     size = contextSize,
     value = id,
@@ -40,6 +41,7 @@ export const useInteractionTag_unstable = (
     disabled: contextDisabled ? true : disabled,
     handleTagDismiss,
     interactionTagPrimaryId,
+    selected,
     shape,
     size,
     value,

packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTagContextValues.ts

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { InteractionTagState, InteractionTagContextValues } from './InteractionTag.types';
 
 export function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues {
-  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } = state;
+  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, selected, shape, size, value } = state;
 
   return {
     interactionTag: React.useMemo(
-      () => ({ appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value }),
-      [appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value],
+      () => ({ appearance, disabled, handleTagDismiss, interactionTagPrimaryId, selected, shape, size, value }),
+      [appearance, disabled, handleTagDismiss, interactionTagPrimaryId, selected, shape, size, value],
     ),
   };
 }

packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.types.ts

@@ -46,7 +46,7 @@ export type InteractionTagPrimaryProps = ComponentProps<Partial<InteractionTagPr
  */
 export type InteractionTagPrimaryState = ComponentState<InteractionTagPrimarySlots> &
   Required<
-    Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'> &
+    Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'> &
       Pick<InteractionTagPrimaryProps, 'hasSecondaryAction'>
   > &
   UseTagAvatarContextValuesOptions;

packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts

@@ -27,7 +27,14 @@ export const useInteractionTagPrimary_unstable = (
   props: InteractionTagPrimaryProps,
   ref: React.Ref<HTMLButtonElement>,
 ): InteractionTagPrimaryState => {
-  const { appearance, disabled, interactionTagPrimaryId, shape, size } = useInteractionTagContext_unstable();
+  const {
+    appearance,
+    disabled,
+    interactionTagPrimaryId,
+    selected: contextSelected,
+    shape,
+    size,
+  } = useInteractionTagContext_unstable();
   const { hasSecondaryAction = false } = props;
 
   return {
@@ -36,6 +43,7 @@ export const useInteractionTagPrimary_unstable = (
     avatarSize: avatarSizeMap[size],
     disabled,
     hasSecondaryAction,
+    selected: contextSelected ?? false,
     shape,
     size,
 

packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts

@@ -190,7 +190,25 @@ const useRootStyles = makeStyles({
       },
     },
   },
-
+  selected: {
+    background: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    ...shorthands.borderColor(tokens.colorBrandBackground),
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      color: tokens.colorNeutralForegroundOnBrand,
+      [`& .${iconFilledClassName}`]: {
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
+    },
+    ':active': {
+      backgroundColor: tokens.colorBrandBackgroundPressed,
+      color: tokens.colorNeutralForegroundOnBrand,
+      [`& .${iconFilledClassName}`]: {
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
+    },
+  },
   medium: {
     paddingRight: '7px',
   },
@@ -279,7 +297,7 @@ export const useInteractionTagPrimaryStyles_unstable = (
 
   const rootCircularContrastStyles = useRootCircularContrastStyles();
 
-  const { shape, size, appearance } = state;
+  const { shape, size, appearance, selected } = state;
 
   state.root.className = mergeClasses(
     interactionTagPrimaryClassNames.root,
@@ -289,6 +307,7 @@ export const useInteractionTagPrimaryStyles_unstable = (
     shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction,
 
     state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],
+    selected && !state.disabled && rootStyles.selected,
     rootStyles[size],
 
     !state.media && !state.icon && rootWithoutMediaStyles[size],

packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.types.ts

@@ -14,4 +14,4 @@ export type InteractionTagSecondaryProps = ComponentProps<InteractionTagSecondar
  * State used in rendering InteractionTagSecondary
  */
 export type InteractionTagSecondaryState = ComponentState<InteractionTagSecondarySlots> &
-  Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'shape' | 'size'>>;
+  Required<Pick<InteractionTagContextValue, 'appearance' | 'disabled' | 'selected' | 'shape' | 'size'>>;

packages/react-components/react-tags/library/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx

@@ -18,7 +18,7 @@ export const useInteractionTagSecondary_unstable = (
   props: InteractionTagSecondaryProps,
   ref: React.Ref<HTMLButtonElement>,
 ): InteractionTagSecondaryState => {
-  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, shape, size, value } =
+  const { appearance, disabled, handleTagDismiss, interactionTagPrimaryId, selected, shape, size, value } =
     useInteractionTagContext_unstable();
 
   const id = useId('fui-InteractionTagSecondary-', props.id);
@@ -40,6 +40,7 @@ export const useInteractionTagSecondary_unstable = (
   return {
     appearance,
     disabled,
+    selected,
     shape,
     size,
     components: {

packages/react-components/react-tags/library/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts

@@ -104,6 +104,21 @@ const useRootStyles = makeStyles({
       },
     },
   },
+  selected: {
+    background: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    ...shorthands.borderColor(tokens.colorBrandBackground),
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+    ':active': {
+      backgroundColor: tokens.colorBrandBackgroundPressed,
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+    // divider
+    borderLeftColor: tokens.colorNeutralStrokeOnBrand2,
+  },
 
   rounded: {
     borderTopRightRadius: tokens.borderRadiusMedium,
@@ -162,14 +177,15 @@ export const useInteractionTagSecondaryStyles_unstable = (
   const rootStyles = useRootStyles();
   const rootDisabledStyles = useRootDisabledStyles();
 
-  const { shape, size, appearance } = state;
+  const { selected, shape, size, appearance } = state;
 
   state.root.className = mergeClasses(
     interactionTagSecondaryClassNames.root,
     rootBaseClassName,
     state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],
     rootStyles[shape],
     rootStyles[size],
+    selected && !state.disabled && rootStyles.selected,
     state.root.className,
   );
 

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

@@ -58,6 +58,14 @@ export type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {
    */
   dismissible?: boolean;
 
+  /**
+   * An InteractionTag can be selected.
+   * Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.
+   *
+   * @default false
+   */
+  selected?: boolean;
+
   /**
    * A Tag can have rounded or circular shape.
    *
@@ -82,5 +90,5 @@ export type TagProps<Value = string> = ComponentProps<Partial<TagSlots>> & {
  * State used in rendering Tag
  */
 export type TagState = ComponentState<TagSlots> &
-  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'>> &
+  Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'selected' | 'shape' | 'size'>> &
   UseTagAvatarContextValuesOptions;

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

@@ -41,6 +41,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
     appearance = contextAppearance ?? 'filled',
     disabled = false,
     dismissible = contextDismissible ?? false,
+    selected = false,
     shape = 'rounded',
     size = contextSize,
     value = id,
@@ -68,6 +69,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
     avatarSize: tagAvatarSizeMap[size],
     disabled: contextDisabled ? true : disabled,
     dismissible,
+    selected,
     shape,
     size,