[Emotion] Convert EuiFormLayoutControl icons (3/3)

[cee-chen]

Summary

Follow up to #7954

As always, please review by commit - there's plenty of cleanup, some fixes around disabled styling, and a bunch of downstream snapshot changes.

QA

The below links/steps should look the same as production:

• https://eui.elastic.co/pr_7959/storybook/?path=/story/forms-euiform-euiformcontrollayout--icon-shape&args=isInvalid:!true;isLoading:!true
  • Change icon.side to left and confirm that the :) face moves correctly
  • Add an onClick: true key/value to the icon object and confirm that icon becomes a focusable button
  • Click the isDisabled toggle and confirm that the :) face and clear button both correctly fade out and show a cursor indicating disabled status
• https://eui.elastic.co/pr_7954/#/forms/form-controls#search-field
  • Type into the field (any text) and toggle the loading and invalid states
  • Toggle the compressed state and confirm the clear button looks the same as production when small

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 - Ran with apparently no changes
• Release checklist
  • A changelog entry exists and is marked appropriately. - Note that the component conversions are not listed in the changelog because they are not top-level public exports
    - [ ] 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 to RTL

---

Sass/Emotion conversion process

• Removed component from src/components/index.scss
• Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
• Listed var/mixin removals in changelog
• [ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file
• [ ] Removed or converted component-specific Sass vars/mixins to exported JS versions
• [ ] 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)

---

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.

---

Kibana due diligence

• Search Kibana's codebase for {euiComponent}- (case sensitive) to check for usage of modifier classes
  • [ ] 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
• [ ] 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, thankfully

---

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

Removed modifier classes:

• .euiFormControlLayoutIcons--absolute, .euiFormControlLayoutIcons--static, .euiFormControlLayoutIcons--left, .euiFormControlLayoutIcons--right
• .euiFormControlLayoutCustomIcon--clickable
• .euiFormControlLayoutClearButton--small

Biggest direct usage TODO to update:

• https://github.com/elastic/kibana/blob/f21d6e436e9f370b741bb495719af7e0f6ce36c1/src/plugins/unified_search/public/query_string_input/query_string_input.tsx#L850-L852

[mgadewoll]

🚢 🐈‍⬛ Nice cleanup - The changes looks great! I didn't notice any visual regression 👏

[cee-chen]

I didn't notice any visual regression 👏

First time for everything! 😄 Thanks a million Lene!!

[cee-chen]

Oh, I forgot to leave a comment about this! I experimented with replacing this with the new crossInCircle icon that was recently added, but it didn't look good at small sizes unfortunately, so I left the current cross icon as-is with custom CSS.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: ed88622

History

• 💚 Build #2572 succeeded b95def4