simplify logic, use new viz palette, add snippets

elastic · Jan 7, 2020 · 6e23c90 · 6e23c90
1 parent 48028f6
commit 6e23c90
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 27,521 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,6 @@
     "@types/react-beautiful-dnd": "^10.1.0",
     "chroma-js": "^2.0.4",
     "classnames": "^2.2.5",
-    "chroma-js": "^2.0.4",
     "highlight.js": "^9.12.0",
     "html": "^1.0.0",
     "keymirror": "^0.1.1",

diff --git a/src-docs/src/views/badge/badge.js b/src-docs/src/views/badge/badge.js
@@ -1,10 +1,12 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 
 import {
   EuiBadge,
   EuiFlexItem,
   EuiFlexGroup,
   EuiSpacer,
+  EuiSwitch,
+  EuiText,
   EuiTitle,
 } from '../../../../src/components';
 
@@ -19,54 +21,72 @@ const badges = [
 ];
 
 const customBadges = [
-  '#AAA',
   '#DDD',
-  '#999',
+  '#AAA',
   '#666',
   '#333',
-  '#000',
   '#BADA55',
   '#FCF7BC',
   '#FEA27F',
   '#FFA500',
   '#0000FF',
 ];
 
-export default () => (
-  <Fragment>
-    <EuiTitle size="xxs">
-      <h3>EUI colors</h3>
-    </EuiTitle>
-    <EuiSpacer size="s" />
-    <EuiFlexGroup
-      wrap
-      responsive={false}
-      gutterSize="xs"
-      style={{ width: 300 }}>
-      {badges.map(badge => (
-        <EuiFlexItem grow={false} key={badge}>
-          <EuiBadge color={badge}>{badge}</EuiBadge>
-        </EuiFlexItem>
-      ))}
-      <EuiFlexItem grow={false}>
-        <EuiBadge isDisabled={true}>disabled</EuiBadge>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiSpacer />
-    <EuiTitle size="xxs">
-      <h3>Custom HEX colors</h3>
-    </EuiTitle>
-    <EuiSpacer size="s" />
-    <EuiFlexGroup
-      wrap
-      responsive={false}
-      gutterSize="xs"
-      style={{ width: 300 }}>
-      {customBadges.map(badge => (
-        <EuiFlexItem grow={false} key={badge}>
-          <EuiBadge color={badge}>{badge}</EuiBadge>
+export default () => {
+  const [isDisabled, setDisabled] = useState(false);
+
+  return (
+    <Fragment>
+      <EuiTitle size="xs">
+        <h3>Accepted color names</h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+        {badges.map(badge => (
+          <EuiFlexItem grow={false} key={badge}>
+            <EuiBadge color={badge}>{badge}</EuiBadge>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <h3>Custom color examples</h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup
+        wrap
+        responsive={false}
+        gutterSize="xs"
+        style={{ width: '300px' }}>
+        {customBadges.map(badge => (
+          <EuiFlexItem grow={false} key={badge}>
+            <EuiBadge color={badge}>{badge}</EuiBadge>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <h3>Disabled state</h3>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiText size="s">
+        Regardless of the assigned color, all badges use the same disabled state
+        styles.
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiSwitch
+        label="Show disabled state"
+        checked={isDisabled}
+        onChange={e => setDisabled(e.target.checked)}
+      />
+      <EuiSpacer size="m" />
+      <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+        <EuiFlexItem grow={false}>
+          <EuiBadge color="secondary" isDisabled={isDisabled}>
+            {isDisabled ? 'Disabled badge' : 'Disable me!'}
+          </EuiBadge>
         </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
-  </Fragment>
-);
+      </EuiFlexGroup>
+    </Fragment>
+  );
+};
diff --git a/src-docs/src/views/badge/badge_button.js b/src-docs/src/views/badge/badge_button.js
@@ -7,43 +7,31 @@ export default () => (
     <EuiBadge
       color="primary"
       onClick={() => window.alert('Badge clicked')}
-      onClickAriaLabel="Example of onclick event for the button"
+      onClickAriaLabel="Example of onClick event for the button"
       data-test-sub="testExample1">
-      onClick on badge itself
+      onClick on text within badge
     </EuiBadge>
 
     <EuiBadge
+      color="hollow"
       iconType="cross"
       iconSide="right"
-      color="#333"
       iconOnClick={() => window.alert('Icon inside badge clicked')}
-      iconOnClickAriaLabel="Example of onclick event for icon within the button"
+      iconOnClickAriaLabel="Example of onClick event for icon within the button"
       data-test-sub="testExample2">
       onClick on icon within badge
     </EuiBadge>
 
     <EuiBadge
-      iconType="cross"
-      iconSide="right"
       color="secondary"
-      onClick={() => window.alert('Badge clicked')}
-      onClickAriaLabel="Example of onclick event for the button"
-      iconOnClick={() => window.alert('Icon inside badge clicked')}
-      iconOnClickAriaLabel="Example of onclick event for icon within the button"
-      data-test-sub="testExample3">
-      onClick on itself and the icon
-    </EuiBadge>
-
-    <EuiBadge
       iconType="cross"
       iconSide="right"
-      color="danger"
       onClick={() => window.alert('Badge clicked')}
-      onClickAriaLabel="Example of onclick event for the button"
+      onClickAriaLabel="Example of onClick event for the button"
       iconOnClick={() => window.alert('Icon inside badge clicked')}
-      iconOnClickAriaLabel="Example of onclick event for icon within the button"
+      iconOnClickAriaLabel="Example of onClick event for icon within the button"
       data-test-sub="testExample3">
-      onClick on itself and the icon
+      onClick on both text and icon within badge
     </EuiBadge>
   </div>
 );
diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -17,26 +17,77 @@ import {
 import Badge from './badge';
 const badgeSource = require('!!raw-loader!./badge');
 const badgeHtml = renderToHtml(Badge);
+const badgeSnippet = [
+  `<EuiBadge>Default</EuiBadge>
+`,
+  `<EuiBadge color="hollow">Hollow</EuiBadge>
+`,
+  `<EuiBadge color="#BADA55">Custom</EuiBadge>
+`,
+  `<EuiBadge color="secondary" isDisabled>Disabled</EuiBadge>
+`,
+];
 
 import BadgeWithIcon from './badge_with_icon';
 const badgeWithIconSource = require('!!raw-loader!./badge_with_icon');
 const badgeWithIconHtml = renderToHtml(BadgeWithIcon);
+const badgeWithIconSnippet = `<EuiBadge color="hollow" iconType="cross" iconSide="right">Label</EuiBadge>
+`;
 
 import BadgeButton from './badge_button';
 const badgeButtonSource = require('!!raw-loader!./badge_button');
 const badgeButtonHtml = renderToHtml(BadgeButton);
+const badgeButtonSnippet = [
+  `<EuiBadge
+  color="primary"
+  onClick={this.onBadgeClick}
+  onClickAriaLabel="Aria label applied to text button"
+/>
+  Clickable text
+</EuiBadge>`,
+  `<EuiBadge
+  iconType="cross"
+  iconSide="right"
+  color="hollow"
+  iconOnClick={this.onBadgeIconClick}
+  iconOnClickAriaLabel="Aria label applied to icon button"
+  />
+  Text with clickable icon
+</EuiBadge>`,
+  `<EuiBadge
+  iconType="cross"
+  iconSide="right"
+  color="secondary"
+  onClick={this.onBadgeClick}
+  onClickAriaLabel="Aria label applied to text button"
+  iconOnClick={this.onBadgeIconClick}
+  iconOnClickAriaLabel="Aria label applied to icon button"
+  />
+  Clickable text with clickable icon
+</EuiBadge>`,
+];
+
+import BadgeTruncate from './badge_truncate';
+const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
+const badgeTruncateHtml = renderToHtml(BadgeTruncate);
 
 import BetaBadge from './beta_badge';
 const betaBadgeSource = require('!!raw-loader!./beta_badge');
 const betaBadgeHtml = renderToHtml(BetaBadge);
+const betaBadgeSnippet = [
+  `<EuiBetaBadge label="Beta" />
+`,
+  `<EuiBetaBadge label="Lab" tooltipContent="Describe why this is considered beta." />
+`,
+  `<EuiBetaBadge label="Lab" iconType="beaker" />
+`,
+];
 
 import NotificationBadge from './notification_badge';
 const notificationBadgeSource = require('!!raw-loader!./notification_badge');
 const notificationBadgeHtml = renderToHtml(NotificationBadge);
-
-import BadgeTruncate from './badge_truncate';
-const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
-const badgeTruncateHtml = renderToHtml(BadgeTruncate);
+const notificationBadgeSnippet = `<EuiNotificationBadge>3</EuiNotificationBadge>
+`;
 
 export const BadgeExample = {
   title: 'Badge',
@@ -58,10 +109,11 @@ export const BadgeExample = {
           they will automatically space themselves if you use them in a
           repetitive fashion it is good form to wrap them using a{' '}
           <EuiCode>FlexGroup</EuiCode> so that they will wrap when width is
-          constrained (as is done artificially in the example below).
+          constrained (as seen in the custom color example below).
         </p>
       ),
       props: { EuiBadge },
+      snippet: badgeSnippet,
       demo: <Badge />,
     },
     {
@@ -77,6 +129,7 @@ export const BadgeExample = {
         },
       ],
       text: <p>Badges can use icons on the left and right (default) sides.</p>,
+      snippet: badgeWithIconSnippet,
       demo: <BadgeWithIcon />,
     },
     {
@@ -111,6 +164,7 @@ export const BadgeExample = {
           </EuiCallOut>
         </div>
       ),
+      snippet: badgeButtonSnippet,
       demo: <BadgeButton />,
     },
     {
@@ -178,6 +232,7 @@ export const BadgeExample = {
         </div>
       ),
       props: { EuiBetaBadge },
+      snippet: betaBadgeSnippet,
       demo: <BetaBadge />,
     },
     {
@@ -196,11 +251,12 @@ export const BadgeExample = {
         <p>
           Used to showcase the number of notifications, alerts or hidden
           selections. Typically used in{' '}
-          <Link to="/layout/header">EuiHeader</Link> or (eventually){' '}
+          <Link to="/layout/header">EuiHeader</Link>{' '}
           <Link to="/forms/filter-group">EuiFilterButtons</Link>.
         </p>
       ),
       props: { EuiNotificationBadge },
+      snippet: notificationBadgeSnippet,
       demo: <NotificationBadge />,
     },
   ],

diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js
@@ -4,10 +4,10 @@ import { EuiBadge } from '../../../../src/components';
 
 export default () => (
   <div>
-    <EuiBadge iconType="check">Default</EuiBadge>
-
-    <EuiBadge color="primary" iconType="cross" iconSide="right">
-      Primary
+    <EuiBadge color="hollow" iconType="cross" iconSide="right">
+      Hollow
     </EuiBadge>
+
+    <EuiBadge iconType="check">Default</EuiBadge>
   </div>
 );
diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js
@@ -17,7 +17,7 @@ export default () => (
     &emsp;
     <EuiBetaBadge label="Lab" iconType="beaker" />
     <EuiSpacer />
-    <EuiTitle>
+    <EuiTitle size="s">
       <h3>
         Beta badges will also line up nicely with titles &nbsp;
         <EuiBetaBadge