github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Onboarding] guide card css changes (#176338)

Browse source 
## 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="6fac3a2e-a174-4b6c-b38e-1f396fa3ba21">
<img width="479" alt="Screenshot 2024-02-06 at 1 50 42 PM"
src="8ac146fb-a763-4651-9588-a6246933631a">
This commit is contained in:
Rachel Shen 2024-02-07 08:56:25 -07:00 • committed by GitHub
parent e9e73043a7
commit 74aad4f829
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 9 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,14 +8,7 @@
import React, { Fragment, useCallback, useState } from 'react';
import {
EuiCard,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiTextColor,
useEuiTheme,
} from '@elastic/eui';
import { EuiCard, EuiFlexGroup, EuiIcon, EuiTextColor, useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
@ -138,7 +131,7 @@ export const GuideCard = ({
const cardCss = css`
position: relative;
height: 125px;
height: 150px;
width: 380px;
.euiCard__top {
margin-block-end: 8px;
@ -149,7 +142,7 @@ export const GuideCard = ({
}
@media (min-width: 768px) and (max-width: 1210px) {
max-width: 230px;
height: 175px;
height: 200px;
justify-content: center;
}
`;
@ -175,16 +168,12 @@ export const GuideCard = ({
)}
{isComplete && (
<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="center">
<EuiFlexItem grow={false}>
<EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<small>
{i18n.translate('guidedOnboardingPackage.gettingStarted.cards.completeLabel', {
defaultMessage: 'Guide complete',
})}
</small>
</EuiFlexItem>
<EuiIcon type="checkInCircleFilled" color={euiTheme.colors.success} />
<small>
{i18n.translate('guidedOnboardingPackage.gettingStarted.cards.completeLabel', {
defaultMessage: 'Guide complete',
})}
</small>
</EuiFlexGroup>
)}
</>