feat: add tag badge to palette picker (elastic#8208)

Co-authored-by: Lene Gadewoll <[email protected]>
cee-chen · Feb 10, 2025 · 726b4d8 · 726b4d8
1 parent c0fcab1
commit 726b4d8
Show file tree

Hide file tree

Showing 10 changed files with 233 additions and 54 deletions.
diff --git a/...e_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/...e_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png
diff --git a/...me_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/...me_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png
diff --git a/packages/eui/changelogs/upcoming/8208.md b/packages/eui/changelogs/upcoming/8208.md
@@ -0,0 +1 @@
+- Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title
diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js b/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js
@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import { css } from '@emotion/react';
+
 import {
   euiPaletteColorBlind,
   euiPaletteForStatus,
@@ -10,32 +12,50 @@ import {
   EuiSpacer,
   EuiCode,
   EuiColorPalettePicker,
+  EuiText,
+  EuiFlexGroup,
 } from '../../../../src/components/';
 
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-const palettes = [
+/** Text wrapper to remove text-decoration on appended text */
+const AppendedTitleText = ({ label }) => (
+  <EuiText color="subdued" size="xs">
+    <span
+      css={css`
+        display: inline-block;
+      `}
+    >
+      {label}
+    </span>
+  </EuiText>
+);
+
+const getPalettes = (appendTitles) => [
   {
     value: 'pallette_1',
-    title: 'EUI color blind (fixed)',
+    title: 'EUI color blind',
     palette: euiPaletteColorBlind(),
+    append: appendTitles && <AppendedTitleText label="fixed" />,
     type: 'fixed',
   },
   {
     value: 'pallette_2',
-    title: 'EUI palette for status (gradient)',
+    title: 'EUI palette for status',
     palette: euiPaletteForStatus(5),
+    append: appendTitles && <AppendedTitleText label="gradient" />,
     type: 'gradient',
   },
   {
     value: 'pallette_3',
-    title: 'EUI palette for temperature (fixed)',
+    title: 'EUI palette for temperature',
     palette: euiPaletteForTemperature(5),
+    append: appendTitles && <AppendedTitleText label="fixed" />,
     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 && <AppendedTitleText label="gradient with stops" />,
     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 && <AppendedTitleText label="fixed with stops" />,
     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 (
     <>
-      <EuiSwitch
-        label={
-          <span>
-            Display selected item as a <EuiCode>title</EuiCode>
-          </span>
-        }
-        checked={selectionDisplay}
-        onChange={() => setSelectionDisplay(!selectionDisplay)}
-      />
+      <EuiFlexGroup>
+        <EuiSwitch
+          label={
+            <span>
+              Display selected item as a <EuiCode>title</EuiCode>
+            </span>
+          }
+          checked={selectionDisplay}
+          onChange={() => setSelectionDisplay(!selectionDisplay)}
+        />
+        <EuiSwitch
+          label={
+            <span>
+              Display <EuiCode>append</EuiCode> element on title
+            </span>
+          }
+          checked={showAppendedTitles}
+          onChange={() => setShowAppendedTitles(!showAppendedTitles)}
+        />
+      </EuiFlexGroup>
       <EuiSpacer />
       <DisplayToggles canPrepend={true} canAppend={true} canReadOnly={false}>
         <EuiColorPalettePicker
-          palettes={palettes}
+          palettes={getPalettes(showAppendedTitles)}
           onChange={setPallette}
           valueOfSelected={pallette}
           selectionDisplay={selectionDisplay ? 'title' : 'palette'}

diff --git a/packages/eui/src-docs/src/views/color_picker/color_picker_example.js b/packages/eui/src-docs/src/views/color_picker/color_picker_example.js
@@ -265,6 +265,12 @@ export const ColorPickerExample = {
               palettes for categorical data and <EuiCode>gradient</EuiCode>{' '}
               palettes for continuous data.
             </p>
+            <p>
+              Each of the <EuiCode>palettes</EuiCode>, excluding{' '}
+              <EuiCode>type='text'</EuiCode> palettes, can use the{' '}
+              <EuiCode>append</EuiCode> prop to append an element to the right
+              of the title.
+            </p>
           </EuiText>
         </>
       ),

diff --git 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/...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/...onents/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"
                   >
                     <div
-                      aria-hidden="true"
-                      class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                      class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
                     >
-                      Palette 1
+                      <div
+                        class="euiFlexItem emotion-euiFlexItem-grow-1"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                        >
+                          Palette 1
+                        </div>
+                      </div>
                     </div>
                     <div
                       class="euiSpacer euiSpacer--xs emotion-euiSpacer-xs"
@@ -487,10 +495,18 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
                     class="euiColorPalettePicker__item"
                   >
                     <div
-                      aria-hidden="true"
-                      class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                      class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
                     >
-                      Linear Gradient
+                      <div
+                        class="euiFlexItem emotion-euiFlexItem-grow-1"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                        >
+                          Linear Gradient
+                        </div>
+                      </div>
                     </div>
                     <div
                       class="euiSpacer euiSpacer--xs emotion-euiSpacer-xs"
@@ -527,10 +543,18 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
                     class="euiColorPalettePicker__item"
                   >
                     <div
-                      aria-hidden="true"
-                      class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                      class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
                     >
-                      Linear Gradient with stops
+                      <div
+                        class="euiFlexItem emotion-euiFlexItem-grow-1"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="euiText euiColorPalettePicker__itemTitle emotion-euiText-xs"
+                        >
+                          Linear Gradient with stops
+                        </div>
+                      </div>
                     </div>
                     <div
                       class="euiSpacer euiSpacer--xs emotion-euiSpacer-xs"

diff --git a/...ges/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx b/...ges/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx
@@ -6,14 +6,20 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fireEvent, waitFor } from '@storybook/test';
 
-import { euiPaletteColorBlind } from '../../../services';
+import { within } from '../../../../.storybook/test';
+import { LOKI_SELECTORS } from '../../../../.storybook/loki';
+import { euiPaletteColorBlind, euiPaletteForStatus } from '../../../services';
 
 import {
   EuiColorPalettePicker,
   EuiColorPalettePickerProps,
 } from './color_palette_picker';
+import { EuiText } from '../../text';
 
 const meta: Meta<EuiColorPalettePickerProps<string>> = {
   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: (
+          <EuiText color="subdued" size="xs">
+            <span
+              css={css`
+                display: inline-block;
+              `}
+            >
+              Default
+            </span>
+          </EuiText>
+        ),
+        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
@@ -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.
                 <>
-                  <EuiText
-                    aria-hidden="true"
-                    className="euiColorPalettePicker__itemTitle"
-                    size="xs"
-                  >
-                    {title}
-                  </EuiText>
+                  <EuiFlexGroup responsive={false}>
+                    <EuiFlexItem>
+                      <EuiText
+                        aria-hidden="true"
+                        className="euiColorPalettePicker__itemTitle"
+                        size="xs"
+                      >
+                        {title}
+                      </EuiText>
+                    </EuiFlexItem>
+                    {append && <EuiFlexItem grow={0}>{append}</EuiFlexItem>}
+                  </EuiFlexGroup>
                   <EuiSpacer size="xs" />
                 </>
               )}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title