[Emotion] Convert EuiColorPicker #7845

cee-chen · 2024-06-24T22:29:27Z

Summary

Note

This PR merges into a feature branch.

Converts the base EuiColorPicker component to Emotion - more color picker components to come in future PRs.

This PR also slightly changes/flattens the DOM structure of the EuiColorPicker popover's elements, allowing for flex gap usage.

QA

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

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

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

Listed var/mixin removals in changelog
Removed ~~or converted~~ component-specific Sass vars/mixins to exported JS versions
Removed component from src/components/index.scss
~~[ ] 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)~~
~~[ ] Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)~~
~~[ ] 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.
- Removed .euiColorPicker__popoverPanel--pickerOnly and .euiColorPicker__popoverPanel--customButton

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

There's a single custom CSS override, but it appears to apply to a selector that doesn't even exist in EUI anymore 🤷

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~~

- swap margins to gap instead

- now entirely handled by `EuiFormControlLayout` + remove ignored `icon` prop being passed to EuiFieldText, does nothing if `controlOnly` is passed

- not really worth avoiding the nesting here

- Allows us to remove `margin`s from `EuiHue` - Allows us to remove a bunch of conditional `EuiSpacer`s that didn't account for every possible permutation + remove extra `<div>` wrapper in favor of passing `onKeyDown` events directly to child `EuiHue` and `EuiSaturation` - tweak `EuiHue` to have a single wrapper (to work with flex gap) instead of multiple top level children. DOM shouldn't impact a11y behavior + fix incorrect `compressed` behavior on secondary input display, compressed is always true for that (vs the popover form control)

- remove unnecessary vars and just inline them since they only have 1 usage - remove `.euiColorPicker__swatch-item` - not used anywhere in either EUI or Kibana - remove `.euiColorPicker__swatchSelect` - not used in Kibana and can be replaced with component className instead in EUI

- convert Enzyme to RTL - add `shouldRenderCustomStyles` - update snapshots

mgadewoll

🚢 🐈‍⬛ Looks great to me, nice cleanups! I didn't see any (unexpected) visual regression 👍

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

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

mgadewoll · 2024-06-25T11:35:53Z

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


 jest.mock('../portal', () => ({
  EuiPortal: ({ children }: { children: any }) => children,
 }));

-const onChange = jest.fn();
+describe('EuiColorPicker', () => {


Note for myself: This will conflict with the jest upgrade PR and needs rebasing.

mgadewoll · 2024-06-25T11:41:11Z

packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png

I only just now realized how much more useful these comparison shots really are and what functionality they offer 🤯 😆 🐌

Screen.Recording.2024-06-25.at.13.36.44.mov

Whooaaaaa I only just realized that too!!!! Thank you!!

- make it so user input changes the input (easier to QA/test) and also add an onChange action - allow color/format controls to update the story correctly as expected

- show secondary input automatically if `mode` is set that way - remove double form control layout wrapper - fix clear icon not correctly stacking with invalid icon (needs to be passed to form control layout) - allow compressed state of input to be controlled when `display` is inline, otherwise default to compressed

cee-chen · 2024-06-25T17:08:00Z

I did a quick second pass on Storybook in more browsers and noticed a few friction points in the controls that I pushed up changes for. I think they're pretty minor so going to go ahead and merge, but let me know if you have any comments and I can open up a follow-up PR!

kibanamachine · 2024-06-25T17:31:55Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7845/
Storybook: https://eui.elastic.co/pr_7845/storybook

elasticmachine · 2024-06-25T17:31:59Z

💚 Build Succeeded

Buildkite Build
Commit: 55b78f4

History

💚 Build #2212 succeeded 27fbfbb

`v95.2.0`⏩`v95.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.3.0`](https://github.com/elastic/eui/releases/v95.3.0) - Updated `EuiThemeProvider`s to allow modifying/setting custom `breakpoint`s in nested usage (as opposed to only at the top `EuiProvider` level) ([#7862](elastic/eui#7862)) **Bug fixes** - Fixed a Chrome/Edge CSS `mask-image` bug that was affecting scroll overflow shadow utilties ([#7855](elastic/eui#7855)) **CSS-in-JS conversions** - Converted `EuiColorPicker` to Emotion; Removed `$euiColorPickerWidth` ([#7845](elastic/eui#7845)) - Converted `EuiColorPickerSwatch` to Emotion ([#7853](elastic/eui#7853)) - Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion ([#7854](elastic/eui#7854)) - Removed `$euiColorPaletteDisplaySizes` - Removed `@mixin euiColorPaletteInnerBorder` - Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`, `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize` ([#7859](elastic/eui#7859)) **Accessibility** - Updated the `aria-label` attribute for the `EuiFilePicker` remove file button ([#7860](elastic/eui#7860)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`v95.2.0`⏩`v95.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- - Updated `EuiThemeProvider`s to allow modifying/setting custom `breakpoint`s in nested usage (as opposed to only at the top `EuiProvider` level) ([elastic#7862](elastic/eui#7862)) **Bug fixes** - Fixed a Chrome/Edge CSS `mask-image` bug that was affecting scroll overflow shadow utilties ([elastic#7855](elastic/eui#7855)) **CSS-in-JS conversions** - Converted `EuiColorPicker` to Emotion; Removed `$euiColorPickerWidth` ([elastic#7845](elastic/eui#7845)) - Converted `EuiColorPickerSwatch` to Emotion ([elastic#7853](elastic/eui#7853)) - Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion ([elastic#7854](elastic/eui#7854)) - Removed `$euiColorPaletteDisplaySizes` - Removed `@mixin euiColorPaletteInnerBorder` - Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`, `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize` ([elastic#7859](elastic/eui#7859)) **Accessibility** - Updated the `aria-label` attribute for the `EuiFilePicker` remove file button ([elastic#7860](elastic/eui#7860)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

cee-chen added 7 commits June 24, 2024 15:30

[EuiColorPicker] Set up Emotion styles; remove $euiColorPickerWidth

4af41b4

[EuiColorPicker] Convert swatches flex CSS

36e661c

- swap margins to gap instead

[EuiColorPicker] Clean up unnecessary icon affordance CSS

5be8149

- now entirely handled by `EuiFormControlLayout` + remove ignored `icon` prop being passed to EuiFieldText, does nothing if `controlOnly` is passed

[EuiColorPicker] Convert more nested styles

a69925e

- not really worth avoiding the nesting here

Delete Sass files

f21f6cb

cee-chen force-pushed the emotion/color-picker-2 branch from a4a4a5d to cdee684 Compare June 24, 2024 22:30

cee-chen added 3 commits June 24, 2024 15:52

[tech debt] Tests

437474a

- convert Enzyme to RTL - add `shouldRenderCustomStyles` - update snapshots

Update stories + add VRT for inline color picker

47731ba

changelog

27fbfbb

cee-chen force-pushed the emotion/color-picker-2 branch from e849979 to 27fbfbb Compare June 24, 2024 22:53

cee-chen added the emotion label Jun 24, 2024

cee-chen marked this pull request as ready for review June 24, 2024 22:54

cee-chen requested a review from a team as a code owner June 24, 2024 22:54

mgadewoll approved these changes Jun 25, 2024

View reviewed changes

cee-chen added 2 commits June 25, 2024 09:51

Improve EuiColorPicker story further

8254b86

- make it so user input changes the input (easier to QA/test) and also add an onChange action - allow color/format controls to update the story correctly as expected

cee-chen merged commit 41d2c32 into elastic:emotion/color-pickers Jun 25, 2024
1 of 4 checks passed

cee-chen deleted the emotion/color-picker-2 branch June 25, 2024 17:08

cee-chen mentioned this pull request Jun 25, 2024

[Emotion] Convert EuiColorPickerSwatch #7853

Merged

20 tasks

cee-chen added a commit that referenced this pull request Jun 26, 2024

[Emotion] Convert EuiColorPicker (#7845)

4ee63ed

cee-chen mentioned this pull request Jun 27, 2024

[Emotion] Convert all color picker components #7863

Merged

22 tasks

tkajtoch mentioned this pull request Jul 2, 2024

Upgrade EUI to v95.3.0 elastic/kibana#187342

Merged

cee-chen mentioned this pull request Aug 13, 2024

[Emotion] EuiColorPicker #6390

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert EuiColorPicker #7845

[Emotion] Convert EuiColorPicker #7845

cee-chen commented Jun 24, 2024 •

edited

Loading

mgadewoll left a comment

mgadewoll Jun 25, 2024

mgadewoll Jun 25, 2024 •

edited

Loading

cee-chen Jun 25, 2024

cee-chen commented Jun 25, 2024

kibanamachine commented Jun 25, 2024

elasticmachine commented Jun 25, 2024

[Emotion] Convert EuiColorPicker #7845

[Emotion] Convert EuiColorPicker #7845

Conversation

cee-chen commented Jun 24, 2024 • edited Loading

Summary

QA

General checklist

mgadewoll left a comment

Choose a reason for hiding this comment

mgadewoll Jun 25, 2024

Choose a reason for hiding this comment

mgadewoll Jun 25, 2024 • edited Loading

Choose a reason for hiding this comment

cee-chen Jun 25, 2024

Choose a reason for hiding this comment

cee-chen commented Jun 25, 2024

kibanamachine commented Jun 25, 2024

elasticmachine commented Jun 25, 2024

💚 Build Succeeded

History

cee-chen commented Jun 24, 2024 •

edited

Loading

mgadewoll Jun 25, 2024 •

edited

Loading