Fluentui: New Component: Sidebar/LeftNav

[micahgodbolt]

Current Status as of 2/26

Current plan is to create support for both tree view and accordion view navigation. We have identified two very different usages, and are determined to support both. Our current design goal is to find a way to make these two modes look cohesive. We're continuing to meet weekly to drive these designs to completion.

Component Details

Going to pull over project originated in BAF so that we can give access to other teams to start using it.

Imports

Button
CollapsibleSection
Overflow Set
Contextual Menu

Exports/ Component Breakdown

Intended Package

starting in experiments, with target of oufr, or possible commanding package

Code mockup/example

__Code Sample__

TBA

__Types__

| Name | Type | Default Value | Description |
|-----------|----------|---------------|-------------|

Design Assets

Creating a pattern that will support these types of designs (though these apps will probably start to align to fewer patterns over time)

Component Ownership

Targeting @oufr as the control is comparable to (and reuses many parts of) the command bar. So either oufr, or a commanding package if we break them out.

Deadlines

Todo

• [ ] Rename files to leftnav
• [ ] Finalize Requirements (regions, interactions, collapsed expectations)
• [ ] Use our new accordion control
• [ ] Separate into state and view (create non state version)
• [ ] Use updated (if available)
• [ ] Use Stack/Text
• [ ] Create styleVariables
• [ ] Drag and Drop, reorder

Steps

• [x] get into experiments
• [ ] Themable (Component.base/Component.styles)
• [ ] Unit tests
• [ ] Visual tests
• [ ] Documentation and examples
• [ ] Keyboard Accessible
• [ ] High Constrast Support
• [ ] RTL Support
• [ ] Design Review
• [ ] API review
• [ ] Public Preview
• [ ] Ready for Publishing

[JasonGore]

Will this supercede #5815?

[micahgodbolt]

@JasonGore no, this is a bit of a different pattern. I think there's value in looking at both, but this is to try and create a single solution for all of these left navigation patterns.

[micahgodbolt]

expand/collapse, accordion, header/body/footer content etc

[OneCyrus]

imho VSTS did a pretty great job with the leftside nav in the redesign

would be nice to have this pattern supported as well.

[micahgodbolt]

@OneCyrus yes, the goal of this component will be 1) standardize the way we do sidebars using the new fluent design language and 2) make it as customizable as possible to get the same functionality with different themes and component combinations

[naicky-whiterain]

Hi there, any news?

[micahgodbolt]

designs are done, but development is currently on hold.

[ChristopherHaws]

Azure DevOps also has a different menu for their Settings pages:

[farzer]

marked

[vikramdadwal]

Is there any timelines for this feature ?

[micahgodbolt]

It is not currently planned.