[EuiCard] Refactored to use EuiPanel by cchaos · Pull Request #4649 · elastic/eui

cchaos · 2021-03-17T21:44:25Z

Required some updates to how EuiPanel handles `div` or `button`

Before it was entirely linked to the existence of onClick, but for cards' we need to onClick (but not focusable) on a div for accessibility reasons. So I've added the prop element which essentially allows consumer to force to either a button or div. But internally, if this is not specified, will always choose button if onClick exists.

👉 [x]: In the props, the extended element only ever shows up as HTMLButton.

[EuiCard] Now supports more EuiPanel `color` options through the already existing `display` prop

     * Matches to the color property of EuiPanel. If defined, removes any border & shadow.
     * Leave as `undefined` to display as a default panel.
     * Selectable cards will always display as a default panel.

Screen.Recording.2021-03-18.at.04.18.42.PM.mp4

Also fixes #4429 where Amsterdam's cards were not getting the empty shade background color

Updated some of EuiCard's props to be directly related to the `layout` direction

There are 4 props (textAlign, footer, image, and selectable) that are not allowed when the layout="horizontal", so the TS type is now setup this way in addition to the original and still existent console error. Closes #4485

[EuiCheckableCard] Now Uses EuiSplitPanel

This really doesn't change any of the inner-workings of the component and only a slight adjustment to the aesthetics. In the default theme it adds a little more padding because it's now tied to the panel padding for all sides. And in Amsterdam, the default replaces the shadow for a border since likely this will be in a greater form and the shadow is too much.

Also fixes #3629, by applying the onChange function to the onClick of the inner split panel that houses it.

Added Panel nesting guidelines ❤️ @mdefazio

🔔 [BREAKING] Finally removed the beta badge props from EuiPanel

All three, betaBadgeLabel, betaBadgeTooltipContent, and betaBadgeTitle are now removed. The recommendation is to use EuiCard instead.

For Elastic products, I've checked Cloud, which doesn't have any usages of these on the EuiPanel component. And I've got a local branch ready for the 3 places it's used in Kibana to update to use EuiCard instead.

Checklist

# Conflicts: # src/components/card/__snapshots__/card.test.tsx.snap # src/components/card/card.tsx

kibanamachine · 2021-03-17T22:08:49Z

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

Also updating the testing in Kibana docs for quick copy/pastable snippets

kibanamachine · 2021-03-18T19:29:48Z

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

wiki/component-development.md

src-docs/src/services/playground/knobs.js

kibanamachine · 2021-03-18T20:53:01Z

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

kibanamachine · 2021-03-18T21:28:48Z

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

kibanamachine · 2021-03-18T22:09:15Z

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

Closes elastic#4485

kibanamachine · 2021-03-19T22:25:16Z

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

Closes elastic#3629

src/components/card/checkable_card/checkable_card.tsx

kibanamachine · 2021-03-20T20:48:30Z

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

thompsongl · 2021-03-22T16:53:45Z

HELP: In the props, the extended element only ever shows up as HTMLButton.

Fix in #4659

Redirect affordance click

src/components/card/checkable_card/checkable_card.tsx

kibanamachine · 2021-03-23T18:31:24Z

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

thompsongl

Looks good!

src-docs/src/views/card/playground.js

src/components/card/card.tsx

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

kibanamachine · 2021-03-25T21:35:22Z

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

kibanamachine · 2021-03-25T22:00:17Z

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

kibanamachine · 2021-03-26T18:40:34Z

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

In elastic/eui#4649 the `betaBadgeLabel` and related props have been removed from `EuiPanel` and it's now recommended to use an `EuiCard` instead. Replace these in APM and Observability plugins and update stories so examples can be viewed.

…6512) In elastic/eui#4649 the `betaBadgeLabel` and related props have been removed from `EuiPanel` and it's now recommended to use an `EuiCard` instead. Replace these in APM and Observability plugins and update stories so examples can be viewed. Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>

cchaos added 8 commits March 11, 2021 11:04

Initial conversion to use EuiPanel

0f2c4c8

Merge remote-tracking branch 'upstream/master' into fix/card_use_panel

b805cc1

# Conflicts: # src/components/card/__snapshots__/card.test.tsx.snap # src/components/card/card.tsx

Using EuiPanel[‘color’] type as display prop

d0b146c

Cleaning up some disabled styles

5c39257

[Breaking] Removed betaBadge props from EuiPanel

2de07b2

Updated docs

fa2f3df

Adding Panel nesting guidelines

c1b2507

[EuiCheckableCard] now using EuiSplitPanel

7c64d12

cchaos added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Mar 17, 2021

cchaos added 2 commits March 18, 2021 10:55

[EuiCard] Extend div for things like style props

22408a9

Also updating the testing in Kibana docs for quick copy/pastable snippets

Some styling fixes for beta badge

90cc955

cchaos added 2 commits March 18, 2021 16:16

Fix spacing

54a1fcb

Forcing color to be subdued when isDisabled

7375162

cchaos commented Mar 18, 2021

View reviewed changes

wiki/component-development.md Show resolved Hide resolved

src-docs/src/services/playground/knobs.js Show resolved Hide resolved

cchaos added 3 commits March 18, 2021 17:02

Fixing up some docs and adding a playground for checkable card

612bac3

Merge remote-tracking branch 'upstream/master' into fix/card_use_panel

dd42391

cl

21fd957

Actually fixing split panel corners

5fb4b96

cchaos marked this pull request as ready for review March 18, 2021 21:43

cchaos requested a review from thompsongl March 18, 2021 21:44

cchaos and others added 2 commits March 19, 2021 17:56

Make certain props only accepted if layout is not horizontal

94e66a8

Closes elastic#4485

Merge branch 'master' into fix/card_use_panel

efc0569

Adding onClick to split panel with check/radio for more affordance

4ca5596

Closes elastic#3629

cchaos commented Mar 20, 2021

View reviewed changes

src/components/card/checkable_card/checkable_card.tsx Outdated Show resolved Hide resolved

thompsongl and others added 2 commits March 23, 2021 12:44

redirect affordance click

60bcb6c

Merge pull request #45 from thompsongl/fix/card_use_panel

711622c

Redirect affordance click

cchaos commented Mar 23, 2021

View reviewed changes

src/components/card/checkable_card/checkable_card.tsx Show resolved Hide resolved

cchaos and others added 2 commits March 23, 2021 14:05

Update src/components/card/checkable_card/checkable_card.tsx

5f69469

Merge remote-tracking branch 'upstream/master' into fix/card_use_panel

8169728

thompsongl approved these changes Mar 25, 2021

View reviewed changes

src-docs/src/views/card/playground.js Outdated Show resolved Hide resolved

src/components/card/card.tsx Outdated Show resolved Hide resolved

cchaos and others added 4 commits March 25, 2021 17:11

Apply suggestions from code review

b6aacd3

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

Merge remote-tracking branch 'upstream/master' into fix/card_use_panel

66194d8

cl

7924399

cl

94762d7

Wider guidelines example

6a5a1b7

Merge branch 'master' into fix/card_use_panel

76ca79c

cchaos merged commit ca6a530 into elastic:master Mar 28, 2021

cchaos deleted the fix/card_use_panel branch March 28, 2021 21:12

smith mentioned this pull request Apr 2, 2021

Replace EuiPanel with EuiCard when using beta badges elastic/kibana#96147

Merged

thompsongl mentioned this pull request Apr 7, 2021

Upgrade EUI to v32.0.4 elastic/kibana#96459

Merged

Conversation

cchaos commented Mar 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Required some updates to how EuiPanel handles div or button

[EuiCard] Now supports more EuiPanel color options through the already existing display prop

Updated some of EuiCard's props to be directly related to the layout direction

[EuiCheckableCard] Now Uses EuiSplitPanel

Added Panel nesting guidelines ❤️ @mdefazio

🔔 [BREAKING] Finally removed the beta badge props from EuiPanel

Checklist

Uh oh!

kibanamachine commented Mar 17, 2021

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

kibanamachine commented Mar 18, 2021

Uh oh!

kibanamachine commented Mar 19, 2021

Uh oh!

Uh oh!

kibanamachine commented Mar 20, 2021

Uh oh!

thompsongl commented Mar 22, 2021

Uh oh!

Uh oh!

kibanamachine commented Mar 23, 2021

Uh oh!

thompsongl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Mar 25, 2021

Uh oh!

kibanamachine commented Mar 25, 2021

Uh oh!

kibanamachine commented Mar 26, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cchaos commented Mar 17, 2021 •

edited

Loading

Required some updates to how EuiPanel handles `div` or `button`

[EuiCard] Now supports more EuiPanel `color` options through the already existing `display` prop

Updated some of EuiCard's props to be directly related to the `layout` direction