Skip to content

feat(react-headless-components-preview): add color picker controls - #36518

Open
dmytrokirpa wants to merge 3 commits into
feat/color-picker-headless-basefrom
feat/headless-color-picker
Open

feat(react-headless-components-preview): add color picker controls#36518
dmytrokirpa wants to merge 3 commits into
feat/color-picker-headless-basefrom
feat/headless-color-picker

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Motivation

Add an unstyled color picker family to @fluentui/react-headless-components-preview. The controls reuse the state and interaction behavior extracted in #36517 while leaving layout and visual treatment to consumers.

Changes

  • add headless ColorPicker, ColorArea, ColorSlider, and AlphaSlider components
  • compose the controls from @fluentui/react-color-picker base hooks and the shared color picker context
  • expose state through DOM data attributes such as data-channel, data-orientation, and data-transparency for consumer styling
  • support both coordinated use inside ColorPicker and standalone controlled or uncontrolled controls
  • export the component family through the single color-picker package entry point and update the API report
  • add conformance and behavior tests for the new component family
  • add Storybook examples demonstrating composed and standalone usage
  • include the controls in the bundle-size fixture
  • add the package dependency, lockfile update, and minor changefile for @fluentui/react-headless-components-preview

Review guidance

This PR should be reviewed relative to feat/color-picker-headless-base, not master. The component layer intentionally adds no Griffel styles; the stories provide example consumer styling only. The most relevant areas are the base-hook composition, the shared package entry point, native range-input semantics, and context coordination.

Validation

  • yarn nx run-many -t lint test -p react-headless-components-preview --nxBail
  • 70 test suites passed

PR stack

  1. feat(react-color-picker): expose headless base APIs #36517: expose reusable color picker base APIs
  2. This PR: add the headless color picker controls

Depends on #36517 and should be merged after it.

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown

Pull request demo site: URL

@dmytrokirpa
dmytrokirpa force-pushed the feat/headless-color-picker branch from e3cecd2 to d0b754b Compare August 5, 2026 20:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant