diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap index 031173b5fb27..6bf8a39aa0e5 100644 --- a/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap +++ b/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap @@ -27,9 +27,6 @@ exports[`EuiHeaderAlert is rendered 1`] = `
- `; @@ -99,9 +96,6 @@ exports[`EuiHeaderAlert renders date as an element 1`] = `
- `; @@ -134,8 +128,5 @@ exports[`EuiHeaderAlert renders title as an element 1`] = `
- `; diff --git a/src/components/header/header_alert/_header_alert.scss b/src/components/header/header_alert/_header_alert.scss index 5824d8098d8f..bce8c9aa66b1 100644 --- a/src/components/header/header_alert/_header_alert.scss +++ b/src/components/header/header_alert/_header_alert.scss @@ -26,12 +26,12 @@ } .euiHeaderAlert__text { - @include euiFontSizeXS; - margin-bottom: $euiSizeS; + @include euiFontSizeS; + margin-bottom: $euiSize; } .euiHeaderAlert__action { - @include euiFontSizeXS; + @include euiFontSizeS; } .euiHeaderAlert__date { diff --git a/src/components/header/header_alert/header_alert.tsx b/src/components/header/header_alert/header_alert.tsx index 31349da8875b..c72e24b5fba4 100644 --- a/src/components/header/header_alert/header_alert.tsx +++ b/src/components/header/header_alert/header_alert.tsx @@ -15,11 +15,17 @@ export type EuiHeaderAlertProps = CommonProps & }; export const EuiHeaderAlert: FunctionComponent = ({ + /** + * Adds a link to the alert. + */ action, className, date, text, title, + /** + * Adds an icon next to the alert's date. Usually used to show the Kibana version related to the alert using `EuiBadge`. + */ badge, ...rest }) => { @@ -36,7 +42,11 @@ export const EuiHeaderAlert: FunctionComponent = ({
{title}
{text}
-
{action}
+ {action ? ( +
{action}
+ ) : ( + undefined + )}
); };