Replace EuiPanel with EuiCard when using beta badges#96147
Replace EuiPanel with EuiCard when using beta badges#96147smith merged 6 commits intoelastic:masterfrom
EuiPanel with EuiCard when using beta badges#96147Conversation
In elastic/eui#4649 the `betaBadgeLabel` and related props have been removed from `EuiPanel` and it's now recommended to use an `EuiCard` instead. Replace these in APM and Observability plugins and update stories so examples can be viewed.
smith
added
v8.0.0
release_note:skip
|
Pinging @elastic/apm-ui (Team:apm) |
cauemarcondes
left a comment
cauemarcondes
left a comment
There was a problem hiding this comment.
LGTM, could you add some screenshots?
x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx
Outdated
Show resolved
Hide resolved
cchaos
left a comment
cchaos
left a comment
There was a problem hiding this comment.
I've sending a couple more suggestions. Really I think there are some overrides of EuiCard that are unnecessary and/or places where the card isn't really appropriate anyway.
| title={ | ||
| <EuiTitle size="s"> | ||
| <h4> | ||
| {i18n.translate('xpack.observability.fleet.title', { | ||
| defaultMessage: 'Have you seen our new Fleet?', |
There was a problem hiding this comment.
The title is already wrapped in an EuiTitle so what you really want is just:
| title={ | |
| <EuiTitle size="s"> | |
| <h4> | |
| {i18n.translate('xpack.observability.fleet.title', { | |
| defaultMessage: 'Have you seen our new Fleet?', | |
| titleElement="h4" | |
| title={i18n.translate('xpack.observability.fleet.title', { | |
| defaultMessage: 'Have you seen our new Fleet?', |
| {i18n.translate('xpack.observability.fleet.button', { | ||
| defaultMessage: 'Try Fleet Beta', | ||
| description={ | ||
| <EuiText size="s" color="subdued" style={{ maxWidth: '700px' }}> |
There was a problem hiding this comment.
I don't think this will actually max out the card? I'd apply this style tag to the actual EuiCard style={}.
Also, the description is already wrapped in a small EuiText, so all you need is the text color
| <EuiText size="s" color="subdued" style={{ maxWidth: '700px' }}> | |
| <EuiTextColor color="subdued"> |
| )} | ||
| </EuiText> | ||
| <EuiSpacer /> | ||
| <EuiCard |
There was a problem hiding this comment.
I think this conversion if forcing EuiCard to be something that it is not. My honest suggestion would be to just move the "Preview" text to a heading similar to the rest of the sections with: <EuiTitle size="xs"><h3 /></EuiTitle> before the panel.
@cauemarcondes at the moment there aren't visual changes, so everything basically looks the same as before. I was planning on linking to the stories once they're built. I'll do that once I address @cchaos's feedback. |
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
In elastic/eui#4649 the `betaBadgeLabel` and related props have been removed from `EuiPanel` and it's now recommended to use an `EuiCard` instead. Replace these in APM and Observability plugins and update stories so examples can be viewed.
…6512) In elastic/eui#4649 the `betaBadgeLabel` and related props have been removed from `EuiPanel` and it's now recommended to use an `EuiCard` instead. Replace these in APM and Observability plugins and update stories so examples can be viewed. Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>
5 participants
In elastic/eui#4649 the
betaBadgeLabeland related props have been removed fromEuiPaneland it's now recommended to use anEuiCardinstead.Replace these in APM and Observability plugins and update stories so examples can be viewed.
License Prompt
Fleet Panel (observability)
Custom link preview
Storybook examples
(Press
Ain the Storybook preview to open the controls panel to adjust component props)