From 6581dd55698035e4ac1060026df8eee502240e80 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 7 Nov 2022 16:55:50 +0000 Subject: [PATCH 1/5] [EuiCard] Fix bug where layout breaks when `horizontal` and `selectable` --- src/components/card/card.styles.ts | 1 + src/components/card/card_select/card_select.styles.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts index b7d6b4f0b4d..b35fb0470ae 100644 --- a/src/components/card/card.styles.ts +++ b/src/components/card/card.styles.ts @@ -69,6 +69,7 @@ export const euiCardStyles = ( horizontal: css` flex-direction: row; align-items: flex-start; /* 3 */ + flex-wrap: wrap; `, }, 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; `, }; }; From d20745d0a987ca8684ae022a660ed18ed5e3046b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 7 Nov 2022 18:16:00 +0000 Subject: [PATCH 2/5] New layout structure --- .../card/__snapshots__/card.test.tsx.snap | 1410 +++++++++-------- src/components/card/card.styles.ts | 21 +- src/components/card/card.tsx | 35 +- 3 files changed, 809 insertions(+), 657 deletions(-) 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 b35fb0470ae..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; @@ -69,15 +81,8 @@ export const euiCardStyles = ( horizontal: css` flex-direction: row; align-items: flex-start; /* 3 */ - flex-wrap: wrap; `, }, - - 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} From aff8e6dc7cf6936ca35f0daa3b83be0492ed9f45 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 7 Nov 2022 18:40:25 +0000 Subject: [PATCH 3/5] REVERT ME --- src-docs/src/views/card/card_selectable.tsx | 251 +++++++++++++++----- 1 file changed, 186 insertions(+), 65 deletions(-) diff --git a/src-docs/src/views/card/card_selectable.tsx b/src-docs/src/views/card/card_selectable.tsx index 10e80515724..60728c7bbec 100644 --- a/src-docs/src/views/card/card_selectable.tsx +++ b/src-docs/src/views/card/card_selectable.tsx @@ -5,7 +5,9 @@ import { EuiCard, EuiIcon, EuiFlexGroup, + EuiFlexGrid, EuiFlexItem, + EuiSpacer, } from '../../../../src'; export default () => { @@ -25,70 +27,189 @@ export default () => { }; return ( - - - } - title="Sketch" - description="Example of a short card description." - footer={ - - More details - - } - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Google" - description="Example of a longer card description. See how the footers stay lined up." - footer={ - - More details - - } - selectable={{ - onClick: card2Clicked, - isSelected: card2Selected, - }} - /> - - - } - title="Not Adobe" - description="Example of a short card description." - footer={ - - More details - - } - selectable={{ - onClick: () => {}, - isDisabled: true, - }} - /> - - + <> + + + } + title="Sketch" + description="Example of a short card description." + footer={ + + More details + + } + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Google" + description="Example of a longer card description. See how the footers stay lined up." + footer={ + + More details + + } + selectable={{ + onClick: card2Clicked, + isSelected: card2Selected, + }} + /> + + + } + title="Not Adobe" + description="Example of a short card description." + footer={ + + More details + + } + selectable={{ + onClick: () => {}, + isDisabled: true, + }} + /> + + + + + + + + } + title="Custom query" + description="Use KQL or Lucene to detect issues across indices." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Machine Learning" + description="Select ML job to detect anomalous activity." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Threshold" + description="Aggregate query results to detect when number of matches exceeds threshold." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Event Correlation" + description="Use Event Query Language (EQL) to match events, generate sequences, and stack data." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Indicator Match" + description="Use indicators from intelligence sources to detect matching events and alerts." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="New Terms" + description="Find documents with values appearing for the first time." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + + + + + } + title="Custom query" + description="Use KQL or Lucene to detect issues across indices." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Machine Learning" + description="Select ML job to detect anomalous activity." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Threshold" + description="Aggregate query results to detect when number of matches exceeds threshold." + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + ); }; From a362a7a72d69151d13f8eb040128576e33bdb3c8 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 7 Nov 2022 18:57:26 +0000 Subject: [PATCH 4/5] Adding CL --- upcoming_changelogs/6348.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/6348.md 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 From 7dfd7134f813db9a383b0f7d6df2f6b674c0a033 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 8 Nov 2022 18:14:20 +0000 Subject: [PATCH 5/5] Reverting example and changing demos to open in CodeSandbox as `*.tsx` --- src-docs/src/views/card/card_example.js | 18 +- src-docs/src/views/card/card_selectable.tsx | 251 +++++--------------- 2 files changed, 74 insertions(+), 195 deletions(-) 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-docs/src/views/card/card_selectable.tsx b/src-docs/src/views/card/card_selectable.tsx index 60728c7bbec..10e80515724 100644 --- a/src-docs/src/views/card/card_selectable.tsx +++ b/src-docs/src/views/card/card_selectable.tsx @@ -5,9 +5,7 @@ import { EuiCard, EuiIcon, EuiFlexGroup, - EuiFlexGrid, EuiFlexItem, - EuiSpacer, } from '../../../../src'; export default () => { @@ -27,189 +25,70 @@ export default () => { }; return ( - <> - - - } - title="Sketch" - description="Example of a short card description." - footer={ - - More details - - } - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Google" - description="Example of a longer card description. See how the footers stay lined up." - footer={ - - More details - - } - selectable={{ - onClick: card2Clicked, - isSelected: card2Selected, - }} - /> - - - } - title="Not Adobe" - description="Example of a short card description." - footer={ - - More details - - } - selectable={{ - onClick: () => {}, - isDisabled: true, - }} - /> - - - - - - - - } - title="Custom query" - description="Use KQL or Lucene to detect issues across indices." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Machine Learning" - description="Select ML job to detect anomalous activity." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Threshold" - description="Aggregate query results to detect when number of matches exceeds threshold." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Event Correlation" - description="Use Event Query Language (EQL) to match events, generate sequences, and stack data." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Indicator Match" - description="Use indicators from intelligence sources to detect matching events and alerts." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="New Terms" - description="Find documents with values appearing for the first time." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - - - - - } - title="Custom query" - description="Use KQL or Lucene to detect issues across indices." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Machine Learning" - description="Select ML job to detect anomalous activity." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - } - title="Threshold" - description="Aggregate query results to detect when number of matches exceeds threshold." - selectable={{ - onClick: card1Clicked, - isSelected: card1Selected, - }} - /> - - - + + + } + title="Sketch" + description="Example of a short card description." + footer={ + + More details + + } + selectable={{ + onClick: card1Clicked, + isSelected: card1Selected, + }} + /> + + + } + title="Google" + description="Example of a longer card description. See how the footers stay lined up." + footer={ + + More details + + } + selectable={{ + onClick: card2Clicked, + isSelected: card2Selected, + }} + /> + + + } + title="Not Adobe" + description="Example of a short card description." + footer={ + + More details + + } + selectable={{ + onClick: () => {}, + isDisabled: true, + }} + /> + + ); };