From 3eddce3258fbfb533ed77eaae4ff602ecf7209b4 Mon Sep 17 00:00:00 2001 From: Jess <53754871+jessover9000@users.noreply.github.com> Date: Thu, 23 Apr 2020 10:50:24 +0200 Subject: [PATCH] UI Docs: ColorPicker component group (#23366) * Create .mdx for ColorPicker component group Describes the building blocks of the component and how they work together. * Rename ColorPicker.mdx to ColorPicker.story.mdx * Update packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx Clean up tags Co-Authored-By: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> * Update packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx Co-Authored-By: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> --- .../src/components/ColorPicker/ColorPicker.story.mdx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx new file mode 100644 index 00000000000..71a7c29a8d0 --- /dev/null +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# ColorPicker + +The `ColorPicker` component group consists of several building blocks that are combined in Grafana to create the `ColorPicker`: popover, pickers and palettes. There are different combinations of these building blocks depending on where the `ColorPicker` is used in Grafana. + +The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are opimized to work well with both light and dark theme. `Popover` is triggered for example by the series legend of graphs, or by `Pickers`. + +The `Pickers` are single circular color fields that show the currently picked color. On click, they open the `Popover`.