diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ce69820493..b5e575739b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783)) - Added optional `key` attribute to `EuiContextMenu` items and relaxed `name` attribute to allow any React node ([#2817](https://github.com/elastic/eui/pull/2817)) - Converted `EuiColorPicker` color conversion functions to `chroma-js` methods ([#2805](https://github.com/elastic/eui/pull/2805)) +- Added `direction` parameter to `euiPaletteColorBlind()` for specifiying lighter or darker (or both) alternates ([#2822](https://github.com/elastic/eui/pull/2822)) **Bug fixes** diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index c3bdfdf858a..65b6c77ecca 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/src-docs/src/views/color_palette/color_palette.js @@ -19,21 +19,24 @@ const customPalettes = [ { title: 'Max 10 colors', palette: euiPaletteColorBlind(), + code: 'euiPaletteColorBlind()', }, { title: 'More than 10 colors are needed', palette: euiPaletteColorBlind(2), + code: 'euiPaletteColorBlind(2)', }, { title: - 'Series have multiple metrics and so the colors must coordinate but be distinguishable', - palette: euiPaletteColorBlind(3, 'group'), + 'Series may have multiple metrics and so the colors must coordinate but be distinguishable', + palette: euiPaletteColorBlind(3, 'group', 'both'), + code: "euiPaletteColorBlind(3, 'group', 'both')", }, ]; export default () => ( - {customPalettes.map((palette, i) => ( + {customPalettes.map(palette => (

{palette.title}

@@ -57,14 +60,7 @@ export default () => ( - 0 ? i + 1 : ''}${ - i > 1 ? ", 'group'" : '' - })`} - code={`euiPaletteColorBlind(${i > 0 ? i + 1 : ''}${ - i > 1 ? ", 'group'" : '' - })`} - /> + diff --git a/src-docs/src/views/color_palette/color_palette_example.js b/src-docs/src/views/color_palette/color_palette_example.js index 0c9198dd5ec..ba0876bce2c 100644 --- a/src-docs/src/views/color_palette/color_palette_example.js +++ b/src-docs/src/views/color_palette/color_palette_example.js @@ -4,6 +4,7 @@ import { Link } from 'react-router'; import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; +import { qualitativePropsInfo, palettePropsInfo } from './props_info'; import { EuiCode, @@ -74,7 +75,11 @@ export const ColorPaletteExample = { ), demo: , - snippet: ['euiPaletteColorBlind()', "euiPaletteColorBlind(3, 'group')"], + snippet: [ + 'euiPaletteColorBlind()', + "euiPaletteColorBlind(3, 'group', 'both)", + ], + props: qualitativePropsInfo, }, { title: 'Recommended quantitative palettes', @@ -139,6 +144,7 @@ export const ColorPaletteExample = { "colorPalette(['#fff'. '#000'], 11);", "colorPalette(['#fff'. '#000'], 11, divergent = true);", ], + props: palettePropsInfo, }, ], }; diff --git a/src-docs/src/views/color_palette/props_info.js b/src-docs/src/views/color_palette/props_info.js new file mode 100644 index 00000000000..58b01ae8bcc --- /dev/null +++ b/src-docs/src/views/color_palette/props_info.js @@ -0,0 +1,61 @@ +export const qualitativePropsInfo = { + euiPaletteColorBlind: { + __docgenInfo: { + props: { + rotations: { + description: 'How many variations of the series is needed', + required: false, + type: { name: 'number' }, + defaultValue: { value: '1' }, + }, + order: { + description: + 'Order similar colors as `group`s or just `append` each variation', + required: false, + type: { name: "'append' | 'group'" }, + defaultValue: { value: "'append'" }, + }, + direction: { + description: 'Specifies if the direction of the color variations', + required: false, + type: { name: "'lighter' | 'darker' | 'both'" }, + defaultValue: { value: "'lighter'" }, + }, + }, + }, + }, +}; + +export const palettePropsInfo = { + colorPalette: { + __docgenInfo: { + props: { + colors: { + description: 'The main color code or array of codes', + required: true, + type: { name: 'string[]' }, + }, + len: { + description: 'The number of colors in the resulting array', + required: false, + type: { name: 'number' }, + defaultValue: { value: '10' }, + }, + diverging: { + description: + 'Forces color interpolation to be calculated separately for each half', + required: false, + type: { name: 'boolean' }, + defaultValue: { value: 'false' }, + }, + categorical: { + description: + 'Uses a more static interpolation for non-continuous spectrums', + required: false, + type: { name: 'boolean' }, + defaultValue: { value: 'false' }, + }, + }, + }, + }, +}; diff --git a/src-docs/src/views/color_palette/shared.js b/src-docs/src/views/color_palette/shared.js index 705753ddbe8..73bd93e6d01 100644 --- a/src-docs/src/views/color_palette/shared.js +++ b/src-docs/src/views/color_palette/shared.js @@ -25,7 +25,7 @@ export const ColorPaletteCopyCode = ({ textToCopy, code }) => { + textToCopy={textToCopy || code}> {copy => ( {code} diff --git a/src/services/color/color_palette.ts b/src/services/color/color_palette.ts index 30d32c16651..9c0d42f83a5 100644 --- a/src/services/color/color_palette.ts +++ b/src/services/color/color_palette.ts @@ -10,7 +10,7 @@ export const MID_COLOR_STOP = '#EBEFF5'; export function colorPalette( /** - * The beginning hexadecimal color code or array of codes + * The main color code or array of codes */ colors: string[], /** @@ -18,7 +18,7 @@ export function colorPalette( */ len: number = 10, /** - * Forces color interpolation to be calculated separately for each side (default false) + * Forces color interpolation to be calculated separately for each half (default false) */ diverging: boolean = false, /** diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index 8ade827a468..8136827cadb 100644 --- a/src/services/color/eui_palettes.ts +++ b/src/services/color/eui_palettes.ts @@ -8,16 +8,17 @@ export type EuiPalette = string[]; const euiPalette = function( colors: string[], steps: number, - diverge: boolean = false + diverge: boolean = false, + categorical: boolean = true ): EuiPalette { - // This function also trims the lightest color so white is never a color + // This function also trims the first color so white/black is never a color if (!diverge && steps > 1) { const palette = colorPalette(colors, steps + 1); palette.shift(); return palette; } - return colorPalette(colors, steps, diverge); + return colorPalette(colors, steps, diverge, categorical); }; export const euiPaletteColorBlind = function( @@ -28,7 +29,11 @@ export const euiPaletteColorBlind = function( /** * Order similar colors as `group`s or just `append` each variation */ - order: 'append' | 'group' = 'append' + order: 'append' | 'group' = 'append', + /** + * Specifies if the direction of the color variations + */ + direction: 'lighter' | 'darker' | 'both' = 'lighter' ): EuiPalette { let colors: string[] = []; @@ -46,9 +51,22 @@ export const euiPaletteColorBlind = function( ]; if (rotations > 1) { - const palettes = base.map(color => - euiPalette(['white', color], rotations).reverse() - ); + const palettes = base.map(color => { + // Create the darkest and lightest versions of each color using black and white + const palette = colorPalette(['black', color, 'white'], 5, false, true); + // Then removing the extremes + palette.pop(); + palette.shift(); + + switch (direction) { + case 'lighter': + return colorPalette([palette[1], palette[2]], rotations, false, true); + case 'darker': + return colorPalette([palette[1], palette[0]], rotations, false, true); + case 'both': + return colorPalette(palette, rotations, false, true); + } + }); if (order === 'group') { colors = flatten(palettes);