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

Split Nav Item Implementation #32873

Merged
merged 22 commits into from
Sep 27, 2024

Conversation

mltejera
Copy link
Contributor

@mltejera mltejera commented Sep 19, 2024

This pull request introduces several enhancements and refactorings to the @fluentui/react-nav-preview package, focusing primarily on the SplitNavItem component. The most significant changes include the implementation of new slots for SplitNavItem, updates to its state and styles, and improvements to the associated tests and documentation.

Enhancements to SplitNavItem Component:

  • Implementation of New Slots:

    • Added new slots: navItem, actionButton, toggleButton, and menuButton to the SplitNavItem component. (packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md, packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.types.ts) [1] [2]
    • Updated SplitNavItemState to include a size property, defaulting to 'medium'. (packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md, packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.types.ts) [1] [2]
  • State and Rendering Updates:

    • Refactored useSplitNavItem_unstable to utilize the new slots and integrate with NavContext. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItem.tsx)
    • Updated renderSplitNavItem_unstable to render the new slots conditionally. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/renderSplitNavItem.tsx)

Styling and Class Name Enhancements:

  • Styling Adjustments:
    • Enhanced useSplitNavItemStyles_unstable to apply styles to the new slots and updated class names. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/useSplitNavItemStyles.styles.ts) [1] [2]
    • Updated shared navigation styles to align with new component requirements. (packages/react-components/react-nav-preview/library/src/components/sharedNavStyles.styles.ts)

Testing and Documentation:

  • Testing Improvements:
    • Enhanced conformance tests for SplitNavItem to include new slots and their expected class names. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/SplitNavItem.test.tsx)
    • Removed outdated snapshot tests for SplitNavItem. (packages/react-components/react-nav-preview/library/src/components/SplitNavItem/__snapshots__/SplitNavItem.test.tsx.snap)

Miscellaneous:

  • Storybook Updates:
    • Renamed and updated Storybook stories for better clarity and organization. (packages/react-components/react-nav-preview/stories/src/Nav/index.stories.tsx, packages/react-components/react-nav-preview/stories/src/NavDrawer/Basic.stories.tsx, packages/react-components/react-nav-preview/stories/src/NavDrawer/Controlled.stories.tsx) [1] [2] [3]

These changes collectively enhance the functionality, maintainability, and test coverage of the SplitNavItem component within the @fluentui/react-nav-preview package.

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 19, 2024

📊 Bundle size report

✅ No changes found

@mltejera mltejera marked this pull request as ready for review September 25, 2024 20:13
@mltejera mltejera requested review from a team as code owners September 25, 2024 20:13
Copy link
Contributor

@Mitch-At-Work Mitch-At-Work left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, one small nit about renderByDefault

@mltejera mltejera enabled auto-merge (squash) September 27, 2024 02:28
@mltejera mltejera merged commit cc85881 into microsoft:master Sep 27, 2024
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants