diff --git a/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json b/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json new file mode 100644 index 0000000000000..f97c7d413eb9e --- /dev/null +++ b/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: use regular icon for dismiss", + "packageName": "@fluentui/react-tags-preview", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx index 85c00098d0bad..63143cfbf31d8 100644 --- a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx +++ b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx @@ -1,12 +1,10 @@ import * as React from 'react'; import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities'; import { Delete, Backspace } from '@fluentui/keyboard-keys'; -import { DismissRegular, bundleIcon, DismissFilled } from '@fluentui/react-icons'; +import { DismissRegular } from '@fluentui/react-icons'; import type { InteractionTagSecondaryProps, InteractionTagSecondaryState } from './InteractionTagSecondary.types'; import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext'; -const DismissIcon = bundleIcon(DismissFilled, DismissRegular); - /** * Create the state required to render InteractionTagSecondary. * @@ -47,7 +45,7 @@ export const useInteractionTagSecondary_unstable = ( root: slot.always( getNativeElementProps('button', { - children: , + children: , type: 'button', disabled, ref, diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx index bb9a0700d64dd..0982c5796deb2 100644 --- a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx +++ b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { getNativeElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities'; -import { DismissRegular, bundleIcon, DismissFilled } from '@fluentui/react-icons'; +import { DismissRegular } from '@fluentui/react-icons'; import type { TagProps, TagState } from './Tag.types'; import { Delete, Backspace } from '@fluentui/keyboard-keys'; import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext'; @@ -16,8 +16,6 @@ const tagAvatarShapeMap = { circular: 'circular', } as const; -const DismissIcon = bundleIcon(DismissFilled, DismissRegular); - /** * Create the state required to render Tag. * @@ -97,7 +95,8 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref): T dismissIcon: slot.optional(props.dismissIcon, { renderByDefault: dismissible, defaultProps: { - children: , + children: , + role: 'img', }, elementType: 'span', }), diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx index 23a53445da53e..7cbcc742e0acd 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx @@ -19,19 +19,19 @@ export const Appearance = () => { } hasSecondaryAction> filled - + } hasSecondaryAction> outline - + } hasSecondaryAction> brand - + ); diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx index c7f51872a37c7..09fe7b9eecf7f 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx @@ -17,19 +17,19 @@ export const Disabled = () => { } hasSecondaryAction> disabled - + } hasSecondaryAction> disabled - + } hasSecondaryAction> disabled - + ); diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx index e22852059c969..187597df85838 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx @@ -21,11 +21,11 @@ export const Dismiss = () => { }; return ( - + {visibleTags.map(tag => ( {tag.children} - + ))} diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx index fe0284d2750b0..86a52637d7105 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx @@ -32,13 +32,13 @@ export const Shape = () => { } secondaryText="Secondary text" hasSecondaryAction> Rounded - + } secondaryText="Secondary text" hasSecondaryAction> Circular - + ); diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx index 83efab0e7c7a4..213b84df4bf80 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx @@ -30,7 +30,7 @@ export const Size = () => { } hasSecondaryAction> Medium dismissible - + @@ -48,7 +48,7 @@ export const Size = () => { } hasSecondaryAction> Small dismissible - + @@ -66,7 +66,7 @@ export const Size = () => { } hasSecondaryAction> Extra Small dismissible - + diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx index 86998858ceced..10a19a428d1e8 100644 --- a/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx @@ -13,13 +13,33 @@ export const Disabled = () => { const styles = useContainerStyles(); return (
- } dismissible> + } + dismissible + dismissIcon={{ 'aria-label': 'remove' }} + > disabled - } dismissible> + } + dismissible + dismissIcon={{ 'aria-label': 'remove' }} + > disabled - } dismissible> + } + dismissible + dismissIcon={{ 'aria-label': 'remove' }} + > disabled
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx index 42e2efd36c1c8..f8cafabbcc643 100644 --- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx @@ -14,7 +14,7 @@ export const Dismiss = () => { }; return ( - + {visibleTags.map(tag => ( {tag.children} diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx index 466973348b9b3..6196fac0d34a9 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { TagGroup, Tag, TagGroupProps } from '@fluentui/react-tags-preview'; export const Default = (props: Partial) => ( - + Tag 1 Tag 2 Tag 3 diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx index 824ca4457c34b..1c466d9c8fa6f 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -31,7 +31,7 @@ export const Dismiss = () => { tag: ( Foo - + ), }, @@ -40,7 +40,7 @@ export const Dismiss = () => { tag: ( Bar - + ), }, @@ -52,7 +52,11 @@ export const Dismiss = () => { setItems([...items].filter(item => item.value !== dismissedTagValue)); }; - return {items.map(item => item.tag)}; + return ( + + {items.map(item => item.tag)} + + ); }; Dismiss.storyName = 'Dismiss'; diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx index b9d6387ef45d6..8ebcc4db21fde 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx @@ -135,7 +135,7 @@ export const WithOverflow = () => { return (
- + {defaultItems.map(item => ( diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx index 12c3316f5115e..7d1e21c40841f 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx @@ -26,7 +26,7 @@ export const Sizes = () => { {sizes.map(size => (
{`${size}: `} - + }> {size} @@ -37,7 +37,7 @@ export const Sizes = () => { } hasSecondaryAction> {size} - +