Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Emotion] Convert EuiFormLayoutControl icons (3/3) #7959

Merged
merged 14 commits into from
Aug 14, 2024

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Aug 13, 2024

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:

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

+ remove modifier classes

- use ternaries to avoid CSS unsetting
- bonus: this allows left icons such as EuiFieldPassword and EuiSearch to also adjust their icon color
…ormControlLayout`

- 🤦 *now* EuiFieldPassword and EuiFieldSearch should correctly gray out their icons when disabled
- `size` CSS isn't doiing anything, size is set via prop depending on compressed prop

- `.euiFormControlLayoutCustomIcon__icon` isn't doing anything, the flex CSS on `EuiFormControlLayoutIcons` already handles centering

- `:focus` CSS is entirely unnecessary, that's already handled by browsers and is displaying default browser focus rings
@cee-chen cee-chen changed the title [Emotion] Convert EuiFormLayoutControl icons [Emotion] Convert EuiFormLayoutControl icons (3/3) Aug 13, 2024
…ed when the parent input is disabled

+ fix `disabled` prop being incorrectly passed to `<span />` tags
- static and minimal, make it an inline obj
TSX:
- remove className map
- remove wrapping EuiI18n in favor of hook

CSS:
- remove unnecessary specific sizes in favor of percentages (50%, 0.5)
- remove unnecessary `:focus` CSS (same as default browser focus ring)
@cee-chen cee-chen force-pushed the emotion/form-layout-3 branch from a8ca11b to ae191ed Compare August 13, 2024 05:39
- add control to storybook for easier QA

- update clear button to more obviously note disabled status (generally should just be removed if the input is disabled, so this is just in case)
@cee-chen cee-chen force-pushed the emotion/form-layout-3 branch from ae191ed to 7a1e89e Compare August 13, 2024 05:51
@cee-chen cee-chen marked this pull request as ready for review August 13, 2024 06:23
@cee-chen cee-chen requested a review from a team as a code owner August 13, 2024 06:23
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@cee-chen cee-chen enabled auto-merge (squash) August 14, 2024 16:24
@cee-chen
Copy link
Contributor Author

I didn't notice any visual regression 👏

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

<EuiIcon
css={iconStyles}
className="euiFormControlLayoutClearButton__icon"
type="cross"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@cee-chen cee-chen merged commit c96a6e5 into elastic:main Aug 14, 2024
4 of 5 checks passed
@cee-chen cee-chen deleted the emotion/form-layout-3 branch August 14, 2024 16:48
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

Ikuni17 pushed a commit to elastic/kibana that referenced this pull request Aug 31, 2024
`v95.7.0` ⏩ `v95.9.0`

> [!CAUTION]
> This PR contains the final set of Emotion conversions for all EuiForm
components.
> If your plugin contains any custom CSS/styling to **EuiFormRow,
EuiFormControlLayout, EuiCheckbox, EuiRadio, or EuiSwitch**, ⚠️ make
sure to QA your UI to ensure no visual regressions have occurred! ⚠️

---

## [`v95.9.0`](https://github.com/elastic/eui/releases/v95.9.0)

- Updated `EuiSearchBar`'s optional `box.schema` prop with a new
`recognizedFields` configuration. This allows specifying the phrases
that will be parsed as field clauses
([#7960](elastic/eui#7960))
- Updated `EuiIcon` with a new `tokenSemanticText` glyph
([#7971](elastic/eui#7971))
- Added support for TypeScript 5
([#7980](elastic/eui#7980))

**Bug fixes**

- Fixed `EuiSelectableTemplateSitewide` styles when used within a
dark-themed `EuiHeader`
([#7977](elastic/eui#7977))

## [`v95.8.0`](https://github.com/elastic/eui/releases/v95.8.0)

- Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding
by default ([#7961](elastic/eui#7961))
- This can be overridden via `popoverProps.panelPaddingSize` if needed.
- Updated `EuiHeaderLink` to default to a size of `s` (down from `m`)
([#7961](elastic/eui#7961))

**Accessibility**

- Updated the `aria-label` attribute for the `EuiFieldSearch` clear
button ([#7970](elastic/eui#7970))

**Bug fixes**

- Fixed a visual bug with `<EuiDualRange showInput="inputWithPopover"
/>` form controls ([#7957](elastic/eui#7957))

**Deprecations**

- Deprecated `EuiFormRow`'s `columnCompressedSwitch` display prop. Use
`columnCompressed` instead, which will automatically account for child
`EuiSwitch`es ([#7968](elastic/eui#7968))
- Deprecated `EuiFormRow`'s `rowCompressed` display prop. Use `row`
instead for vertical forms, or `centerCompressed` for inline forms
([#7968](elastic/eui#7968))
- (Styling) Updated `EuiFormRow`'s `hasEmptySpaceLabel` prop to no
longer attempt to automatically align its content to a vertical center.
Use the `display="center"` prop for that instead
([#7968](elastic/eui#7968))

**CSS-in-JS conversions**

- Converted `EuiFormControlLayout` to Emotion
([#7954](elastic/eui#7954))
- Removed `.euiFormControlLayout--*icons` classNames and
`--eui-form-control-layout-icons-padding` CSS var. Use
`--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount`
instead
- Converted `EuiFormLayoutDelimited` to Emotion
([#7957](elastic/eui#7957))
- Fixed `cloneElementWithCss` throwing an error when used multiple times
without a `key` prop ([#7957](elastic/eui#7957))
- Updated `cloneElementWithCss` utility to support a third argument that
allows prepending vs. appending the cloned Emotion css className
([#7957](elastic/eui#7957))
- Removed `@euiFormControlLayoutClearIcon` Sass mixin
([#7959](elastic/eui#7959))
- Converted `EuiDescribedFormGroup` to Emotion
([#7964](elastic/eui#7964))
- Converted `EuiForm`, `EuiFormHelpText`, and `EuiFormErrorText` to
Emotion ([#7966](elastic/eui#7966))
- Converted `EuiFormLabel` and `EuiFormLegend` to Emotion; Removed
`@euiFormLabel` mixin
([#7967](elastic/eui#7967))
- Converted `EuiFormRow` to Emotion
([#7968](elastic/eui#7968))
- Converted `EuiCheckbox` to Emotion
([#7969](elastic/eui#7969))
- Converted `EuiRadio` to Emotion
([#7969](elastic/eui#7969))
- Converted `EuiSwitch` to Emotion
([#7969](elastic/eui#7969))
- Removed the following Sass variables:
([#7969](elastic/eui#7969))
  - `$euiFormCustomControlDisabledIconColor`
  - `$euiFormCustomControlBorderColor`
  - `$euiRadioSize`
  - `$euiCheckBoxSize`
  - `$euiCheckboxBorderRadius`
  - `$euiSwitchHeight` (and compressed/mini variants)
  - `$euiSwitchWidth` (and compressed/mini variants)
  - `$euiSwitchThumbSize` (and compressed/mini variants)
  - `$euiSwitchIconHeight`
  - `$euiSwitchOffColor`
- Removed the following Sass mixins:
([#7969](elastic/eui#7969))
  - `euiIconBackground`
  - `euiCustomControl`
  - `euiCustomControlSelected`
  - `euiCustomControlDisabled`
  - `euiCustomControlFocused`

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants