forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: improve Toolbar docs examples (microsoft#25269)
* docs: improve Toolbar docs examples * chore: remove best practices * chore: changes * chore: remove docs about menu focus in toolbar practices
- Loading branch information
Showing
9 changed files
with
58 additions
and
42 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-toolbar-18a47778-1d2f-48f2-bd7e-e5b5f3b31054.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"type": "none", | ||
"comment": "chore: remove best practices", | ||
"packageName": "@fluentui/react-toolbar", | ||
"email": "[email protected]", | ||
"dependentChangeType": "none" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 26 additions & 7 deletions
33
packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<ToolbarProps>) => ( | ||
<Toolbar {...props}> | ||
<ToolbarButton>Click me</ToolbarButton> | ||
<ToolbarButton>Click me</ToolbarButton> | ||
<ToolbarDivider /> | ||
<ToolbarButton>Click me</ToolbarButton> | ||
<ToolbarToggleButton name="toggle" value="toggle"> | ||
Click me to Toggle | ||
</ToolbarToggleButton> | ||
<ToolbarButton appearance="primary" icon={<TextBold24Regular />} /> | ||
<ToolbarButton icon={<TextItalic24Regular />} /> | ||
<ToolbarButton icon={<TextUnderline24Regular />} /> | ||
<ToolbarDivider /> | ||
<ToolbarToggleButton name="toggle" value="toggle" icon={<AlertSnooze24Regular />} /> | ||
<Menu> | ||
<MenuTrigger> | ||
<ToolbarButton icon={<MoreHorizontal24Filled />} /> | ||
</MenuTrigger> | ||
|
||
<MenuPopover> | ||
<MenuList> | ||
<MenuItem>New </MenuItem> | ||
<MenuItem>New Window</MenuItem> | ||
<MenuItem disabled>Open File</MenuItem> | ||
<MenuItem>Open Folder</MenuItem> | ||
</MenuList> | ||
</MenuPopover> | ||
</Menu> | ||
</Toolbar> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 10 additions & 7 deletions
17
packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,19 @@ | ||
import * as React from 'react'; | ||
import { | ||
TextBold16Regular, | ||
TextItalic16Regular, | ||
TextUnderline16Regular, | ||
AlertSnooze16Regular, | ||
} from '@fluentui/react-icons'; | ||
import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar'; | ||
import type { ToolbarProps } from '@fluentui/react-toolbar'; | ||
|
||
export const Small = (props: Partial<ToolbarProps>) => ( | ||
<Toolbar {...props} size="small"> | ||
<ToolbarButton>Click me</ToolbarButton> | ||
<ToolbarButton>Click me</ToolbarButton> | ||
<ToolbarDivider /> | ||
<ToolbarButton>Click me</ToolbarButton> | ||
<ToolbarToggleButton name="toggle" value="toggle"> | ||
Click me to Toggle | ||
</ToolbarToggleButton> | ||
<ToolbarButton appearance="primary" icon={<TextBold16Regular />} /> | ||
<ToolbarButton icon={<TextItalic16Regular />} /> | ||
<ToolbarButton icon={<TextUnderline16Regular />} /> | ||
<ToolbarDivider /> | ||
<ToolbarToggleButton name="toggle" value="toggle" icon={<AlertSnooze16Regular />} /> | ||
</Toolbar> | ||
); |
13 changes: 5 additions & 8 deletions
13
packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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<ToolbarProps>) => ( | ||
<Toolbar {...props}> | ||
<ToolbarButton appearance="subtle">Click me</ToolbarButton> | ||
<ToolbarButton appearance="subtle">Click me</ToolbarButton> | ||
<ToolbarButton appearance="subtle">Click me</ToolbarButton> | ||
<ToolbarDivider /> | ||
<ToolbarToggleButton name="toggle" value="toggle" appearance="subtle"> | ||
Click me to Toggle | ||
</ToolbarToggleButton> | ||
<ToolbarButton appearance="subtle" icon={<TextBold24Regular />} /> | ||
<ToolbarButton appearance="subtle" icon={<TextItalic24Regular />} /> | ||
<ToolbarButton appearance="subtle" icon={<TextUnderline24Regular />} /> | ||
</Toolbar> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters