Menu Convergence

[ling1726]

Preparation:

• Started prep
• Open UI Research complete
  • [link to https://open-ui.org/]
• Comparison on v8 and v0 complete
  • Covered in menu spec
• Gather open GitHub issues related to component in epic issue
• react-* package scaffolded
• Component Spec authored and reviewed
  • link to spec in component package
• Deliverable: Reviewed component spec

Implementation

• Started impl
• Implement component
• Add storybook stories
• Add tests - Conformance, Unit, and VR
  • Conformance
  • Unit
  • VR
• Write README.md covering basic usage
• Write initial MIGRATION.md guide (include v8 and v0)
• Deliverable: Experimental component ready for partner use

Validation

• Started validating
• Add and validate in UI Builder
• Add and validate in docs site
• Validate with token pipeline
• Validate in product
• Finalize migration guide
  • Author codemods
• Deliverable: Preview component ready for broader/3rd party use

[layershifter]

This is an epic issue to track the open issues to consider in the converged approach:

^ in #16334. Should we close #16334 in this case?

[ling1726]

@layershifter I was told to create both an epic to track the overall convergence project and an issue to track work done for project cycles. Did I misunderstand ?

@jurokapsiar @JustSlone

[JustSlone]

This issue (#16465) tracks all of the things needed for convergence.

One of the things needed for convergence is collecting and considering existing open issues or ideas which is the purpose of #16334 (here's an example for tooltip #15102)

[JustSlone]

@ling1726 I assume the close due to #16517 was unintentional, reopening

[ling1726]

January Project cycle

• Submit and Open UI research proposal and gather industry practice and implmentation patterns for the Menu component
• Create and submit a spec for review and bring it to design hours

The above two will create visibility in the team to what the intended objective and design for the Menu should be. Once the spec is in the repo, it should not be considered as complete and should be modified based on design changes as we encounter them in the implementation phases during later project cycles

[ling1726]

February Project cycle

Initial Menu component with the following objectives in mind

• MenuList implementation without popup positioning or submenus
• All current known design tokens should be used to style the basic menu as much as possible
• Support for keyboard navigation
• Evaluate ability-helpers, perform comparison with FocusZone and document in RFC or spec
• Support for selection states through MenuItemCheckbox and MenuItemRadio
• A11y narration validation for DOM output and interactions with A11y champs

[ling1726]

Feb 02/02 - 02/09

Achievements

• Implemented MenuList, MenuItem, MenuItemCheckBox, MenuItemRadio
• Currently only mouse interactions work correctly
• Did initial test of ability helpers for keyboard interactions -> updates happened there and need to be tested
• Documented our implementation patterns

Challenges

• GenericDictionary is a footgun -> I have shot myself with it
• Trying to restrict types but challenges with shorthand typing
• Trying to use testing-library -> TS3.7 incompatible, needs resolutions hack

Objectives

• Get the rest of the implementation in bit at a time into master
• Concentrate more on ability helpers and evaluation of the scenarios there

[ling1726]

Feb 02/09 - 02/16

Achievements

• MenuList, MenuItem, MenuItemCheckBox, MenuItemRadio, MenuGroup, MenuDivider all in master with stories
• Contributed to ability helpers -> good experience so far, very non-invasive
• Typing improvements: GenericDictionary is partly gone \o/

Challenges

• Limited reviewer pool -> we should limit the bus index (use github teams ? )
• Waiting for react-icons -> stuck with mdl2 for now only in stories
• Need to make the state handling story more clear

Objectives

• Implement context based ability helpers -> waiting on contributions to be released
• Start initial RFC to compare keyboard navigation between AH and FocusZone
• Iterate on Menu styling and design
• Screener tests

[ling1726]

Feb 02/16 - 02/23

Achievements

• Investigated render optimizations for Menu items
• PR out for menu to use context selectors Add usage documentation to react-context-selector #17119
• Initial implementation of focus management lib based on ability-helpers to fulfil Implement react-focus-management and Menu usage #17137
  • arrow keys
  • home/end
  • character search
• Updated spec for split button menu item Update Menu spec for splitbutton keyboarding behaviour #17080

Challenges

• Focus management is complicated and there are lot of scenarios to support
• Too much time on analysis
• Lots of research -> not a lot of examples to follow

Objectives

• Get flat list keyboard navigation for Menu checked in
• More work on ability-helpers wrapper -> emphasis on focus trapping

Learnings

• Not necessarily RFC/Spec before writing code, especially if there are lots of unknowns RFC: Tabster for convergence/v9 #17129

[ling1726]

March Project cycle

• Handle disabled/disabledFocusable menu items
• Handle split button keyboarding
• Create API required for Popout menu (Menu + MenuTrigger)
• API should handle submenus
• Positioning logic for popout menu
  • Flip
  • Overflow
  • Alignment + positioning
• Leverage ability helpers to focus trap (not strictly required for Menu)

[ling1726]

April project cycle

Cleaning up API and implementing lower priority features

• RTL keyboarding in component and Support RTL for Mover API tabster#5
• Default focused item when menu is open
• Render popup menu in an out of order portal
• Menu item split button
• VR/E2E tests
• Delay to close menu
• Trigger + popup should be one single tabstop
• Persisting checked state for selectables in nested menus

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.