feat: add append option to palette picker options

packages/eui/changelogs/upcoming/8208.md

@@ -0,0 +1 @@
+- Updated `EuiColorPalettePicker` `title` prop to support `ReactNode`.

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,

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx

@@ -6,14 +6,17 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { euiPaletteColorBlind } from '../../../services';
+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,6 +51,63 @@ export const Playground: Story = {
         palette: euiPaletteColorBlind(),
         type: 'fixed',
       },
+      {
+        value: 'palette2',
+        title: 'Palette 2',
+        palette: euiPaletteForStatus(10),
+        type: 'gradient',
+      },
+    ],
+    valueOfSelected: 'palette1',
+  },
+};
+
+export const CustomTitles: Story = {
+  argTypes: {
+    palettes: {
+      control: false,
+    },
+  },
+  args: {
+    palettes: [
+      {
+        value: 'palette1',
+        title: (
+          <div
+            css={({ euiTheme }) => css`
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: space-between;
+              gap: ${euiTheme.size.xs};
+            `}
+          >
+            <EuiText aria-hidden="true" size="xs">
+              Elastic
+            </EuiText>
+            <EuiText
+              css={css`
+                text-decoration: none;
+                // breaks flow to prevent parent text-decoration
+                float: left;
+                clear: both;
+              `}
+              color="subdued"
+              size="xs"
+            >
+              Default
+            </EuiText>
+          </div>
+        ),
+        palette: euiPaletteColorBlind(),
+        type: 'fixed',
+      },
+      {
+        value: 'pallette2',
+        title: 'Status',
+        palette: euiPaletteForStatus(10),
+        type: 'gradient',
+      },
     ],
     valueOfSelected: 'palette1',
   },

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';
@@ -31,7 +36,7 @@ export interface EuiColorPalettePickerPaletteTextProps extends CommonProps {
   /**
    *  The name of your palette
    */
-  title: string;
+  title: NonNullable<ReactNode>;
   /**
    * `text`: a text only option (a title is required).
    */
@@ -50,7 +55,7 @@ export interface EuiColorPalettePickerPaletteFixedProps extends CommonProps {
   /**
    *  The name of your palette
    */
-  title?: string;
+  title: ReactNode;
   /**
    * `fixed`: individual color blocks
    */
@@ -69,7 +74,7 @@ export interface EuiColorPalettePickerPaletteGradientProps extends CommonProps {
   /**
    *  The name of your palette
    */
-  title?: string;
+  title: ReactNode;
   /**
    * `gradient`: each color fades into the next
    */
@@ -127,7 +132,11 @@ export const EuiColorPalettePicker: FunctionComponent<
       | EuiColorPalettePickerPaletteFixedProps
       | EuiColorPalettePickerPaletteGradientProps) => {
       return (
-        <EuiColorPaletteDisplay type={type} palette={palette} title={title} />
+        <EuiColorPaletteDisplay
+          type={type}
+          palette={palette}
+          title={typeof title === 'string' ? title : undefined}
+        />
       );
     },
     []
@@ -153,13 +162,17 @@ 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>
+                  {typeof title !== 'string' ? (
+                    title
+                  ) : (
+                    <EuiText
+                      aria-hidden="true"
+                      className="euiColorPalettePicker__itemTitle"
+                      size="xs"
+                    >
+                      {title}
+                    </EuiText>
+                  )}
                   <EuiSpacer size="xs" />
                 </>
               )}