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

[EuiCard] Fix bug where layout breaks when horizontal and selectable #6348

Merged
merged 5 commits into from
Nov 8, 2022
Merged

[EuiCard] Fix bug where layout breaks when horizontal and selectable #6348

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6581dd5
[EuiCard] Fix bug where layout breaks when `horizontal` and `selectable`
miukimiu Nov 7, 2022
d20745d
New layout structure
miukimiu Nov 7, 2022
aff8e6d
REVERT ME
miukimiu Nov 7, 2022
a362a7a
Adding CL
miukimiu Nov 7, 2022
7dfd713
Reverting example and changing demos to open in CodeSandbox as `*.tsx`
miukimiu Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 186 additions & 65 deletions src-docs/src/views/card/card_selectable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import {
EuiCard,
EuiIcon,
EuiFlexGroup,
EuiFlexGrid,
EuiFlexItem,
EuiSpacer,
} from '../../../../src';

export default () => {
Expand All @@ -25,70 +27,189 @@ export default () => {
};

return (
<EuiFlexGroup gutterSize="l">
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xxl" type="logoSketch" />}
title="Sketch"
description="Example of a short card description."
footer={
<EuiButtonEmpty
iconType="iInCircle"
size="xs"
onClick={detailsClicked}
aria-label="See more details about Sketch"
>
More details
</EuiButtonEmpty>
}
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xxl" type="logoGCP" />}
title="Google"
description="Example of a longer card description. See how the footers stay lined up."
footer={
<EuiButtonEmpty
iconType="iInCircle"
size="xs"
onClick={detailsClicked}
aria-label="See more details about Google"
>
More details
</EuiButtonEmpty>
}
selectable={{
onClick: card2Clicked,
isSelected: card2Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xxl" type="logoAerospike" />}
title="Not Adobe"
description="Example of a short card description."
footer={
<EuiButtonEmpty
iconType="iInCircle"
size="xs"
onClick={detailsClicked}
aria-label="See more details about Not Adobe"
>
More details
</EuiButtonEmpty>
}
selectable={{
onClick: () => {},
isDisabled: true,
}}
/>
</EuiFlexItem>
</EuiFlexGroup>
<>
<EuiFlexGroup gutterSize="l">
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xxl" type="logoSketch" />}
title="Sketch"
description="Example of a short card description."
footer={
<EuiButtonEmpty
iconType="iInCircle"
size="xs"
onClick={detailsClicked}
aria-label="See more details about Sketch"
>
More details
</EuiButtonEmpty>
}
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xxl" type="logoGCP" />}
title="Google"
description="Example of a longer card description. See how the footers stay lined up."
footer={
<EuiButtonEmpty
iconType="iInCircle"
size="xs"
onClick={detailsClicked}
aria-label="See more details about Google"
>
More details
</EuiButtonEmpty>
}
selectable={{
onClick: card2Clicked,
isSelected: card2Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
icon={<EuiIcon size="xxl" type="logoAerospike" />}
title="Not Adobe"
description="Example of a short card description."
footer={
<EuiButtonEmpty
iconType="iInCircle"
size="xs"
onClick={detailsClicked}
aria-label="See more details about Not Adobe"
>
More details
</EuiButtonEmpty>
}
selectable={{
onClick: () => {},
isDisabled: true,
}}
/>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="xxl" />

<EuiFlexGrid gutterSize="l" columns={3}>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xxl" type="search" />}
title="Custom query"
description="Use KQL or Lucene to detect issues across indices."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xxl" type="machineLearningApp" />}
title="Machine Learning"
description="Select ML job to detect anomalous activity."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xxl" type="search" />}
title="Threshold"
description="Aggregate query results to detect when number of matches exceeds threshold."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xxl" type="search" />}
title="Event Correlation"
description="Use Event Query Language (EQL) to match events, generate sequences, and stack data."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xxl" type="search" />}
title="Indicator Match"
description="Use indicators from intelligence sources to detect matching events and alerts."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="xxl" type="search" />}
title="New Terms"
description="Find documents with values appearing for the first time."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
</EuiFlexGrid>
<EuiSpacer size="xxl" />

<EuiFlexGroup gutterSize="l">
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="l" type="search" />}
title="Custom query"
description="Use KQL or Lucene to detect issues across indices."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="l" type="machineLearningApp" />}
title="Machine Learning"
description="Select ML job to detect anomalous activity."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
layout="horizontal"
icon={<EuiIcon size="l" type="search" />}
title="Threshold"
description="Aggregate query results to detect when number of matches exceeds threshold."
selectable={{
onClick: card1Clicked,
isSelected: card1Selected,
}}
/>
</EuiFlexItem>
</EuiFlexGroup>
</>
);
};
Loading