[Emotion] Convert EuiFormLayout (1/3) #7954
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- entirely replaced by new `getIconAffordanceStyles` util, and CSS variables
+ remove unused euiButtonEmpty styles?? literally not sure what this is doing, button empty does not have borders. probably left over from old theme + reorder imports
- prefer using variables over mixins which contain unnecessary CSS
cee-chen
force-pushed
the
emotion/form-layout
branch
from
3918432 to
949dfcf
Compare
cee-chen
commented
Aug 9, 2024
There was a problem hiding this comment.
Intentional visual changes made as part of this PR:
EuiFormControlLayout- group border color was lightened to match non-grouped borders.- Before (slight jump when a prepend label is added):
- After:
- Before (slight jump when a prepend label is added):
- Slight height tweaks were made - buttons, text, and inputs should now all be more vertically centered
- Slight horizontal spacing tweaks were made to arrays of multiple append/prepend nodes (with the goal of simplifying our CSS selectors)
- It's a pretty low use-case scenario so I'm not too worried about it, but am open to feedback as to how it feels in comparison to prod (or generally)
cee-chen
commented
Aug 9, 2024
cee-chen
commented
Aug 9, 2024
packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
Outdated
Show resolved
Hide resolved
cee-chen
commented
Aug 9, 2024
packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
Outdated
Show resolved
Hide resolved
cee-chen
commented
Aug 9, 2024
Comment on lines
-101
to
+109
| 'euiFormControlLayout--fullWidth': fullWidth, | ||
| 'euiFormControlLayout--compressed': compressed, | ||
| 'euiFormControlLayout--readOnly': readOnly, | ||
| 'euiFormControlLayout--group': prepend || append, | ||
| 'euiFormControlLayout--group': isGroup, | ||
| 'euiFormControlLayout-isDisabled': isDisabled, | ||
| 'euiFormControlLayout-readOnly': readOnly, |
There was a problem hiding this comment.
Just to clarify the modifier removals:
.euiFormControlLayout--groupis used for various overrides in Kibana so I left it as-is-readOnlyis used for test selectors and felt like a state worth noting/preserving, so I left it but moved it down to one hyphen to matchisDisabled
cee-chen
force-pushed
the
emotion/form-layout
branch
from
949dfcf to
f69e829
Compare
cee-chen
commented
Aug 9, 2024
Comment on lines
-194
to
+220
| <> | ||
| {React.Children.map(nodes, (node, index) => | ||
| typeof node === 'string' | ||
| ? renderFormLabel(node) | ||
| : cloneElement(node, { | ||
| className: classNames(className, node.props.className), | ||
| key: index, | ||
| }) | ||
| <div css={cssStyles} className={className}> |
There was a problem hiding this comment.
I also wanted to quickly highlight this change: I opted to use a new <div> wrapper for append/prepend nodes as opposed to using React.cloneElement. It results it more snapshot changes, but I see this as a better best practice/pattern overall than cloning.
tkajtoch
reviewed
Aug 9, 2024
| const { euiTheme } = euiThemeContext; | ||
| const form = euiFormVariables(euiThemeContext); | ||
|
|
||
| return ` | ||
| /* We use inset box-shadow instead of border to skip extra hight calculations */ | ||
| // We use inset box-shadow instead of border to skip extra height calculations |
There was a problem hiding this comment.
[Not a change request] To keep things simple, we might need to change these to regular borders when working on the visual refresh. I'm not entirely sure if using box-shadow in the past actually helped here enough to use it instead of a regular border 🤔 I'd love to hear more context if you know why exactly this is a thing!
There was a problem hiding this comment.
It would result in some amount of height recalculation shenanigans if we convert the style, but it shouldn't be too onerous.
I think the biggest change is that the underline we use for focus and invalid highlighting will look slightly different with a box-shadow vs a border (because right now the linear gradient overlaps the box-shadow, but will not overlap a border), but honestly I don't think that's a big enough reason to justify not using a border.
Overall I'd put it at a medium level of effort to change.
tkajtoch
reviewed
Aug 9, 2024
| @@ -7,9 +7,9 @@ | |||
| */ | |||
There was a problem hiding this comment.
Thanks for taking an extra step here and converting tests to RTL!
tkajtoch
approved these changes
Aug 9, 2024
- most of the underlying inputs should already be setting their own styles without this component needing to (tested on all components) - the background color also doesn't need to be set, that's specific to group styles anyway - I removed the input border color change on readOnly as it doesn't match the default inputs - the border/box-shadow color stays the same for those, so I wanted that here as well
- border/background + extend `euiFormControlDefaultShadow` to allow passing only the box-shadow border and not the background gradient
- remove need for compressed/uncompressed CSS by just using `inherit` - prefer setting a border radius + overflow hidden on the `childrenWrapper` instead of trying to set border radiuses on every possible child
cee-chen
force-pushed
the
emotion/form-layout
branch
from
f69e829 to
af5978b
Compare
- [opinionated change] Add a `<div>` append/prepend wrapper instead of using `React.cloneElement` - less fragile and a better pattern - use `:not:has` CSS to set padding on the wrapper instead of directly on child elements - set heights on buttons and text more explicitly - update form variables to be more specific and remove the unused border var
+ remove extra unnecessary border-radius logic in EuiComboBox - now already handled by EuiFormControlLayout
- works correctly in browser but causes test failures - `:has()` support is apparently flaky, so we need to pin/revert the resolution
- several props (the ones destructured and re-spread to `<EuiFieldText />`) were not correctly updating the actual control - note: this was already broken in prod
cee-chen
force-pushed
the
emotion/form-layout
branch
2 times, most recently
from
f601c97 to
ea5830a
Compare
cee-chen
force-pushed
the
emotion/form-layout
branch
from
ea5830a to
8611ac8
Compare
This reverts commit d92e40d.
💚 Build Succeeded
History
|
This was referenced Aug 12, 2024
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>
4 tasks
Ikuni17
pushed a commit
to elastic/kibana
that referenced
this pull request
Sep 24, 2024
## Summary This is a follow up to EUI's Emotion conversion of **EuiFormControlLayout/Delimited** (see #190752, elastic/eui#7954, and elastic/eui#7957). > [!note] > Please manually QA your team's affected form control(s) to confirm they still look and behave as expected and are non-broken. The EUI team is not familiar enough with each plugin's setups to pull down and QA this PR ourselves. While QA testing the upgrade, I noticed a few incorrect usages of **EuiFormControlLayout** but wanted to wait until after the upgrade to push out fixes (to prevent delaying the PR further). In general, here is EUI's [recommended usage of the component](https://eui.elastic.co/#/forms/form-controls#form-control-layout): - Where possible, **simply don't use it**. Almost all form controls are **already** automatically wrapped in any EuiFormControlLayout by default, and should accept a large majority of the props that the layout accepts. - If you **must** use it, set the `controlOnly` prop on the child input/control to avoid buggy styling (e.g. duplicate borders). - If you can't do either of the above for any reason (e.g. missing prop support), reach out to the EUI team to ask for your UX as a feature request! ### Checklist Delete any items that are not applicable to this PR. - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Sep 24, 2024
## Summary This is a follow up to EUI's Emotion conversion of **EuiFormControlLayout/Delimited** (see elastic#190752, elastic/eui#7954, and elastic/eui#7957). > [!note] > Please manually QA your team's affected form control(s) to confirm they still look and behave as expected and are non-broken. The EUI team is not familiar enough with each plugin's setups to pull down and QA this PR ourselves. While QA testing the upgrade, I noticed a few incorrect usages of **EuiFormControlLayout** but wanted to wait until after the upgrade to push out fixes (to prevent delaying the PR further). In general, here is EUI's [recommended usage of the component](https://eui.elastic.co/#/forms/form-controls#form-control-layout): - Where possible, **simply don't use it**. Almost all form controls are **already** automatically wrapped in any EuiFormControlLayout by default, and should accept a large majority of the props that the layout accepts. - If you **must** use it, set the `controlOnly` prop on the child input/control to avoid buggy styling (e.g. duplicate borders). - If you can't do either of the above for any reason (e.g. missing prop support), reach out to the EUI team to ask for your UX as a feature request! ### Checklist Delete any items that are not applicable to this PR. - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit fd7b86e)
kibanamachine
added a commit
to elastic/kibana
that referenced
this pull request
Sep 24, 2024
# Backport This will backport the following commits from `main` to `8.x`: - [Fix various EuiFormControlLayout usages (#192779)](#192779) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Cee Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-09-24T20:55:59Z","message":"Fix various EuiFormControlLayout usages (#192779)\n\n## Summary\r\n\r\nThis is a follow up to EUI's Emotion conversion of\r\n**EuiFormControlLayout/Delimited** (see\r\nhttps://github.com//pull/190752,\r\nhttps://github.com/elastic/eui/pull/7954, and\r\nhttps://github.com/elastic/eui/pull/7957).\r\n\r\n> [!note]\r\n> Please manually QA your team's affected form control(s) to confirm\r\nthey still look and behave as expected and are non-broken. The EUI team\r\nis not familiar enough with each plugin's setups to pull down and QA\r\nthis PR ourselves.\r\n\r\nWhile QA testing the upgrade, I noticed a few incorrect usages of\r\n**EuiFormControlLayout** but wanted to wait until after the upgrade to\r\npush out fixes (to prevent delaying the PR further). In general, here is\r\nEUI's [recommended usage of the\r\ncomponent](https://eui.elastic.co/#/forms/form-controls#form-control-layout):\r\n\r\n- Where possible, **simply don't use it**. Almost all form controls are\r\n**already** automatically wrapped in any EuiFormControlLayout by\r\ndefault, and should accept a large majority of the props that the layout\r\naccepts.\r\n- If you **must** use it, set the `controlOnly` prop on the child\r\ninput/control to avoid buggy styling (e.g. duplicate borders).\r\n- If you can't do either of the above for any reason (e.g. missing prop\r\nsupport), reach out to the EUI team to ask for your UX as a feature\r\nrequest!\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"fd7b86e209e7133f3d9b7bd4e9fd6542f8a3aaad","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","apm:review","v8.16.0"],"title":"Fix various EuiFormControlLayout usages","number":192779,"url":"https://github.com/elastic/kibana/pull/192779","mergeCommit":{"message":"Fix various EuiFormControlLayout usages (#192779)\n\n## Summary\r\n\r\nThis is a follow up to EUI's Emotion conversion of\r\n**EuiFormControlLayout/Delimited** (see\r\nhttps://github.com//pull/190752,\r\nhttps://github.com/elastic/eui/pull/7954, and\r\nhttps://github.com/elastic/eui/pull/7957).\r\n\r\n> [!note]\r\n> Please manually QA your team's affected form control(s) to confirm\r\nthey still look and behave as expected and are non-broken. The EUI team\r\nis not familiar enough with each plugin's setups to pull down and QA\r\nthis PR ourselves.\r\n\r\nWhile QA testing the upgrade, I noticed a few incorrect usages of\r\n**EuiFormControlLayout** but wanted to wait until after the upgrade to\r\npush out fixes (to prevent delaying the PR further). In general, here is\r\nEUI's [recommended usage of the\r\ncomponent](https://eui.elastic.co/#/forms/form-controls#form-control-layout):\r\n\r\n- Where possible, **simply don't use it**. Almost all form controls are\r\n**already** automatically wrapped in any EuiFormControlLayout by\r\ndefault, and should accept a large majority of the props that the layout\r\naccepts.\r\n- If you **must** use it, set the `controlOnly` prop on the child\r\ninput/control to avoid buggy styling (e.g. duplicate borders).\r\n- If you can't do either of the above for any reason (e.g. missing prop\r\nsupport), reach out to the EUI team to ask for your UX as a feature\r\nrequest!\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"fd7b86e209e7133f3d9b7bd4e9fd6542f8a3aaad"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192779","number":192779,"mergeCommit":{"message":"Fix various EuiFormControlLayout usages (#192779)\n\n## Summary\r\n\r\nThis is a follow up to EUI's Emotion conversion of\r\n**EuiFormControlLayout/Delimited** (see\r\nhttps://github.com//pull/190752,\r\nhttps://github.com/elastic/eui/pull/7954, and\r\nhttps://github.com/elastic/eui/pull/7957).\r\n\r\n> [!note]\r\n> Please manually QA your team's affected form control(s) to confirm\r\nthey still look and behave as expected and are non-broken. The EUI team\r\nis not familiar enough with each plugin's setups to pull down and QA\r\nthis PR ourselves.\r\n\r\nWhile QA testing the upgrade, I noticed a few incorrect usages of\r\n**EuiFormControlLayout** but wanted to wait until after the upgrade to\r\npush out fixes (to prevent delaying the PR further). In general, here is\r\nEUI's [recommended usage of the\r\ncomponent](https://eui.elastic.co/#/forms/form-controls#form-control-layout):\r\n\r\n- Where possible, **simply don't use it**. Almost all form controls are\r\n**already** automatically wrapped in any EuiFormControlLayout by\r\ndefault, and should accept a large majority of the props that the layout\r\naccepts.\r\n- If you **must** use it, set the `controlOnly` prop on the child\r\ninput/control to avoid buggy styling (e.g. duplicate borders).\r\n- If you can't do either of the above for any reason (e.g. missing prop\r\nsupport), reach out to the EUI team to ask for your UX as a feature\r\nrequest!\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [x] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"fd7b86e209e7133f3d9b7bd4e9fd6542f8a3aaad"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
The large # of line diffs in this PR are mostly from snapshot changes - while this PR is on the larger size, I promise it's not as intimidating as it looks at first glance 🫠 As always, please follow along by commit!
Not handled in this PR (will be in future/separate PRs):
EuiFormControlLayoutDelimitedEuiFormControlLayoutIconsandEuiFormControlLayoutClearButtonQA
The below links should generally look non-broken/the same as production, except for a few key changes (listed in a comment below)
General checklist
and screenreader modesAdded orupdated jestand cypress tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)Emotion checklist
General
className(s)read as expected in snapshots and browsers[ ] Checked component playgroundUnit tests
shouldRenderCustomStyles()test was added and passes with parent component and any nestedchildProps(e.g.tooltipProps)Sass/Emotion conversion process
src/components/index.scsssrc/amsterdam/overrides/{component}.scssfiles (styles within should have been converted to the baseline Emotion styles)$euiSizetoeuiTheme.size.base)[ ] Listed var/mixin removals in changelog[ ] Added an@warndeprecation message within theglobal_styling/mixins/{component}.scssfile[ ] Removed or converted component-specific Sass vars/mixins to exported JS versions[ ] Ranyarn compile-scssto update var/mixin JSON files[ ] Simplifiedcalc()tomathWithUnitsif possible (if mixing different unit types, this may not be possible)CSS tech debt
[ ] Wrapped all animations or transitions ineuiCanAnimategapproperty to add margin between items if using flex-inlineand-blocklogical properties (check inline styles as well as CSS)DOM Cleanup
euiComponent,euiComponent__child)Kibana due diligence
{euiComponent}-(case sensitive) to check for usage of modifier classes[ ] If usage exists, consider converting to adataattribute so that consumers still have something to hook into**/target, **/*.snap, **/*.storyshotfor less noise) foreui{Component}(case sensitive) to find:[ ] Any direct className usages that will need to be refactored (e.g. someone calling theNone, thankfullyeuiBadgeclass on a div instead of simply using theEuiBadgecomponent)Extras/nice-to-have
[ ] 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