[Emotion] Convert EuiFormRow #7968
Conversation
+ update unnecessary onFocus/onBlur child behavior - these events already bubble in React, so we just need to set them on a wrapper instead of cloning the children directly
…count for focus changes
+ convert margins to flex gap instead
- switch width to flex-basis so we don't need to use logical property - simplify line-height, it's more centered without the 1px - remove unnecessary display block unset and margin-bottom (nothing to unset)
- honestly not sure why this prop is even here but oh well! - use fancy JS getters since we're no longer setting `row` as the default CSS
- use CSS `:has` instead of a separate display prop (deprecate eventually) - simplify margin logic, I found the existing CSS harder to follow than - remove unnecessary duplicated CSS (width/min-width), simplify line-height
19cf97a
to
d802d03
Compare
…ay props as deprecated + remove them from docs examples
- replace margin with an EuiSpacer instead, so we can take advantage of the new gap CSS instead of having to add up to get 20px - use some trickery to duplicate existing `center` CSS (since this is essentially what the min-height/justify-content does - except doing it this way will allow it to work for column layouts as well) - remove padding-bottom, not doing anything - delete `.euiFormRow__fieldWrapperDisplayOnly` className while here, no usages in Kibana
d802d03
to
b0cb928
Compare
| )} | ||
| } | ||
| `, | ||
| get center() { |
There was a problem hiding this comment.
[Not a change request, just trying to understand the exact reason :D] Are these two getters so you can access this.row and this.centerDisplayCss? I'd normally prefer to move centerDisplayCss above this so we could get rid of these getters but since row does the same thing it feels clean to do it like this here
There was a problem hiding this comment.
Yes, I use getters are for this access/repeating styles: https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md#duplicate-styles
And yes, it's essentially repeating row styles hence me trying to write it a bit more DRYly. It's not perfect but to be honest the center display is a little weird and I'd rather get rid of it entirely if we can in the future 🤷
|
Code changes look great! Thanks for deprecating the compressed props and updating docs not to use them. I'll leave the QA to Jason since he's already reviewing the PR |
I can try to update the storybook control to be less confusing here in a bit, but essentially that prop isn't really meant for that type of example. |
|
@cee-chen Ok. I'm just worried because the behavior is different before and after the changes: Before: After: I see the This one looks like the exact case I'm testing -- https://github.com/elastic/kibana/blob/main/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_logistics/step_logistics.tsx#L603 -- display is row, help text is present, and has |
|
Looking at EDIT: I went through every |
- wasn't introduced in this PR but in the previous EuiFormLayout one - might as well fix it while we're here
da050fc
to
82c1ca8
Compare
💚 Build Succeeded
History
cc @JasonStoltz |
`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 <[email protected]>
Summary
Part of #6400
This one is a doozy 🙃 EuiFormRow is a 7 year old component with a lot of outdated/not-best practices and undocumented props. I tried to clean up a few while here but there's so many usages in Kibana that I got terrified halfway through and just ended up settling for deprecations instead 🫠
As always, please review by commit!
Technical details around opinionated changes:
onFocus/onBlurbeing cloned onto child inputs in favor ofonFocus/onBluron a parent div (which captures focus/blur via bubbled events).euiFormRow--hasSwitchin favor of:has()CSS. Removed.euiFormRow--compressed .euiFormRow--horizontalmodifiers as welldisplay="columnCompressedSwitch"as deprecated as a result (it's the same ascolumnCompressednow). Also deprecateddisplay="rowCompressed"as it doesn't appear to do anything 🤷hasEmptyLabelSpaceprop - it now renders an<EuiSpacer />instead of usingmargin-topCSS, in order to take advantage of the new flex gap CSS. Also, DRYed out its vertical centering css withdisplay="center", which allows us to remove the.euiFormRow__fieldWrapperDisplayOnlyclassName (no Kibana usages).QA
General checklist
- [ ] Checked in both light and dark modes- No colors, just spacing- [ ] Checked for accessibility including keyboard-only and screenreader modes@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examples- [ ] Added or updated jest and 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.scss$euiSizetoeuiTheme.size.base)[ ] Simplified- not possiblecalc()tomathWithUnitsif possible (if mixing different unit types, this may not be possible)[ ] 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[ ] Deleted anysrc/amsterdam/overrides/{component}.scssfiles (styles within should have been converted to the baseline Emotion styles)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
[ ] Did NOT remove any block/element classNames (e.g.- Deleted one with no Kibana usageseuiComponent,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:euiBadgeclass on a div instead of simply using theEuiBadgecomponent)Extras/nice-to-have
[ ] Reduced specificity where possible (usually by reducing nesting and class name chaining)Skipped, not worth it for this component IMO - already a headache to deal with[ ] 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