[BREAKING] feat(react-nav-preview): Allow controlled behavior for nav categories, add controlled example and other cleanup #32489
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
📊 Bundle size report✅ No changes found |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 628 | 620 | 5000 | |
| Button | mount | 311 | 304 | 5000 | |
| Field | mount | 1130 | 1111 | 5000 | |
| FluentProvider | mount | 694 | 718 | 5000 | |
| FluentProviderWithTheme | mount | 78 | 90 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 42 | 42 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 76 | 80 | 10 | |
| MakeStyles | mount | 862 | 889 | 50000 | |
| Persona | mount | 1765 | 1689 | 5000 | |
| SpinButton | mount | 1400 | 1347 | 5000 | |
| SwatchPicker | mount | 1658 | 1623 | 5000 |
fabricteam
reviewed
Sep 9, 2024
packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.ts
Outdated
Show resolved
Hide resolved
change/@fluentui-react-nav-preview-d9b041fc-d874-467e-a484-d42072027c4a.json
Outdated
Show resolved
Hide resolved
21831b5 to
a58d325
Compare
packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts
Show resolved
Hide resolved
packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts
Outdated
Show resolved
Hide resolved
GeoffCoxMSFT
approved these changes
Sep 17, 2024
packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts
Show resolved
Hide resolved
Mitch-At-Work
requested changes
Sep 17, 2024
Mitch-At-Work
approved these changes
Sep 18, 2024
3075b9b to
f2752e9
Compare
2 tasks
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.
Bug #32417 noted that there was no interface to control the open categories from initial load - so this PR adds that. I also took the opportunity to more thoroughly shake out the controlled scenario for the component.
Below was generated by Copilot:
This pull request introduces several changes to the
@fluentui/react-nav-previewpackage, focusing on removing deprecated properties, adding new properties, and updating the navigation logic. The most important changes include the removal of thereserveSelectedNavItemSpaceprop, the addition ofdefaultOpenCategoriesandopenCategoriesprops, and updates to the navigation context and event handling.Breaking Changes:
reserveSelectedNavItemSpaceprop fromNavProps. (packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md,packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts,packages/react-components/react-nav-preview/library/src/components/NavContext.ts,packages/react-components/react-nav-preview/library/src/components/NavContext.types.ts) [1] [2] [3] [4]New Features:
defaultOpenCategoriesandopenCategoriesprops toNavPropsto manage the state of open categories. (packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md,packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts) [1] [2]OnNavItemSelectDatatype for handling navigation item selection events. (packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md,packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts) [1] [2]Enhancements:
NavCategoryItemand added an example for the new props. (packages/react-components/react-nav-preview/library/src/components/NavCategoryItem/useNavCategoryItem.tsx)useNavhook to handle the newdefaultOpenCategoriesandopenCategoriesprops and updated the logic for toggling category items. (packages/react-components/react-nav-preview/library/src/components/Nav/useNav.ts) [1] [2] [3] [4]Documentation:
NavPropsand added descriptions for the new properties. (packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md,packages/react-components/react-nav-preview/library/src/components/Nav/Nav.types.ts) [1] [2]These changes aim to improve the flexibility and functionality of the navigation component by removing deprecated features and adding new capabilities for managing open categories.