feat: add tag badge to palette picker

packages/eui/src-docs/src/views/color_picker/color_palette_picker.js

@@ -18,6 +18,7 @@ const palettes = [
   {
     value: 'pallette_1',
     title: 'EUI color blind (fixed)',
+    tag: 'Default',
     palette: euiPaletteColorBlind(),
     type: 'fixed',
   },

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.styles.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { euiFontSize } from '../../../global_styling';
+
+export const euiPalettePickerStyles = (euiThemeContext: UseEuiTheme) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  return {
+    euiColorPalettePicker__itemTitleGroup: css`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: ${euiTheme.size.xs};
+    `,
+
+    euiColorPalettePicker__itemTag: css`
+      font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize};
+    `,
+  };
+};

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

@@ -17,6 +17,9 @@ 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 { EuiBadge } from '../../badge';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiPalettePickerStyles } from './color_palette_picker.styles';
 
 export interface PaletteColorStop {
   stop: number;
@@ -32,6 +35,7 @@ export interface EuiColorPalettePickerPaletteTextProps extends CommonProps {
    *  The name of your palette
    */
   title: string;
+  tag?: never;
   /**
    * `text`: a text only option (a title is required).
    */
@@ -51,6 +55,10 @@ export interface EuiColorPalettePickerPaletteFixedProps extends CommonProps {
    *  The name of your palette
    */
   title?: string;
+  /**
+   *  Tag used in badge for classification
+   */
+  tag?: string;
   /**
    * `fixed`: individual color blocks
    */
@@ -70,6 +78,10 @@ export interface EuiColorPalettePickerPaletteGradientProps extends CommonProps {
    *  The name of your palette
    */
   title?: string;
+  /**
+   *  Tag used in badge for classification
+   */
+  tag?: string;
   /**
    * `gradient`: each color fades into the next
    */
@@ -118,6 +130,7 @@ export const EuiColorPalettePicker: FunctionComponent<
   selectionDisplay = 'palette',
   ...rest
 }) => {
+  const styles = useEuiMemoizedStyles(euiPalettePickerStyles);
   const getPalette = useCallback(
     ({
       type,
@@ -136,7 +149,7 @@ export const EuiColorPalettePicker: FunctionComponent<
   const paletteOptions = useMemo(
     () =>
       palettes.map((item: EuiColorPalettePickerPaletteProps) => {
-        const { type, value, title, palette, ...rest } = item;
+        const { type, value, title, tag, palette, ...rest } = item;
         const paletteForDisplay =
           item.type !== 'text' ? getPalette(item) : null;
 
@@ -153,13 +166,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>
+                  <div css={styles.euiColorPalettePicker__itemTitleGroup}>
+                    <EuiText
+                      aria-hidden="true"
+                      className="euiColorPalettePicker__itemTitle"
+                      size="xs"
+                    >
+                      {title}
+                    </EuiText>
+                    {tag && <>
+                      <EuiBadge css={styles.euiColorPalettePicker__itemTag} color="hollow">{tag}</EuiBadge>
+                    </>}
+                  </div>
                   <EuiSpacer size="xs" />
                 </>
               )}