[react-nav-preview]feat: Adds SplitNav*Sub*Item #32964
Open
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
mltejera
commented
Oct 1, 2024
...onents/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts
Outdated
Show resolved
Hide resolved
📊 Bundle size report✅ No changes found |
mltejera
commented
Oct 1, 2024
| @@ -0,0 +1,7 @@ | |||
| { | |||
| "type": "minor", | |||
| "comment": "feat: Build out SplitNavSubItem", | |||
There was a problem hiding this comment.
this isn't quite right. be a little more specific
🕵 fluentui-web-components-v3 No visual regressions between this PR and main |
fabricteam
reviewed
Oct 2, 2024
🕵 FluentUIV0 No visual regressions between this PR and main |
fabricteam
reviewed
Oct 2, 2024
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 615 | 619 | 5000 | |
| Breadcrumb | mount | 1693 | 1667 | 1000 | |
| Checkbox | mount | 1694 | 1716 | 5000 | |
| CheckboxBase | mount | 1507 | 1484 | 5000 | |
| ChoiceGroup | mount | 2997 | 2974 | 5000 | |
| ComboBox | mount | 673 | 673 | 1000 | |
| CommandBar | mount | 6615 | 6541 | 1000 | |
| ContextualMenu | mount | 12625 | 13640 | 1000 | |
| DefaultButton | mount | 812 | 807 | 5000 | |
| DetailsRow | mount | 2225 | 2239 | 5000 | |
| DetailsRowFast | mount | 2215 | 2204 | 5000 | |
| DetailsRowNoStyles | mount | 2026 | 2077 | 5000 | |
| Dialog | mount | 2730 | 2739 | 1000 | |
| DocumentCardTitle | mount | 231 | 233 | 1000 | |
| Dropdown | mount | 1998 | 1992 | 5000 | |
| FocusTrapZone | mount | 1143 | 1145 | 5000 | |
| FocusZone | mount | 1117 | 1089 | 5000 | |
| GroupedList | mount | 42384 | 42455 | 2 | |
| GroupedList | virtual-rerender | 20267 | 20414 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 52009 | 52188 | 2 | |
| GroupedListV2 | mount | 223 | 237 | 2 | |
| GroupedListV2 | virtual-rerender | 216 | 223 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 224 | 219 | 2 | |
| IconButton | mount | 1136 | 1136 | 5000 | |
| Label | mount | 346 | 345 | 5000 | |
| Layer | mount | 2715 | 2751 | 5000 | |
| Link | mount | 401 | 383 | 5000 | |
| MenuButton | mount | 981 | 978 | 5000 | |
| MessageBar | mount | 21215 | 21173 | 5000 | |
| Nav | mount | 2055 | 2036 | 1000 | |
| OverflowSet | mount | 780 | 793 | 5000 | |
| Panel | mount | 1824 | 1921 | 1000 | |
| Persona | mount | 756 | 763 | 1000 | |
| Pivot | mount | 891 | 918 | 1000 | |
| PrimaryButton | mount | 932 | 939 | 5000 | |
| Rating | mount | 4730 | 4693 | 5000 | |
| SearchBox | mount | 934 | 937 | 5000 | |
| Shimmer | mount | 1879 | 1888 | 5000 | |
| Slider | mount | 1339 | 1352 | 5000 | |
| SpinButton | mount | 2978 | 2961 | 5000 | |
| Spinner | mount | 393 | 396 | 5000 | |
| SplitButton | mount | 1894 | 1887 | 5000 | |
| Stack | mount | 426 | 422 | 5000 | |
| StackWithIntrinsicChildren | mount | 871 | 865 | 5000 | |
| StackWithTextChildren | mount | 2768 | 2786 | 5000 | |
| SwatchColorPicker | mount | 6348 | 6388 | 5000 | |
| TagPicker | mount | 1468 | 1454 | 5000 | |
| Text | mount | 388 | 392 | 5000 | |
| TextField | mount | 942 | 932 | 5000 | |
| ThemeProvider | mount | 854 | 847 | 5000 | |
| ThemeProvider | virtual-rerender | 591 | 578 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1283 | 1274 | 5000 | |
| Toggle | mount | 628 | 607 | 5000 | |
| buttonNative | mount | 189 | 188 | 5000 |
packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md
Outdated
Show resolved
Hide resolved
...s/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx
Outdated
Show resolved
Hide resolved
...s/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx
Outdated
Show resolved
Hide resolved
...onents/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts
Outdated
Show resolved
Hide resolved
| maxWidth: '28px', | ||
| minWidth: '28px', | ||
| paddingInlineEnd: '12px', | ||
| paddingInlineStart: '5px', |
There was a problem hiding this comment.
I see these changed from 4px -> 5px, which deviates from our token set, can we set back to 4px and use spacing token versions?
mltejera
commented
Oct 2, 2024
| @@ -17,7 +17,7 @@ export const parameters = { | |||
| docs: { | |||
| source: { | |||
| excludeDecorators: true, | |||
| type: 'source', | |||
| type: 'code', | |||
There was a problem hiding this comment.
don't check this in
Mitch-At-Work
approved these changes
Oct 2, 2024
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.
This pull request introduces the
SplitNavSubItemfeature to the@fluentui/react-nav-previewpackage. The changes primarily focus on adding support fornavSubItemwithinSplitNavItemcomponents, updating the related styles, and modifying the storybook examples to demonstrate the new functionality.// AI Gen Below
This pull request introduces several enhancements and new features to the
react-nav-previewpackage, focusing on theSplitNavItemcomponent and its integration withNavSubItem. The changes include updating the component types, adding new properties, and adjusting styles to support the new functionality.Enhancements to
SplitNavItemComponent:SplitNavItemnow supportsNavSubItemthrough theisSubNavboolean and updated slot types. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.types.ts) [1] [2] [3]useSplitNavItemhook to determine if an item is aNavSubItembased on context and to adjust element types accordingly. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx) [1] [2] [3] [4]Style Adjustments:
NavSubItemand ensure consistent visual behavior. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts) [1] [2] [3]packages/react-components/react-nav-preview/library/src/components/sharedNavStyles.styles.ts)Storybook and Documentation Updates:
SplitNavItemfunctionalities, including nested items and categories. (packages/react-components/react-nav-preview/stories/src/NavDrawer/SplitNavItems.stories.tsx) [1] [2] [3] [4] [5] [6]SplitNavItemprops and slots. (packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md)Minor Changes:
codetype for better source display. (.storybook/preview.js)SplitNavSubItem. (change/@fluentui-react-nav-preview-b9aea238-32a9-438f-808c-724f85dd2f66.json)