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.

Sign up for GitHub

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

Jump to bottom

[Emotion] Convert EuiModal #6321

Merged
merged 28 commits into from
Nov 18, 2022
Merged

[Emotion] Convert EuiModal #6321

merged 28 commits into from
Nov 18, 2022

Conversation

miukimiu
Copy link
Contributor

@miukimiu miukimiu commented Oct 24, 2022 •
edited by cee-chen
Loading

Summary

This PR converts EuiModal to Emotion.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • [ ] Added documentation
  • [ ] Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • [ ] Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • [ ] Updated the Figma library counterpart
  • A changelog entry exists and is marked appropriately
  • Reverted "REVERT ME" commit

Emotion conversion checklist

  • Does it work?
  • Output CSS matches the previous CSS / as expected in browsers
  • Rendered className reads as expected in snapshots and in browsers
    - [ ] Checked component playground (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 removals in changelog, and ran yarn compile-scss to update 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
  • Reduced specificity where possible (usually by reducing nesting and class name chaining)
  • 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)
  • Deleted any modifier classNames or maps if not being used in Kibana. Before doing this step:
    • Search/grep through Kibana's codebase for {euiComponent}- (case sensitive) to check for source code usage of modifier classes
      - [ ] If usages exist, consider converting to a data attribute so that consumers still have something to hook into
       
  • 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 <>)
      - [ ] 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

@miukimiu miukimiu changed the title [Emotion] Convert modal [Emotion] Convert EuiModal Oct 24, 2022
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

1 similar comment
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

miukimiu
miukimiu commented Oct 27, 2022
View reviewed changes
src/global_styling/utility/animations.ts
@@ -17,3 +17,15 @@ export const euiAnimFadeIn = keyframes`
opacity: 1;
}
`;

export const euiAnimSlideInUp = (size: string) => keyframes`
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I noticed there are a few components using this animation (e.g. EuiImage). So I moved the animation here.

There are more components using this animation. So I might follow-up with a PR.

@miukimiu miukimiu mentioned this pull request Oct 27, 2022
Closed
@miukimiu miukimiu marked this pull request as ready for review October 27, 2022 15:14
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

cee-chen
cee-chen reviewed Nov 18, 2022
View reviewed changes
src/components/modal/modal_header.styles.ts Outdated
Comment on lines 21 to 23
padding-inline: ${euiTheme.size.l} ${euiTheme.size.xxl};
padding-block: ${euiTheme.size.l} ${euiTheme.size.base};
${euiTheme.size.l};
Copy link
Member

Choose a reason for hiding this comment

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

[Just thinking out loud] This padding conversion was a little hard to follow for me personally (particular the inline one cause its directions are flipped). At the same time I super appreciate that we're using inline and block over padding shorthand, which doesn't yet have a corresponding logical property 😍

I'm very tempted to add a logical util helper for this in our own codebase. Something that just automatically handles this for us, e.g. logicalShorthandCSS('padding', '1 2 3 4'). I might explore that in a separate PR and send it your way to see if you like it!

Copy link
Member

@cee-chen cee-chen Nov 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Also just wanted to add - that third ${euiTheme.size.l}; line looks like an misplaced copy-paste - will go ahead and clean it up

cee-chen
cee-chen reviewed Nov 18, 2022
View reviewed changes
src/components/modal/modal_footer.styles.ts
padding-block: ${euiTheme.size.m};
padding-inline: ${euiTheme.size.l};
justify-content: stretch;
gap: ${euiTheme.size.s};
Copy link
Member

Choose a reason for hiding this comment

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

Assuming this new gap was a design change? Love it! ❤️

cee-chen
cee-chen reviewed Nov 18, 2022
View reviewed changes
src/components/modal/modal_body.styles.ts
Comment on lines +20 to +22
// The below fixes scroll on Chrome and Safari
display: flex;
flex-direction: column;
Copy link
Member

Choose a reason for hiding this comment

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

[not a change request, just me thinking out loud] I wonder if this fix is still needed. Maybe worth investigating later in latest Chrome/Safari?

cee-chen
cee-chen reviewed Nov 18, 2022
View reviewed changes
src/components/modal/modal.styles.ts
}
`,
euiModal__closeIcon: css`
position: absolute;
Copy link
Member

Choose a reason for hiding this comment

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

Looks like we removed a background-color on this - just to confirm, it looks like that's because EuiButton's bg color was already overriding it in Amsterdam, correct? 👍

cee-chen
cee-chen approved these changes Nov 18, 2022
View reviewed changes
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

🎉 This is looking good to me - QA'd all modal examples on Firefox, Safari, and Edge!

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6321/

@chandlerprall chandlerprall merged commit 9efedf2 into elastic:main Nov 18, 2022
@cee-chen
Copy link
Member

cee-chen commented Nov 18, 2022 •
edited
Loading

I did a quick grep in Kibana for euiModal (basically trying to find consumers who were doing things like applying our euiModal classNames directly, which will now break). Thankfully 0 instances, unlike EuiFlyout that had at least one instance.

However, I kept coming across this weird reference to .euiModal__flex:

https://github.com/search?q=repo%3Aelastic%2Fkibana%20euiModal__flex&type=code

I searched through EUI main and we definitely don't have that class set or defined anywhere so I have no idea what these folks are hooking into (I guess a really old version of EuiModal?? But some of those git blames are fairly recent 🙈). We could either try to remove the references totally (they're not working anyway), try to convert them to actual working selectors, or leave them alone (status quo). Any thoughts @miukimiu?

@miukimiu
Copy link
Contributor Author

@constancecchen we removed that class in https://github.com/elastic/eui/pull/6161/files#diff-4c5d8e9013780b8dc443258a62175a2548e5fce53325e705ff6b9aa4b9275d6e. I think we can convert them to actual working selectors.

@daveyholler daveyholler mentioned this pull request Nov 18, 2022
Closed
35 tasks
@1Copenut 1Copenut mentioned this pull request Nov 21, 2022
Merged
1Copenut added a commit to elastic/kibana that referenced this pull request Dec 2, 2022
@1Copenut @cee-chen
Bumping EUI to v70.4.0 (#145888)
7376d9c 
`eui@70.2.4` ⏩ `eui@70.4.0`

- "Fixed EuiButtonGroup firing onChange twice" required changing some
tests from `click` to `change`
___

## [`70.4.0`](https://github.com/elastic/eui/tree/v70.4.0)

- Updated `EuiTourStep.footerAction` type to accept `ReactNode[]`
([#6384](elastic/eui#6384))
- Vertically aligned all footer content so that `euiTourStepIndicator`
is always centered ([#6384](elastic/eui#6384))
- Added `filterInCircle` glyph to `EuiIcon`
([#6385](elastic/eui#6385))
- Added `color` prop to `EuiBeacon`
([#6420](elastic/eui#6420))
- Added the `euiMaxBreakpoint` and `euiMinBreakpoint` CSS-in-JS
utilities for creating min/max-width media queries
([#6431](elastic/eui#6431))

**Bug fixes**

- Restores the previous match operator behaviour when the query value is
split into multiple terms after analysis.
([#6409](elastic/eui#6409))
- Fixed missing slide-in animation on `EuiCollapsibleNav`s and left-side
`EuiFlyout`s ([#6422](elastic/eui#6422))
- Fix bug in `EuiCard` where footer were not aligned to the bottom of
the card ([#6424](elastic/eui#6424))
- Fixed multiple component media queries for consumers with custom theme
breakpoints ([#6431](elastic/eui#6431))

## [`70.3.0`](https://github.com/elastic/eui/tree/v70.3.0)

- `EuiSearchBar` now automatically wraps special characters not used by
query syntax in quotes
([#6356](elastic/eui#6356))
- Added `alignment` prop to `EuiBetaBadge`
([#6361](elastic/eui#6361))
- `EuiButton` now accepts `minWidth={false}`
([#6373](elastic/eui#6373))

**Bug fixes**

- Fixed `EuiPageTemplate` not correctly passing the `component` prop to
the inner main content wrapper.
([#6352](elastic/eui#6352))
- `EuiSkipLink` now correctly calls `onClick` even when
`fallbackDestination` is invalid
([#6355](elastic/eui#6355))
- Permanently fixed `EuiModal` to not cause scroll-jumping issues on
modal open ([#6360](elastic/eui#6360))
- Re-fixed `EuiPageSection` not correctly merging `contentProps.css`
([#6365](elastic/eui#6365))
- Fixed `EuiTab` not defaulting to size `m`
([#6366](elastic/eui#6366))
- Fixed the shadow sizes of `.eui-yScrollWithShadows` and
`.eui-xScrollWithShadows`
([#6374](elastic/eui#6374))
- Fixed bug in `EuiCard` where the inner content in vertical cards was
not growing 100% in width
([#6377](elastic/eui#6377))
- Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex`
CSS gap change ([#6380](elastic/eui#6380))
- Fixed visual bug in nested `EuiFlexGroup`s, where the parent
`EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not
([#6381](elastic/eui#6381))

**CSS-in-JS conversions**

- Converted `EuiModal` to Emotion
([#6321](elastic/eui#6321))

**Fixes**

- `EuiButton` no longer outputs unnecessary inline styles for
`minWidth={0}` or `minWidth={false}`
([#6373](elastic/eui#6373))
- `EuiFacetButton` no longer reports type issues when passing props
accepted by `EuiButton`
([#6373](elastic/eui#6373))

Co-authored-by: Constance Chen <constance.chen@elastic.co>
@1Copenut 1Copenut mentioned this pull request Dec 21, 2022
Merged
@nreese nreese mentioned this pull request Jan 18, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cee-chen cee-chen cee-chen approved these changes

Assignees
No one assigned
Labels
emotion
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@miukimiu @kibanamachine @cee-chen @chandlerprall