From 3e47257676ace0598b9ed336a54befd4d063c332 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 26 Jun 2023 11:34:15 +0200 Subject: [PATCH] react-tags: rename TagButton to InteractionTag (#28296) * rename * api --- .../react-tags/etc/react-tags.api.md | 40 +++++------ .../react-tags/src/InteractionTag.ts | 1 + .../react-tags/src/TagButton.ts | 1 - .../InteractionTag.test.tsx} | 8 +-- .../InteractionTag/InteractionTag.tsx | 19 ++++++ .../InteractionTag/InteractionTag.types.ts | 21 ++++++ .../src/components/InteractionTag/index.ts | 5 ++ .../renderInteractionTag.tsx} | 11 +-- .../useInteractionTag.tsx} | 25 ++++--- .../useInteractionTagStyles.styles.ts} | 40 +++++------ .../src/components/TagButton/TagButton.tsx | 19 ------ .../components/TagButton/TagButton.types.ts | 20 ------ .../src/components/TagButton/index.ts | 5 -- .../src/components/TagGroup/useTagGroup.ts | 4 +- .../react-components/react-tags/src/index.ts | 14 ++-- .../src/utils/useTagContextValues.ts | 4 +- .../InteractionTagBestPractices.md | 7 ++ .../InteractionTagDefault.stories.tsx} | 58 ++++++++-------- .../InteractionTagDescription.md | 1 + .../InteractionTagDismiss.stories.tsx} | 14 ++-- .../InteractionTagIcon.stories.tsx | 14 ++++ .../InteractionTagMedia.stories.tsx} | 4 +- .../InteractionTagSecondaryText.stories.tsx | 13 ++++ .../InteractionTagShape.stories.tsx | 42 ++++++++++++ .../InteractionTagSize.stories.tsx | 67 +++++++++++++++++++ .../stories/InteractionTag/index.stories.tsx | 24 +++++++ .../TagButton/TagButtonBestPractices.md | 7 -- .../stories/TagButton/TagButtonDescription.md | 1 - .../TagButton/TagButtonIcon.stories.tsx | 14 ---- .../TagButtonSecondaryText.stories.tsx | 13 ---- .../TagButton/TagButtonShape.stories.tsx | 42 ------------ .../TagButton/TagButtonSize.stories.tsx | 61 ----------------- .../stories/TagButton/index.stories.tsx | 24 ------- .../stories/TagGroup/TagGroupBestPractices.md | 2 +- .../TagGroup/TagGroupDefault.stories.tsx | 12 ++-- .../stories/TagGroup/TagGroupDescription.md | 2 +- .../TagGroup/TagGroupDismiss.stories.tsx | 16 ++--- .../TagGroup/TagGroupSizes.stories.tsx | 6 +- 38 files changed, 347 insertions(+), 334 deletions(-) create mode 100644 packages/react-components/react-tags/src/InteractionTag.ts delete mode 100644 packages/react-components/react-tags/src/TagButton.ts rename packages/react-components/react-tags/src/components/{TagButton/TagButton.test.tsx => InteractionTag/InteractionTag.test.tsx} (62%) create mode 100644 packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.tsx create mode 100644 packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.types.ts create mode 100644 packages/react-components/react-tags/src/components/InteractionTag/index.ts rename packages/react-components/react-tags/src/components/{TagButton/renderTagButton.tsx => InteractionTag/renderInteractionTag.tsx} (73%) rename packages/react-components/react-tags/src/components/{TagButton/useTagButton.tsx => InteractionTag/useInteractionTag.tsx} (76%) rename packages/react-components/react-tags/src/components/{TagButton/useTagButtonStyles.styles.ts => InteractionTag/useInteractionTagStyles.styles.ts} (86%) delete mode 100644 packages/react-components/react-tags/src/components/TagButton/TagButton.tsx delete mode 100644 packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts delete mode 100644 packages/react-components/react-tags/src/components/TagButton/index.ts create mode 100644 packages/react-components/react-tags/stories/InteractionTag/InteractionTagBestPractices.md rename packages/react-components/react-tags/stories/{TagButton/TagButtonDefault.stories.tsx => InteractionTag/InteractionTagDefault.stories.tsx} (76%) create mode 100644 packages/react-components/react-tags/stories/InteractionTag/InteractionTagDescription.md rename packages/react-components/react-tags/stories/{TagButton/TagButtonDismiss.stories.tsx => InteractionTag/InteractionTagDismiss.stories.tsx} (69%) create mode 100644 packages/react-components/react-tags/stories/InteractionTag/InteractionTagIcon.stories.tsx rename packages/react-components/react-tags/stories/{TagButton/TagButtonMedia.stories.tsx => InteractionTag/InteractionTagMedia.stories.tsx} (61%) create mode 100644 packages/react-components/react-tags/stories/InteractionTag/InteractionTagSecondaryText.stories.tsx create mode 100644 packages/react-components/react-tags/stories/InteractionTag/InteractionTagShape.stories.tsx create mode 100644 packages/react-components/react-tags/stories/InteractionTag/InteractionTagSize.stories.tsx create mode 100644 packages/react-components/react-tags/stories/InteractionTag/index.stories.tsx delete mode 100644 packages/react-components/react-tags/stories/TagButton/TagButtonBestPractices.md delete mode 100644 packages/react-components/react-tags/stories/TagButton/TagButtonDescription.md delete mode 100644 packages/react-components/react-tags/stories/TagButton/TagButtonIcon.stories.tsx delete mode 100644 packages/react-components/react-tags/stories/TagButton/TagButtonSecondaryText.stories.tsx delete mode 100644 packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx delete mode 100644 packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx delete mode 100644 packages/react-components/react-tags/stories/TagButton/index.stories.tsx diff --git a/packages/react-components/react-tags/etc/react-tags.api.md b/packages/react-components/react-tags/etc/react-tags.api.md index b731080fb1171..5aa9b3b037832 100644 --- a/packages/react-components/react-tags/etc/react-tags.api.md +++ b/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; - -// @public -export const TagButton: ForwardRefComponent; +export const InteractionTag: ForwardRefComponent; // @public (undocumented) -export const tagButtonClassNames: SlotClassNames; +export const interactionTagClassNames: SlotClassNames; // @public -export type TagButtonProps = ComponentProps> & Omit; +export type InteractionTagProps = ComponentProps> & Omit; // @public (undocumented) -export type TagButtonSlots = Omit & { +export type InteractionTagSlots = Omit & { root: NonNullable>; dismissButton?: Slot<'button'>; content: NonNullable>; }; // @public -export type TagButtonState = ComponentState & Omit; +export type InteractionTagState = ComponentState & Omit; + +// @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; // @public (undocumented) export const tagClassNames: SlotClassNames; @@ -99,13 +99,13 @@ export type TagState = ComponentState & Required; // @public -export const useTag_unstable: (props: TagProps, ref: React_2.Ref) => TagState; +export const useInteractionTag_unstable: (props: InteractionTagProps, ref: React_2.Ref) => InteractionTagState; // @public -export const useTagButton_unstable: (props: TagButtonProps, ref: React_2.Ref) => 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) => TagState; // @public export const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.Ref) => TagGroupState; diff --git a/packages/react-components/react-tags/src/InteractionTag.ts b/packages/react-components/react-tags/src/InteractionTag.ts new file mode 100644 index 0000000000000..8abec320d527e --- /dev/null +++ b/packages/react-components/react-tags/src/InteractionTag.ts @@ -0,0 +1 @@ +export * from './components/InteractionTag/index'; diff --git a/packages/react-components/react-tags/src/TagButton.ts b/packages/react-components/react-tags/src/TagButton.ts deleted file mode 100644 index 73bded719a210..0000000000000 --- a/packages/react-components/react-tags/src/TagButton.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/TagButton/index'; diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx b/packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.test.tsx similarity index 62% rename from packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx rename to packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.test.tsx index 003e20c001ac9..135b0324ca740 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx +++ b/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, }); }); diff --git a/packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.tsx b/packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.tsx new file mode 100644 index 0000000000000..4449076626752 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + const state = useInteractionTag_unstable(props, ref); + + useInteractionTagStyles_unstable(state); + return renderInteractionTag_unstable(state, useTagContextValues_unstable(state)); +}); + +InteractionTag.displayName = 'InteractionTag'; diff --git a/packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.types.ts b/packages/react-components/react-tags/src/components/InteractionTag/InteractionTag.types.ts new file mode 100644 index 0000000000000..9d168b9afb441 --- /dev/null +++ b/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 & { + root: NonNullable>; + dismissButton?: Slot<'button'>; + content: NonNullable>; +}; + +/** + * InteractionTag Props + */ +export type InteractionTagProps = ComponentProps> & Omit; + +/** + * State used in rendering InteractionTag + */ +export type InteractionTagState = ComponentState & + Omit; diff --git a/packages/react-components/react-tags/src/components/InteractionTag/index.ts b/packages/react-components/react-tags/src/components/InteractionTag/index.ts new file mode 100644 index 0000000000000..804b6065b07dc --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx b/packages/react-components/react-tags/src/components/InteractionTag/renderInteractionTag.tsx similarity index 73% rename from packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx rename to packages/react-components/react-tags/src/components/InteractionTag/renderInteractionTag.tsx index d8ebda08cd235..c5d50a92dfe80 100644 --- a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx +++ b/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(state); +export const renderInteractionTag_unstable = ( + state: InteractionTagState, + contextValues: InteractionTagContextValues, +) => { + const { slots, slotProps } = getSlotsNext(state); return ( diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx b/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx similarity index 76% rename from packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx rename to packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx index dcb4f6a5a0ad4..193b60e030285 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx +++ b/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx @@ -1,17 +1,17 @@ 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; @@ -19,15 +19,18 @@ const tagButtonAvatarShapeMap = { 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): TagButtonState => { +export const useInteractionTag_unstable = ( + props: InteractionTagProps, + ref: React.Ref, +): 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 = { - 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 = { + 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,7 +237,7 @@ 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, @@ -245,7 +245,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta } if (state.icon) { state.icon.className = mergeClasses( - tagButtonClassNames.icon, + interactionTagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className, @@ -253,7 +253,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta } 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], diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/TagButton.tsx deleted file mode 100644 index aff06a81252e8..0000000000000 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import { useTagButton_unstable } from './useTagButton'; -import { renderTagButton_unstable } from './renderTagButton'; -import { useTagButtonStyles_unstable } from './useTagButtonStyles.styles'; -import type { TagButtonProps } from './TagButton.types'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useTagContextValues_unstable } from '../../utils/useTagContextValues'; - -/** - * TagButton component - TODO: add more docs - */ -export const TagButton: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useTagButton_unstable(props, ref); - - useTagButtonStyles_unstable(state); - return renderTagButton_unstable(state, useTagContextValues_unstable(state)); -}); - -TagButton.displayName = 'TagButton'; diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts b/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts deleted file mode 100644 index 8e386aa435059..0000000000000 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; -import { TagContextValues, TagProps, TagSlots, TagState } from '../Tag/index'; - -export type TagButtonContextValues = TagContextValues; - -export type TagButtonSlots = Omit & { - root: NonNullable>; - dismissButton?: Slot<'button'>; - content: NonNullable>; -}; - -/** - * TagButton Props - */ -export type TagButtonProps = ComponentProps> & Omit; - -/** - * State used in rendering TagButton - */ -export type TagButtonState = ComponentState & Omit; diff --git a/packages/react-components/react-tags/src/components/TagButton/index.ts b/packages/react-components/react-tags/src/components/TagButton/index.ts deleted file mode 100644 index 42382817cf40b..0000000000000 --- a/packages/react-components/react-tags/src/components/TagButton/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './TagButton'; -export * from './TagButton.types'; -export * from './renderTagButton'; -export * from './useTagButton'; -export * from './useTagButtonStyles.styles'; diff --git a/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts b/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts index 1cdf4937d92e3..3849288f4c8d1 100644 --- a/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts +++ b/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts @@ -3,7 +3,7 @@ import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentu import type { TagGroupProps, TagGroupState } from './TagGroup.types'; import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster'; import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { tagButtonClassNames } from '../TagButton/useTagButtonStyles.styles'; +import { interactionTagClassNames } from '../InteractionTag/useInteractionTagStyles.styles'; /** * Create the state required to render TagGroup. @@ -35,7 +35,7 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref, -): TagContextValues | TagButtonContextValues { +): TagContextValues | InteractionTagContextValues { const { avatarSize, avatarShape } = state; const avatar = React.useMemo( diff --git a/packages/react-components/react-tags/stories/InteractionTag/InteractionTagBestPractices.md b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagBestPractices.md new file mode 100644 index 0000000000000..b998e65e6a813 --- /dev/null +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagBestPractices.md @@ -0,0 +1,7 @@ +## Best practices + +### Do + +- Use `Tag` instead of `InteractionTag` for tags without a primary action. + +### Don't diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagDefault.stories.tsx similarity index 76% rename from packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx rename to packages/react-components/react-tags/stories/InteractionTag/InteractionTagDefault.stories.tsx index 067a7b2fb2be7..e0190aa0e73c9 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagDefault.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { TagButton, TagButtonProps } from '@fluentui/react-tags'; +import { InteractionTag, InteractionTagProps } from '@fluentui/react-tags'; import { Calendar3Day20Regular } from '@fluentui/react-icons'; import { Avatar } from '@fluentui/react-components'; // TODO I added many examples here for easier implementation. This story will be simplified to keep only the default example -export const Default = (props: Partial) => ( +export const Default = (props: Partial) => (
- ) => ( {...props} > Primary text - - + ) => ( {...props} > Primary text - - + ) => ( {...props} > Primary text - - + } secondaryText="Secondary text" dismissible={true} @@ -66,17 +66,17 @@ export const Default = (props: Partial) => ( {...props} > Primary text - - } dismissible={true} {...props}> + + } dismissible={true} {...props}> Primary text - - } {...props}> + + } {...props}> Primary text - - Primary text + + Primary text
- ) => ( {...props} > Primary text - - + ) => ( {...props} > Primary text - - + ) => ( {...props} > Primary text - - + } secondaryText="Secondary text" @@ -139,16 +139,16 @@ export const Default = (props: Partial) => ( {...props} > Primary text - - } dismissible={true} {...props}> + + } dismissible={true} {...props}> Primary text - - } {...props}> + + } {...props}> Primary text - - + + Primary text - +
); diff --git a/packages/react-components/react-tags/stories/InteractionTag/InteractionTagDescription.md b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagDescription.md new file mode 100644 index 0000000000000..d2841262474a8 --- /dev/null +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagDescription.md @@ -0,0 +1 @@ +A InteractionTag follows the same characteristics as a Tag, but with the added functionality of having a primary and secondary action. diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagDismiss.stories.tsx similarity index 69% rename from packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx rename to packages/react-components/react-tags/stories/InteractionTag/InteractionTagDismiss.stories.tsx index b0656cc1fae24..200c21b720952 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagDismiss.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Avatar, makeStyles } from '@fluentui/react-components'; import { Calendar3Day20Regular } from '@fluentui/react-icons'; -import { TagButton } from '@fluentui/react-tags'; +import { InteractionTag } from '@fluentui/react-tags'; const useContainerStyles = makeStyles({ root: { @@ -16,17 +16,17 @@ export const Dismiss = () => { const containerStyles = useContainerStyles(); return (
- Primary text - }> + Primary text + }> Primary text - - + } secondaryText="Secondary text" > Primary text - +
); }; @@ -35,7 +35,7 @@ Dismiss.storyName = 'Dismiss'; Dismiss.parameters = { docs: { description: { - story: 'A TagButton can have a button that dismisses it', + story: 'A InteractionTag can have a button that dismisses it', }, }, }; diff --git a/packages/react-components/react-tags/stories/InteractionTag/InteractionTagIcon.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagIcon.stories.tsx new file mode 100644 index 0000000000000..c64451ce0eb63 --- /dev/null +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagIcon.stories.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { Calendar3Day20Regular } from '@fluentui/react-icons'; +import { InteractionTag } from '@fluentui/react-tags'; + +export const Icon = () => }>Primary text; + +Icon.storyName = 'Icon'; +Icon.parameters = { + docs: { + description: { + story: 'A InteractionTag can render a custom icon if provided.', + }, + }, +}; diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonMedia.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagMedia.stories.tsx similarity index 61% rename from packages/react-components/react-tags/stories/TagButton/TagButtonMedia.stories.tsx rename to packages/react-components/react-tags/stories/InteractionTag/InteractionTagMedia.stories.tsx index 93db18c6b107b..a9c072434dd7d 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonMedia.stories.tsx +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagMedia.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Avatar } from '@fluentui/react-components'; -import { TagButton } from '@fluentui/react-tags'; +import { InteractionTag } from '@fluentui/react-tags'; export const Media = () => ( - }>Primary text + }>Primary text ); Media.storyName = 'Media'; diff --git a/packages/react-components/react-tags/stories/InteractionTag/InteractionTagSecondaryText.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagSecondaryText.stories.tsx new file mode 100644 index 0000000000000..618630d9f6b41 --- /dev/null +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagSecondaryText.stories.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { InteractionTag } from '@fluentui/react-tags'; + +export const SecondaryText = () => Primary text; + +SecondaryText.storyName = 'SecondaryText'; +SecondaryText.parameters = { + docs: { + description: { + story: 'A InteractionTag can have a secondary text.', + }, + }, +}; diff --git a/packages/react-components/react-tags/stories/InteractionTag/InteractionTagShape.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagShape.stories.tsx new file mode 100644 index 0000000000000..8faad682dc6a7 --- /dev/null +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagShape.stories.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { Avatar, makeStyles } from '@fluentui/react-components'; +import { Calendar3Day20Regular } from '@fluentui/react-icons'; + +import { InteractionTag } from '@fluentui/react-tags'; + +const useContainerStyles = makeStyles({ + root: { + display: 'grid', + rowGap: '10px', + columnGap: '10px', + gridTemplateColumns: 'auto 1fr', + }, +}); + +export const Shape = () => { + const containerStyles = useContainerStyles(); + return ( +
+ }>Rounded + }> + Circular + + + } secondaryText="Secondary text"> + Rounded + + } secondaryText="Secondary text"> + Circular + +
+ ); +}; + +Shape.storyName = 'Shape'; +Shape.parameters = { + docs: { + description: { + story: 'A InteractionTag can be rounded or circular,', + }, + }, +}; diff --git a/packages/react-components/react-tags/stories/InteractionTag/InteractionTagSize.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagSize.stories.tsx new file mode 100644 index 0000000000000..3d62c75e30444 --- /dev/null +++ b/packages/react-components/react-tags/stories/InteractionTag/InteractionTagSize.stories.tsx @@ -0,0 +1,67 @@ +import * as React from 'react'; +import { Avatar, makeStyles } from '@fluentui/react-components'; +import { CalendarMonthRegular } from '@fluentui/react-icons'; + +import { InteractionTag } from '@fluentui/react-tags'; + +const useContainerStyles = makeStyles({ + innerWrapper: { + alignItems: 'start', + columnGap: '10px', + display: 'flex', + }, + outerWrapper: { + display: 'flex', + flexDirection: 'column', + rowGap: '10px', + }, +}); +export const Size = () => { + const styles = useContainerStyles(); + return ( +
+
+ Medium + }> + Medium dismissible + + } shape="circular"> + Medium circular + +
+
+ Small + + }> + Small dismissible + + } shape="circular"> + Small circular + +
+
+ Extra small + + } + > + Extra small dismissible + + } shape="circular"> + Extra small circular + +
+
+ ); +}; + +Size.storyName = 'Size'; +Size.parameters = { + docs: { + description: { + story: 'A InteractionTag supports `medium`, `small` and `extra-small` size. Default size is `medium`.', + }, + }, +}; diff --git a/packages/react-components/react-tags/stories/InteractionTag/index.stories.tsx b/packages/react-components/react-tags/stories/InteractionTag/index.stories.tsx new file mode 100644 index 0000000000000..a66cd8dbbf541 --- /dev/null +++ b/packages/react-components/react-tags/stories/InteractionTag/index.stories.tsx @@ -0,0 +1,24 @@ +import { InteractionTag } from '@fluentui/react-tags'; + +import descriptionMd from './InteractionTagDescription.md'; +import bestPracticesMd from './InteractionTagBestPractices.md'; + +export { Default } from './InteractionTagDefault.stories'; +export { Icon } from './InteractionTagIcon.stories'; +export { Media } from './InteractionTagMedia.stories'; +export { SecondaryText } from './InteractionTagSecondaryText.stories'; +export { Dismiss } from './InteractionTagDismiss.stories'; +export { Shape } from './InteractionTagShape.stories'; +export { Size } from './InteractionTagSize.stories'; + +export default { + title: 'Preview Components/Tag/InteractionTag', + component: InteractionTag, + parameters: { + docs: { + description: { + component: [descriptionMd, bestPracticesMd].join('\n'), + }, + }, + }, +}; diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonBestPractices.md b/packages/react-components/react-tags/stories/TagButton/TagButtonBestPractices.md deleted file mode 100644 index 625151fb10240..0000000000000 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonBestPractices.md +++ /dev/null @@ -1,7 +0,0 @@ -## Best practices - -### Do - -- Use `Tag` instead of `TagButton` for tags without a primary action. - -### Don't diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDescription.md b/packages/react-components/react-tags/stories/TagButton/TagButtonDescription.md deleted file mode 100644 index 691c625a2b65c..0000000000000 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDescription.md +++ /dev/null @@ -1 +0,0 @@ -A TagButton follows the same characteristics as a Tag, but with the added functionality of having a primary and secondary action. diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonIcon.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonIcon.stories.tsx deleted file mode 100644 index 621e32e4db1c0..0000000000000 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonIcon.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import { Calendar3Day20Regular } from '@fluentui/react-icons'; -import { TagButton } from '@fluentui/react-tags'; - -export const Icon = () => }>Primary text; - -Icon.storyName = 'Icon'; -Icon.parameters = { - docs: { - description: { - story: 'A TagButton can render a custom icon if provided.', - }, - }, -}; diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonSecondaryText.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonSecondaryText.stories.tsx deleted file mode 100644 index 26f4145b44d28..0000000000000 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonSecondaryText.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import { TagButton } from '@fluentui/react-tags'; - -export const SecondaryText = () => Primary text; - -SecondaryText.storyName = 'SecondaryText'; -SecondaryText.parameters = { - docs: { - description: { - story: 'A TagButton can have a secondary text.', - }, - }, -}; diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx deleted file mode 100644 index 4133f1460fe00..0000000000000 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { Avatar, makeStyles } from '@fluentui/react-components'; -import { Calendar3Day20Regular } from '@fluentui/react-icons'; - -import { TagButton } from '@fluentui/react-tags'; - -const useContainerStyles = makeStyles({ - root: { - display: 'grid', - rowGap: '10px', - columnGap: '10px', - gridTemplateColumns: 'auto 1fr', - }, -}); - -export const Shape = () => { - const containerStyles = useContainerStyles(); - return ( -
- }>Rounded - }> - Circular - - - } secondaryText="Secondary text"> - Rounded - - } secondaryText="Secondary text"> - Circular - -
- ); -}; - -Shape.storyName = 'Shape'; -Shape.parameters = { - docs: { - description: { - story: 'A TagButton can be rounded or circular,', - }, - }, -}; diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx deleted file mode 100644 index fbf7643d43ccf..0000000000000 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import { Avatar, makeStyles } from '@fluentui/react-components'; -import { CalendarMonthRegular } from '@fluentui/react-icons'; - -import { TagButton } from '@fluentui/react-tags'; - -const useContainerStyles = makeStyles({ - innerWrapper: { - alignItems: 'start', - columnGap: '10px', - display: 'flex', - }, - outerWrapper: { - display: 'flex', - flexDirection: 'column', - rowGap: '10px', - }, -}); -export const Size = () => { - const styles = useContainerStyles(); - return ( -
-
- Medium - }> - Medium dismissible - - } shape="circular"> - Medium circular - -
-
- Small - - }> - Small dismissible - - } shape="circular"> - Small circular - -
-
- Extra small - - }> - Extra small dismissible - - } shape="circular"> - Extra small circular - -
-
- ); -}; - -Size.storyName = 'Size'; -Size.parameters = { - docs: { - description: { story: 'A TagButton supports `medium`, `small` and `extra-small` size. Default size is `medium`.' }, - }, -}; diff --git a/packages/react-components/react-tags/stories/TagButton/index.stories.tsx b/packages/react-components/react-tags/stories/TagButton/index.stories.tsx deleted file mode 100644 index e58d4bdb2a2d1..0000000000000 --- a/packages/react-components/react-tags/stories/TagButton/index.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { TagButton } from '@fluentui/react-tags'; - -import descriptionMd from './TagButtonDescription.md'; -import bestPracticesMd from './TagButtonBestPractices.md'; - -export { Default } from './TagButtonDefault.stories'; -export { Icon } from './TagButtonIcon.stories'; -export { Media } from './TagButtonMedia.stories'; -export { SecondaryText } from './TagButtonSecondaryText.stories'; -export { Dismiss } from './TagButtonDismiss.stories'; -export { Shape } from './TagButtonShape.stories'; -export { Size } from './TagButtonSize.stories'; - -export default { - title: 'Preview Components/Tag/TagButton', - component: TagButton, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupBestPractices.md b/packages/react-components/react-tags/stories/TagGroup/TagGroupBestPractices.md index 0be386c6dd82b..9d2a06638bf4f 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupBestPractices.md +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupBestPractices.md @@ -4,6 +4,6 @@ - A Picker component is planned for displaying multiple selected values using `TagGroup` with `Combobox`, and will be the recommended approach once it's available. But for now, when using `TagGroup` with `Combobox`: - Set the `listbox` role for `TagGroup` and the `option` role for each `Tag`. - - If using `TagButton`, set the `option` role for the content and make the dismiss button not focusable. When content is focused, Enter/Space should invoke the primary action, and Backspace/Delete remove the tag. + - If using `InteractionTag`, set the `option` role for the content and make the dismiss button not focusable. When content is focused, Enter/Space should invoke the primary action, and Backspace/Delete remove the tag. ### Don't diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupDefault.stories.tsx b/packages/react-components/react-tags/stories/TagGroup/TagGroupDefault.stories.tsx index a3c0e41712622..572f8d2ee686c 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupDefault.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { TagGroup, Tag, TagButton, TagGroupProps } from '@fluentui/react-tags'; +import { TagGroup, Tag, InteractionTag, TagGroupProps } from '@fluentui/react-tags'; import { Calendar3Day20Regular, Calendar3Day20Filled, bundleIcon } from '@fluentui/react-icons'; const Calendar3Day20Icon = bundleIcon(Calendar3Day20Filled, Calendar3Day20Regular); @@ -9,12 +9,12 @@ export const Default = (props: Partial) => ( }> Tag 1 - }> + }> Tag 2 - - }> + + }> Tag 3 - - Tag 4 + + Tag 4 ); diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupDescription.md b/packages/react-components/react-tags/stories/TagGroup/TagGroupDescription.md index 61fa85c13bde2..064aac0cb92e9 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupDescription.md +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupDescription.md @@ -1 +1 @@ -A TagGroup is a container for multiple controls that are Tag or TagButton. +A TagGroup is a container for multiple controls that are Tag or InteractionTag. diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags/stories/TagGroup/TagGroupDismiss.stories.tsx index f7ef262dff4fe..81853dffbdccc 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -1,27 +1,27 @@ import * as React from 'react'; -import { TagGroup, Tag, TagButton, TagButtonProps, TagProps, TagGroupProps } from '@fluentui/react-tags'; +import { TagGroup, Tag, InteractionTag, InteractionTagProps, TagProps, TagGroupProps } from '@fluentui/react-tags'; export const Dismiss = () => { const defaultItems = [ { value: '1', children: 'Tag 1', 'aria-label': 'Tag1, remove' }, { value: '2', children: 'Tag 2', 'aria-label': 'Tag2, remove' }, - { value: 'tagButton-foo', children: 'Foo', dismissButton: { 'aria-label': 'Foo, remove' } }, - { value: 'tagButton-bar', children: 'Bar', dismissButton: { 'aria-label': 'Bar, remove' } }, + { value: 'interactionTag-foo', children: 'Foo', dismissButton: { 'aria-label': 'Foo, remove' } }, + { value: 'interactionTag-bar', children: 'Bar', dismissButton: { 'aria-label': 'Bar, remove' } }, ]; - const [items, setItems] = React.useState>(defaultItems); + const [items, setItems] = React.useState>(defaultItems); const removeItem: TagGroupProps['onDismiss'] = (_e, { dismissedTagValue }) => { setItems([...items].filter(item => item.value !== dismissedTagValue)); }; - const isTagButton = (item: TagProps | TagButtonProps): item is TagButtonProps => - !!item.value?.startsWith('tagButton'); + const isInteractionTag = (item: TagProps | InteractionTagProps): item is InteractionTagProps => + !!item.value?.startsWith('interactionTag'); return ( {items.map(item => - isTagButton(item) ? : , + isInteractionTag(item) ? : , )} ); @@ -31,7 +31,7 @@ Dismiss.storyName = 'Dismiss'; Dismiss.parameters = { docs: { description: { - story: 'A TagGroup contains a collection of Tag/TagButton that can be dismissed', + story: 'A TagGroup contains a collection of Tag/InteractionTag that can be dismissed', }, }, }; diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx index 8711930996057..b0b70e13061ce 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { TagGroup, Tag, TagButton } from '@fluentui/react-tags'; +import { TagGroup, Tag, InteractionTag } from '@fluentui/react-tags'; import { Avatar, makeStyles } from '@fluentui/react-components'; import { Calendar3DayRegular } from '@fluentui/react-icons'; import { TagSize } from '../../src/Tag'; @@ -28,9 +28,9 @@ export const Sizes = () => { } shape="circular"> {size} - }> + }> {size} - + ))}