EuiBadge health status docs (#4006)

* Adding new section for health status badge * Adding badge health example
elastic · Sep 9, 2020 · 6661ca9 · 6661ca9
1 parent 89e409b
commit 6661ca9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 15 deletions.
diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -76,6 +76,18 @@ const badgeButtonSnippet = [
 </EuiBadge>`,
 ];
 
+import BadgeHealth from './badge_health';
+const badgeHealthSource = require('!!raw-loader!./badge_health');
+const badgeHealthHtml = renderToHtml(BadgeHealth);
+const badgeHealthSnippet = [
+  `<EuiBadge color="secondary">Healthy</EuiBadge>
+`,
+  `<EuiBadge color="warning">Warning</EuiBadge>
+`,
+  `<EuiBadge color="danger">Critical</EuiBadge>
+`,
+];
+
 import BadgeHref from './badge_href';
 const badgeHrefSource = require('!!raw-loader!./badge_href');
 const badgeHrefHtml = renderToHtml(BadgeHref);
@@ -188,6 +200,29 @@ export const BadgeExample = {
       snippet: badgeButtonSnippet,
       demo: <BadgeButton />,
     },
+    {
+      title: 'Badge for health status',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: badgeHealthSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: badgeHealthHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            Badges can work as health status indicators in places where there
+            are a lot of repeated statuses, e.g. in tables.
+          </p>
+        </div>
+      ),
+      snippet: badgeHealthSnippet,
+      demo: <BadgeHealth />,
+    },
     {
       title: 'Badge with href',
       source: [

diff --git a/src-docs/src/views/badge/badge_health.js b/src-docs/src/views/badge/badge_health.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+    <EuiFlexItem grow={false}>
+      <EuiBadge color="secondary">Healthy</EuiBadge>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiBadge color="warning">Warning</EuiBadge>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiBadge color="danger">Critical</EuiBadge>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiBadge color="default">Unknown</EuiBadge>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
@@ -58,7 +58,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 28 2016',
         magnitude: 1,
-        health: <EuiHealth color="success">Healthy</EuiHealth>,
+        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
       },
       {
         id: 1,
@@ -70,7 +70,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 01 2016',
         magnitude: 1,
-        health: <EuiHealth color="success">Healthy</EuiHealth>,
+        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
       },
       {
         id: 2,
@@ -83,11 +83,11 @@ export default class extends Component {
         type: 'user',
         dateCreated: (
           <span>
-            Tue Dec 01 2016 &nbsp; <EuiBadge color="secondary">New!</EuiBadge>
+            Tue Dec 01 2016 &nbsp; <EuiBadge color="accent">New!</EuiBadge>
           </span>
         ),
         magnitude: 10,
-        health: <EuiHealth color="warning">Warning</EuiHealth>,
+        health: <EuiBadge color="warning">Warning</EuiBadge>,
       },
       {
         id: 3,
@@ -104,7 +104,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 16 2016',
         magnitude: 100,
-        health: <EuiHealth color="success">Healthy</EuiHealth>,
+        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
       },
       {
         id: 4,
@@ -115,7 +115,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 13 2016',
         magnitude: 1000,
-        health: <EuiHealth color="warning">Warning</EuiHealth>,
+        health: <EuiBadge color="warning">Warning</EuiBadge>,
       },
       {
         id: 5,
@@ -126,7 +126,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="success">Healthy</EuiHealth>,
+        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
       },
       {
         id: 6,
@@ -137,7 +137,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="danger">Danger</EuiHealth>,
+        health: <EuiBadge color="danger">Danger</EuiBadge>,
       },
       {
         id: 7,
@@ -148,7 +148,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="warning">Warning</EuiHealth>,
+        health: <EuiBadge color="warning">Warning</EuiBadge>,
       },
       {
         id: 8,
@@ -159,7 +159,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="warning">Warning</EuiHealth>,
+        health: <EuiBadge color="warning">Warning</EuiBadge>,
       },
       {
         id: 9,
@@ -170,7 +170,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="success">Healthy</EuiHealth>,
+        health: <EuiBadge color="secondary">Healthy</EuiBadge>,
       },
       {
         id: 10,
@@ -181,7 +181,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="danger">Danger</EuiHealth>,
+        health: <EuiBadge color="danger">Danger</EuiBadge>,
       },
       {
         id: 11,
@@ -192,7 +192,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="warning">Warning</EuiHealth>,
+        health: <EuiBadge color="warning">Warning</EuiBadge>,
       },
       {
         id: 12,
@@ -203,7 +203,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="success">Healthy</EuiHealth>,
+        health: <EuiHealth color="secondary">Healthy</EuiHealth>,
       },
       {
         id: 13,
@@ -214,7 +214,7 @@ export default class extends Component {
         type: 'user',
         dateCreated: 'Tue Dec 11 2016',
         magnitude: 10000,
-        health: <EuiHealth color="danger">Danger</EuiHealth>,
+        health: <EuiBadge color="danger">Danger</EuiBadge>,
       },
     ];