[Emotion] Convert EuiColorPalettePicker and EuiColorPaletteDisplay

packages/eui/changelogs/upcoming/7854.md

@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion
+  - Removed `$euiColorPaletteDisplaySizes`
+  - Removed `@mixin euiColorPaletteInnerBorder`

packages/eui/src/components/color_picker/_index.scss

@@ -1,5 +1,3 @@
 @import 'variables';
 @import 'hue';
 @import 'saturation';
-@import 'color_palette_picker/index';
-@import 'color_palette_display/index';

packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`EuiColorPaletteDisplay is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -32,7 +32,7 @@ exports[`EuiColorPaletteDisplay is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
   id="id"
 >
@@ -43,7 +43,7 @@ exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`
   </span>
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -67,12 +67,12 @@ exports[`EuiColorPaletteDisplay props HTML attributes accepts span attributes 1`
 exports[`EuiColorPaletteDisplay props size m is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeMedium"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-m-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -96,12 +96,12 @@ exports[`EuiColorPaletteDisplay props size m is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props size s is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -125,12 +125,12 @@ exports[`EuiColorPaletteDisplay props size s is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props size xs is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeExtraSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-xs-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -154,12 +154,12 @@ exports[`EuiColorPaletteDisplay props size xs is rendered 1`] = `
 exports[`EuiColorPaletteDisplay props type and palette are rendered with type fixed and palette with stops 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(84, 179, 153); width: 21%;"
@@ -180,12 +180,12 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type fi
 exports[`EuiColorPaletteDisplay props type and palette are rendered with type fixed and palette without stops 1`] = `
 <span
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
     aria-hidden="true"
-    class="euiColorPaletteDisplayFixed__bleedArea"
+    class="euiColorPaletteDisplayFixed__bleedArea emotion-euiColorPaletteDisplayFixed__bleedArea"
   >
     <span
       style="background-color: rgb(31, 176, 178); width: 20%;"
@@ -210,7 +210,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type gr
 <span
   aria-hidden="true"
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
@@ -219,7 +219,7 @@ exports[`EuiColorPaletteDisplay props type and palette are rendered with type gr
 <span
   aria-hidden="true"
   aria-label="aria-label"
-  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiTestCss euiColorPaletteDisplay--sizeSmall"
+  class="euiColorPaletteDisplay testClass1 testClass2 emotion-euiColorPaletteDisplay-s-euiTestCss"
   data-test-subj="test subject string"
 />
 `;

packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts

@@ -0,0 +1,54 @@
+/*
+ * 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, transparentize } from '../../../services';
+import { logicalCSS } from '../../../global_styling';
+
+export const euiColorPaletteDisplayStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  // Border is a pseudo element with transparency
+  const border = `${euiTheme.border.width.thin} solid ${transparentize(
+    euiTheme.colors.darkestShade,
+    0.2
+  )}`;
+
+  return {
+    euiColorPaletteDisplay: css`
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border: ${border};
+        border-radius: inherit;
+      }
+    `,
+
+    // Sizes
+    xs: css`
+      ${logicalCSS('height', euiTheme.size.xs)}
+      border-radius: ${euiTheme.size.xs};
+    `,
+    s: css`
+      ${logicalCSS('height', euiTheme.size.s)}
+      border-radius: ${euiTheme.size.s};
+    `,
+    m: css`
+      ${logicalCSS('height', euiTheme.size.base)}
+      border-radius: ${euiTheme.size.base};
+    `,
+  };
+};

packages/eui/src/components/color_picker/color_palette_display/color_palette_display.test.tsx

@@ -7,10 +7,11 @@
  */
 
 import React from 'react';
+import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 import { render } from '../../../test/rtl';
 
 import { EuiColorPaletteDisplay, SIZES } from './color_palette_display';
-import { requiredProps } from '../../../test';
 
 const palette = ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'];
 
@@ -34,6 +35,8 @@ const paletteWithStops = [
 ];
 
 describe('EuiColorPaletteDisplay', () => {
+  shouldRenderCustomStyles(<EuiColorPaletteDisplay palette={palette} />);
+
   test('is rendered', () => {
     const { container } = render(
       <EuiColorPaletteDisplay {...requiredProps} palette={palette} />

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

@@ -8,7 +8,10 @@
 
 import React, { FunctionComponent } from 'react';
 import classnames from 'classnames';
-import { ExclusiveUnion, keysOf } from '../../common';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { ExclusiveUnion } from '../../common';
+
 import type { PaletteColorStop } from '../color_palette_picker';
 import {
   EuiColorPaletteDisplayFixed,
@@ -18,16 +21,11 @@ import {
   EuiColorPaletteDisplayGradient,
   EuiColorPaletteDisplayGradientProps,
 } from './color_palette_display_gradient';
+import { euiColorPaletteDisplayStyles } from './color_palette_display.styles';
 
-const sizeToClassNameMap = {
-  xs: 'euiColorPaletteDisplay--sizeExtraSmall',
-  s: 'euiColorPaletteDisplay--sizeSmall',
-  m: 'euiColorPaletteDisplay--sizeMedium',
-};
-
-export const SIZES = keysOf(sizeToClassNameMap);
+export const SIZES = ['xs', 's', 'm'] as const;
 
-export type EuiColorPaletteDisplaySize = keyof typeof sizeToClassNameMap;
+export type EuiColorPaletteDisplaySize = (typeof SIZES)[number];
 
 export interface EuiColorPaletteDisplayShared {
   /**
@@ -61,22 +59,23 @@ export type EuiColorPaletteDisplayProps = {
 export const EuiColorPaletteDisplay: FunctionComponent<
   EuiColorPaletteDisplayProps
 > = ({ type = 'fixed', palette, className, size = 's', ...rest }) => {
-  const classes = classnames(
-    'euiColorPaletteDisplay',
-    className,
-    sizeToClassNameMap[size]
-  );
+  const classes = classnames('euiColorPaletteDisplay', className);
+
+  const styles = useEuiMemoizedStyles(euiColorPaletteDisplayStyles);
+  const cssStyles = [styles.euiColorPaletteDisplay, styles[size]];
 
   return (
     <>
       {type === 'fixed' ? (
         <EuiColorPaletteDisplayFixed
+          css={cssStyles}
           className={classes}
           palette={palette}
           {...rest}
         />
       ) : (
         <EuiColorPaletteDisplayGradient
+          css={cssStyles}
           className={classes}
           palette={palette}
           {...rest}

packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.styles.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { logicalCSS } from '../../../global_styling';
+
+// In a few screen sizes the palette display doesn't get a fully 100% width -
+// it gets 1px less on width. For this reason we're adding a horizontal 1px bleed area
+export const euiColorPaletteDisplayFixed__bleedArea = css`
+  position: absolute;
+  inset: 0;
+  ${logicalCSS('right', '-1px')}
+  display: flex;
+`;

packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.tsx

@@ -11,6 +11,7 @@ import { CommonProps } from '../../common';
 import { getFixedLinearGradient } from '../utils';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiColorPaletteDisplayShared } from './color_palette_display';
+import { euiColorPaletteDisplayFixed__bleedArea } from './color_palette_display_fixed.styles';
 
 export interface EuiColorPaletteDisplayFixedProps
   extends HTMLAttributes<HTMLSpanElement>,
@@ -45,6 +46,7 @@ export const EuiColorPaletteDisplayFixed: FunctionComponent<
         // aria-hidden="true" is to ensure color blocks are ignored by screen readers,
         // and the only accessible text for options is the EuiScreenReaderOnly {title}
         aria-hidden="true"
+        css={euiColorPaletteDisplayFixed__bleedArea}
         className="euiColorPaletteDisplayFixed__bleedArea"
       >
         {paletteStops}