Menu Web Component [ PRIORITY 1 ] #27906
Merged
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
…erbrady/fluentui-fork into web-components-v3
📊 Bundle size report🤖 This report was generated against 8057ad6e936dfd0473be71ce04bafad0ae582daa |
|
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. Latest deployment of this branch, based on commit 8d53f9c:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 8057ad6e936dfd0473be71ce04bafad0ae582daa (build) |
procload
reviewed
Sep 7, 2023
|
|
||
| ## **Design Spec** | ||
|
|
||
| [Link to Menu Design Spec in Figma](https://www.figma.com/file/xyz12345/Menu?node-id=2%3A476) |
There was a problem hiding this comment.
Broken link, but I can't find the actual Menu spec in the folder with the rest of the specs.
|
|
||
| | Fluent UI React 9 | Fluent Web Components | Description of difference | | ||
| | ----------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `hasIcons` | | React implementation requires user to pass the `hasIcons` to align menu items with icons. The web components implimentation aligns content by default. | |
There was a problem hiding this comment.
Nit: spelling -> implementation
| | Fluent UI React 9 | Fluent Web Components | Description of difference | | ||
| | ----------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `hasIcons` | | React implementation requires user to pass the `hasIcons` to align menu items with icons. The web components implimentation aligns content by default. | | ||
| | `hasCheckmarks` | | React implementation requires user to pass the `hasCheckmarks` to align menu items with checkmarks. The web components implimentation aligns content by default. | |
There was a problem hiding this comment.
Nit: spelling -> implementation
| | `open` | public | `boolean` | `false` | Specifies if the menu is open or closed | | ||
| | `menuContainer` | public | `HTMLElement` | | The container element for the menu items | | ||
| | `openOnHover` | public | `boolean` | `false` | Sets whether the menu opens on hover of menu trigger | | ||
|
|
There was a problem hiding this comment.
Do we want to add the other openOn* attributes from the React V9 implementation, such as: openOnContext, openOnChange?
Comment on lines
+143
to
+145
| if (this.closeOnScroll) { | ||
| document.removeEventListener('scroll', this.closeMenu); | ||
| } |
There was a problem hiding this comment.
Edge case: if the close-on-scroll attribute changes between open and close, the event listener is never removed.
miroslavstastny
approved these changes
Sep 18, 2023
procload
approved these changes
Sep 18, 2023
chrisdholt
pushed a commit
that referenced
this pull request
Apr 29, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 29, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 29, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 30, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
Apr 30, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 3, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 6, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 6, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 8, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
radium-v
pushed a commit
that referenced
this pull request
May 10, 2024
* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * menu: menu init * menu: updates README * menu: updates template, styles * menu: updates menu and stories * menu: removes dead code * menu: removes folder and file * yarn change * menu: removes tab index on template slot * menu changes based on feedback * menu: updates stories * menu, emits event on expanded change * menu: updatews attr/property name to align with fluent ( expand --> open ) * menu: cleans up code * reverts dead file * menu: removes block styling * enhances cleanup of autoUpdate, conditionally remove mouseover event listener * Add defaultPrevented check to handleTriggerKeydown function * menu: adds open/close features * menu: fixes spelling error in readme * menu: adds part selector to positioningRegion * menu: adds z-index css variable, updates docs accordingly * menu: adds attr changed callback for closeOnScroll to manage event listeners * menu: adds exports
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.
Menu
Design Spec
Link to Menu Design Spec in Figma
Engineering Spec
The Menu component is responsible for managing menus and their associated menu items. It handles the open/close functionality, focus management, and positioning strategy for showing the menu items.
Use Case
Creating a menu component that can be used to display a list of options or actions.
Class:
MenuVariables
Fields
menuHTMLElement[]triggerHTMLElement[]expandedbooleanfalsemenuContainerHTMLElementopenOnHoverbooleanfalseMethods
setPositioning(): Calculates and applies the positioning of the menu list based on available viewport space.focus(): Focuses the first item in the menu.Attributes
expandedopen-on-hoverSlots
triggerTemplate
Accessibility
WAI-ARIA Roles, States, and Properties
Preparation
Fluent Web Component v3 v.s Fluent React 9
Component and Slot Mapping
<Menu><fluent-menu><MenuList><fluent-menu-list><MenuItem><fluent-menu-item>hasIconshasIconsto align menu items with icons. The web components implimentation aligns content by default.hasCheckmarkshasCheckmarksto align menu items with checkmarks. The web components implimentation aligns content by default.