[Emotion] Convert EuiEmptyPrompt #7494

cee-chen · 2024-01-29T23:02:21Z

Summary

As always, I recommend following along by commit.

Other changes/additions in addition to the baseline EuiEmptyPrompt conversion:

Removes extra .euiEmptyPrompt__contentInner div wrapper - wasn't necessary or doing anything
Added new euiBorderColor and useEuiBorderColorCss CSS-in-JS style utils, and DRYed out EuiCommentEvent to use it as well
Various performance improvements/memoization while here

QA

Confirm staging is the same as production with no regressions
Confirm staging storybook is the same as production storybook
- Note: The footer color changed slightly, but this appears to be an intentional change based on Sass to CSS-in-JS updates

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 - N/A
Release checklist
- A changelog entry exists and is marked appropriately.
Designer checklist - N/A

Emotion checklist

Kibana usage

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:
Search Kibana's codebase for {euiComponent}- (case sensitive) to check for usage of modifier classes - None
Any test/query selectors that will need to be updated - None
Any Sass or CSS that will need to be updated, particularly if a component Sass var was deleted - ⚠️ 1: __contentInner changed to __content
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

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)
~~[ ] Enzyme tests converted to RTL~~ - Already RTL

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~~
~~[ ] 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~~
All SCSS files have been removed from the component(s) directory
~~[ ] All SCSS overrides have been removed from the Amsterdam theme~~ No overrides

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.

Extras/nice-to-have

Reduced specificity where possible (usually by reducing nesting and class name chaining)
~~[ ] Documentation pass~~
~~[ ] 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~~

- in same pattern as the background color mixin + DRY out border colors in `EuiCommentEvent`, which this mixin was based on + add snapshot tests + bonus memoization

- reorder vars, remove `let` jsx nodes in favor of useMemo

src/components/empty_prompt/empty_prompt.styles.ts

tkajtoch

Looks and works great! I noticed the slight footer shade difference you mentioned, and if it's been an intentional change before, I'm totally fine with that

kibanamachine · 2024-02-01T17:47:34Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7494/
Storybook: https://eui.elastic.co/pr_7494/storybook

elasticmachine · 2024-02-01T17:47:36Z

💚 Build Succeeded

Buildkite Build
Commit: 68fb642

History

💚 Build #1328 succeeded 0e1d750
💚 Build #1327 succeeded ca623b0
💚 Build #1326 succeeded 0d784b8

`v92.2.1` ⏩ `v93.0.0` --- ## [`v93.0.0`](https://github.com/elastic/eui/releases/v93.0.0) **Bug fixes** - Fixed `EuiTextTruncate` component to clean up timer from side effect on unmount ([#7495](elastic/eui#7495)) **Breaking changes** - Removed deprecated `anchorClassName` prop from `EuiPopover`. Use `className` instead ([#7488](elastic/eui#7488)) - Removed deprecated `buttonRef` prop from `EuiPopover`. Use `popoverRef` instead ([#7488](elastic/eui#7488)) - Removed deprecated `toolTipTitle` and `toolTipPosition` props from `EuiContextMenuItem`. Use `toolTipProps.title` and `toolTipProps.position` instead ([#7489](elastic/eui#7489)) - Removed deprecated internal `setSelection` ref method from `EuiInMemoryTable` and `EuiBasicTable`. Use the new controlled `selection.selected` prop API instead. ([#7491](elastic/eui#7491)) - `EuiTourStep`'s `className` and `style` props now apply to the anchoring element instead of to the popover panel, to match `EuiPopover` behavior. ([#7497](elastic/eui#7497)) - Convert your existing usages to `panelClassName` and `panelStyle` respectively instead. **Performance** - Improved the amount of recomputed styles being generated by `EuiCode` and `EuiCodeBlock` ([#7486](elastic/eui#7486)) **CSS-in-JS conversions** - Converted `EuiSearchBar` to Emotion ([#7490](elastic/eui#7490)) - Converted `EuiEmptyPrompt` to Emotion ([#7494](elastic/eui#7494)) - Added `euiBorderColor` and `useEuiBorderColorCSS` style utilities ([#7494](elastic/eui#7494)) --------- Co-authored-by: Jon <[email protected]>

`v92.2.1` ⏩ `v93.0.0` --- ## [`v93.0.0`](https://github.com/elastic/eui/releases/v93.0.0) **Bug fixes** - Fixed `EuiTextTruncate` component to clean up timer from side effect on unmount ([elastic#7495](elastic/eui#7495)) **Breaking changes** - Removed deprecated `anchorClassName` prop from `EuiPopover`. Use `className` instead ([elastic#7488](elastic/eui#7488)) - Removed deprecated `buttonRef` prop from `EuiPopover`. Use `popoverRef` instead ([elastic#7488](elastic/eui#7488)) - Removed deprecated `toolTipTitle` and `toolTipPosition` props from `EuiContextMenuItem`. Use `toolTipProps.title` and `toolTipProps.position` instead ([elastic#7489](elastic/eui#7489)) - Removed deprecated internal `setSelection` ref method from `EuiInMemoryTable` and `EuiBasicTable`. Use the new controlled `selection.selected` prop API instead. ([elastic#7491](elastic/eui#7491)) - `EuiTourStep`'s `className` and `style` props now apply to the anchoring element instead of to the popover panel, to match `EuiPopover` behavior. ([elastic#7497](elastic/eui#7497)) - Convert your existing usages to `panelClassName` and `panelStyle` respectively instead. **Performance** - Improved the amount of recomputed styles being generated by `EuiCode` and `EuiCodeBlock` ([elastic#7486](elastic/eui#7486)) **CSS-in-JS conversions** - Converted `EuiSearchBar` to Emotion ([elastic#7490](elastic/eui#7490)) - Converted `EuiEmptyPrompt` to Emotion ([elastic#7494](elastic/eui#7494)) - Added `euiBorderColor` and `useEuiBorderColorCSS` style utilities ([elastic#7494](elastic/eui#7494)) --------- Co-authored-by: Jon <[email protected]>

cee-chen added the emotion label Jan 29, 2024

cee-chen added 13 commits January 29, 2024 16:54

Set up empty_prompt.styles.ts

6b0a65e

Convert more sub element CSS

742db43

Convert content wrapper + remove unnecessary extra div

4dc48e1

Convert padding CSS to Emotion

d7fb778

Footer: simplify border-radius CSS + use logical properties

5999bf5

Create global mixin for border colors

40aa2d6

- in same pattern as the background color mixin + DRY out border colors in `EuiCommentEvent`, which this mixin was based on + add snapshot tests + bonus memoization

[bonus perf] memoize useEuiBackgroundColorCSS as well

179ceda

[misc] Clean up & performance improvements

bae9859

- reorder vars, remove `let` jsx nodes in favor of useMemo

Snapshot updates

ab7f117

Delete Sass

25377d4

changelog

85cd772

Unit test

668f1b0

Fix layout CSS regression with comment :|

0e1d750

cee-chen force-pushed the emotion/empty-prompt branch from ca623b0 to 0e1d750 Compare January 30, 2024 00:56

cee-chen marked this pull request as ready for review January 30, 2024 16:55

cee-chen requested a review from a team as a code owner January 30, 2024 16:55

tkajtoch reviewed Feb 1, 2024

View reviewed changes

src/components/empty_prompt/empty_prompt.styles.ts Outdated Show resolved Hide resolved

tkajtoch approved these changes Feb 1, 2024

View reviewed changes

[PR feedback/discussion] Make selectors more goodly

68fb642

cee-chen merged commit f5e3c1a into elastic:main Feb 2, 2024
7 checks passed

cee-chen deleted the emotion/empty-prompt branch February 2, 2024 16:23

This was referenced Feb 2, 2024

[Emotion] EuiEmptyPrompt #6397

Closed

Upgrade EUI to v93.0.0 elastic/kibana#176246

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert EuiEmptyPrompt #7494

[Emotion] Convert EuiEmptyPrompt #7494

cee-chen commented Jan 29, 2024 •

edited

Loading

tkajtoch left a comment

kibanamachine commented Feb 1, 2024

elasticmachine commented Feb 1, 2024

[Emotion] Convert EuiEmptyPrompt #7494

[Emotion] Convert EuiEmptyPrompt #7494

Conversation

cee-chen commented Jan 29, 2024 • edited Loading

Summary

QA

General checklist

Emotion checklist

tkajtoch left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 1, 2024

elasticmachine commented Feb 1, 2024

💚 Build Succeeded

History

cee-chen commented Jan 29, 2024 •

edited

Loading