adding notes to props

elastic · Oct 31, 2019 · 48fc8c9 · 48fc8c9
1 parent acdedc3
commit 48fc8c9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
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
@@ -27,9 +27,6 @@ exports[`EuiHeaderAlert is rendered 1`] = `
   <div
     class="euiHeaderAlert__text"
   />
-  <div
-    class="euiHeaderAlert__action euiLink"
-  />
 </div>
 `;
 
@@ -99,9 +96,6 @@ exports[`EuiHeaderAlert renders date as an element 1`] = `
   <div
     class="euiHeaderAlert__text"
   />
-  <div
-    class="euiHeaderAlert__action euiLink"
-  />
 </div>
 `;
 
@@ -134,8 +128,5 @@ exports[`EuiHeaderAlert renders title as an element 1`] = `
   <div
     class="euiHeaderAlert__text"
   />
-  <div
-    class="euiHeaderAlert__action euiLink"
-  />
 </div>
 `;
diff --git 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
@@ -15,11 +15,17 @@ export type EuiHeaderAlertProps = CommonProps &
   };
 
 export const EuiHeaderAlert: FunctionComponent<EuiHeaderAlertProps> = ({
+  /**
+   * 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<EuiHeaderAlertProps> = ({
 
       <div className="euiHeaderAlert__title">{title}</div>
       <div className="euiHeaderAlert__text">{text}</div>
-      <div className="euiHeaderAlert__action euiLink">{action}</div>
+      {action ? (
+        <div className="euiHeaderAlert__action euiLink">{action}</div>
+      ) : (
+        undefined
+      )}
     </div>
   );
 };