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