From e7a7aab567da1bea0c358b376769ac7bc0ed307e Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 7 Sep 2026 15:31:19 +0200 Subject: [PATCH 01/18] feat: prefer resizable icons --- .../Tooltip.stories.tsx | 8 +- .../LabellingExamples/Examples.stories.tsx | 14 +- .../FromV8/Components/Card/CardFooter.mdx | 10 +- .../FromV8/Components/RadioGroup.mdx | 4 +- .../src/stories/Breadcrumb/utils.tsx | 7 +- .../src/stories/Card/Card.stories.tsx | 12 +- .../src/stories/Card/utils.tsx | 6 +- .../src/stories/Dialog/Dialog.stories.tsx | 10 +- .../src/stories/Drawer/Drawer.stories.tsx | 20 +- .../src/stories/Field.stories.tsx | 4 +- .../src/stories/Toolbar/Toolbar.stories.tsx | 57 ++--- .../src/stories/Tree.stories.tsx | 43 ++-- ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e001.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e002.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e003.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e004.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e005.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00c.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e006.json | 7 + ...-91f6b7b8-5041-4ea5-8148-a10e33c92001.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e007.json | 7 + ...-91f6b7b8-5041-4ea5-8148-a10e33c92002.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e008.json | 7 + ...-91f6b7b8-5041-4ea5-8148-a10e33c92003.json | 7 + ...-91f6b7b8-5041-4ea5-8148-a10e33c92004.json | 7 + ...-91f6b7b8-5041-4ea5-8148-a10e33c92005.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e009.json | 7 + ...-91f6b7b8-5041-4ea5-8148-a10e33c92006.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00a.json | 7 + ...-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00b.json | 7 + package.json | 1 + packages/eslint-plugin/package.json | 1 + .../eslint-plugin/src/configs/react/config.js | 11 +- .../InfoButton/DefaultInfoButtonIcons.tsx | 14 +- .../components/InfoButton/useInfoButton.tsx | 12 +- .../Accordion/AccordionExpandIcon.stories.tsx | 8 +- .../PresenceBadge/PresenceBadge.test.tsx | 20 +- .../__snapshots__/PresenceBadge.test.tsx.snap | 8 +- .../components/PresenceBadge/presenceIcons.ts | 218 ++++-------------- .../usePresenceBadgeStyles.styles.ts | 36 ++- .../BreadcrumbButton.test.tsx | 6 +- .../src/Breadcrumb/BreadcrumbSize.stories.tsx | 4 +- .../react-card/library/README.md | 6 +- .../stories/src/Card/CardAction.stories.tsx | 8 +- .../src/Card/CardAppearance.stories.tsx | 4 +- .../src/Card/CardFocusMode.stories.tsx | 8 +- .../src/Card/CardOrientation.stories.tsx | 6 +- .../src/Card/CardSelectable.stories.tsx | 4 +- .../Card/CardSelectableIndicator.stories.tsx | 6 +- .../src/Card/CardTemplates.stories.tsx | 28 +-- .../CardFooter/CardFooterDefault.stories.tsx | 8 +- .../CardHeader/CardHeaderDefault.stories.tsx | 10 +- .../__snapshots__/Checkbox.test.tsx.snap | 16 +- .../src/components/Checkbox/useCheckbox.tsx | 14 +- .../Combobox/useComboboxStyles.styles.ts | 2 +- .../Dropdown/useDropdownStyles.styles.ts | 2 +- .../Option/__snapshots__/Option.test.tsx.snap | 8 +- .../src/components/Option/useOption.tsx | 4 +- .../Option/useOptionStyles.styles.ts | 2 +- .../ComboboxCustomOptions.stories.tsx | 4 +- .../ComboboxMultiselectWithTags.stories.tsx | 4 +- .../DropdownCustomOptions.stories.tsx | 24 +- .../components/DialogTitle/useDialogTitle.tsx | 4 +- .../DialogBackdropAppearance.stories.tsx | 4 +- .../DialogTitleCustomAction.stories.tsx | 4 +- .../react-drawer/library/README.md | 4 +- .../src/Drawer/DrawerCustomSize.stories.tsx | 9 +- .../src/Drawer/DrawerDefault.stories.tsx | 4 +- .../DrawerKeepRenderedInTheDOM.stories.tsx | 4 +- .../src/Drawer/DrawerMotionCustom.stories.tsx | 4 +- .../Drawer/DrawerMotionDisabled.stories.tsx | 4 +- .../Drawer/DrawerMultipleLevels.stories.tsx | 10 +- .../src/Drawer/DrawerPosition.stories.tsx | 4 +- .../src/Drawer/DrawerPreventClose.stories.tsx | 9 +- .../src/Drawer/DrawerResizable.stories.tsx | 4 +- .../src/Drawer/DrawerResponsive.stories.tsx | 4 +- .../src/Drawer/DrawerSeparator.stories.tsx | 4 +- .../stories/src/Drawer/DrawerSize.stories.tsx | 9 +- .../Drawer/DrawerWithNavigation.stories.tsx | 15 +- .../src/Drawer/DrawerWithTitle.stories.tsx | 4 +- .../src/Drawer/InlineDrawer.stories.tsx | 4 +- .../src/Drawer/OverlayDrawer.stories.tsx | 4 +- .../Drawer/OverlayDrawerNoModal.stories.tsx | 4 +- .../Drawer/OverlayInsideContainer.stories.tsx | 4 +- .../src/components/Field/Field.types.ts | 6 +- .../library/src/components/Field/useField.tsx | 8 +- .../src/Field/FieldRenderFunction.stories.tsx | 4 +- .../InfoLabel/InfoLabelDefault.stories.tsx | 4 +- .../InfoLabel/InfoLabelInField.stories.tsx | 4 +- .../InfoLabel/InfoLabelRequired.stories.tsx | 4 +- .../InfoButton/DefaultInfoButtonIcons.tsx | 14 +- .../components/InfoButton/useInfoButton.tsx | 12 +- .../components/Input/useInputStyles.styles.ts | 6 +- .../src/List/ListActiveElement.stories.tsx | 4 +- ...ultipleActionsDifferentPrimary.stories.tsx | 4 +- .../List/MultipleActionsSelection.stories.tsx | 4 +- .../MultipleActionsWithPrimary.stories.tsx | 4 +- .../MenuItemCheckbox.test.tsx.snap | 9 +- .../useMenuItemCheckbox.test.tsx | 8 +- .../MenuItemCheckbox/useMenuItemCheckbox.tsx | 4 +- .../__snapshots__/MenuItemRadio.test.tsx.snap | 9 +- .../MenuItemRadio/useMenuItemRadio.test.tsx | 8 +- .../MenuItemRadio/useMenuItemRadio.tsx | 4 +- .../Attachment/AttachmentIcon.styles.ts | 2 +- .../Button/ButtonMigration.mixins.ts | 4 +- .../ButtonMigration.mixins.test.ts.snap | 4 +- .../Stagger/StaggerStaggerIn.stories.tsx | 4 +- .../Stagger/StaggerStaggerOut.stories.tsx | 4 +- .../src/Motion/CustomMotion.stories.tsx | 4 +- .../src/Motion/DisableMotion.stories.tsx | 4 +- .../src/components/Hamburger/useHamburger.tsx | 4 +- .../NavCategoryItem/useNavCategoryItem.tsx | 4 +- .../SplitNavItem/useSplitNavItem.tsx | 6 +- .../stories/src/Nav/Basic.stories.tsx | 82 +++---- .../stories/src/Nav/Controlled.stories.tsx | 82 +++---- .../stories/src/Nav/CustomMotion.stories.tsx | 82 +++---- .../stories/src/Nav/SplitNavItems.stories.tsx | 93 ++++---- .../src/Nav/VariableDensityItems.stories.tsx | 85 ++++--- .../src/Overflow/LargerDividers.stories.tsx | 4 +- .../RatingItem/useRatingItemStyles.styles.ts | 2 +- .../SearchBox/useSearchBoxStyles.styles.ts | 6 +- .../Select/useSelectStyles.styles.ts | 2 +- .../components/SpinButton/useSpinButton.tsx | 6 +- .../useTagPickerControlStyles.styles.ts | 2 +- .../TeachingPopoverHeader.test.tsx.snap | 18 +- .../useTeachingPopoverHeader.test.tsx | 6 +- .../useTeachingPopoverHeader.tsx | 6 +- .../ToolbarControlledToggleButton.stories.tsx | 8 +- .../src/Toolbar/ToolbarDefault.stories.tsx | 15 +- .../src/Toolbar/ToolbarLarge.stories.tsx | 8 +- .../src/Toolbar/ToolbarMedium.stories.tsx | 8 +- .../src/Toolbar/ToolbarOverflow.stories.tsx | 35 ++- .../src/Toolbar/ToolbarRadio.stories.tsx | 8 +- .../ToolbarRadioControlled.stories.tsx | 8 +- .../src/Toolbar/ToolbarSmall.stories.tsx | 8 +- .../src/Toolbar/ToolbarSubtle.stories.tsx | 8 +- .../Toolbar/ToolbarTransparent.stories.tsx | 8 +- .../src/Toolbar/ToolbarVertical.stories.tsx | 8 +- .../Toolbar/ToolbarWithPopover.stories.tsx | 8 +- .../src/components/TreeItemChevron.tsx | 5 +- .../stories/src/Tree/TreeActions.stories.tsx | 6 +- .../stories/src/Tree/TreeAside.stories.tsx | 5 +- .../src/Tree/TreeExpandIcon.stories.tsx | 26 ++- .../Tree/TreeIconBeforeAndAfter.stories.tsx | 12 +- .../src/Tree/TreeManipulation.stories.tsx | 4 +- .../TreeNavigationModeTreeGrid.stories.tsx | 6 +- .../src/Tree/UseHeadlessFlatTree.stories.tsx | 6 +- .../code-snippets/MediaObject.tsx | 8 +- .../src/components/Export/ExportPanel.tsx | 4 +- .../src/__fixtures__/storybook-store-items.ts | 2 +- .../src/utils.spec.ts | 8 +- yarn.lock | 41 ++-- 152 files changed, 927 insertions(+), 920 deletions(-) create mode 100644 change/@fluentui-react-badge-7f02ad1a-3d22-47cf-8a40-0a7d5d54e001.json create mode 100644 change/@fluentui-react-checkbox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e002.json create mode 100644 change/@fluentui-react-combobox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e003.json create mode 100644 change/@fluentui-react-dialog-7f02ad1a-3d22-47cf-8a40-0a7d5d54e004.json create mode 100644 change/@fluentui-react-field-7f02ad1a-3d22-47cf-8a40-0a7d5d54e005.json create mode 100644 change/@fluentui-react-infobutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00c.json create mode 100644 change/@fluentui-react-infolabel-7f02ad1a-3d22-47cf-8a40-0a7d5d54e006.json create mode 100644 change/@fluentui-react-input-91f6b7b8-5041-4ea5-8148-a10e33c92001.json create mode 100644 change/@fluentui-react-menu-7f02ad1a-3d22-47cf-8a40-0a7d5d54e007.json create mode 100644 change/@fluentui-react-migration-v0-v9-91f6b7b8-5041-4ea5-8148-a10e33c92002.json create mode 100644 change/@fluentui-react-nav-7f02ad1a-3d22-47cf-8a40-0a7d5d54e008.json create mode 100644 change/@fluentui-react-rating-91f6b7b8-5041-4ea5-8148-a10e33c92003.json create mode 100644 change/@fluentui-react-search-91f6b7b8-5041-4ea5-8148-a10e33c92004.json create mode 100644 change/@fluentui-react-select-91f6b7b8-5041-4ea5-8148-a10e33c92005.json create mode 100644 change/@fluentui-react-spinbutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e009.json create mode 100644 change/@fluentui-react-tag-picker-91f6b7b8-5041-4ea5-8148-a10e33c92006.json create mode 100644 change/@fluentui-react-teaching-popover-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00a.json create mode 100644 change/@fluentui-react-tree-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00b.json diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx index 5c9dfe0b85de0..722dd24239975 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Button, Tooltip } from '@fluentui/react-components'; -import { TextItalic24Regular, TextUnderline24Regular, TextBold24Regular } from '@fluentui/react-icons'; +import { TextItalicRegular, TextUnderlineRegular, TextBoldRegular } from '@fluentui/react-icons'; import { Scenario } from './utils'; @@ -12,15 +12,15 @@ export const ButtonsWithTooltip: React.FunctionComponent = () => {

Tooltip variants

Tooltips for text formatting icon-only buttons

- - diff --git a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx index bf269121e4c8d..66800b39fc09f 100644 --- a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx @@ -11,7 +11,7 @@ import { import { OverlayDrawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from '@fluentui/react-drawer'; import { Button } from '@fluentui/react-button'; import { Combobox, Option } from '@fluentui/react-combobox'; -import { Rocket24Regular, Dismiss24Regular } from '@fluentui/react-icons'; +import { RocketRegular, DismissRegular } from '@fluentui/react-icons'; import type { Meta } from '@storybook/react-webpack5'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; @@ -260,7 +260,7 @@ export const TitleCustomAction = () => ( - } />}> + } />}> Dialog title @@ -533,7 +533,7 @@ export const IntegrationComboboxInline = () => { export const DialogInsideDrawerDefault = () => ( - } />}> + } />}> Drawer with Dialog @@ -568,7 +568,7 @@ export const DialogInsideDrawerDefaultRTL = getStoryVariant(DialogInsideDrawerDe export const DialogInsideDrawerDimmed = () => ( - } />}> + } />}> Drawer with Dialog @@ -603,7 +603,7 @@ export const DialogInsideDrawerDimmedRTL = getStoryVariant(DialogInsideDrawerDim export const DialogInsideDrawerTransparent = () => ( - } />}> + } />}> Drawer with Dialog diff --git a/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx index 45bea6f492457..1cfdca7953975 100644 --- a/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; import type { Meta } from '@storybook/react-webpack5'; +import type { + OverlayDrawerProps, + InlineDrawerProps} from '@fluentui/react-drawer'; import { Drawer, DrawerHeader, @@ -8,19 +11,12 @@ import { DrawerBody, DrawerHeaderNavigation, OverlayDrawer, - OverlayDrawerProps, InlineDrawer, - InlineDrawerProps, DrawerFooter, } from '@fluentui/react-drawer'; import { Toolbar, ToolbarButton, ToolbarGroup } from '@fluentui/react-toolbar'; import { Button } from '@fluentui/react-button'; -import { - ArrowLeft24Regular, - ArrowClockwise24Regular, - Settings24Regular, - Dismiss24Regular, -} from '@fluentui/react-icons'; +import { ArrowLeftRegular, ArrowClockwiseRegular, SettingsRegular, DismissRegular } from '@fluentui/react-icons'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; @@ -32,12 +28,12 @@ const ExampleDrawerHeader = () => ( - } /> + } /> - } /> - } /> - } /> + } /> + } /> + } /> diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx index 20554f0007014..f58a8288a11ea 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Checkbox } from '@fluentui/react-checkbox'; import { Combobox, Dropdown } from '@fluentui/react-combobox'; import { Field } from '@fluentui/react-field'; -import { Dismiss12Filled } from '@fluentui/react-icons'; +import { DismissFilled } from '@fluentui/react-icons'; import { Input } from '@fluentui/react-input'; import { ProgressBar } from '@fluentui/react-progress'; import { Radio, RadioGroup } from '@fluentui/react-radio'; @@ -98,7 +98,7 @@ export const ValidationMessageIcon = () => ( } + validationMessageIcon={} > diff --git a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx index 2268efe28acf1..40698826f9fab 100644 --- a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx @@ -1,19 +1,20 @@ import * as React from 'react'; import { Steps, type StoryParameters } from 'storywright'; import { makeStyles } from '@griffel/react'; +import type { + ToolbarProps} from '@fluentui/react-toolbar'; import { Toolbar, - ToolbarProps, ToolbarButton, ToolbarDivider, ToolbarToggleButton, ToolbarGroup, } from '@fluentui/react-toolbar'; import { - TextBold24Regular, - TextItalic24Regular, - TextUnderline24Regular, - AlertSnooze24Regular, + TextBoldRegular, + TextItalicRegular, + TextUnderlineRegular, + AlertSnoozeRegular, FontIncreaseRegular, FontDecreaseRegular, TextFontRegular, @@ -45,16 +46,16 @@ export default { export const Default = (props: Partial) => ( - } /> - } /> - } /> + } /> + } /> + } /> } + icon={} /> ); @@ -65,10 +66,10 @@ export const Transparent = (props: Partial) => ( id="bold-button" aria-label="Text option - Bold" appearance="transparent" - icon={} + icon={} /> - } /> - } /> + } /> + } /> ) => ( name="toggle" value="toggle" appearance="transparent" - icon={} + icon={} /> ); export const Vertical = (props: Partial) => ( - } /> - } /> - } /> + } /> + } /> + } /> } + icon={} /> ); export const Small = (props: Partial) => ( - } /> - } /> - } /> + } /> + } /> + } /> } + icon={} /> ); export const Large = (props: Partial) => ( - } /> - } /> - } /> + } /> + } /> + } /> } + icon={} /> ); @@ -136,7 +137,7 @@ export const VerticalButton = (props: Partial) => ( id="bold-button" aria-label="Text option - Bold" appearance="primary" - icon={} + icon={} /> }> Increase @@ -165,7 +166,7 @@ export const FarGroup = (props: Partial) => { id="bold-button" aria-label="Text option - Bold" appearance="primary" - icon={} + icon={} /> } /> } /> @@ -183,7 +184,7 @@ export const FarGroup = (props: Partial) => { aria-label="Snooze Alert Option" name="toggle" value="toggle" - icon={} + icon={} /> diff --git a/apps/vr-tests-react-components/src/stories/Tree.stories.tsx b/apps/vr-tests-react-components/src/stories/Tree.stories.tsx index 991c3d69eee40..d9436d76ef336 100644 --- a/apps/vr-tests-react-components/src/stories/Tree.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tree.stories.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; +import type { + HeadlessFlatTreeItemProps, + TreeItemValue, + TreeOpenChangeData, + TreeOpenChangeEvent} from '@fluentui/react-tree'; import { FlatTree, - HeadlessFlatTreeItemProps, Tree, TreeItem, TreeItemLayout, TreeItemPersonaLayout, - TreeItemValue, - TreeOpenChangeData, - TreeOpenChangeEvent, useHeadlessFlatTree_unstable, } from '@fluentui/react-tree'; import { tokens } from '@fluentui/react-theme'; @@ -20,12 +21,12 @@ import { Steps, type StoryParameters } from 'storywright'; import { CaretDownRegular, CaretRightRegular, - Edit20Regular, - Image20Regular, - Important16Regular, - LockClosed20Regular, - MoreHorizontal20Regular, - SquareMultiple20Regular, + EditRegular, + ImageRegular, + ImportantRegular, + LockClosedRegular, + MoreHorizontalRegular, + SquareMultipleRegular, } from '@fluentui/react-icons'; import { CounterBadge } from '@fluentui/react-badge'; import { makeStyles, shorthands } from '@griffel/react'; @@ -360,10 +361,10 @@ export const ExpandIconRTL = getStoryVariant(ExpandIcon, RTL); const ActionsExample = () => { return ( <> - - + + diff --git a/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx index c48beaf5cc3e8..c6036b65ae383 100644 --- a/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx +++ b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx @@ -14,7 +14,7 @@ import { Text, tokens, } from '@fluentui/react-components'; -import { MoreHorizontal20Regular, Open16Regular } from '@fluentui/react-icons'; +import { MoreHorizontalRegular, OpenRegular } from '@fluentui/react-icons'; const resolveAsset = (asset: string) => { const ASSET_URL = @@ -118,7 +118,7 @@ export const WithAction = (): JSXElement => { } description={Developer} - action={ @@ -154,7 +154,7 @@ export const WithAction = (): JSXElement => { } description={Developer} - action={ - + ); diff --git a/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx index ba5db2b27a1df..6bb447a64d3f9 100644 --- a/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx +++ b/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { JSXElement } from '@fluentui/react-components'; import { makeStyles, Button, Caption1, Text, tokens, Subtitle1 } from '@fluentui/react-components'; -import { MoreHorizontal20Regular } from '@fluentui/react-icons'; +import { MoreHorizontalRegular } from '@fluentui/react-icons'; import { Card, CardHeader, CardPreview } from '@fluentui/react-components'; const resolveAsset = (asset: string) => { @@ -77,7 +77,7 @@ export const Orientation = (): JSXElement => { } description={Developer} - action={ - + + ); }; diff --git a/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx b/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx index 2beef43801ea7..830fc5b1fa574 100644 --- a/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx +++ b/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { JSXElement } from '@fluentui/react-components'; import { CardHeader } from '@fluentui/react-components'; import { makeStyles, Button, Body1, Caption1 } from '@fluentui/react-components'; -import { MoreHorizontal20Regular } from '@fluentui/react-icons'; +import { MoreHorizontalRegular } from '@fluentui/react-icons'; const useStyles = makeStyles({ container: { @@ -39,7 +39,7 @@ export const Default = (): JSXElement => { } description={Developer} - action={ ), diff --git a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx index 85b9ec74ba823..b3a2492463048 100644 --- a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx +++ b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx @@ -21,7 +21,7 @@ import { makeStyles, useRestoreFocusTarget, } from '@fluentui/react-components'; -import { Dismiss24Regular } from '@fluentui/react-icons'; +import { DismissRegular } from '@fluentui/react-icons'; import story from './DialogBackdropAppearance.md'; const useStyles = makeStyles({ @@ -57,7 +57,7 @@ export const BackdropAppearance = (): JSXElement => {