feat(react-drawer): split Drawer into subcomponents for better composition #27830
Conversation
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
* master: (58 commits) fix(react-datepicker-compat): Make onValidationError onValidationResult so the error is updated when there's no longer an error (microsoft#27655) Fix `@fluentui/react-portal-compat`: to be compatible with React 18 (microsoft#27577) chore: fix versions of @fluentui/react-datepicker-compat (microsoft#27666) applying package updates applying package updates Make line chart screen reader accessible (microsoft#27632) fix(react-examples): Improve keyboard navigation in ContextualMenu.CustomMenuList (microsoft#25172) docs(react-textarea): Update examples to use Field (microsoft#27644) bugfix(react-dialog): `DialogTitle` root as `h2` by default (microsoft#27555) applying package updates chore: restructure stories, add separate category for flat tree (microsoft#27586) fix document link (microsoft#27499) fix(react): exclude React.HTMLAttributes defined `content` prop for Tooltip and TooltipHost Prop types to mitigate @types/react breaking changes (microsoft#27467) chore(react-tabs): adopts custom JSX pragma (microsoft#27640) fix: ContextualMenuSplitButton always sets aria-checked (does not leave it undefined) when it is checkable (microsoft#27650) feat(react-datepicker-compat): Move DatePicker compat to stable (microsoft#27378) bugfix(react-tree): fix parent navigation after independency from id (microsoft#27642) applying package updates feat(react-datepicker-compat): Add error handling to DatePicker and update popup's padding (microsoft#27637) feat(public-docsite): Add banner to React component pages to promote v9 (microsoft#27557) ...
* master: applying package updates microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482) docs(react-datepicker-compat): Add description to README.md (microsoft#27677) Updated to use single hook selector (microsoft#27491) fix: Make border around Avatar's badge transparent using a mask (microsoft#27527) Disable focus on non-interactive elements (microsoft#27580) feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551)
* feat/drawer-components: (81 commits) docs: remove TODO marks fix: remove conflict code leftover applying package updates microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482) docs(react-datepicker-compat): Add description to README.md (microsoft#27677) Updated to use single hook selector (microsoft#27491) fix: Make border around Avatar's badge transparent using a mask (microsoft#27527) Disable focus on non-interactive elements (microsoft#27580) feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551) fix(react-datepicker-compat): Make onValidationError onValidationResult so the error is updated when there's no longer an error (microsoft#27655) Fix `@fluentui/react-portal-compat`: to be compatible with React 18 (microsoft#27577) chore: fix versions of @fluentui/react-datepicker-compat (microsoft#27666) applying package updates applying package updates Make line chart screen reader accessible (microsoft#27632) fix(react-examples): Improve keyboard navigation in ContextualMenu.CustomMenuList (microsoft#25172) docs(react-textarea): Update examples to use Field (microsoft#27644) bugfix(react-dialog): `DialogTitle` root as `h2` by default (microsoft#27555) applying package updates chore: restructure stories, add separate category for flat tree (microsoft#27586) ...
* master: chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707) chore: migrate to NodeJS v16 (microsoft#27711) remove react-avatar-context package (microsoft#27709) test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669) chore: Add caret to react-datepicker-compat dependencies (microsoft#27671) test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661) chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702) chore: enforce files naming to use .styles.ts (microsoft#27698) feat: adds lazy loading example (microsoft#27587) feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025) chore(react-tree): updates useOpenItemsState internals (microsoft#27697) feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668) test: use `isolatedModules` for all ts-jest configs to lower memory footprint on CI (microsoft#27670) chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming (microsoft#27687) feat(react-tree): makes useFlatTree generic (microsoft#27682) Enable export to codepen for charting library (microsoft#27539) Overflow: added useOverflowCount to exports (microsoft#27678) fix: Menu should not steal focus on re-render (microsoft#27688) feat(react-conformance): add new TS config api to be able to specify configName and configDir (microsoft#27664)
* feat/drawer-components: (28 commits) docs: update API feat: add style overrides for upcoming drawer components feat: add support to override drawer styles fix: prevent elements from stretching chore: upgrade devcontainer node version to 16 (microsoft#27716) fix: rename styles file to use the newer naming conventions test: add cypress tests for scroll positions chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707) feat: add support to override drawer body styles chore: migrate to NodeJS v16 (microsoft#27711) remove react-avatar-context package (microsoft#27709) test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669) chore: Add caret to react-datepicker-compat dependencies (microsoft#27671) test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661) chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702) chore: enforce files naming to use .styles.ts (microsoft#27698) feat: adds lazy loading example (microsoft#27587) feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025) chore(react-tree): updates useOpenItemsState internals (microsoft#27697) feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668) ...
* master: applying package updates fix: dont ignore lib, lib-commonjs and lib-amd files (microsoft#27736) Add DraggableZone into export map (microsoft#27569) Add export for FolderCover.scss (microsoft#27507) applying package updates Add filetype icon for Microsoft Designer (microsoft#27724) ci: add build task back as lint pre-requirement to unblock temporarily import plugin lint rule (microsoft#27729) fix(react-charting): add missing dependency to fix lint violations during release (microsoft#27728) Added partition for controlled overflow menu (microsoft#27520) Azure Theme 8.0: Tag Button variant for DefaultButton and PrimaryButton (microsoft#27186) Azure Theme 8.0 dropdown fix for high contrast themes (microsoft#27346) chore: enable TS intellisense in cross library projects for better/consistent DX (microsoft#26605) chore: enforce files naming to use .styles.ts [cxe-red files] (microsoft#27710) chore(v0): enable emit only dts and use new conformance test API to narrow down TS Program (microsoft#27686) codeowner update (microsoft#27719) Tag/TagButton init component setup (microsoft#27102)
marcosmoura
added
Type: Feature
Component: Drawer
marcosmoura
changed the title
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: b26559befc42d4a6367cc1c7079b0afb16005b30 (build) |
|
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 e42b6d2:
|
📊 Bundle size report🤖 This report was generated against b26559befc42d4a6367cc1c7079b0afb16005b30 |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | mount | 123 | 122 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 683 | 678 | 5000 | |
| Button | mount | 378 | 371 | 5000 | |
| Field | mount | 1254 | 1248 | 5000 | |
| FluentProvider | mount | 890 | 912 | 5000 | |
| FluentProviderWithTheme | mount | 123 | 122 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender | 98 | 106 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 111 | 109 | 10 | |
| InfoButton | mount | 20 | 19 | 5000 | |
| MakeStyles | mount | 1126 | 1091 | 50000 | |
| Persona | mount | 2033 | 1987 | 5000 | |
| SpinButton | mount | 1531 | 1533 | 5000 |
🕵 fluentuiv9 No visual regressions between this PR and main |
* master: (24 commits) chore(react-tabster): upgrade tabster to v4.4.2 (microsoft#27540) feat(react-tags): Add TagGroup with context (microsoft#27886) applying package updates fix(react-infobutton): Add aria-owns to InfoLabel (microsoft#27834) fix(recipes-react-components): Add a FluentProvider to the local storybook (microsoft#27746) chore: update RFC template (microsoft#27880) applying package updates feat: implement Toaster offset (microsoft#27854) feat(react-drawer): create DrawerFooter component (microsoft#27583) Make getKey and selection props mutually exclusive (microsoft#24048) Added MIGRATION.md to the Breadcrumb (microsoft#27846) update Github CODEOWNERS file (microsoft#27849) feat(react-tags): make basic Tag a button instead of div (microsoft#27858) chore: add test-ssr script to v9 packages (microsoft#27690) chore(react-tree): exports TreeItemAside unstable (microsoft#27856) bugfix(react-dialog): removes unnecessary grid gaps (microsoft#27845) applying package updates fix(react-textarea): Don't remove outline when filled and disabled and apply correct disabled color to text (microsoft#27837) feat: Implement limit for toast stacking (microsoft#27848) Update README.md for fluent 2 theme to include import instructions (microsoft#27847) ...
* feat/drawer-header: (24 commits) chore(react-tabster): upgrade tabster to v4.4.2 (microsoft#27540) feat(react-tags): Add TagGroup with context (microsoft#27886) applying package updates fix(react-infobutton): Add aria-owns to InfoLabel (microsoft#27834) fix(recipes-react-components): Add a FluentProvider to the local storybook (microsoft#27746) chore: update RFC template (microsoft#27880) applying package updates feat: implement Toaster offset (microsoft#27854) feat(react-drawer): create DrawerFooter component (microsoft#27583) Make getKey and selection props mutually exclusive (microsoft#24048) fix: move style override to outside the component Added MIGRATION.md to the Breadcrumb (microsoft#27846) update Github CODEOWNERS file (microsoft#27849) feat(react-tags): make basic Tag a button instead of div (microsoft#27858) chore: add test-ssr script to v9 packages (microsoft#27690) chore(react-tree): exports TreeItemAside unstable (microsoft#27856) bugfix(react-dialog): removes unnecessary grid gaps (microsoft#27845) applying package updates fix(react-textarea): Don't remove outline when filled and disabled and apply correct disabled color to text (microsoft#27837) feat: Implement limit for toast stacking (microsoft#27848) ...
* master: feat(react-drawer): create DrawerHeader component (microsoft#27582) chore: add test-ssr to buildci script (microsoft#27899) applying package updates
packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.types.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.types.ts
Outdated
Show resolved
Hide resolved
marcosmoura
changed the title
ValentinaKozlova
approved these changes
May 25, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The goal of this PR is to split the Drawer component into two separate components:
DrawerInline and DrawerOverlay
The main Drawer component was kept, but now is a combination of the two subcomponents, to have a straightforward way to switch between the two modes/types.