This is an overview issue to track all of the tasks necessary to refine the color-related components, especially in the context of using it in the updated Global Styles Sidebar.
Context
To visualize this, there are some good mockups in #34574 that illustrate the behavior above. Instead of duplicating all available color palettes for each a single item in a group is shown as a swatch plus a label:
Click an item in the group drills down to a dedicated subpanel showing all available color tools:
Here's an additional mockup that shows how the full flow for collapsible color swatches could work when used in editor inspector panels:
Please note that the precise visuals are subject to change per further work in #34574, so definitely defer to that ticket as the source of truth.
Essentially, multiple color properties are grouped together in an ItemGroup, as swatch+label.
- In global styles, clicking the swatch+label item slides the inspector and shows all palettes and color tools.
- In editor inspectors, clicking the swatch+label item opens a popover that shows all palettes and color tools. This popover has two states, showing the palette and then showing the color tool.
Next steps
Note: This issue should be considered a draft, and will eventually supersede #33820
ColorSwatch
For more context of the conversation leading to ColorSwatch & more, see #33820.
ColorPicker
Please refer to #34284 for the work related to the updated ColorPicker component
Higher-level color components
With the new ColorSwatch and ColorPicker components, we're going to be able to look at higher-level color components (currently ColorPalette, CircularOptionPicker...)
We will need to reassess the new needs that these components need to fulfil. For example, the custom color and clear/reset features of ColorPalette may be assumed by other components (like the newly introduced ToolsPanel). And rather than rendering a palette of color options directly in the sidebar, we’ll be moving toward using ItemGroup to group color attributes. In Global Styles, clicking an Item will drill down to another sheet displaying the available color options and related components. In block sidebars, this action will likely result in a popover with similar controls.
ColorPalette
Gradient Picker & related
This is an overview issue to track all of the tasks necessary to refine the color-related components, especially in the context of using it in the updated Global Styles Sidebar.
Context
To visualize this, there are some good mockups in #34574 that illustrate the behavior above. Instead of duplicating all available color palettes for each a single item in a group is shown as a swatch plus a label:
Click an item in the group drills down to a dedicated subpanel showing all available color tools:
Here's an additional mockup that shows how the full flow for collapsible color swatches could work when used in editor inspector panels:
Please note that the precise visuals are subject to change per further work in #34574, so definitely defer to that ticket as the source of truth.
Essentially, multiple color properties are grouped together in an ItemGroup, as swatch+label.
Next steps
Note: This issue should be considered a draft, and will eventually supersede #33820
ColorSwatchFor more context of the conversation leading to
ColorSwatch& more, see #33820.ColorSwatchcomponentisInteractiveprop vs two separate componentsColorIndicatorto useColorSwatchinternallyCircularOptionPicker.Optionto useColorSwatchinternallyColorPickerPlease refer to #34284 for the work related to the updated
ColorPickercomponentHigher-level color components
With the new
ColorSwatchandColorPickercomponents, we're going to be able to look at higher-level color components (currentlyColorPalette,CircularOptionPicker...)We will need to reassess the new needs that these components need to fulfil. For example, the custom color and clear/reset features of
ColorPalettemay be assumed by other components (like the newly introducedToolsPanel). And rather than rendering a palette of color options directly in the sidebar, we’ll be moving toward usingItemGroupto group color attributes. In Global Styles, clicking an Item will drill down to another sheet displaying the available color options and related components. In block sidebars, this action will likely result in a popover with similar controls.ColorPaletteGradient Picker & related