From 726b4d820cd6526069ef6c48d1c5c905a4c67031 Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Thu, 16 Jan 2025 03:20:14 -0700 Subject: [PATCH] feat: add tag badge to palette picker (#8208) Co-authored-by: Lene Gadewoll --- ..._EuiColorPalettePicker_Appended_Titles.png | Bin 0 -> 9647 bytes ..._EuiColorPalettePicker_Appended_Titles.png | Bin 0 -> 20894 bytes packages/eui/changelogs/upcoming/8208.md | 1 + .../color_picker/color_palette_picker.js | 66 +++++++++++++----- .../color_picker/color_picker_example.js | 6 ++ .../eui/src/components/badge/badge.styles.ts | 2 +- .../color_palette_picker.test.tsx.snap | 42 ++++++++--- .../color_palette_picker.stories.tsx | 60 +++++++++++++++- .../color_palette_picker.tsx | 45 +++++++++--- .../docs/components/forms/color_selection.mdx | 65 ++++++++++++----- 10 files changed, 233 insertions(+), 54 deletions(-) create mode 100644 packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png create mode 100644 packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png create mode 100644 packages/eui/changelogs/upcoming/8208.md diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png new file mode 100644 index 0000000000000000000000000000000000000000..95666f47c1b31b3c54ebc394530673e6a68e2c15 GIT binary patch literal 9647 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 W5k2-$ut6^*1TnvPx%`q# ( + + + {label} + + +); + +const getPalettes = (appendTitles) => [ { value: 'pallette_1', - title: 'EUI color blind (fixed)', + title: 'EUI color blind', palette: euiPaletteColorBlind(), + append: appendTitles && , type: 'fixed', }, { value: 'pallette_2', - title: 'EUI palette for status (gradient)', + title: 'EUI palette for status', palette: euiPaletteForStatus(5), + append: appendTitles && , type: 'gradient', }, { value: 'pallette_3', - title: 'EUI palette for temperature (fixed)', + title: 'EUI palette for temperature', palette: euiPaletteForTemperature(5), + append: appendTitles && , type: 'fixed', }, { value: 'pallette_4', - title: 'Grayscale (gradient with stops)', + title: 'Grayscale', palette: [ { stop: 100, @@ -54,11 +74,12 @@ const palettes = [ color: 'black', }, ], + append: appendTitles && , type: 'gradient', }, { value: 'pallette_5', - title: 'Grayscale (fixed with stops)', + title: 'Grayscale', palette: [ { stop: 100, @@ -77,6 +98,7 @@ const palettes = [ color: 'black', }, ], + append: appendTitles && , type: 'fixed', }, { @@ -88,23 +110,35 @@ const palettes = [ export default () => { const [selectionDisplay, setSelectionDisplay] = useState(false); + const [showAppendedTitles, setShowAppendedTitles] = useState(false); const [pallette, setPallette] = useState('pallette_1'); return ( <> - - Display selected item as a title - - } - checked={selectionDisplay} - onChange={() => setSelectionDisplay(!selectionDisplay)} - /> + + + Display selected item as a title + + } + checked={selectionDisplay} + onChange={() => setSelectionDisplay(!selectionDisplay)} + /> + + Display append element on title + + } + checked={showAppendedTitles} + onChange={() => setShowAppendedTitles(!showAppendedTitles)} + /> + gradient{' '} palettes for continuous data.

+

+ Each of the palettes, excluding{' '} + type='text' palettes, can use the{' '} + append prop to append an element to the right + of the title. +

), diff --git a/packages/eui/src/components/badge/badge.styles.ts b/packages/eui/src/components/badge/badge.styles.ts index 8704c3bb734..c1f21d2a602 100644 --- a/packages/eui/src/components/badge/badge.styles.ts +++ b/packages/eui/src/components/badge/badge.styles.ts @@ -44,7 +44,7 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => { font-weight: ${euiTheme.font.weight.medium}; white-space: nowrap; text-decoration: none; - cursor: default; + cursor: inherit; border: ${euiTheme.border.width.thin} solid transparent; border-radius: ${mathWithUnits( euiTheme.border.radius.medium, diff --git a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap index 2bbfe75acb0..5f7e58d6f02 100644 --- a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap +++ b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -427,10 +427,18 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = ` class="euiColorPalettePicker__item" >
> = { title: 'Forms/EuiColorPalettePicker/EuiColorPalettePicker', @@ -48,7 +54,59 @@ export const Playground: Story = { palette: euiPaletteColorBlind(), type: 'fixed', }, + { + value: 'palette2', + title: 'Palette 2', + palette: euiPaletteForStatus(10), + type: 'gradient', + }, + ], + valueOfSelected: 'palette1', + }, +}; + +export const AppendedTitles: Story = { + parameters: { + controls: { include: ['palettes', 'valueOfSelected'] }, + loki: { + chromeSelector: LOKI_SELECTORS.portal, + }, + }, + args: { + palettes: [ + { + value: 'palette1', + title: 'Elastic', + append: ( + + + Default + + + ), + palette: euiPaletteColorBlind(), + type: 'fixed', + }, + { + value: 'pallette2', + title: 'Status', + palette: euiPaletteForStatus(10), + type: 'gradient', + }, ], valueOfSelected: 'palette1', }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + await step('show popover on click', async () => { + await waitFor(async () => { + await fireEvent.click(canvas.getByRole('button')); + }); + await canvas.waitForEuiPopoverVisible(); + }); + }, }; diff --git a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 86f91dfe5e0..7c7fbddf573 100644 --- a/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -6,7 +6,12 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, useCallback, useMemo } from 'react'; +import React, { + FunctionComponent, + ReactNode, + useCallback, + useMemo, +} from 'react'; import { CommonProps } from '../../common'; import { EuiSpacer } from '../../spacer'; @@ -17,6 +22,7 @@ import { } from '../../form/super_select'; // Note: needs to be pointed at this specific subdir for Storybook to inherit types correctly?? import { EuiColorPaletteDisplay } from '../color_palette_display'; +import { EuiFlexGroup, EuiFlexItem } from '../../flex'; export interface PaletteColorStop { stop: number; @@ -32,6 +38,10 @@ export interface EuiColorPalettePickerPaletteTextProps extends CommonProps { * The name of your palette */ title: string; + /** + * Node appended to right of title - disallowed for text-only options + */ + append?: never; /** * `text`: a text only option (a title is required). */ @@ -50,7 +60,11 @@ export interface EuiColorPalettePickerPaletteFixedProps extends CommonProps { /** * The name of your palette */ - title?: string; + title: string; + /** + * Node appended to right of title + */ + append?: ReactNode; /** * `fixed`: individual color blocks */ @@ -69,7 +83,11 @@ export interface EuiColorPalettePickerPaletteGradientProps extends CommonProps { /** * The name of your palette */ - title?: string; + title: string; + /** + * Node appended to right of title + */ + append?: ReactNode; /** * `gradient`: each color fades into the next */ @@ -136,7 +154,7 @@ export const EuiColorPalettePicker: FunctionComponent< const paletteOptions = useMemo( () => palettes.map((item: EuiColorPalettePickerPaletteProps) => { - const { type, value, title, palette, ...rest } = item; + const { type, value, title, append, palette, ...rest } = item; const paletteForDisplay = item.type !== 'text' ? getPalette(item) : null; @@ -153,13 +171,18 @@ export const EuiColorPalettePicker: FunctionComponent< // color_palette_display_gradient. Adding the aria-hidden attribute // here to ensure screen readers don't speak the listbox options twice. <> - + + + + + {append && {append}} + )} diff --git a/packages/website/docs/components/forms/color_selection.mdx b/packages/website/docs/components/forms/color_selection.mdx index d3a56659869..02d57a1f8c4 100644 --- a/packages/website/docs/components/forms/color_selection.mdx +++ b/packages/website/docs/components/forms/color_selection.mdx @@ -35,6 +35,8 @@ Use **EuiColorPalettePicker** to select palettes to apply colors to data visuali Use the `palettes` prop to pass your palettes as an array `strings` or an array of `ColorStops` in the form of `{ stop: number, color: string }`. For each object, you should pass a palette (array of hex values) and specify the `type`. Use `fixed` palettes for categorical data and `gradient` palettes for continuous data. +Each of the `palettes`, excluding `type='text'` palettes, can use the `append` prop to append an element to the right of the title. + ```tsx interactive import React, { useState } from 'react'; import { @@ -45,30 +47,34 @@ import { EuiSpacer, EuiCode, EuiColorPalettePicker, + EuiFlexGroup } from '@elastic/eui'; -const palettes = [ +const getPalettes = (appendTitles) => [ { value: 'pallette_1', - title: 'EUI color blind (fixed)', + title: 'EUI color blind', palette: euiPaletteColorBlind(), + append: appendTitles && , type: 'fixed', }, { value: 'pallette_2', - title: 'EUI palette for status (gradient)', + title: 'EUI palette for status', palette: euiPaletteForStatus(5), + append: appendTitles && , type: 'gradient', }, { value: 'pallette_3', - title: 'EUI palette for temperature (fixed)', + title: 'EUI palette for temperature', palette: euiPaletteForTemperature(5), + append: appendTitles && , type: 'fixed', }, { value: 'pallette_4', - title: 'Grayscale (gradient with stops)', + title: 'Grayscale', palette: [ { stop: 100, @@ -87,11 +93,12 @@ const palettes = [ color: 'black', }, ], + append: appendTitles && , type: 'gradient', }, { value: 'pallette_5', - title: 'Grayscale (fixed with stops)', + title: 'Grayscale', palette: [ { stop: 100, @@ -110,6 +117,7 @@ const palettes = [ color: 'black', }, ], + append: appendTitles && , type: 'fixed', }, { @@ -119,25 +127,50 @@ const palettes = [ }, ]; +/** Text wrapper to remove text-decoration on appended text */ +const AppendedTitleText = ({ label }) => ( + + + {label} + + +); + export default () => { const [selectionDisplay, setSelectionDisplay] = useState(false); + const [showAppendedTitles, setShowAppendedTitles] = useState(false); const [pallette, setPallette] = useState('pallette_1'); return ( <> - - Display selected item as a title - - } - checked={selectionDisplay} - onChange={() => setSelectionDisplay(!selectionDisplay)} - /> + + + Display selected item as a title + + } + checked={selectionDisplay} + onChange={() => setSelectionDisplay(!selectionDisplay)} + /> + + Display append element on title + + } + checked={showAppendedTitles} + onChange={() => setShowAppendedTitles(!showAppendedTitles)} + /> +