[Emotion] Convert EuiColorPalettePicker and EuiColorPaletteDisplay

[cee-chen]

Summary

Note

This PR merges into a feature branch.

I recommend code reviewing by commit for this PR!

QA

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

• https://eui.elastic.co/pr_7854/storybook/?path=/story/forms-euicolorpalettepicker-euicolorpalettepicker--playground
• https://eui.elastic.co/pr_7854/storybook/?path=/story/forms-euicolorpalettepicker-euicolorpalettedisplay--playground
• https://eui.elastic.co/pr_7854/#/forms/color-selection#color-palette-picker
• https://eui.elastic.co/pr_7854/#/forms/color-selection#color-palette-display

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)
• 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)
• [ ] 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 .euiColorPaletteDisplay--[size] - no usages

---

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 euiColorPaletteDisplay override, but it shouldn't be impacted by this PR

---

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

[mgadewoll]

This is weird: Changing the import like this results in the props not being passed along to the Storybook controls table 🤯 Only the ones manually defined as args are added but they lose their docgenInfo because it's not actually resolved.

Maybe it's the level of abstraction also here. '../../form' adds one more export file that the import goes through to resolve 🤔 But changing the path for it in /form/index to /super_select/super_select does not work. 🤷‍♀️

before

current

I saw this comment and can also reproduce this: The props are properly resolved when declaring components with function instead of const 🙈

Digging a bit further and seeing this issue, I can also confirm that this is also true in this case:

// does not work
export const SomeComponent: FunctionComponent<Props> = ({
  propA,
  propB,
  ...rest
}) => {}

// does work
export const SomeComponent = ({
  propA,
  propB,
  ...rest
}: Props) => {}

[cee-chen]

whoaaa what the heck. I changed the import path to forms/super_select and it started working again :| NO idea why. What on earth. I left a comment so hopefully that helps at least??

[mgadewoll]

Yeah I think for now that's fine. 👍 Eventually I guess we might need to look at this limitation around resolving types that we keep running into with Storybook, or rather react-docgen-typescript 🫣

[zjfresh]

Because React is not an ESM package, if using React.memo or React.ReactNode, etc., in the file, the TypeScript compiler used by react-docgen-typescript cannot recognize the type.

An easy solution is to replace the import: import React from 'react' with import * as React from 'react'.

The final solution is to replace the use of react-docgen-typescript with withDefaultConfig(parserOpts) by:

- import { withDefaultConfig } from 'react-docgen-typescript';
+ import { withCompilerOptions } from 'react-docgen-typescript';
import { defaultOptions } from 'react-docgen-typescript/lib/parser';
- withDefaultConfig(parserOpts).parseWithProgramProvider
+ withCompilerOptions(
+   /* tsconfig compilerOptions */
+   {
+     ...defaultOptions,
+     /* Either of these two is useful */
+     esModuleInterop: true,
+     allowSyntheticDefaultImports: true,
+   },
+   /* your parserOpts */
+   parserOpts
+  ).parseWithProgramProvider

[kibanamachine]

Preview staging links for this PR:

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 29a4697

History

• 💚 Build #2250 succeeded e1feba7
• 💚 Build #2229 succeeded 342721f
• 💚 Build #2228 succeeded a5ff8f6

[mgadewoll]

🚢 🐈‍⬛ Looking good to me!

[cee-chen]

Thanks Lene!!