feat(react-headless-components-preview): add headless MenuButton#36320
Open
mainframev wants to merge 4 commits into
Open
feat(react-headless-components-preview): add headless MenuButton#36320mainframev wants to merge 4 commits into
mainframev wants to merge 4 commits into
Conversation
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
mainframev
force-pushed
the
feat/headless-menu-button
branch
4 times, most recently
from
3cdf9c2 to
30449c8
Compare
…utton feat(react-button): export useMenuButtonBase_unstable and base types feat(react-headless-components-preview): add headless MenuButton feat(react-headless-components-preview): MenuButton api report and change file
mainframev
force-pushed
the
feat/headless-menu-button
branch
from
30449c8 to
7a064fa
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png | 5 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 739 | Changed |
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 720 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 34 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 97 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 69 | Changed |
vr-tests-react-components/Skeleton converged 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - High Contrast.default.chromium.png | 1 | Changed |
| vr-tests-react-components/Skeleton converged.Opaque Skeleton with square - Dark Mode.default.chromium.png | 4 | Changed |
vr-tests-react-components/TagPicker 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 3 duplicate changes discarded. Check the build logs for more information.
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. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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.