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 EuiCode and EuiCodeBlock #6263

Merged
merged 22 commits into from
Oct 11, 2022
Merged

[Emotion] Convert EuiCode and EuiCodeBlock #6263

merged 22 commits into from
Oct 11, 2022

Conversation

elizabetdev
Copy link
Contributor

@elizabetdev elizabetdev commented Sep 26, 2022 •
edited
Loading

Summary

This PR converts EuiCode and EuiCodeBlock to Emotion.

Some parts of the EuiCodeBlock are now split into new components:

  • src/components/code/code_block_full_screen_button.tsx
  • src/components/code/code_block_full_screen_wrapper.tsx

Some functions were moved to the src/components/code/utils.tsx:

  • useOverflowDetection
  • useCopy
  • useFullScreen
  • ListRow

Color codes variables and the mixin euiCodeSyntaxTokens now live in:

  • src/components/code/code_syntax.styles.ts

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

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 propUtilityForPlayground)
     
  • Unit tests
  • shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)
  • Removed any mounted 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
  • 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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@cee-chen
Copy link
Contributor

cee-chen commented Sep 30, 2022 •
edited
Loading

@miukimiu sorry it took me so long to get to this PR today - can I ask if there's a specific reason why you're using Emotion globals for the token mixin instead of just leaving them as a direct descendant mixin of the Emotion-generated euiCodeBlock styles? Is it a performance/stylesheets thing, or something else? TBH we just left all our nested descendants in for, e.g. EuiText so I feel that we should do the same for EuiCode.

edit to add: the Global styles are what's causing the test useLayoutEffect warnings/failures.

@cee-chen
Remove Global Emotion CSS
5bac1e0 
- which removes useLayoutEffect warnings in tests
@cee-chen
Fix code block mounted tests
f3f3976 
- because they're mounted, there's now a million Emotion wrappers with repeated props and we have to specify the non-emotion ones

- also remove mounted snapshot
@kibanamachine
Copy link

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

@elizabetdev
Copy link
Contributor Author

Thanks, @constancecchen for the help. 🎉

can I ask if there's a specific reason why you're using Emotion globals for the token mixin instead of just leaving them as a direct descendant mixin of the Emotion

I thought that it would improve the performance. Instead of repeating the same code on every EuiCode or EuiCodeBlock render, it would just render once globally. But maybe that was not even happening... 😬

For me, leaving it as a direct descendant mixin of both components is okay. 👍🏽

@cee-chen
Copy link
Contributor

cee-chen commented Oct 3, 2022 •
edited
Loading

Gotcha - yeah in this case the performance hit/extra output is a necessary evil, just IMO. It's basically the same output as EuiText.

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@cee-chen
Copy link
Contributor

cee-chen commented Oct 6, 2022 •
edited
Loading

@miukimiu I'm doing another quick pass on this in hopes of getting this PR in an approval-ready state before I go. Just wanted to flag that I strongly disagree with the choice to move several hooks and sub-components to the utils file. That file was previously concerned with Refractor/AST related logic and throwing in React-related logic is just shuffling code from one file to another / making another file slightly harder to read without actually organizing them by concept. If no objections I'm going to do a very opinionated architectural pass on the folder 🙈

@kibanamachine
Copy link

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

@cee-chen
[Architectural refactor]
70aa959 
Move hooks and sub-components to files organized by concept/feature

+ other misc cleanup
@cee-chen
Clean up styles further
2a87474 
- went down a bit of a rabbit hole with this, sorry - especially w/ refactoring `mathWithUnits` to accept multiple args (been on my radar for some time)

- the major bug that this work fixes is that we *can't* use a dynamic `paddingSize` based on isFullScreen because the fullscreen code block and non-fullscreen code block need separate and non-connected padding sizes

- in the end i'm still not 100% convinced the code is less 'ugly' with the new `generatePaddingCss` util but our Emotion styles are now more static at least :/ which, considering perf is already a little questionable with the tokens mixin, I thought was worth the tradeoff
@cee-chen
Clean up line CSS further
9340ccb 
- no need for extra `style` + calculation - just use flex
- allows removing static reference to euiSizeS
@cee-chen
Fix virtualized code blocks not respecting paddingSize
8ebb108 
+ dry out tabIndex prop
cee-chen
cee-chen approved these changes Oct 7, 2022
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment •
edited
Loading

Choose a reason for hiding this comment

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

OK, I think I'm all done tinkering. This feels much cleaner to me personally, especially code_block.tsx. Really appreciate you going the extra mile Elizabet!

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@elizabetdev elizabetdev marked this pull request as ready for review October 10, 2022 13:17
@elizabetdev elizabetdev enabled auto-merge (squash) October 11, 2022 12:15
@kibanamachine
Copy link

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

@elizabetdev elizabetdev merged commit 8081fda into elastic:main Oct 11, 2022
@elizabetdev elizabetdev mentioned this pull request Oct 18, 2022
Closed
49 tasks
@cee-chen cee-chen mentioned this pull request Nov 8, 2022
Merged
jbudz pushed a commit to elastic/kibana that referenced this pull request Nov 18, 2022
@elizabetdev @kibanamachine
Upgrade EUI to v70.2.4 (#144845)
c408ceb 
## Summary
`eui@67.1.8` ⏩ `eui@70.2.2`

⚠️ Note: This upgrade contains breaking changes to `EuiFlexGroup` and
`EuiFlexGrid`, primarily around switching margins and negative margins
to `gap`. Please do a quick QA pass of your app to scan for any issues.
We're happy to help resolve minor fixes, or potentially follow up after
PR merges. You can find us over in #eui!

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

**Bug fixes**

- Fixed visual bug in nested `EuiFlexGroup`s, where the parent
`EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not
([#6381](elastic/eui#6381))

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

**Bug fixes**

- Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex`
CSS gap change ([#6380](elastic/eui#6380))

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

- `EuiButton` now accepts `minWidth={false}`
([#6373](elastic/eui#6373))

**Bug 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))
- Fixed the shadow sizes of `.eui-yScrollWithShadows` and
`.eui-xScrollWithShadows`
([#6374](elastic/eui#6374))


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

**Bug fixes**

- Re-fixed `EuiPageSection` not correctly merging `contentProps.css`
([#6365](elastic/eui#6365))
- Fixed `EuiTab` not defaulting to size `m`
([#6366](elastic/eui#6366))

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

- Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This
can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`,
but will always remain accessible to keyboard and screen reader users.
([#6036](elastic/eui#6036))
- `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus
within its children ([#6036](elastic/eui#6036))
- Added `onFocus` prop callback to `EuiSuperDatePicker`
([#6320](elastic/eui#6320))

**Bug fixes**

- Fixed `EuiSelectable` to ensure the full options list is re-displayed
when the search bar is controlled and cleared using `searchProps.value`
([#6317](elastic/eui#6317))
- Fixed incorrect padding on `xl`-sized `EuiTabs`
([#6336](elastic/eui#6336))
- Fixed `EuiCard` not correctly merging `css` on its child `icon`s
([#6341](elastic/eui#6341))
- Fixed `EuiCheckableCard` not setting `css` on the correct DOM node
([#6341](elastic/eui#6341))
- Fixed a webkit rendering issue with `EuiModal`s containing
`EuiBasicTable`s tall enough to scroll
([#6343](elastic/eui#6343))
- Fixed bug in `to_initials` that truncates custom initials
([#6346](elastic/eui#6346))
- Fix bug in `EuiCard` where layout breaks when `horizontal` and
`selectable` are both passed
([#6348](elastic/eui#6348))

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

- Added the `hint` prop to the `<EuiSearchBar />`. This prop lets the
consumer render a hint below the search bar that will be displayed on
focus. ([#6319](elastic/eui#6319))
- Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your
popover contains `EuiDragDropContext`.
([#6329](elastic/eui#6329))

**Bug fixes**

- Fixed `EuiButton`'s cursor style when the button is disabled
([#6323](elastic/eui#6323))
- Fixed `EuiPageTemplate` not recognizing child
`EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props
([#6324](elastic/eui#6324))
- Fixed `EuiBetaBadge` to always respect its `anchorProps` values,
including when there is no tooltip content
([#6326](elastic/eui#6326))
- Temporarily patched `EuiModal` to not cause scroll-jumping issues on
modal open ([#6327](elastic/eui#6327))
- Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns &
sorting toolbar popovers
([#6329](elastic/eui#6329))
- Fixed `EuiButton` not correctly passing `textProps` for children
inside fragments or i18n components
([#6332](elastic/eui#6332))
- Fixed `EuiButton` not correctly respecting `minWidth={0}`
([#6332](elastic/eui#6332))

**CSS-in-JS conversions**

- Converted `EuiTabs` to Emotion
([#6311](elastic/eui#6311))

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

- Added the `enabled` option to the `<EuiInMemoryTable />`
`executeQueryOptions` prop. This option prevents the Query from being
executed when controlled by the consumer.
([#6284](elastic/eui#6284))

**Bug fixes**

- Fixed `EuiOverlayMask` to set a
`[data-relative-to-header=above|below]` attribute to replace the
`--aboveHeader` and `--belowHeader` classNames removed in its Emotion
conversion ([#6289](elastic/eui#6289))
- Fixed `EuiHeader` CSS using removed `EuiOverlayMask` class modifiers
([#6293](elastic/eui#6293))
- Fixed `EuiToolTip` not respecting reduced motion preferences
([#6295](elastic/eui#6295))
- Fixed a bug with `EuiTour` where passing any `panelProps` would cause
the beacon to disappear
([#6298](elastic/eui#6298))

**Breaking changes**

- `@emotion/css` is now a required peer dependency, alongside
`@emotion/react` ([#6288](elastic/eui#6288))
- `@emotion/cache` is no longer required peer dependency, although your
project must still use it if setting custom cache/injection locations
([#6288](elastic/eui#6288))

**CSS-in-JS conversions**

- Converted `EuiCode` and `EuiCodeBlock` to Emotion; Removed
`euiCodeSyntaxTokens` Sass mixin and `$euiCodeBlockPaddingModifiers`;
([#6263](elastic/eui#6263))
- Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion
([#6287](elastic/eui#6287))

## [`69.0.0`](https://github.com/elastic/eui/tree/v69.0.0)

- Added support for `fullWidth` prop on EuiForm, which will be the
default for all rows/controls within
([#6229](elastic/eui#6229))
- Added support for `onResizeStart` and `onResizeEnd` callbacks to
`EuiResizableContainer`
([#6236](elastic/eui#6236))
- Added optional case sensitive option matching to `EuiComboBox` with
the `isCaseSensitive` prop
([#6268](elastic/eui#6268))
- `EuiFlexItem` now supports `grow={0}`
([#6270](elastic/eui#6270))
- Added the `alignItems` prop to `EuiFlexGrid`
([#6281](elastic/eui#6281))
- Added `filter`, `filterExclude`, `filterIgnore`, `filterInclude`,
`indexTemporary`, `infinity`, `sortAscending`, and `sortDescending`
glyphs to `EuiIcon` ([#6282](elastic/eui#6282))

**Bug fixes**

- Fixed `EuiTextProps` to show the `color` type option `inherit` as
default ([#6267](elastic/eui#6267))
- `EuiFlexGroup` now correctly respects `gutterSize` when responsive
([#6270](elastic/eui#6270))
- Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array
not respecting `truncate` overrides
([#6280](elastic/eui#6280))

**Breaking changes**

- `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup`
instead for normal flex display
([#6270](elastic/eui#6270))
- `EuiFlexGrid` now uses modern `display: grid` CSS
([#6270](elastic/eui#6270))
- `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap`
CSS instead of margins and negative margins
([#6270](elastic/eui#6270))
- `EuiFlexGroup` no longer applies responsive styles to `column` or
`columnReverse` directions
([#6270](elastic/eui#6270))

**CSS-in-JS conversions**

- Converted `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` to Emotion
([#6270](elastic/eui#6270))

## [`68.0.0`](https://github.com/elastic/eui/tree/v68.0.0)

- Added `beta` glyph to `EuiIcon`
([#6250](elastic/eui#6250))
- Added `launch` and `spaces` glyphs to `EuiIcon`
([#6260](elastic/eui#6260))
- Added the `fallbackDestination` prop to `EuiSkipLink`, which accepts a
string of query selectors to fall back to if the `destinationId` does
not have a valid target. Defaults to `main`
([#6261](elastic/eui#6261))
- `EuiSkipLink` is now always an `a` tag to ensure that it is always
placed within screen reader link menus.
([#6261](elastic/eui#6261))

**Bug fixes**

- Fixed `EuiSuperDatePicker` not correctly merging passed `className`s
([#6253](elastic/eui#6253))
- Fixed `EuiColorStops` not correctly merging in passed
`data-test-subj`s, `style`s, or `...rest`
([#6255](elastic/eui#6255))
- Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper
instead of the panel. Use `wrapperProps.style` to pass styles to the
wrapper. ([#6255](elastic/eui#6255))
- Fixed custom `onClick`s passed to `EuiSkipLink` overriding
`overrideLinkBehavior`
([#6261](elastic/eui#6261))

**Breaking changes**

- Removed `inherit` and `ghost` color from `EuiListGroupItem`
([#6207](elastic/eui#6207))
- Changed default color to `text` instead of `inherit`
([#6207](elastic/eui#6207))

**CSS-in-JS conversions**

- Converted `EuiListGroup` and `EuiListGroupItem` to Emotion; Removed
`$euiListGroupGutterTypes`, `$euiListGroupItemColorTypes` and
`$euiListGroupItemSizeTypes`;
([#6207](elastic/eui#6207))
- Converted `EuiBadgeGroup` to Emotion
([#6258](elastic/eui#6258))
- Converted `EuiBetaBadge` to Emotion
([#6258](elastic/eui#6258))
- Converted `EuiNotificationBadge` to Emotion
([#6258](elastic/eui#6258))

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thompsongl thompsongl thompsongl left review comments

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

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

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