feat: add append option to palette picker options

packages/eui/changelogs/upcoming/8208.md

@@ -0,0 +1 @@
+- Updated `EuiColorPalettePicker` - Adds `append` prop to support appending `ReactNode` to right of title.

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,51 @@ 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: 'Elastic',
+        append: (
+          <EuiText
+            css={css`
+              text-decoration: none;
+              // breaks flow to prevent parent text-decoration
+              float: left;
+              clear: both;
+            `}
+            color="subdued"
+            size="xs"
+          >
+            Default
+          </EuiText>
+        ),
+        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';
@@ -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,7 @@ export interface EuiColorPalettePickerPaletteTextProps extends CommonProps {
    *  The name of your palette
    */
   title: string;
+  append?: never;
   /**
    * `text`: a text only option (a title is required).
    */
@@ -50,7 +57,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 +80,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 +151,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 +168,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>
+                    <EuiFlexItem>
+                      <EuiText
+                        aria-hidden="true"
+                        className="euiColorPalettePicker__itemTitle"
+                        size="xs"
+                      >
+                        {title}
+                      </EuiText>
+                    </EuiFlexItem>
+                    {append && <EuiFlexItem grow={0}>{append}</EuiFlexItem>}
+                  </EuiFlexGroup>
                   <EuiSpacer size="xs" />
                 </>
               )}