feat(react-headless-components-preview): add headless MenuButton#36320
Open
mainframev wants to merge 8 commits into
Open
feat(react-headless-components-preview): add headless MenuButton#36320mainframev wants to merge 8 commits into
mainframev wants to merge 8 commits into
Conversation
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
mainframev
force-pushed
the
feat/headless-menu-button
branch
5 times, most recently
from
30449c8 to
7a064fa
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new headless, unstyled MenuButton surface to @fluentui/react-headless-components-preview, built on top of a new useMenuButtonBase_unstable base hook in @fluentui/react-button (this PR is currently stacked on #36319 per the description).
Changes:
- Add headless
MenuButtonimplementation, exports, stories, and API report for@fluentui/react-headless-components-preview/menu-button. - Add
useMenuButtonBase_unstable+ base types in@fluentui/react-button, and widenrenderMenuButton_unstableto acceptMenuButtonBaseState. - Add tests and beachball change files for both packages.
Reviewed changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/MenuButtonWithIcon.stories.tsx | Adds icon + icon-only story variants for headless MenuButton. |
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/MenuButtonSize.stories.tsx | Adds size styling examples for headless MenuButton. |
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/MenuButtonDisabled.stories.tsx | Adds disabled/disabledFocusable examples for headless MenuButton. |
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/MenuButtonDescription.md | Adds docs description for the new headless MenuButton stories page. |
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/MenuButtonDefault.stories.tsx | Adds default usage story (as Menu trigger). |
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/MenuButtonAppearance.stories.tsx | Adds appearance styling examples (primary/secondary/subtle/outline) via CSS classes. |
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/menu-button.module.css | Adds story-only styling using CSS variables and data-* hooks. |
| packages/react-components/react-headless-components-preview/stories/src/MenuButton/index.stories.tsx | Registers MenuButton stories under Components/MenuButton. |
| packages/react-components/react-headless-components-preview/library/src/menu-button.ts | Adds the package entrypoint re-export for menu-button subpath. |
| packages/react-components/react-headless-components-preview/library/src/components/MenuButton/useMenuButton.ts | Implements headless useMenuButton wrapper to add data-* styling hooks. |
| packages/react-components/react-headless-components-preview/library/src/components/MenuButton/renderMenuButton.ts | Re-exports shared renderMenuButton_unstable from @fluentui/react-button. |
| packages/react-components/react-headless-components-preview/library/src/components/MenuButton/MenuButton.types.ts | Defines headless MenuButtonState augmentation and re-exports props/slots. |
| packages/react-components/react-headless-components-preview/library/src/components/MenuButton/MenuButton.tsx | Adds headless MenuButton component wrapper (ForwardRefComponent). |
| packages/react-components/react-headless-components-preview/library/src/components/MenuButton/MenuButton.test.tsx | Adds headless component conformance + basic rendering/state tests. |
| packages/react-components/react-headless-components-preview/library/src/components/MenuButton/index.ts | Adds component-level barrel exports for headless MenuButton. |
| packages/react-components/react-headless-components-preview/library/package.json | Adds "./menu-button" export map entry. |
| packages/react-components/react-headless-components-preview/library/etc/menu-button.api.md | Adds API Extractor report output for the new headless menu-button entrypoint. |
| packages/react-components/react-button/library/src/MenuButton.ts | Re-exports new base hook + base types for public consumption. |
| packages/react-components/react-button/library/src/index.ts | Adds new base hook + base types exports at package root. |
| packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonBase.test.tsx | Adds unit tests for useMenuButtonBase_unstable. |
| packages/react-components/react-button/library/src/components/MenuButton/useMenuButton.tsx | Implements useMenuButtonBase_unstable and refactors useMenuButton_unstable to build on it. |
| packages/react-components/react-button/library/src/components/MenuButton/renderMenuButton.tsx | Widens render signature from styled state to base state. |
| packages/react-components/react-button/library/src/components/MenuButton/MenuButton.types.ts | Adds MenuButtonBaseProps/MenuButtonBaseState for headless composition. |
| packages/react-components/react-button/library/src/components/MenuButton/index.ts | Exports new base hook + base types from component barrel. |
| packages/react-components/react-button/library/etc/react-button.api.md | Updates public API report for new base hook/types and widened render signature. |
| change/@fluentui-react-headless-components-preview-7246c651-b258-4694-b0e7-45b666b15aae.json | Adds beachball change entry for headless MenuButton. |
| change/@fluentui-react-button-3e45fb7a-a8fa-4902-a694-fa9b89a68fd1.json | Adds beachball change entry for new useMenuButtonBase_unstable. |
mainframev
force-pushed
the
feat/headless-menu-button
branch
from
43c60bc to
bbae420
Compare
dmytrokirpa
reviewed
Jun 22, 2026
mainframev
force-pushed
the
feat/headless-menu-button
branch
2 times, most recently
from
095e38d to
2f632b1
Compare
mainframev
force-pushed
the
feat/headless-menu-button
branch
2 times, most recently
from
cfda883 to
7c01449
Compare
mainframev
force-pushed
the
feat/headless-menu-button
branch
4 times, most recently
from
ca34a5b to
e58accd
Compare
…n headless wrapper
mainframev
force-pushed
the
feat/headless-menu-button
branch
from
e58accd to
751ea98
Compare
mainframev
force-pushed
the
feat/headless-menu-button
branch
from
751ea98 to
a68bf14
Compare
dmytrokirpa
reviewed
Jun 24, 2026
| const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...baseProps } = props; | ||
| const baseState = useMenuButtonBase_unstable(baseProps, ref); | ||
|
|
||
| if (baseState.menuIcon) { |
Contributor
There was a problem hiding this comment.
I know we have a similar approach in a few other places, but we need to fix that.
- can we use something like:
const baseState = useMenuButtonBase_unstable({
...baseProps,
menuIcon: { children: <ChevronDownRegular />, ...slot.resolveShorthand(props.menuIcon) }
}, ref);
- and move this change to a separate PR?
Contributor
Author
There was a problem hiding this comment.
Good call. I moved this react-button change into a dedicated PR that should merge before this one: #36345
…on directly from react-button Addresses review feedback to use a direct re-export instead of an import + const alias, matching the suggestion on the PR.
…on_unstable Align with the standalone react-button PR (microsoft#36345). Replaces the post-hoc mutation of baseState.menuIcon with passing a null-safe default into useMenuButtonBase_unstable, so menuIcon={null} still hides the icon. This react-button change is owned by microsoft#36345 and will drop out of this branch once microsoft#36345 merges and this branch is rebased onto master.
… the specific icon
This file contains hidden or 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
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.
Description
Adds a headless, unstyled
MenuButtonto@fluentui/react-headless-components-preview, following the same pattern as the existing headlessButtonandToggleButton: it consumesuseMenuButtonBase_unstablefrom@fluentui/react-buttonand addsdata-*styling-hook attributes, re-exporting the sharedrenderMenuButton_unstable.