From d25437c7ce23d000ef43383dc1b5098dae8ef8f8 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 8 Nov 2022 18:56:16 +0000 Subject: [PATCH] [EuiCard] Fix bug where layout breaks when `horizontal` and `selectable` (#6348) * [EuiCard] Fix bug where layout breaks when `horizontal` and `selectable` * New layout structure * REVERT ME * Adding CL * Reverting example and changing demos to open in CodeSandbox as `*.tsx` --- src-docs/src/views/card/card_example.js | 18 +- .../card/__snapshots__/card.test.tsx.snap | 1410 +++++++++-------- src/components/card/card.styles.ts | 20 +- src/components/card/card.tsx | 35 +- .../card/card_select/card_select.styles.ts | 1 + upcoming_changelogs/6348.md | 3 + 6 files changed, 822 insertions(+), 665 deletions(-) create mode 100644 upcoming_changelogs/6348.md diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 35bd37c6bb1..2d9b101b0bc 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -106,7 +106,7 @@ export const CardExample = { title: 'Layout', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardLayoutSource, }, ], @@ -148,7 +148,7 @@ export const CardExample = { title: 'Images', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardImageSource, }, ], @@ -194,7 +194,7 @@ export const CardExample = { title: 'Footer', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardFooterSource, }, ], @@ -235,7 +235,7 @@ export const CardExample = { title: 'Beta badge', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardBetaSource, }, ], @@ -269,7 +269,7 @@ export const CardExample = { title: 'Selectable', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardSelectableSource, }, ], @@ -319,7 +319,7 @@ export const CardExample = { ), source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardCheckableCheckboxSource, }, ], @@ -345,7 +345,7 @@ export const CardExample = { ), source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardCheckableSource, }, ], @@ -358,7 +358,7 @@ export const CardExample = { title: 'Custom children', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardChildrenSource, }, ], @@ -395,7 +395,7 @@ export const CardExample = { title: 'Plain and other colors', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: cardDisplaySource, }, ], diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index c307eb88bdc..f02fcb9c3b6 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -2,70 +2,78 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
-
- - - Link - - + + Link + + +
`; exports[`EuiCard horizontal selectable 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -120,28 +132,32 @@ exports[`EuiCard is rendered 1`] = ` exports[`EuiCard props a null icon 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -149,29 +165,33 @@ exports[`EuiCard props a null icon 1`] = ` exports[`EuiCard props accepts div props like style 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -179,44 +199,48 @@ exports[`EuiCard props accepts div props like style 1`] = ` exports[`EuiCard props an avatar icon 1`] = `
-
-
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -224,25 +248,29 @@ exports[`EuiCard props an avatar icon 1`] = ` exports[`EuiCard props children 1`] = `
-

- - Card title - -

- Child +

+ + Card title + +

+
+ Child +
@@ -250,33 +278,37 @@ exports[`EuiCard props children 1`] = ` exports[`EuiCard props children with description 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

-
-
- Child +
+

+ Card description +

+
+
+ Child +
@@ -284,28 +316,32 @@ exports[`EuiCard props children with description 1`] = ` exports[`EuiCard props display accent is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -313,28 +349,32 @@ exports[`EuiCard props display accent is rendered 1`] = ` exports[`EuiCard props display danger is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -342,28 +382,32 @@ exports[`EuiCard props display danger is rendered 1`] = ` exports[`EuiCard props display plain is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -371,28 +415,32 @@ exports[`EuiCard props display plain is rendered 1`] = ` exports[`EuiCard props display primary is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -400,28 +448,32 @@ exports[`EuiCard props display primary is rendered 1`] = ` exports[`EuiCard props display subdued is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -429,28 +481,32 @@ exports[`EuiCard props display subdued is rendered 1`] = ` exports[`EuiCard props display success is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -458,28 +514,32 @@ exports[`EuiCard props display success is rendered 1`] = ` exports[`EuiCard props display transparent is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -487,28 +547,32 @@ exports[`EuiCard props display transparent is rendered 1`] = ` exports[`EuiCard props display warning is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -516,64 +580,72 @@ exports[`EuiCard props display warning is rendered 1`] = ` exports[`EuiCard props footer 1`] = `
-

- - Card title - -

+ + Card title + +

+
+

+ Card description +

+
+
-

- Card description -

+ + Footer +
-
- - Footer - -
`; exports[`EuiCard props hasBorder 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -581,28 +653,32 @@ exports[`EuiCard props hasBorder 1`] = ` exports[`EuiCard props horizontal 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -610,31 +686,35 @@ exports[`EuiCard props horizontal 1`] = ` exports[`EuiCard props href supports href as a link 1`] = `
-

- - Hoi - -

-

- There +

+ + Hoi +

+
+

+ There +

+
@@ -642,36 +722,40 @@ exports[`EuiCard props href supports href as a link 1`] = ` exports[`EuiCard props icon 1`] = `
- -
-
-

- Card title - -

+ class="myIconClass euiCard__icon emotion-euiCard__icon-vertical" + data-euiicon-type="apmApp" + /> +
-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -679,42 +763,46 @@ exports[`EuiCard props icon 1`] = ` exports[`EuiCard props image 1`] = `
-
- Nature +
+
+ Nature +
-
-
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -722,30 +810,34 @@ exports[`EuiCard props image 1`] = ` exports[`EuiCard props isDisabled 1`] = `
-

- -

-

- Card description +

+

+
+

+ Card description +

+
@@ -753,28 +845,32 @@ exports[`EuiCard props isDisabled 1`] = ` exports[`EuiCard props paddingSize l is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -782,28 +878,32 @@ exports[`EuiCard props paddingSize l is rendered 1`] = ` exports[`EuiCard props paddingSize m is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -811,28 +911,32 @@ exports[`EuiCard props paddingSize m is rendered 1`] = ` exports[`EuiCard props paddingSize none is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -840,28 +944,32 @@ exports[`EuiCard props paddingSize none is rendered 1`] = ` exports[`EuiCard props paddingSize s is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -869,28 +977,32 @@ exports[`EuiCard props paddingSize s is rendered 1`] = ` exports[`EuiCard props paddingSize xl is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -898,28 +1010,32 @@ exports[`EuiCard props paddingSize xl is rendered 1`] = ` exports[`EuiCard props paddingSize xs is rendered 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -927,28 +1043,32 @@ exports[`EuiCard props paddingSize xs is rendered 1`] = ` exports[`EuiCard props selectable 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -1001,28 +1125,32 @@ exports[`EuiCard props textAlign center 1`] = ` exports[`EuiCard props textAlign left 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -1030,28 +1158,32 @@ exports[`EuiCard props textAlign left 1`] = ` exports[`EuiCard props textAlign right 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
@@ -1059,28 +1191,32 @@ exports[`EuiCard props textAlign right 1`] = ` exports[`EuiCard props titleElement 1`] = `
-

- - Card title - -

-

- Card description -

+

+ + Card title + +

+
+

+ Card description +

+
@@ -1088,28 +1224,32 @@ exports[`EuiCard props titleElement 1`] = ` exports[`EuiCard props titleElement with nodes 1`] = `
-

- - Card title - -

-

- Card description -

+

+ + Card title + +

+
+

+ Card description +

+
@@ -1117,28 +1257,32 @@ exports[`EuiCard props titleElement with nodes 1`] = ` exports[`EuiCard props titleSize 1`] = `
-

- - Card title - -

-

- Card description +

+ + Card title +

+
+

+ Card description +

+
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts index b7d6b4f0b4d..082b70f7d95 100644 --- a/src/components/card/card.styles.ts +++ b/src/components/card/card.styles.ts @@ -40,13 +40,15 @@ export const euiCardStyles = ( card: { euiCard: css` display: flex; + align-items: flex-start; + justify-content: space-between; + flex-direction: column; // Apply the outline to the whole card when the internal text button has focus &:has([class*='euiCard__text'][class*='-interactive']:focus:focus-visible) { outline: ${euiTheme.focus.width} solid currentColor; } `, - aligned: { center: css` ${logicalTextAlignCSS('center')}; @@ -61,7 +63,17 @@ export const euiCardStyles = ( align-items: flex-end; `, }, + disabled: css` + cursor: not-allowed; // duplicate property due to Chrome bug + background-color: ${euiButtonColor(euiThemeContext, 'disabled')}; + color: ${euiTheme.colors.disabledText}; + `, + }, + main: { + euiCard__main: css` + display: flex; + `, layout: { vertical: css` flex-direction: column; @@ -71,12 +83,6 @@ export const euiCardStyles = ( align-items: flex-start; /* 3 */ `, }, - - disabled: css` - cursor: not-allowed; // duplicate property due to Chrome bug - background-color: ${euiButtonColor(euiThemeContext, 'disabled')}; - color: ${euiTheme.colors.disabledText}; - `, }, content: { diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index d48bdad6a5e..b28ec411f3f 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -167,7 +167,6 @@ export const EuiCard: FunctionComponent = ({ styles.card.euiCard, // Text alignment should always be left when horizontal styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign], - styles.card.layout[layout], isDisabled && styles.card.disabled, ]; @@ -176,6 +175,8 @@ export const EuiCard: FunctionComponent = ({ styles.content.layout[layout], ]; + const mainStyles = [styles.main.euiCard__main, styles.main.layout[layout]]; + const textStyles = euiCardTextStyles(euiThemeContext); const textCSS = [ textStyles.euiCard__text, @@ -401,26 +402,28 @@ export const EuiCard: FunctionComponent = ({ paddingSize={paddingSize} {...rest} > - {optionalCardTop} +
+ {optionalCardTop} -
- - {theTitle} - +
+ + {theTitle} + - {optionalDescription} + {optionalDescription} - {optionalChildren} -
+ {optionalChildren} +
- {/* Beta badge should always be after the title/description but before any footer buttons */} - {optionalBetaBadge} + {/* Beta badge should always be after the title/description but before any footer buttons */} + {optionalBetaBadge} - {optionalFooter} + {optionalFooter} +
{optionalSelectButton} diff --git a/src/components/card/card_select/card_select.styles.ts b/src/components/card/card_select/card_select.styles.ts index f0a9c402d18..25fe4ddb243 100644 --- a/src/components/card/card_select/card_select.styles.ts +++ b/src/components/card/card_select/card_select.styles.ts @@ -12,6 +12,7 @@ export const euiCardSelectStyles = () => { return { euiCardSelect: css` transform: none !important; + align-self: flex-end; `, }; }; diff --git a/upcoming_changelogs/6348.md b/upcoming_changelogs/6348.md new file mode 100644 index 00000000000..10b02228f3b --- /dev/null +++ b/upcoming_changelogs/6348.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fix bug in `EuiCard` where layout breaks when `horizontal` and `selectable` are both passed \ No newline at end of file