From 38b92acef7eacf2dd161b2794a562e23382704b5 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Wed, 26 Jun 2024 08:08:53 -0700
Subject: [PATCH] [Emotion] Convert EuiColorPickerSwatch (#7853)

---
 packages/eui/changelogs/upcoming/7853.md      |  3 ++
 .../__snapshots__/color_picker.test.tsx.snap  | 20 ++++----
 .../color_picker_swatch.test.tsx.snap         |  2 +-
 .../color_picker/_color_picker_swatch.scss    | 18 --------
 .../src/components/color_picker/_index.scss   |  1 -
 .../color_picker_swatch.styles.ts             | 46 +++++++++++++++++++
 .../color_picker/color_picker_swatch.test.tsx |  3 ++
 .../color_picker/color_picker_swatch.tsx      |  8 +++-
 8 files changed, 70 insertions(+), 31 deletions(-)
 create mode 100644 packages/eui/changelogs/upcoming/7853.md
 delete mode 100644 packages/eui/src/components/color_picker/_color_picker_swatch.scss
 create mode 100644 packages/eui/src/components/color_picker/color_picker_swatch.styles.ts

diff --git a/packages/eui/changelogs/upcoming/7853.md b/packages/eui/changelogs/upcoming/7853.md
new file mode 100644
index 00000000000..f2cf7ab7f5f
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7853.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiColorPickerSwatch` to Emotion
diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index 940d83bdcdc..cb97aede825 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -359,7 +359,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #54B399 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(84, 179, 153);"
         type="button"
       />
@@ -367,7 +367,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #6092C0 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(96, 146, 192);"
         type="button"
       />
@@ -375,7 +375,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #D36086 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(211, 96, 134);"
         type="button"
       />
@@ -383,7 +383,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #9170B8 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(145, 112, 184);"
         type="button"
       />
@@ -391,7 +391,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #CA8EAE as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(202, 142, 174);"
         type="button"
       />
@@ -399,7 +399,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #D6BF57 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(214, 191, 87);"
         type="button"
       />
@@ -407,7 +407,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #B9A888 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(185, 168, 136);"
         type="button"
       />
@@ -415,7 +415,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #DA8B45 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(218, 139, 69);"
         type="button"
       />
@@ -423,7 +423,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #AA6556 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(170, 101, 86);"
         type="button"
       />
@@ -431,7 +431,7 @@ exports[`EuiColorPicker inline 1`] = `
     <li>
       <button
         aria-label="Select #E7664C as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(231, 102, 76);"
         type="button"
       />
diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap
index daf72f20f11..847c458fcb3 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker_swatch.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiColorPickerSwatch is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiColorPickerSwatch testClass1 testClass2 emotion-euiTestCss"
+  class="euiColorPickerSwatch testClass1 testClass2 emotion-euiColorPickerSwatch-euiTestCss"
   data-test-subj="test subject string"
   style="background: transparent;"
   type="button"
diff --git a/packages/eui/src/components/color_picker/_color_picker_swatch.scss b/packages/eui/src/components/color_picker/_color_picker_swatch.scss
deleted file mode 100644
index ba8c5adebfd..00000000000
--- a/packages/eui/src/components/color_picker/_color_picker_swatch.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-.euiColorPickerSwatch {
-  display: inline-block;
-  height: $euiSizeL;
-  width: $euiSizeL;
-  border-radius: $euiBorderRadius / 2;
-  cursor: pointer;
-  border: solid 1px transparentize($euiColorFullShade, .9);
-  box-shadow: inset 0 0 0 1px transparentize($euiColorEmptyShade, .95);
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:focus {
-    @include euiFocusRing;
-  }
-}
diff --git a/packages/eui/src/components/color_picker/_index.scss b/packages/eui/src/components/color_picker/_index.scss
index ce1aa1558d7..017797d0b52 100644
--- a/packages/eui/src/components/color_picker/_index.scss
+++ b/packages/eui/src/components/color_picker/_index.scss
@@ -1,5 +1,4 @@
 @import 'variables';
-@import 'color_picker_swatch';
 @import 'hue';
 @import 'saturation';
 @import 'color_palette_picker/index';
diff --git a/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts b/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
new file mode 100644
index 00000000000..ea923c0248f
--- /dev/null
+++ b/packages/eui/src/components/color_picker/color_picker_swatch.styles.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 {
+  logicalSizeCSS,
+  mathWithUnits,
+  euiOutline,
+} from '../../global_styling';
+
+export const euiColorPickerSwatchStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiColorPickerSwatch: css`
+      display: inline-block;
+      ${logicalSizeCSS(euiTheme.size.l)}
+
+      border-radius: ${mathWithUnits(
+        euiTheme.border.radius.medium,
+        (x) => x / 2
+      )};
+      border: ${euiTheme.border.width.thin} solid
+        ${transparentize(euiTheme.colors.fullShade, 0.1)};
+      box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
+        ${transparentize(euiTheme.colors.emptyShade, 0.05)};
+      cursor: pointer;
+
+      &:disabled {
+        cursor: default;
+      }
+
+      /* Focus ring gets slightly cut off if not offset to the center */
+      &:focus {
+        ${euiOutline(euiThemeContext, 'center')}
+      }
+    `,
+  };
+};
diff --git a/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx b/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx
index fec38be81d2..23fd78400e7 100644
--- a/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx
+++ b/packages/eui/src/components/color_picker/color_picker_swatch.test.tsx
@@ -8,11 +8,14 @@
 
 import React from 'react';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { render } from '../../test/rtl';
 
 import { EuiColorPickerSwatch } from './color_picker_swatch';
 
 describe('EuiColorPickerSwatch', () => {
+  shouldRenderCustomStyles(<EuiColorPickerSwatch />);
+
   test('is rendered', () => {
     const { container } = render(<EuiColorPickerSwatch {...requiredProps} />);
 
diff --git a/packages/eui/src/components/color_picker/color_picker_swatch.tsx b/packages/eui/src/components/color_picker/color_picker_swatch.tsx
index 9d5a658e04d..431e22ecba1 100644
--- a/packages/eui/src/components/color_picker/color_picker_swatch.tsx
+++ b/packages/eui/src/components/color_picker/color_picker_swatch.tsx
@@ -9,10 +9,12 @@
 import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
+import { useEuiI18n } from '../i18n';
 
 import { getChromaColor } from './utils';
-import { useEuiI18n } from '../i18n';
+import { euiColorPickerSwatchStyles } from './color_picker_swatch.styles';
 
 export type EuiColorPickerSwatchProps = CommonProps &
   Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
@@ -24,11 +26,14 @@ export const EuiColorPickerSwatch = forwardRef<
   EuiColorPickerSwatchProps
 >(({ className, color, style, ...rest }, ref) => {
   const classes = classNames('euiColorPickerSwatch', className);
+  const styles = useEuiMemoizedStyles(euiColorPickerSwatchStyles);
+
   const chromaColor = useMemo(() => getChromaColor(color, true), [color]);
   const background = useMemo(
     () => (chromaColor ? chromaColor.css() : 'transparent'),
     [chromaColor]
   );
+
   const ariaLabel = useEuiI18n(
     'euiColorPickerSwatch.ariaLabel',
     'Select {color} as the color',
@@ -38,6 +43,7 @@ export const EuiColorPickerSwatch = forwardRef<
   return (
     <button
       type="button"
+      css={styles.euiColorPickerSwatch}
       className={classes}
       aria-label={ariaLabel}
       ref={ref}