Skip to content

docs(react-drawer): best practices #28040

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.

Sign up for GitHub

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

Merged
marcosmoura merged 9 commits into from
Jun 22, 2023
Merged

docs(react-drawer): best practices #28040

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
66a4076
docs: fix JSDoc
marcosmoura May 30, 2023
53f9553
docs: add mention to dialog component
marcosmoura May 30, 2023
30720be
Merge branch 'master' into docs/react-drawer-best-practices
marcosmoura May 31, 2023
77f1427
fix: use summary component
marcosmoura May 31, 2023
58265fb
fix: typo
marcosmoura May 31, 2023
094ec9f
Merge branch 'master' into docs/react-drawer-best-practices
marcosmoura Jun 22, 2023
9ad8dd3
Discard changes to packages/react-components/react-drawer/src/compone…
marcosmoura Jun 22, 2023
ae59100
Discard changes to change/@fluentui-react-drawer-44d8cd26-5c02-4f76-b…
marcosmoura Jun 22, 2023
cf6a630
docs: include guidance on which components to pick
marcosmoura Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
## Best practices
<details>
<summary>
Best practices
</summary>

TODO: To be added by a future contribution, when all the implementation of sub components is finished.
### DrawerOverlay vs DrawerInline vs Drawer

### Do
- `DrawerOverlay`: Should be used only when the full user attention is required. Uses Dialog component under the hood.
- `DrawerInline`: Should be used when its content do not require full attention or for navigational elements on a page.
- `Drawer`: Should only be used when there is a strict need to toggle between overlay and inline modes. This is often useful for responsive design, so depending on the page viewport an inline drawer could become overlay to save screen space. <br><br>
Drawer is a component that combines both DrawerOverlay and DrawerInline. Although it is technically possible to use Drawer for either inline or overlay modes, it is far better to import and use its adequate component. <br><br>
As an example, in case there is the need to only use the inline mode, it is better to use `<DrawerInline />` instead of a `<Drawer mode="inline" />`. Drawer would use DrawerInline internally, but also include DrawerOverlay in the mix. And as the DrawerOverlay has a strong dependency on Dialog component, more code would be included in the final build bundle.

TODO
### Accessibility

### Don't
- `DrawerOverlay`: <br>Please refer to the Dialog component to understand the accessibility recommendations and implications.
- `DrawerInline`: <br>Renders a plain div and do not imply any A11y tags or attributes by default. It accepts all aria attributes and it should be customized depending on its context within a page

TODO
</details>