fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

Adds ability for NavSubItem to select it's parent

Open mltejera opened this issue 1 year ago • 2 comments

The Nav has nesting behavior. This PR implements 2 of those behaviors: https://github.com/microsoft/fluentui/assets/17346018/97ca8516-8da9-49c1-8107-80a28ad2b808

  • Select SubItems nested within categories, and maintain that selection state when categories are opened and closed. I rinsed and repeated the same pattern from NavItem.
  • When the parent of a SubItem gets closed, the parent shows as selected indicating a selected child to the user.

Note the spec indicates the CategoryItem's ability to close when it's is clicked. This behavior will come in a future PR as I bring in more props and behaviors from the accordion.

This adds a few new props to the top level nav:

  • selectedCategoryValue
  • defaultSelectedCategoryValue

Also adds a new optional property to our event data, categoryValue Updates useNav to handle the additional prop, but should be very analogous to selectedValue Renames openItems to openCategories for clarity. Updates type of NavSubItem from div to button. Updates NavSubItemStyles to show selection. This is just stubbed code for the time being.

Next major project will be to light up many of the accordion props, as discussed in #30566

https://github.com/microsoft/fluentui/assets/17346018/212ca32d-987a-415d-b33f-1f7ad51081ec

image

mltejera avatar Feb 16 '24 18:02 mltejera

📊 Bundle size report

🤖 This report was generated against 570f2e70ecb63e69928bf55990698d7d6e1abd54

fabricteam avatar Feb 16 '24 18:02 fabricteam

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.

codesandbox-ci[bot] avatar Feb 16 '24 18:02 codesandbox-ci[bot]