diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx index 5cd3178d4a7329..7b221bc1051a09 100644 --- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx +++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons'; import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-toolbar'; export const ControlledToggleButton = () => { @@ -11,12 +12,8 @@ export const ControlledToggleButton = () => { return ( - - Enable Group - - - Enable Group - + } name="edit" value="cut" /> + } name="edit" value="paste" /> ); }; diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx index 5e952f62fa6978..18f853b8b17079 100644 --- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx +++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx @@ -1,16 +1,35 @@ import * as React from 'react'; +import { + TextBold24Regular, + TextItalic24Regular, + TextUnderline24Regular, + AlertSnooze24Regular, + MoreHorizontal24Filled, +} from '@fluentui/react-icons'; +import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components'; import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar'; import type { ToolbarProps } from '@fluentui/react-toolbar'; export const Default = (props: Partial) => ( - Click me - Click me - - Click me - - Click me to Toggle - + } /> + } /> + } /> + } /> + + + } /> + + + + + New + New Window + Open File + Open Folder + + + ); diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx index 922622d6775ecd..b0ba5639e8cc8e 100644 --- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx +++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx @@ -198,8 +198,6 @@ export const OverflowItems = (props: Partial) => ( icon={} /> - - ) => ( - Click me - Click me - - Click me - - Click me to Toggle - + } /> + } /> + } /> + } /> ); diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx index 0c41bc50350841..fcd9f3dc4c5062 100644 --- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx +++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx @@ -1,15 +1,12 @@ import * as React from 'react'; -import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar'; +import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons'; +import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar'; import type { ToolbarProps } from '@fluentui/react-toolbar'; export const Subtle = (props: Partial) => ( - Click me - Click me - Click me - - - Click me to Toggle - + } /> + } /> + } /> ); diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx index a0e2a2f0ad0297..ab12c651199a98 100644 --- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx +++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx @@ -6,16 +6,16 @@ import { CalendarMonthRegular } from '@fluentui/react-icons'; export const WithPopover = (props: Partial) => ( - + - Click here + See more...
Popover content
- + } /> diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx index 4572f1afe833eb..25d25c88d87323 100644 --- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx +++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx @@ -2,19 +2,16 @@ import * as React from 'react'; import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar'; import type { ToolbarProps } from '@fluentui/react-toolbar'; import { Tooltip } from '@fluentui/react-components'; -import { CalendarMonthRegular } from '@fluentui/react-icons'; +import { CalendarMonthRegular, TextBold24Regular } from '@fluentui/react-icons'; export const WithTooltip = (props: Partial) => ( - - Hover me + + } /> } /> - Click me - Hover me - );