feat(react-tags): adds appearance and dismissible to TagGroupContext

change/@fluentui-react-tags-aa26dad6-0f14-40e2-b558-0f7d957bdb31.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: adds appearance and dismissible to TagGroupContext",
+  "packageName": "@fluentui/react-tags",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -134,6 +134,8 @@ export type TagGroupContextValues = {
 export type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {
     onDismiss?: TagDismissHandler<Value>;
     size?: TagSize;
+    appearance?: TagAppearance;
+    dismissible?: boolean;
 };
 
 // @public (undocumented)
@@ -142,7 +144,7 @@ export type TagGroupSlots = {
 };
 
 // @public
-export type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size'>> & {
+export type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> & Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
 };
 

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

@@ -16,13 +16,19 @@ export const useInteractionTag_unstable = (
   props: InteractionTagProps,
   ref: React.Ref<HTMLDivElement>,
 ): InteractionTagState => {
-  const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
+  const { handleTagDismiss, size: contextSize, appearance: contextAppearance } = useTagGroupContext_unstable();
 
   const id = useId('fui-InteractionTag-', props.id);
 
   const interactionTagPrimaryId = useId('fui-InteractionTagPrimary-');
 
-  const { appearance = 'filled', disabled = false, shape = 'rounded', size = contextSize, value = id } = props;
+  const {
+    appearance = contextAppearance ?? 'filled',
+    disabled = false,
+    shape = 'rounded',
+    size = contextSize,
+    value = id,
+  } = props;
 
   return {
     appearance,

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

@@ -26,14 +26,19 @@ const tagAvatarShapeMap = {
  * @param ref - reference to root HTMLSpanElement or HTMLButtonElement of Tag
  */
 export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement | HTMLButtonElement>): TagState => {
-  const { handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
+  const {
+    handleTagDismiss,
+    size: contextSize,
+    appearance: contextAppearance,
+    dismissible: contextDismissible,
+  } = useTagGroupContext_unstable();
 
   const id = useId('fui-Tag', props.id);
 
   const {
-    appearance = 'filled',
+    appearance = contextAppearance ?? 'filled',
     disabled = false,
-    dismissible = false,
+    dismissible = contextDismissible ?? false,
     shape = 'rounded',
     size = contextSize,
     value = id,

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

@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TagSize, TagValue, TagDismissHandler } from '../../utils/types';
+import { TagSize, TagValue, TagDismissHandler, TagAppearance } from '../../utils/types';
 import { TagGroupContextValue } from '../../contexts/tagGroupContext';
 
 export type TagGroupContextValues = {
@@ -21,12 +21,14 @@ export type TagGroupProps<Value = TagValue> = ComponentProps<TagGroupSlots> & {
   onDismiss?: TagDismissHandler<Value>;
 
   size?: TagSize;
+  appearance?: TagAppearance;
+  dismissible?: boolean;
 };
 
 /**
  * State used in rendering TagGroup
  */
 export type TagGroupState<Value = TagValue> = ComponentState<TagGroupSlots> &
-  Required<Pick<TagGroupProps, 'size'>> & {
+  Required<Pick<TagGroupProps, 'size' | 'appearance' | 'dismissible'>> & {
     handleTagDismiss: TagDismissHandler<Value>;
   };

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

@@ -15,7 +15,7 @@ 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' } = props;
+  const { onDismiss, size = 'medium', appearance = 'filled', dismissible = false } = props;
 
   const innerRef = React.useRef<HTMLElement>();
   const { targetDocument } = useFluent();
@@ -54,7 +54,8 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDi
   return {
     handleTagDismiss,
     size,
-
+    appearance,
+    dismissible,
     components: {
       root: 'div',
     },

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

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

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

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