Skip to content

docs: improve Toolbar docs examples#25269

Merged
chpalac merged 5 commits into
microsoft:masterfrom
chpalac:docs/improve-docs-toolbar
Oct 25, 2022
Merged

docs: improve Toolbar docs examples#25269
chpalac merged 5 commits into
microsoft:masterfrom
chpalac:docs/improve-docs-toolbar

Conversation

@chpalac

@chpalac chpalac commented Oct 18, 2022

Copy link
Copy Markdown
Contributor

Overview

Fix: #25156

Improve current stories for Toolbar, making more realistic examples.

@fabricteam

fabricteam commented Oct 18, 2022

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
62.94 kB
17.663 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
189.603 kB
52.909 kB
react-components
react-components: FluentProvider & webLightTheme
33.446 kB
11.033 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against 9dd5a3b5f20bb1a1fe2c4961c262201a691f460d

@codesandbox-ci

codesandbox-ci Bot commented Oct 18, 2022

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 636cca4:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor

size-auditor Bot commented Oct 18, 2022

Copy link
Copy Markdown

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 9dd5a3b5f20bb1a1fe2c4961c262201a691f460d (build)

@fabricteam

fabricteam commented Oct 18, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1271 1288 5000
Button mount 924 936 5000
FluentProvider mount 1485 1487 5000
FluentProviderWithTheme mount 581 586 10
FluentProviderWithTheme virtual-rerender 538 547 10
FluentProviderWithTheme virtual-rerender-with-unmount 558 584 10
MakeStyles mount 1960 1958 50000
SpinButton mount 2332 2371 5000

@bsunderhus bsunderhus left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice to also add some description to every one of those stories

@ling1726

Copy link
Copy Markdown
Contributor

image

There is no ToolbarMenuItem 🙈

image

We plan to introduce radios, so this guidance doesn't really make sense since we don't want users to apply roles unless necessary

image

Does this happen with the v9 menu ?

@bsunderhus bsunderhus self-requested a review October 20, 2022 08:14
@chpalac

chpalac commented Oct 21, 2022

Copy link
Copy Markdown
Contributor Author

@ling1726 The first 2 points I removed here: 07ca176

For the last one, it does happen with V9 Toolbar/Menu:

lvbLffMPpC

@ling1726

Copy link
Copy Markdown
Contributor

For the last one, it does happen with V9 Toolbar/Menu:

Does it? you're not using any onClick handlers in either the ToolbarDefault or the ToolbarOverflow examples. The example your showed as gif does show focus outlines because you are using the mouse. When using the keyboard this is what I see
msedge_DjG2POCzHj

@chpalac

chpalac commented Oct 24, 2022

Copy link
Copy Markdown
Contributor Author

@ling1726 Gotcha, removed here 636cca4

@chpalac

chpalac commented Oct 24, 2022

Copy link
Copy Markdown
Contributor Author

@ling1726 if no other comments, good to merge?

@chpalac chpalac merged commit dba7e9c into microsoft:master Oct 25, 2022
@chpalac chpalac deleted the docs/improve-docs-toolbar branch October 25, 2022 12:36
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 25, 2022
* master: (106 commits)
  fix: PopoverTriggerChildProps should be exported (microsoft#25159)
  feat: replace ToolbarRadio implementation by usage of toggle button as Radio (microsoft#25343)
  docs: improve Toolbar docs examples (microsoft#25269)
  feat(tools): add unstable API setup updates (microsoft#25355)
  applying package updates
  Fix wrong narration when legend selected (microsoft#24903)
  applying package updates
  chore(react-persona): Update beachball settings and change file's type (microsoft#25363)
  chore: Refactor Field VR tests to have individual tests per component (microsoft#25263)
  chore(react-persona, react-components, vr-tests-v9): Reverting react-persona's version to beta   (microsoft#25357)
  Publishing migration package (microsoft#25354)
  fix: Detailslist is still tabbable when isHeaderVisible=false (microsoft#25342)
  fix: list even/odd off-by-one issue (microsoft#25358)
  feat: add Dropdown a11y spec (microsoft#24917)
  spinbutton: update internal padding for small size (microsoft#25286)
  chore(global-context): migrate to new package structure (microsoft#25341)
  feat: Add validationState to Progress, to make the bar red or green (microsoft#25253)
  feat: Add accessibility scenarios for Fluent UI v9 components #3 (microsoft#23334)
  feat(Dropdown): Freeform search should be case insensitive (microsoft#24879)
  feat(what-input): Limit keyboard detection in inputs (microsoft#25087)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
* docs: improve Toolbar docs examples

* chore: remove best practices

* chore: changes

* chore: remove docs about menu focus in toolbar practices
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toolbar: Review and update documentation

6 participants