[Emotion] Convert EuiSaturation and EuiHue #7859

cee-chen · 2024-06-26T21:43:07Z

Summary

Note

This PR merges into a feature branch.

EuiSaturation and EuiHue are internal-only components that are not public-level exports, hence the lack of storybook/VRT updates. However, the parent EuiColorPicker component was run through VRT and did not produce any visual changes.

As always, I recommend reviewing by commit!

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 Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only ~~and screenreader~~ modes
  - [ ] Checked in mobile
Docs site QA - N/A
Code quality checklist
- Added or updated jest ~~and cypress tests~~
- Ran 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

Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
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
Deleted any src/amsterdam/overrides/{component}.scss files (styles within should have been converted to the baseline Emotion styles)
~~[ ] 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)~~
~~[ ] 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 to remove

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

- remove Sass variables - I don't see a reason to keep them as they're not being reused anywhere and don't need to be overridden

- simplify negative margins to transform translates

+ standardize mouse vs keyboard focus indicators + delete Sass files

- move classes/styles to top of file - convert inline position styles to logical properties - memoize various functions - fix IDs potentially being invalid if no `id` prop is passed

- Remove now-unnecessary IE/moz resets - Simplify focus/visible styles, overrides, etc - remove unnecessary z-index and euiCustomControl mixin, replace `top` offset with negative margin

:| legitimately not sure what on earth is going on with the indicator styles, I think the nested template literal is throwing stylelint for a loop

mgadewoll

🚢 🐈‍⬛ Looks good to me! I checked the deploys and there I didn't see any visual regression 👍

mgadewoll · 2024-06-27T11:53:00Z

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

+    const classes = classNames('euiSaturation', className);
+    const styles = useEuiMemoizedStyles(euiSaturationStyles);
+
+    const id = useGeneratedHtmlId({ conditionalId: _id });


Nice catch! 👍

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

mgadewoll · 2024-06-27T12:09:17Z

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

-        box-shadow: ${thumbBoxShadow};
-      `)}
+      /* Indicator styles - for some incredibly bizarre reason, stylelint is unhappy about
+         the semicolons here and can't be stylelint-disabled, hence the syntax workaround */


Urgh, that's annoying! Thanks for the comment to explain this! 🙈

For sure! 🫠

kibanamachine · 2024-06-27T19:04:05Z

Preview staging links for this PR:

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

elasticmachine · 2024-06-27T19:05:49Z

💚 Build Succeeded

Buildkite Build
Commit: 6941e9e

History

💚 Build #2255 succeeded 4fd5ce6

`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 10 commits June 26, 2024 14:36

[EuiSaturation] Set up Emotion file

34676e5

[EuiSaturation] Convert lightness and saturation gradients

07e019a

- remove Sass variables - I don't see a reason to keep them as they're not being reused anywhere and don't need to be overridden

[EuiSaturation] Convert indicator styles

20e852d

- simplify negative margins to transform translates

[EuiSaturation] Convert focus styles

5ead1cb

+ standardize mouse vs keyboard focus indicators + delete Sass files

[EuiSaturation] Misc cleanup

7c51ca5

- move classes/styles to top of file - convert inline position styles to logical properties - memoize various functions - fix IDs potentially being invalid if no `id` prop is passed

[EuiHue] Set up Emotion file

11b48c2

[EuiHue] Convert range indicator to Emotion

01a6422

- Remove now-unnecessary IE/moz resets - Simplify focus/visible styles, overrides, etc - remove unnecessary z-index and euiCustomControl mixin, replace `top` offset with negative margin

Delete Sass files

82ce5dc

Tests

187a1f6

stylelint shenanigans

e01b4cf

:| legitimately not sure what on earth is going on with the indicator styles, I think the nested template literal is throwing stylelint for a loop

cee-chen added the emotion label Jun 26, 2024

changelog

4fd5ce6

cee-chen marked this pull request as ready for review June 27, 2024 00:27

cee-chen requested a review from a team as a code owner June 27, 2024 00:27

mgadewoll approved these changes Jun 27, 2024

View reviewed changes

cee-chen added 2 commits June 27, 2024 11:38

Merge branch 'emotion/color-pickers' into emotion/color-picker-5

5e7fc14

Final Sass file deletion

6941e9e

cee-chen merged commit 5caafa5 into elastic:emotion/color-pickers Jun 27, 2024
4 checks passed

cee-chen deleted the emotion/color-picker-5 branch June 27, 2024 19:31

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

mgadewoll mentioned this pull request Jul 2, 2024

[FIX] prevent errors around fewer/more hooks in Storybook #7870

Merged

1 task

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 EuiSaturation and EuiHue #7859

[Emotion] Convert EuiSaturation and EuiHue #7859

cee-chen commented Jun 26, 2024 •

edited

Loading

mgadewoll left a comment

mgadewoll Jun 27, 2024

mgadewoll Jun 27, 2024

cee-chen Jun 27, 2024

kibanamachine commented Jun 27, 2024

elasticmachine commented Jun 27, 2024

[Emotion] Convert EuiSaturation and EuiHue #7859

[Emotion] Convert EuiSaturation and EuiHue #7859

Conversation

cee-chen commented Jun 26, 2024 • edited Loading

Summary

QA

General checklist

mgadewoll left a comment

Choose a reason for hiding this comment

mgadewoll Jun 27, 2024

Choose a reason for hiding this comment

mgadewoll Jun 27, 2024

Choose a reason for hiding this comment

cee-chen Jun 27, 2024

Choose a reason for hiding this comment

kibanamachine commented Jun 27, 2024

elasticmachine commented Jun 27, 2024

💚 Build Succeeded

History

cee-chen commented Jun 26, 2024 •

edited

Loading