[EuiCard & friends] Convert to Emotion #6110

cchaos · 2022-08-04T19:55:10Z

Note
I didn't actually start anything new this week, I had done this conversion before going on vacation, I just forgot about it and didn't want to waste the effort 😆

Design update

There's been a updated design proposal in the Figma version for a long time (since Amsterdam style updates) that I've now included in this PR. It simplifies a lot of the original selectable card button code.

I left the de-selected button as text color instead of primary, but it's debatable and technically still customizable.

Code notes

Passes through paddingSize and display for some generated styles
Explicitely sets default padding to m and keeps m when betaBadge exists
Added progressive enhancement for :has() to propograte the outline to the whole card

Other updates

Added anchorProps to EuiToolTip and EuiBetaBadge to allow passing through more options like css
Added truncation to EuiBetaBadge and white background for hollow which aligns with basic EuiBadge styles
Fixed card top padding for badge which was always hard-coded, now it resizes with paddingSize

Checklist

Todo: Investigate why `shouldRenderCustomStyles` doesn’t work

… to match proposed design from Figma

and cleaning up some outdated styles

- Added `anchorProps` to EuiToolTip and EuiBetaBadge to allow passing through more options like `css` - Added truncation to EuiBetaBadge and white background for `hollow`

- Passes through `paddingSize` and `display` for some generated styles - Explicitely sets default padding to `m` and keeps `m` when `betaBadge` exists

- Added progressive enhancement for `:has()` to propograte the outline to the whole card - Deleted the Sass files

- Logicals - Converted docs to TSX - Fixed top padding for badge

kibanamachine · 2022-08-04T20:25:04Z

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

cchaos · 2022-08-04T19:56:42Z

src/global_styling/mixins/_helpers.ts

+ * A constant storing the support for the `:has()` selector through a
+ * media query that will only apply the content it is supported.
+ */
+export const euiSupportsHas = '@supports(selector(:has(p)))';


Should (and where) we start documenting small style-only helpers like this?

src/components/panel/panel.tsx

cchaos · 2022-08-04T20:03:33Z

src/components/card/checkable_card/checkable_card.test.tsx

+  // TODO
+  // shouldRenderCustomStyles(
+  //   <EuiCheckableCard {...checkablePanelRequiredProps} />
+  // );


Help? It spits out some really weird stuff in the console.

Yeah it looks like there are a couple scenarios not accounted for in the shouldRenderCustomStyles helper.

When the css prop is passed to a component that already uses Emotion

When the style prop is not passed to the main element in the component

Looking, but we may need shouldRenderCustomStyles to accept a some kind of config object

Created #6152 to track the work and not block this PR

src/components/card/card_select/card_select.styles.ts

src/components/card/card.tsx

cchaos · 2022-08-04T20:22:14Z

src/components/card/card.styles.ts

+      // Todo: $euiButtonMinWidth
+      // Extend beta badges to at least 30% of the container's width or 112px (whichever is smaller)
+      ${logicalCSS('min-width', 'min(30%, 112px)')};


At some point when EuiButton is converted it'd be nice to get values like this for re-use.

This may be a good place to use the pattern @miukimiu is using in the range slider conversion

kibanamachine · 2022-08-04T21:02:27Z

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

kibanamachine · 2022-08-04T21:32:04Z

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

cchaos · 2022-08-08T14:16:21Z

Forgot to mark this as ready for review 😄

elizabetdev

Thanks, @cchaos.

I basically tested the cards in Chrome, Safari, Edge, and Firefox. Also in light and dark modes.
Looked at the code and LGTM! 🎉

upcoming_changelogs/6110.md

cla-checker-service · 2022-08-22T16:09:14Z

❌ Author of the following commits did not sign a Contributor Agreement:
b6d64f9, 10a0fbe, e7f1bf4, bd0e60e, eaf4632, 122ce69, 0832a74, f962f5d, 72900e7, ebdb62f

Please, read and sign the above mentioned agreement if you want to contribute to this project

kibanamachine · 2022-08-22T16:38:39Z

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

thompsongl

❌ Author of the following commits did not sign a Contributor Agreement:
b6d64f9, 10a0fbe, e7f1bf4, bd0e60e, eaf4632, 122ce69, 0832a74, f962f5d, 72900e7, ebdb62f

Please, read and sign the above mentioned agreement if you want to contribute to this project

Caroline was still with Elastic when these commits were made, so we're good to merge.

cchaos added 10 commits June 23, 2022 23:12

[EuiCheckableCard] Converted

b6d64f9

Todo: Investigate why `shouldRenderCustomStyles` doesn’t work

[EuiCardSelect] Converted and using basic EuiButton and styles

10a0fbe

… to match proposed design from Figma

WIP: Most text-based content converted

e7f1bf4

and cleaning up some outdated styles

WIP: Refactored how betaBadge is presented

bd0e60e

- Added `anchorProps` to EuiToolTip and EuiBetaBadge to allow passing through more options like `css` - Added truncation to EuiBetaBadge and white background for `hollow`

WIP: Styles for image and icon converted

eaf4632

- Passes through `paddingSize` and `display` for some generated styles - Explicitely sets default padding to `m` and keeps `m` when `betaBadge` exists

WIP: Final styles for layout

122ce69

- Added progressive enhancement for `:has()` to propograte the outline to the whole card - Deleted the Sass files

Cleanup

0832a74

- Logicals - Converted docs to TSX - Fixed top padding for badge

Added bordered example

f962f5d

Merge remote-tracking branch 'origin/main' into emotion/card

5b3d839

[EuiToolTip] Allowing anchorProps.className and tests

72900e7

Fixes, tests, and CL

ebdb62f

cchaos commented Aug 4, 2022

View reviewed changes

cchaos marked this pull request as ready for review August 8, 2022 14:15

cchaos requested a review from elizabetdev August 8, 2022 14:16

thompsongl self-requested a review August 8, 2022 18:46

elizabetdev approved these changes Aug 12, 2022

View reviewed changes

upcoming_changelogs/6110.md Outdated Show resolved Hide resolved

thompsongl mentioned this pull request Aug 22, 2022

[Testing] shouldRenderCustomStyles account for more configurations #6152

Closed

Merge branch 'main' into emotion/card

b46cb86

update CL

020fdb0

thompsongl approved these changes Aug 22, 2022

View reviewed changes

thompsongl merged commit 0b7a908 into elastic:main Aug 22, 2022

thompsongl mentioned this pull request Aug 22, 2022

[Meta][CSS-in-JS] Component conversions #5685

Closed

49 tasks

breehall mentioned this pull request Sep 21, 2022

Bumping EUI to version 67.1.8 elastic/kibana#141279

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiCard & friends] Convert to Emotion #6110

[EuiCard & friends] Convert to Emotion #6110

cchaos commented Aug 4, 2022 •

edited

Loading

kibanamachine commented Aug 4, 2022

cchaos Aug 4, 2022

cchaos Aug 4, 2022

thompsongl Aug 9, 2022

thompsongl Aug 22, 2022

cchaos Aug 4, 2022

cchaos Aug 10, 2022

kibanamachine commented Aug 4, 2022

kibanamachine commented Aug 4, 2022

cchaos commented Aug 8, 2022

elizabetdev left a comment

cla-checker-service bot commented Aug 22, 2022

kibanamachine commented Aug 22, 2022

thompsongl left a comment

[EuiCard & friends] Convert to Emotion #6110

[EuiCard & friends] Convert to Emotion #6110

Conversation

cchaos commented Aug 4, 2022 • edited Loading

Design update

Code notes

Other updates

Checklist

kibanamachine commented Aug 4, 2022

cchaos Aug 4, 2022

Choose a reason for hiding this comment

cchaos Aug 4, 2022

Choose a reason for hiding this comment

thompsongl Aug 9, 2022

Choose a reason for hiding this comment

thompsongl Aug 22, 2022

Choose a reason for hiding this comment

cchaos Aug 4, 2022

Choose a reason for hiding this comment

cchaos Aug 10, 2022

Choose a reason for hiding this comment

kibanamachine commented Aug 4, 2022

kibanamachine commented Aug 4, 2022

cchaos commented Aug 8, 2022

elizabetdev left a comment

Choose a reason for hiding this comment

cla-checker-service bot commented Aug 22, 2022

kibanamachine commented Aug 22, 2022

thompsongl left a comment

Choose a reason for hiding this comment

cchaos commented Aug 4, 2022 •

edited

Loading