[Emotion] Convert EuiColorPickerSwatch

packages/eui/changelogs/upcoming/7853.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiColorPickerSwatch` to Emotion

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

@@ -359,79 +359,79 @@ 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"
       />
     </li>
     <li>
       <button
         aria-label="Select #6092C0 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(96, 146, 192);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #D36086 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(211, 96, 134);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #9170B8 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(145, 112, 184);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #CA8EAE as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(202, 142, 174);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #D6BF57 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(214, 191, 87);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #B9A888 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(185, 168, 136);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #DA8B45 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(218, 139, 69);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #AA6556 as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(170, 101, 86);"
         type="button"
       />
     </li>
     <li>
       <button
         aria-label="Select #E7664C as the color"
-        class="euiColorPickerSwatch"
+        class="euiColorPickerSwatch emotion-euiColorPickerSwatch"
         style="background: rgb(231, 102, 76);"
         type="button"
       />

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"

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';

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')}
+      }
+    `,
+  };
+};

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} />);
 

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}