Skip to content

Commit 74aad4f

Browse files
authored
[Onboarding] guide card css changes (#176338)
## Summary Closes #168401 This PR supports two line titles in guide cards when the guide complete badge appears it isn't cut by the border of the card. <img width="1613" alt="Screenshot 2024-02-06 at 1 50 27 PM" src="https://github.com/elastic/kibana/assets/20343860/6fac3a2e-a174-4b6c-b38e-1f396fa3ba21"> <img width="479" alt="Screenshot 2024-02-06 at 1 50 42 PM" src="https://github.com/elastic/kibana/assets/20343860/8ac146fb-a763-4651-9588-a6246933631a">
1 parent e9e7304 commit 74aad4f

File tree

1 file changed

+9
-20
lines changed
  • packages/kbn-guided-onboarding/src/components/landing_page/guide

1 file changed

+9
-20
lines changed

packages/kbn-guided-onboarding/src/components/landing_page/guide/guide_card.tsx

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,7 @@
88

99
import React, { Fragment, useCallback, useState } from 'react';
1010

11-
import {
12-
EuiCard,
13-
EuiFlexGroup,
14-
EuiFlexItem,
15-
EuiIcon,
16-
EuiTextColor,
17-
useEuiTheme,
18-
} from '@elastic/eui';
11+
import { EuiCard, EuiFlexGroup, EuiIcon, EuiTextColor, useEuiTheme } from '@elastic/eui';
1912
import { i18n } from '@kbn/i18n';
2013

2114
import { css } from '@emotion/react';
@@ -138,7 +131,7 @@ export const GuideCard = ({
138131

139132
const cardCss = css`
140133
position: relative;
141-
height: 125px;
134+
height: 150px;
142135
width: 380px;
143136
.euiCard__top {
144137
margin-block-end: 8px;
@@ -149,7 +142,7 @@ export const GuideCard = ({
149142
}
150143
@media (min-width: 768px) and (max-width: 1210px) {
151144
max-width: 230px;
152-
height: 175px;
145+
height: 200px;
153146
justify-content: center;
154147
}
155148
`;
@@ -175,16 +168,12 @@ export const GuideCard = ({
175168
)}
176169
{isComplete && (
177170
<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="center">
178-
<EuiFlexItem grow={false}>
179-
<EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
180-
</EuiFlexItem>
181-
<EuiFlexItem grow={false}>
182-
<small>
183-
{i18n.translate('guidedOnboardingPackage.gettingStarted.cards.completeLabel', {
184-
defaultMessage: 'Guide complete',
185-
})}
186-
</small>
187-
</EuiFlexItem>
171+
<EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
172+
<small>
173+
{i18n.translate('guidedOnboardingPackage.gettingStarted.cards.completeLabel', {
174+
defaultMessage: 'Guide complete',
175+
})}
176+
</small>
188177
</EuiFlexGroup>
189178
)}
190179
</>

0 commit comments

Comments
 (0)