Component: Color Palette/Picker

[ravichdev]

Feature description

Related to #9

Extend Gutenberg color palette component to show all Material color palettes and adjust styles to show all material shades of a color in a single row.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The color picker uses the default core component as its base, and adds a few additional style changes.
• The tooltip description will show the color name, such as Pink 400, instead of the hex.
• This color picker will be used in Blocks (such as Button) where choosing a material color is preferred over the default settings.
• Custom color will default to the color picker in Gutenberg.

Implementation brief

• Extend Gutenberg ColorPalette component with colors set as material colors
• Update styles to show all colors in a shade in a single row

QA testing instructions

Demo

Changelog entry

[ravichdev]

@jwold Material Color Palette with scroll, if we limit the height to around 200px we see these scroll bars, but if we dont specify height the colors seem to be too long. Your thoughts ?

[jwold]

@ravichdev I agree that we should limit height. 200px feels like a good height for now.

[derekherman]

@ravichdev and @jwold let's update the issue with all the info i.e. QA testing instructions, Demo, and Changelog entry before merging the PRs.

[jwold]

I've updated the Acceptance Criteria for this subtask to be specific to the Color Picker.

[ravichdev]

@jwold Most of the color palette is re-written to look like the design shared in the main issue. Just a minor change is showing the color palette in a dropdown (similar to how the color picker) is showed so it's consistent with the color picker behavior.