[Emotion] Convert EuiColorPickerSwatch

[cee-chen]

Summary

Note

This PR merges into a feature branch.

Probably should have included this in #7845, derp 🤦 There isn't any meaningful git commit history for this small conversion so I'd just look at the diffs (and expand the deleted Sass file).

QA

The below links should look the same as before with no UI/visual regressions:

• https://eui.elastic.co/pr_7853/storybook/?path=/story/forms-euicolorpicker-euicolorpickerswatch--playground
• https://eui.elastic.co/pr_7853/storybook/?path=/story/forms-euicolorpicker-euicolorpicker--playground&args=display:inline;mode:swatch

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
    - [ ] Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA - N/A
• Code quality checklist
  - [ ] Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
    - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist - N/A

Emotion checklist

General

• Output CSS matches the previous CSS (works as expected in all browsers)
• Rendered className(s) read as expected in snapshots and browsers
• [ ] Checked component playground No playground

---

Unit tests

• shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)
• [ ] Converted Enzyme tests to RTL

---

Sass/Emotion conversion process

• Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
• Removed component from src/components/index.scss
• [ ] Removed or converted component-specific Sass vars/mixins to exported JS versions
• [ ] Listed var/mixin removals in changelog
• [ ] Ran yarn compile-scss to update var/mixin JSON files
• [ ] Simplified calc() to mathWithUnits if possible (if mixing different unit types, this may not be possible)
• [ ] Deleted any src/amsterdam/overrides/{component}.scss files (styles within should have been converted to the baseline Emotion styles)
• [ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file

---

CSS tech debt

• [ ] Wrapped all animations or transitions in euiCanAnimate
• [ ] Used gap property to add margin between items if using flex
• Converted side specific padding, margin, and position to -inline and -block logical properties (check inline styles as well as CSS)

---

DOM Cleanup

• Did NOT remove any block/element classNames (e.g. euiComponent, euiComponent__child)
• [ ] SEARCH KIBANA FIRST: Deleted any modifier classNames or maps if not being used in Kibana. No modifiers

---

Kibana due diligence

• Search Kibana's codebase for {euiComponent}- (case sensitive) to check for usage of modifier classes - None
  • [ ] If usage exists, consider converting to a data attribute so that consumers still have something to hook into
• Pre-emptively check how your conversion will impact the next Kibana upgrade. This entails searching/grepping through Kibana (excluding **/target, **/*.snap, **/*.storyshot for less noise) for eui{Component} (case sensitive) to find:
• Any test/query selectors that will need to be updated. - None
• Any Sass or CSS that will need to be updated, particularly if a component Sass var was deleted - None
• Any direct className usages that will need to be refactored (e.g. someone calling the euiBadge class on a div instead of simply using the EuiBadge component) - None

---

Extras/nice-to-have

• Reduced specificity where possible (usually by reducing nesting and class name chaining)
• [ ] Optional component/code cleanup: consider splitting up the component into multiple children if it's overly verbose or difficult to reason about
• [ ] Documentation pass
• [ ] Check for issues in the backlog that could be a quick fix for that component

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7853/
• Storybook: https://eui.elastic.co/pr_7853/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: ee675f4

History

• 💚 Build #2223 succeeded a1ddd06

[mgadewoll]

🚢 🐈‍⬛ The changes look good to me and I did not find any visual regression.