IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

UI Docs: ColorPicker component group (#23366)

Browse Source 
* 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>
This commit is contained in:
Jess 2020-04-23 10:50:24 +02:00 committed by GitHub
parent fe28e2a6b1
commit 3eddce3258
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx Normal file
View File

@ -0,0 +1,11 @@
import { Meta } from '@storybook/addon-docs/blocks';
<Meta title="General/ColorPicker/ColorPicker"/>
# 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`.