feat(react-tags): replace TagButton with Tag interactive prop

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

@@ -6,6 +6,7 @@
 
 /// <reference types="react" />
 
+import { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import { AvatarShape } from '@fluentui/react-avatar';
 import { AvatarSize } from '@fluentui/react-avatar';
 import type { ComponentProps } from '@fluentui/react-utilities';
@@ -18,27 +19,9 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSX.Element;
 
-// @public
-export const renderTagButton_unstable: (state: TagButtonState, contextValues: TagButtonContextValues) => JSX.Element;
-
 // @public
 export const Tag: ForwardRefComponent<TagProps>;
 
-// @public
-export const TagButton: ForwardRefComponent<TagButtonProps>;
-
-// @public (undocumented)
-export const tagButtonClassNames: SlotClassNames<TagButtonSlots>;
-
-// @public
-export type TagButtonProps = TagProps;
-
-// @public (undocumented)
-export type TagButtonSlots = TagSlots;
-
-// @public
-export type TagButtonState = TagState;
-
 // @public (undocumented)
 export const tagClassNames: SlotClassNames<TagSlots>;
 
@@ -47,36 +30,31 @@ export type TagProps = ComponentProps<Partial<TagSlots>> & {
     appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
     disabled?: boolean;
     dismissible?: boolean;
+    interactive?: boolean;
     shape?: 'rounded' | 'circular';
     size?: 'extra-small' | 'small' | 'medium';
 };
 
 // @public (undocumented)
 export type TagSlots = {
     root: NonNullable<Slot<'div'>>;
-    media: Slot<'span'>;
-    content: Slot<'div'>;
-    icon: Slot<'span'>;
-    primaryText: Slot<'span'>;
-    secondaryText: Slot<'span'>;
-    dismissButton: Slot<'button'>;
+    media?: Slot<'span'>;
+    content: NonNullable<Slot<ARIAButtonSlotProps<'div'>>>;
+    icon?: Slot<'span'>;
+    primaryText: NonNullable<Slot<'span'>>;
+    secondaryText?: Slot<'span'>;
+    dismissButton?: Slot<'button'>;
 };
 
 // @public
-export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
+export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'interactive' | 'shape' | 'size'> & {
     avatarSize: AvatarSize | undefined;
     avatarShape: AvatarShape | undefined;
 }>;
 
 // @public
 export const useTag_unstable: (props: TagProps, ref: React_2.Ref<HTMLElement>) => TagState;
 
-// @public
-export const useTagButton_unstable: (props: TagButtonProps, ref: React_2.Ref<HTMLElement>) => TagButtonState;
-
-// @public
-export const useTagButtonStyles_unstable: (state: TagButtonState) => TagButtonState;
-
 // @public
 export const useTagStyles_unstable: (state: TagState) => TagState;
 

packages/react-components/react-tags/package.json

@@ -23,7 +23,8 @@
     "type-check": "tsc -b tsconfig.json",
     "generate-api": "just-scripts generate-api",
     "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "start": "yarn storybook",
+    "test-ssr": "test-ssr ./stories/**/*.stories.tsx"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

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

@@ -16,4 +16,6 @@ describe('Tag', () => {
     displayName: 'Tag',
     requiredProps,
   });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
 });

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

@@ -4,16 +4,16 @@ import { renderTag_unstable } from './renderTag';
 import { useTagStyles_unstable } from './useTagStyles.styles';
 import type { TagProps } from './Tag.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { useTagContextValues_unstable } from '../../utils/useTagContextValues';
+import { useTagContextValues_unstable } from './useTagContextValues';
 
 /**
  * Tag component - TODO: add more docs
  */
 export const Tag: ForwardRefComponent<TagProps> = React.forwardRef((props, ref) => {
   const state = useTag_unstable(props, ref);
-
+  const contextValues = useTagContextValues_unstable(state);
   useTagStyles_unstable(state);
-  return renderTag_unstable(state, useTagContextValues_unstable(state));
+  return renderTag_unstable(state, contextValues);
 });
 
 Tag.displayName = 'Tag';

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

@@ -1,3 +1,4 @@
+import { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import { AvatarSize, AvatarShape } from '@fluentui/react-avatar';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
@@ -14,26 +15,26 @@ export type TagSlots = {
   /**
    * Slot for an icon or other visual element
    */
-  media: Slot<'span'>;
+  media?: Slot<'span'>;
 
   /**
    * A layout wrapper for the icon slot, the primaryText and secondaryText slots
    */
-  content: Slot<'div'>;
+  content: NonNullable<Slot<ARIAButtonSlotProps<'div'>>>;
 
-  icon: Slot<'span'>;
+  icon?: Slot<'span'>;
 
   /**
    * Main text for the Tag. Children of the root slot are automatically rendered here
    */
-  primaryText: Slot<'span'>;
+  primaryText: NonNullable<Slot<'span'>>;
 
   /**
    * Secondary text that describes or complements the main text
    */
-  secondaryText: Slot<'span'>;
+  secondaryText?: Slot<'span'>;
 
-  dismissButton: Slot<'button'>;
+  dismissButton?: Slot<'button'>;
 };
 
 /**
@@ -45,6 +46,7 @@ export type TagProps = ComponentProps<Partial<TagSlots>> & {
   // checked?: boolean;
   disabled?: boolean;
   dismissible?: boolean;
+  interactive?: boolean;
   shape?: 'rounded' | 'circular';
   size?: 'extra-small' | 'small' | 'medium';
 };
@@ -54,7 +56,7 @@ export type TagProps = ComponentProps<Partial<TagSlots>> & {
  */
 export type TagState = ComponentState<TagSlots> &
   Required<
-    Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
+    Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'interactive' | 'shape' | 'size'> & {
       avatarSize: AvatarSize | undefined;
       avatarShape: AvatarShape | undefined;
     }

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

@@ -15,20 +15,16 @@ export const renderTag_unstable = (state: TagState, contextValues: TagContextVal
 
   return (
     <slots.root {...slotProps.root}>
-      {slots.content && (
-        <slots.content {...slotProps.content}>
-          {slots.media && (
-            <AvatarContextProvider value={contextValues.avatar}>
-              <slots.media {...slotProps.media} />
-            </AvatarContextProvider>
-          )}
-          {slots.icon && <slots.icon {...slotProps.icon} />}
-          {slots.primaryText && (
-            <slots.primaryText {...slotProps.primaryText}>{slotProps.root.children}</slots.primaryText>
-          )}
-          {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
-        </slots.content>
-      )}
+      <slots.content {...slotProps.content}>
+        {slots.media && (
+          <AvatarContextProvider value={contextValues.avatar}>
+            <slots.media {...slotProps.media} />
+          </AvatarContextProvider>
+        )}
+        {slots.icon && <slots.icon {...slotProps.icon} />}
+        <slots.primaryText {...slotProps.primaryText} />
+        {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
+      </slots.content>
       {slots.dismissButton && state.dismissible && <slots.dismissButton {...slotProps.dismissButton} />}
     </slots.root>
   );

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

@@ -31,40 +31,49 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
     appearance = 'filled-lighter',
     disabled = false,
     dismissible = false,
+    interactive = false,
     shape = 'rounded',
     size = 'medium',
   } = props;
 
+  const contentButton = useARIAButtonShorthand(props.content, {
+    required: true,
+    defaultProps: {
+      disabled,
+      type: 'button',
+    },
+  });
+
   return {
     appearance,
     avatarShape: tagAvatarShapeMap[shape],
     avatarSize: tagAvatarSizeMap[size],
     disabled,
     dismissible,
+    interactive,
     shape,
     size,
 
     components: {
       root: 'div',
-      content: 'div',
+      content: interactive ? 'button' : 'div',
       media: 'span',
       icon: 'span',
       primaryText: 'span',
       secondaryText: 'span',
       dismissButton: 'button',
     },
-
     root: getNativeElementProps('div', {
       ref,
       ...props,
     }),
 
-    content: resolveShorthand(props.content, { required: true }),
+    content: interactive ? contentButton : resolveShorthand(props.content, { required: true }),
     media: resolveShorthand(props.media),
     icon: resolveShorthand(props.icon),
-    primaryText: resolveShorthand(props.primaryText, { required: true }),
+    primaryText: resolveShorthand(props.primaryText, { required: true, defaultProps: { children: props.children } }),
     secondaryText: resolveShorthand(props.secondaryText),
-    dismissButton: useARIAButtonShorthand(props.dismissButton, {
+    dismissButton: resolveShorthand(props.dismissButton, {
       required: props.dismissible,
       defaultProps: {
         disabled,

packages/react-components/react-tags/src/utils/useTagContextValues.ts → packages/react-components/react-tags/src/components/Tag/useTagContextValues.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagContextValues, TagState } from '../components/Tag/index';
+import { TagState, TagContextValues } from './Tag.types';
 
 export function useTagContextValues_unstable(state: TagState): TagContextValues {
   const { avatarSize, avatarShape } = state;