feat(react-tags): Adds disabled property to TagGroup (#32317)

change/@fluentui-react-tag-picker-9be006cd-1c03-46c8-a255-b35dd8971bee.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-tag-picker): allows TagPickerGroup to be disabled",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "jiangemma@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tags-85ae0473-8232-428f-b0a7-cdb10bbd84df.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-tags): allows TagGroup to be disabled",
+  "packageName": "@fluentui/react-tags",
+  "email": "jiangemma@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/useTagPickerGroup.ts

@@ -27,6 +27,7 @@ export const useTagPickerGroup_unstable = (
   const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);
   const size = useTagPickerContext_unstable(ctx => tagPickerSizeToTagSize(ctx.size));
   const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);
+  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);
 
   const arrowNavigationProps = useArrowNavigationGroup({
     circular: false,
@@ -37,6 +38,7 @@ export const useTagPickerGroup_unstable = (
   const state = useTagGroup_unstable(
     {
       role: 'listbox',
+      disabled,
       ...props,
       ...arrowNavigationProps,
       size,

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx

@@ -35,7 +35,6 @@ export const Disabled = () => {
           <TagPickerGroup>
             {selectedOptions.map(option => (
               <Tag
-                disabled
                 key={option}
                 shape="rounded"
                 media={<Avatar aria-hidden name={option} color="colorful" />}

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

@@ -133,6 +133,7 @@ export type TagGroupContextValues = {
 // @public
 export type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {
     onDismiss?: TagDismissHandler<Value>;
+    disabled?: boolean;
     size?: TagSize;
     appearance?: TagAppearance;
     dismissible?: boolean;
@@ -144,7 +145,7 @@ export type TagGroupSlots = {
 };
 
 // @public
-export type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
+export type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'disabled' | 'size' | 'appearance' | 'dismissible'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
     role?: React_2.AriaRole;
 };

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

@@ -16,7 +16,12 @@ export const useInteractionTag_unstable = (
   props: InteractionTagProps,
   ref: React.Ref<HTMLDivElement>,
 ): InteractionTagState => {
-  const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();
+  const {
+    handleTagDismiss,
+    size: contextSize,
+    disabled: contextDisabled,
+    appearance: contextAppearance,
+  } = useTagGroupContext_unstable();
 
   const id = useId('fui-InteractionTag-', props.id);
 
@@ -32,7 +37,7 @@ export const useInteractionTag_unstable = (
 
   return {
     appearance,
-    disabled,
+    disabled: contextDisabled ? true : disabled,
     handleTagDismiss,
     interactionTagPrimaryId,
     shape,
@@ -47,6 +52,7 @@ export const useInteractionTag_unstable = (
       getIntrinsicElementProps('div', {
         ref,
         ...props,
+        disabled: contextDisabled ? true : disabled,
         id,
       }),
       { elementType: 'div' },

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

@@ -29,6 +29,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
   const {
     handleTagDismiss,
     size: contextSize,
+    disabled: contextDisabled,
     appearance: contextAppearance,
     dismissible: contextDismissible,
     role: tagGroupRole,
@@ -65,7 +66,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
     appearance,
     avatarShape: tagAvatarShapeMap[shape],
     avatarSize: tagAvatarSizeMap[size],
-    disabled,
+    disabled: contextDisabled ? true : disabled,
     dismissible,
     shape,
     size,
@@ -84,6 +85,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
         ref,
         role: tagGroupRole === 'listbox' ? 'option' : undefined,
         ...props,
+        disabled: contextDisabled ? true : disabled,
         id,
         ...(dismissible && { onClick: dismissOnClick, onKeyDown: dismissOnKeyDown }),
       }),

packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.test.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import * as React from 'react';
 import { TagGroup } from './TagGroup';
 import { isConformant } from '../../testing/isConformant';
@@ -35,4 +36,24 @@ describe('TagGroup', () => {
 
     expect(onDismiss).toHaveBeenCalledWith(expect.anything(), { value: '1' });
   });
+
+  it('if disabled, should disable children Tags', () => {
+    const { getByRole } = render(
+      <TagGroup disabled>
+        <Tag value={'1'} dismissible />
+      </TagGroup>,
+    );
+
+    expect(getByRole('button')).toBeDisabled();
+  });
+
+  it('if disabled, should override children Tags disabled prop', () => {
+    const { getByRole } = render(
+      <TagGroup disabled>
+        <Tag value={'1'} disabled={false} dismissible />
+      </TagGroup>,
+    );
+
+    expect(getByRole('button')).toBeDisabled();
+  });
 });

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

@@ -21,6 +21,13 @@ export type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {
   // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback
   onDismiss?: TagDismissHandler<Value>;
 
+  /**
+   * A TagGroup can show that it cannot be interacted with.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
   size?: TagSize;
   appearance?: TagAppearance;
   dismissible?: boolean;
@@ -30,7 +37,7 @@ export type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {
  * State used in rendering TagGroup
  */
 export type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &
-  Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
+  Required<Pick<TagGroupProps, 'disabled' | 'size' | 'appearance' | 'dismissible'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
     role?: React.AriaRole;
   };

packages/react-components/react-tags/library/src/components/TagGroup/useTagGroup.ts

@@ -15,7 +15,14 @@ import { interactionTagSecondaryClassNames } from '../InteractionTagSecondary/us
  * @param ref - reference to root HTMLDivElement of TagGroup
  */
 export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDivElement>): TagGroupState => {
-  const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false, role = 'toolbar' } = props;
+  const {
+    onDismiss,
+    disabled = false,
+    size = 'medium',
+    appearance = 'filled',
+    dismissible = false,
+    role = 'toolbar',
+  } = props;
 
   const innerRef = React.useRef<HTMLElement>();
   const { targetDocument } = useFluent();
@@ -55,6 +62,7 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDi
     handleTagDismiss,
     role,
     size,
+    disabled,
     appearance,
     dismissible,
     components: {
@@ -68,6 +76,7 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDi
         // but since it would be a breaking change to fix it, we are casting ref to it's proper type
         ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,
         role,
+        'aria-disabled': disabled,
         ...arrowNavigationProps,
         ...props,
       }),

packages/react-components/react-tags/library/src/components/TagGroup/useTagGroupContextValues.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import type { TagGroupContextValues, TagGroupState } from './TagGroup.types';
 
 export function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues {
-  const { handleTagDismiss, size, appearance, dismissible, role } = state;
+  const { handleTagDismiss, size, disabled, appearance, dismissible, role } = state;
   return {
     tagGroup: React.useMemo(
-      () => ({ handleTagDismiss, size, appearance, dismissible, role }),
-      [handleTagDismiss, size, appearance, dismissible, role],
+      () => ({ handleTagDismiss, size, disabled, appearance, dismissible, role }),
+      [handleTagDismiss, size, disabled, appearance, dismissible, role],
     ),
   };
 }

packages/react-components/react-tags/library/src/contexts/tagGroupContext.tsx

@@ -13,7 +13,7 @@ const tagGroupContextDefaultValue: TagGroupContextValue = {
  * Context shared between TagGroup and its children components
  */
 export type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> &
-  Partial<Pick<TagGroupState, 'appearance' | 'dismissible' | 'role'>>;
+  Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'role'>>;
 
 export const TagGroupContextProvider = TagGroupContext.Provider;
 

packages/react-components/react-tags/stories/src/TagGroup/TagGroupDisabled.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { TagGroup, InteractionTag, InteractionTagPrimary, Tag, makeStyles } from '@fluentui/react-components';
+
+const WithTags = () => (
+  <TagGroup disabled aria-label="Disabled tag group with Tag" role="list">
+    <Tag role="listitem">Tag 1</Tag>
+    <Tag role="listitem">Tag 2</Tag>
+    <Tag role="listitem">Tag 3</Tag>
+  </TagGroup>
+);
+
+const WithInteractionTags = () => (
+  <TagGroup disabled aria-label="Disabled tag group with InteractionTag">
+    <InteractionTag>
+      <InteractionTagPrimary>Tag 1</InteractionTagPrimary>
+    </InteractionTag>
+    <InteractionTag>
+      <InteractionTagPrimary>Tag 2</InteractionTagPrimary>
+    </InteractionTag>
+    <InteractionTag>
+      <InteractionTagPrimary>Tag 3</InteractionTagPrimary>
+    </InteractionTag>
+  </TagGroup>
+);
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: '10px',
+  },
+});
+
+export const Disabled = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.container}>
+      Disabled example with Tag:
+      <WithTags />
+      Disabled example with InteractionTag:
+      <WithInteractionTags />
+    </div>
+  );
+};
+
+Disabled.storyName = 'Disabled';
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: 'A TagGroup can be disabled. The collection of Tag/InteractionTag will also be disabled.',
+    },
+  },
+};

packages/react-components/react-tags/stories/src/TagGroup/index.stories.tsx

@@ -7,6 +7,7 @@ export { Default } from './TagGroupDefault.stories';
 export { Dismiss } from './TagGroupDismiss.stories';
 export { Sizes } from './TagGroupSizes.stories';
 export { WithOverflow } from './TagGroupOverflow.stories';
+export { Disabled } from './TagGroupDisabled.stories';
 
 export default {
   title: 'Components/Tag/TagGroup',