feat(react-headless-components-preview): add swatch picker controls - #36535
Open
Dmytro Kirpa (dmytrokirpa) wants to merge 6 commits into
Open
feat(react-headless-components-preview): add swatch picker controls#36535Dmytro Kirpa (dmytrokirpa) wants to merge 6 commits into
Dmytro Kirpa (dmytrokirpa) wants to merge 6 commits into
Conversation
This was referenced Aug 6, 2026
Dmytro Kirpa (dmytrokirpa)
force-pushed
the
feat/headless-swatch-picker
branch
from
August 6, 2026 16:21
e5c2da1 to
2454615
Compare
Dmytro Kirpa (dmytrokirpa)
force-pushed
the
feat/headless-swatch-picker
branch
from
August 6, 2026 16:25
2454615 to
ad48178
Compare
Dmytro Kirpa (dmytrokirpa)
force-pushed
the
feat/headless-swatch-picker
branch
from
August 6, 2026 19:06
ad48178 to
184eb5f
Compare
Dmytro Kirpa (dmytrokirpa)
force-pushed
the
feat/headless-swatch-picker
branch
from
August 6, 2026 20:01
1703cf4 to
697f3cb
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 46 out of 47 changed files in this pull request and generated no new comments.
Suppressed comments (3)
packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/useSwatchPicker.ts:17
- The documented state-attribute contract is not implemented here.
useSwatchPickerBase_unstabledoes not emitdata-layoutordata-focus-mode, and this wrapper only adds navigation props; similarly, the direct Color/Empty wrappers never emit the advertiseddata-selected/data-disabledattributes. Consumers therefore cannot use the styling API promised by the PR andSwatchPickerDescription.md. Please decorate each affected base state, extend the corresponding state types, and assert these attributes in the component tests.
change/@fluentui-react-headless-components-preview-931596e2-bc46-4837-a7cc-db12b9edd5cd.json:3 - Beachball comments should omit the conventional-commit prefix because
packageNameon line 4 already supplies the package context. Keep the release-note text as the user-facing change description only.
"comment": "feat: add swatch picker components",
packages/react-components/react-headless-components-preview/library/src/hooks/useGridNavigation/useGridNavigation.ts:201
- Navigation keys are only canceled when a destination is found. At a non-circular boundary, in a single-cell grid, or when the target column has no enabled cell, ArrowUp/ArrowDown/Home/End retain their browser default and can scroll the page while focus remains in the grid. Cancel recognized navigation keys once a valid current cell is found, regardless of whether focus moves.
Dmytro Kirpa (dmytrokirpa)
force-pushed
the
feat/headless-swatch-picker
branch
from
August 7, 2026 10:05
697f3cb to
ae8dc79
Compare
|
Pull request demo site: URL |
|
|
||
| if (focusMode === 'arrow') { | ||
| // eslint-disable-next-line react-hooks/immutability | ||
| baseState.root['focusgroup'] = baseState.isGrid ? 'grid' : 'radiogroup'; |
Contributor
Author
There was a problem hiding this comment.
depends on microsoft/polyfills#64, if that won't be merged we need to revert the grid part and replace it with Tabster hook
| @@ -0,0 +1,54 @@ | |||
| export { | |||
| // SwatchPicker | |||
Contributor
There was a problem hiding this comment.
these comments are not useful, let's omit them
|
|
||
| Use `ColorSwatch`, `ImageSwatch`, and `EmptySwatch` as children of `SwatchPicker`. Give the picker | ||
| an accessible name and give each swatch an accessible name. The headless components expose | ||
| `data-layout`, `data-focus-mode`, `data-selected`, and `data-disabled` for styling behavior. |
Contributor
There was a problem hiding this comment.
aren't we missing data-layout and data-focus-mode?
| ], | ||
| ]; | ||
|
|
||
| export const Grid = (): React.ReactNode => { |
Contributor
There was a problem hiding this comment.
I've tried in deployed SB and could not navigate with arrow keys in any axes, only by tabbing
Contributor
Author
There was a problem hiding this comment.
| ); | ||
| }); | ||
|
|
||
| it('uses focusgroup for arrow navigation in a row', () => { |
Contributor
There was a problem hiding this comment.
let's also add to SB the polyfill notice, similar to TabList:
Comment on lines
+1
to
+7
| import type { | ||
| ImageSwatchBaseProps, | ||
| ImageSwatchBaseState, | ||
| ImageSwatchSlots as ImageSwatchBaseSlots, | ||
| } from '@fluentui/react-swatch-picker'; | ||
|
|
||
| export type ImageSwatchProps = ImageSwatchBaseProps; |
Contributor
There was a problem hiding this comment.
Suggested change
| import type { | |
| ImageSwatchBaseProps, | |
| ImageSwatchBaseState, | |
| ImageSwatchSlots as ImageSwatchBaseSlots, | |
| } from '@fluentui/react-swatch-picker'; | |
| export type ImageSwatchProps = ImageSwatchBaseProps; | |
| import type { | |
| ImageSwatchBaseState, | |
| ImageSwatchSlots as ImageSwatchBaseSlots, | |
| } from '@fluentui/react-swatch-picker'; | |
| export type { ImageSwatchBaseProps as ImageSwatchProps } from '@fluentui/react-swatch-picker'; | |
Comment on lines
+58
to
+72
| red.focus(); | ||
| expect(yellow).toHaveAttribute('tabindex', '-1'); | ||
|
|
||
| fireEvent.keyDown(red, { key: 'ArrowRight' }); | ||
| expect(yellow).toHaveFocus(); | ||
|
|
||
| fireEvent.keyDown(yellow, { key: 'ArrowDown' }); | ||
| expect(violet).toHaveFocus(); | ||
|
|
||
| fireEvent.keyDown(violet, { key: 'ArrowRight' }); | ||
| expect(red).toHaveFocus(); | ||
|
|
||
| fireEvent.keyDown(red, { key: 'ArrowUp' }); | ||
| expect(green).toHaveFocus(); | ||
| }); |
Contributor
There was a problem hiding this comment.
q: shouldn't we use userEvent here instead of fireEvent? userEvent dispatches the events like they would happen if a user interacted with the document
Dmytro Kirpa (dmytrokirpa)
force-pushed
the
feat/headless-swatch-picker
branch
from
August 8, 2026 13:31
a9592be to
d438344
Compare
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.
Motivation
Add an unstyled SwatchPicker family to
@fluentui/react-headless-components-preview. The controls reuse the state and interaction behavior extracted in #36534 while leaving layout and visual treatment to consumers.Changes
SwatchPicker,SwatchPickerRow,ColorSwatch,ImageSwatch, andEmptySwatchcomponents@fluentui/react-swatch-pickerbase hooks and shared contextswatch-pickerpackage entry pointReview guidance
Review this PR relative to
feat/swatch-picker-headless-base. The component layer intentionally adds no Griffel styles; story styles are consumer examples only.Validation
yarn nx run-many -t lint test type-check bundle-size -p react-headless-components-preview --nxBailPR stack
Depends on #36534 and should be merged last.