[Emotion] Forms

[daveyholler]

Acceptance criteria

• [ ] All SCSS files have been removed from the component(s) directory
• [ ] All SCSS overrides have been removed from the Amsterdam theme
• [ ] Any dependent components are identified in a new issue
• [ ] Changelog is updated
• [ ] Breaking changes are identified and broadcast to consumers

Sub Components

• [x] Form controls
  • [x] Text field
  • [x] Search field
  • [x] Number field
  • [x] Password field
  • [x] Select
  • [x] Textarea
  • [x] File Picker
• [ ] Selection controls
  • [ ] Checkbox
  • [ ] Checkbox group
  • [ ] Radio
  • [ ] Radio group
  • [ ] Switch
  • [ ] Fieldset and legend
• [ ] Form layouts
  • [ ] Form control layout
  • [ ] Form and form rows
  • [ ] Described form groups
  • [ ] Form labels
• [ ] Form validation
• [x] Color selection
  • [x] Color picker
  • [x] Color palette picker
  • [x] Color palette display
  • [x] Color stops @miukimiu #6489
• [x] Super select
• [ ] Combo box
• [ ] Selectable
• [ ] Date picker
• [ ] Super date picker
• [ ] Auto refresh

Checklists

Kibana usage

• [ ] 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

---

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

  NOTE: Class components wrapped in withEuiTheme need to pass true as the second argument to its propUtilityForPlayground in src-docs/src/views/{component}/playground.js

---

Unit tests

• [ ] shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)
• [ ] Removed any mount()ed snapshots in favor of render() or a more specific assertion

---

Sass/Emotion conversion process

• [ ] Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
• [ ] 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)
• [ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file
• [ ] 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)

---

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

• [ ] 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)

---

Extras/nice-to-have

• [ ] Documentation pass:
  • [ ] Converted any remaining .js docs files to TS
  • [ ] Misc cleanup of docs code (e.g. combine imports to single from '../src', replace <React.Fragment> with <>)
• [ ] Reduced specificity where possible (usually by reducing nesting and class name chaining)
• [ ] Check for issues in the backlog that could be a quick fix for that component
• [ ] Optional component/code cleanup: consider splitting up the component into multiple children if it's overly verbose or difficult to reason about