react-tags: rename TagButton to InteractionTag (#28296)

* rename

* api

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

@@ -16,35 +16,35 @@ import { Slot } from '@fluentui/react-utilities';
 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 renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSX.Element;
-
-// @public
-export const Tag: ForwardRefComponent<TagProps>;
-
-// @public
-export const TagButton: ForwardRefComponent<TagButtonProps>;
+export const InteractionTag: ForwardRefComponent<InteractionTagProps>;
 
 // @public (undocumented)
-export const tagButtonClassNames: SlotClassNames<TagButtonSlots>;
+export const interactionTagClassNames: SlotClassNames<InteractionTagSlots>;
 
 // @public
-export type TagButtonProps = ComponentProps<Partial<TagButtonSlots>> & Omit<TagProps, 'root' | 'dismissIcon'>;
+export type InteractionTagProps = ComponentProps<Partial<InteractionTagSlots>> & Omit<TagProps, 'root' | 'dismissIcon'>;
 
 // @public (undocumented)
-export type TagButtonSlots = Omit<TagSlots, 'root' | 'dismissIcon'> & {
+export type InteractionTagSlots = Omit<TagSlots, 'root' | 'dismissIcon'> & {
     root: NonNullable<Slot<'div'>>;
     dismissButton?: Slot<'button'>;
     content: NonNullable<Slot<'button'>>;
 };
 
 // @public
-export type TagButtonState = ComponentState<TagButtonSlots> & Omit<TagState, 'components' | 'root' | 'dismissIcon'>;
+export type InteractionTagState = ComponentState<InteractionTagSlots> & Omit<TagState, 'components' | 'root' | 'dismissIcon'>;
+
+// @public
+export const renderInteractionTag_unstable: (state: InteractionTagState, contextValues: InteractionTagContextValues) => JSX.Element;
+
+// @public
+export const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSX.Element;
+
+// @public
+export const renderTagGroup_unstable: (state: TagGroupState, contextValue: TagGroupContextValues) => JSX.Element;
+
+// @public
+export const Tag: ForwardRefComponent<TagProps>;
 
 // @public (undocumented)
 export const tagClassNames: SlotClassNames<TagSlots>;
@@ -99,13 +99,13 @@ export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appea
 }>;
 
 // @public
-export const useTag_unstable: (props: TagProps, ref: React_2.Ref<HTMLElement>) => TagState;
+export const useInteractionTag_unstable: (props: InteractionTagProps, ref: React_2.Ref<HTMLElement>) => InteractionTagState;
 
 // @public
-export const useTagButton_unstable: (props: TagButtonProps, ref: React_2.Ref<HTMLElement>) => TagButtonState;
+export const useInteractionTagStyles_unstable: (state: InteractionTagState) => InteractionTagState;
 
 // @public
-export const useTagButtonStyles_unstable: (state: TagButtonState) => TagButtonState;
+export const useTag_unstable: (props: TagProps, ref: React_2.Ref<HTMLElement>) => TagState;
 
 // @public
 export const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.Ref<HTMLElement>) => TagGroupState;

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

@@ -0,0 +1 @@
+export * from './components/InteractionTag/index';

packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx → packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.test.tsx

@@ -1,4 +1,4 @@
-import { TagButton } from './TagButton';
+import { InteractionTag } from './InteractionTag';
 import { isConformant } from '../../testing/isConformant';
 
 const requiredProps = {
@@ -9,10 +9,10 @@ const requiredProps = {
   dismissible: true,
 };
 
-describe('TagButton', () => {
+describe('InteractionTag', () => {
   isConformant({
-    Component: TagButton,
-    displayName: 'TagButton',
+    Component: InteractionTag,
+    displayName: 'InteractionTag',
     requiredProps,
   });
 });

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useInteractionTag_unstable } from './useInteractionTag';
+import { renderInteractionTag_unstable } from './renderInteractionTag';
+import { useInteractionTagStyles_unstable } from './useInteractionTagStyles.styles';
+import type { InteractionTagProps } from './InteractionTag.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useTagContextValues_unstable } from '../../utils/useTagContextValues';
+
+/**
+ * InteractionTag component - TODO: add more docs
+ */
+export const InteractionTag: ForwardRefComponent<InteractionTagProps> = React.forwardRef((props, ref) => {
+  const state = useInteractionTag_unstable(props, ref);
+
+  useInteractionTagStyles_unstable(state);
+  return renderInteractionTag_unstable(state, useTagContextValues_unstable(state));
+});
+
+InteractionTag.displayName = 'InteractionTag';

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

@@ -0,0 +1,21 @@
+import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TagContextValues, TagProps, TagSlots, TagState } from '../Tag/index';
+
+export type InteractionTagContextValues = TagContextValues;
+
+export type InteractionTagSlots = Omit<TagSlots, 'root' | 'dismissIcon'> & {
+  root: NonNullable<Slot<'div'>>;
+  dismissButton?: Slot<'button'>;
+  content: NonNullable<Slot<'button'>>;
+};
+
+/**
+ * InteractionTag Props
+ */
+export type InteractionTagProps = ComponentProps<Partial<InteractionTagSlots>> & Omit<TagProps, 'root' | 'dismissIcon'>;
+
+/**
+ * State used in rendering InteractionTag
+ */
+export type InteractionTagState = ComponentState<InteractionTagSlots> &
+  Omit<TagState, 'components' | 'root' | 'dismissIcon'>;

packages/react-components/react-tags/src/components/InteractionTag/index.ts

@@ -0,0 +1,5 @@
+export * from './InteractionTag';
+export * from './InteractionTag.types';
+export * from './renderInteractionTag';
+export * from './useInteractionTag';
+export * from './useInteractionTagStyles.styles';

packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx → packages/react-components/react-tags/src/components/InteractionTag/renderInteractionTag.tsx

@@ -4,14 +4,17 @@
 import { createElement } from '@fluentui/react-jsx-runtime';
 
 import { getSlotsNext } from '@fluentui/react-utilities';
-import type { TagButtonState, TagButtonSlots, TagButtonContextValues } from './TagButton.types';
+import type { InteractionTagState, InteractionTagSlots, InteractionTagContextValues } from './InteractionTag.types';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
 
 /**
- * Render the final JSX of TagButton
+ * Render the final JSX of InteractionTag
  */
-export const renderTagButton_unstable = (state: TagButtonState, contextValues: TagButtonContextValues) => {
-  const { slots, slotProps } = getSlotsNext<TagButtonSlots>(state);
+export const renderInteractionTag_unstable = (
+  state: InteractionTagState,
+  contextValues: InteractionTagContextValues,
+) => {
+  const { slots, slotProps } = getSlotsNext<InteractionTagSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx → packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx

@@ -1,33 +1,36 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useEventCallback, useId } from '@fluentui/react-utilities';
 import { DismissRegular, bundleIcon, DismissFilled } from '@fluentui/react-icons';
-import type { TagButtonProps, TagButtonState } from './TagButton.types';
+import type { InteractionTagProps, InteractionTagState } from './InteractionTag.types';
 import { Delete, Backspace } from '@fluentui/keyboard-keys';
 import { useTagGroupContext_unstable } from '../../contexts/TagGroupContext';
 
-const tagButtonAvatarSizeMap = {
+const interactionTagAvatarSizeMap = {
   medium: 28,
   small: 20,
   'extra-small': 16,
 } as const;
 
-const tagButtonAvatarShapeMap = {
+const interactionTagAvatarShapeMap = {
   rounded: 'square',
   circular: 'circular',
 } as const;
 
 const DismissIcon = bundleIcon(DismissFilled, DismissRegular);
 
 /**
- * Create the state required to render TagButton.
+ * Create the state required to render InteractionTag.
  *
- * The returned state can be modified with hooks such as useTagButtonStyles_unstable,
- * before being passed to renderTagButton_unstable.
+ * The returned state can be modified with hooks such as useInteractionTagStyles_unstable,
+ * before being passed to renderInteractionTag_unstable.
  *
- * @param props - props from this instance of TagButton
- * @param ref - reference to root HTMLElement of TagButton
+ * @param props - props from this instance of InteractionTag
+ * @param ref - reference to root HTMLElement of InteractionTag
  */
-export const useTagButton_unstable = (props: TagButtonProps, ref: React.Ref<HTMLElement>): TagButtonState => {
+export const useInteractionTag_unstable = (
+  props: InteractionTagProps,
+  ref: React.Ref<HTMLElement>,
+): InteractionTagState => {
   const { dismissible: contextDismissible, handleTagDismiss, size: contextSize } = useTagGroupContext_unstable();
 
   const id = useId('fui-Tag', props.id);
@@ -66,8 +69,8 @@ export const useTagButton_unstable = (props: TagButtonProps, ref: React.Ref<HTML
 
   return {
     appearance,
-    avatarShape: tagButtonAvatarShapeMap[shape],
-    avatarSize: tagButtonAvatarSizeMap[size],
+    avatarShape: interactionTagAvatarShapeMap[shape],
+    avatarSize: interactionTagAvatarSizeMap[size],
     disabled,
     dismissible,
     shape,

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

@@ -1,5 +1,5 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { TagButtonSlots, TagButtonState } from './TagButton.types';
+import type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
@@ -10,14 +10,14 @@ import {
   useSecondaryTextStyles,
 } from '../Tag/useTagStyles.styles';
 
-export const tagButtonClassNames: SlotClassNames<TagButtonSlots> = {
-  root: 'fui-TagButton',
-  content: 'fui-TagButton__content',
-  media: 'fui-TagButton__media',
-  icon: 'fui-TagButton__icon',
-  primaryText: 'fui-TagButton__primaryText',
-  secondaryText: 'fui-TagButton__secondaryText',
-  dismissButton: 'fui-TagButton__dismissButton',
+export const interactionTagClassNames: SlotClassNames<InteractionTagSlots> = {
+  root: 'fui-InteractionTag',
+  content: 'fui-InteractionTag__content',
+  media: 'fui-InteractionTag__media',
+  icon: 'fui-InteractionTag__icon',
+  primaryText: 'fui-InteractionTag__primaryText',
+  secondaryText: 'fui-InteractionTag__secondaryText',
+  dismissButton: 'fui-InteractionTag__dismissButton',
 };
 
 const mediumIconSize = '20px';
@@ -104,7 +104,7 @@ const useContentButtonStyles = makeStyles({
   },
 });
 /**
- * Styles for content slot when TagButton is without leading media/icon
+ * Styles for content slot when InteractionTag is without leading media/icon
  */
 const useContentButtonWithoutMediaStyles = makeStyles({
   medium: {
@@ -118,7 +118,7 @@ const useContentButtonWithoutMediaStyles = makeStyles({
   },
 });
 /**
- * Styles for content slot when TagButton has dismiss button
+ * Styles for content slot when InteractionTag has dismiss button
  */
 const useDismissibleContentButtonStyles = makeStyles({
   base: createCustomFocusIndicatorStyle({
@@ -194,9 +194,9 @@ const useDismissButtonStyles = makeStyles({
 });
 
 /**
- * Apply styling to the TagButton slots based on the state
+ * Apply styling to the InteractionTag slots based on the state
  */
-export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonState => {
+export const useInteractionTagStyles_unstable = (state: InteractionTagState): InteractionTagState => {
   const rootStyles = useRootStyles();
 
   const contentButtonStyles = useContentButtonStyles();
@@ -212,7 +212,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta
   const { shape, size } = state;
 
   state.root.className = mergeClasses(
-    tagButtonClassNames.root,
+    interactionTagClassNames.root,
     rootStyles.base,
     rootStyles[shape],
     rootStyles[size],
@@ -221,7 +221,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta
 
   if (state.content) {
     state.content.className = mergeClasses(
-      tagButtonClassNames.content,
+      interactionTagClassNames.content,
 
       contentButtonStyles.base,
       contentButtonStyles[shape],
@@ -237,23 +237,23 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta
 
   if (state.media) {
     state.media.className = mergeClasses(
-      tagButtonClassNames.media,
+      interactionTagClassNames.media,
       mediaStyles.base,
       mediaStyles[size],
       state.media.className,
     );
   }
   if (state.icon) {
     state.icon.className = mergeClasses(
-      tagButtonClassNames.icon,
+      interactionTagClassNames.icon,
       iconStyles.base,
       iconStyles[size],
       state.icon.className,
     );
   }
   if (state.primaryText) {
     state.primaryText.className = mergeClasses(
-      tagButtonClassNames.primaryText,
+      interactionTagClassNames.primaryText,
 
       primaryTextStyles.base,
       primaryTextStyles[size],
@@ -265,14 +265,14 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta
   }
   if (state.secondaryText) {
     state.secondaryText.className = mergeClasses(
-      tagButtonClassNames.secondaryText,
+      interactionTagClassNames.secondaryText,
       secondaryTextStyles.base,
       state.secondaryText.className,
     );
   }
   if (state.dismissButton) {
     state.dismissButton.className = mergeClasses(
-      tagButtonClassNames.dismissButton,
+      interactionTagClassNames.dismissButton,
       dismissButtonStyles.base,
       dismissButtonStyles[shape],
       dismissButtonStyles[size],