Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve Toolbar docs examples #25269

Merged
merged 5 commits into from
Oct 25, 2022

Conversation

chpalac
Copy link
Contributor

@chpalac chpalac commented Oct 18, 2022

Overview

Fix: #25156

Improve current stories for Toolbar, making more realistic examples.

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 18, 2022

📊 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
Copy link

codesandbox-ci bot commented Oct 18, 2022

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
Copy link

size-auditor bot commented Oct 18, 2022

Asset size changes

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

Baseline commit: 9dd5a3b5f20bb1a1fe2c4961c262201a691f460d (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 18, 2022

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

Copy link
Contributor

@bsunderhus bsunderhus left a comment

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
Member

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
Copy link
Contributor Author

chpalac commented Oct 21, 2022

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

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

lvbLffMPpC

@ling1726
Copy link
Member

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
Copy link
Contributor Author

chpalac commented Oct 24, 2022

@ling1726 Gotcha, removed here 636cca4

@chpalac
Copy link
Contributor Author

chpalac commented Oct 24, 2022

@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