Discrete unit input

src-docs/src/components/guide_components.scss

@@ -118,3 +118,4 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 @import "guide_sandbox/index";
 @import "guide_section/index";
 @import "guide_rule/index";
+@import "twemoji/index";

src-docs/src/components/index.js

@@ -18,3 +18,7 @@ export {
   GuideSection,
   GuideSectionTypes,
 } from './guide_section';
+
+export {
+  Twemoji
+} from './twemoji';

src-docs/src/components/twemoji/_index.scss

@@ -0,0 +1 @@
+@import 'twemoji';

src-docs/src/components/twemoji/_twemoji.scss

@@ -0,0 +1,6 @@
+.twemoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 .05em 0 .1em;
+  vertical-align: -0.1em;
+}

src-docs/src/components/twemoji/index.js

@@ -0,0 +1,3 @@
+export {
+  Twemoji,
+} from './twemoji';

src-docs/src/components/twemoji/twemoji.js

@@ -0,0 +1,44 @@
+import { isEqual } from 'lodash';
+
+import React, {
+  Component,
+} from 'react';
+
+import {
+  findDOMNode,
+} from 'react-dom';
+
+export class Twemoji extends Component {
+  componentWillMount() {
+    const script = document.createElement('script');
+
+    // a nice to have for the examples, but not something we want to bundle
+    script.src = 'https://twemoji.maxcdn.com/2/twemoji.min.js?2.4';
+    script.async = true;
+    script.onload = () => this.parseTwemoji();
+
+    document.body.appendChild(script);
+  }
+
+  componentDidMount() {
+    this.parseTwemoji();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!isEqual(this.props, prevProps)) {
+      this.parseTwemoji();
+    }
+  }
+
+  render() {
+    return <span {...this.props} />;
+  }
+
+  parseTwemoji() {
+    const node = findDOMNode(this);
+
+    if (window.twemoji) {
+      window.twemoji.parse(node, { className: 'twemoji' });
+    }
+  }
+}

src-docs/src/views/badge/badge.js

@@ -39,6 +39,11 @@ export default () => (
     <EuiBadge color="danger">
       Danger
     </EuiBadge>
+    &nbsp;&nbsp;
+
+    <EuiBadge color="ghost">
+      Ghost
+    </EuiBadge>
   </div>
 
 );

src-docs/src/views/form/field_badges.js

@@ -0,0 +1,230 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiBadge,
+  EuiFormRow,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldBadges,
+  EuiCode,
+} from '../../../../src/components';
+
+import { Twemoji } from '../../components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+  state = {
+    simple: ['a', 'b', 'c'],
+    parsing: ['a', 'b', 'c'],
+    transform: ['a', 'b', 'c'],
+    validation: ['🤯', '😒']
+  }
+
+  render() {
+    return (
+      <div>
+        { this.renderSimpleExample() }
+        { this.renderParseExample() }
+        { this.renderTransformExample() }
+        { this.renderValidationExample() }
+      </div>
+    );
+  }
+
+  renderSimpleExample() {
+    const { simple } = this.state;
+    const onInsert = value => this.setState({ simple: [...simple, value] });
+    const onRemove = value => this.setState({ simple: simple.filter(source => source !== value) });
+
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="Field with discrete values"
+            helpText="
+              Once the user presses Enter, the value is inserted to the list.
+              They can then click on items on that list to remove them.
+            "
+          >
+            <EuiFieldBadges
+              values={simple}
+              onInsert={onInsert}
+              onRemove={onRemove}
+              placeholder="Type and press Enter …"
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="State"
+            helpText="These are the values realized as state."
+          >
+            <div>
+              {
+                simple.map(value => (
+                  <span key={makeId()}>
+                    <EuiBadge>{ value }</EuiBadge>
+                    { ` ` }
+                  </span>
+                ))
+              }
+            </div>
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  renderParseExample() {
+    const { parsing } = this.state;
+    const onInsert = value => this.setState({ parsing: [...parsing, value] });
+    const onRemove = value => this.setState({ parsing: parsing.filter(source => source !== value) });
+    const parse = value => value.toUpperCase();
+
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="Field with custom parsing"
+            helpText={
+              <span>
+                Values can be parsed from the user input string by using the
+                <EuiCode>parse</EuiCode> prop into any plain JavaScript value or objects we need.
+              </span>
+            }
+          >
+            <EuiFieldBadges
+              values={parsing}
+              onInsert={onInsert}
+              onRemove={onRemove}
+              placeholder="Type and press Enter …"
+              parse={parse}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="State"
+            helpText="These are the values realized as state."
+          >
+            <div>
+              {
+                parsing.map(value => (
+                  <span key={makeId()}>
+                    <EuiBadge>{ value }</EuiBadge>
+                    { ` ` }
+                  </span>
+                ))
+              }
+            </div>
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  renderTransformExample() {
+    const { transform } = this.state;
+    const onInsert = value => this.setState({ transform: [...transform, value] });
+    const onRemove = value => this.setState({ transform: transform.filter(source => source !== value) });
+    const renderContent = value => <strong>{value.toUpperCase()}</strong>;
+
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="Field with custom renderContent"
+            helpText={
+              <span>
+                Values can be transformed into any display content with the
+                <EuiCode>renderContent</EuiCode> prop, while preserving the underlying data
+              </span>
+            }
+          >
+            <EuiFieldBadges
+              values={transform}
+              onInsert={onInsert}
+              onRemove={onRemove}
+              placeholder="Type and press Enter …"
+              renderContent={renderContent}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="State"
+            helpText="These are the values realized as state."
+          >
+            <div>
+              {
+                transform.map(value => (
+                  <span key={makeId()}>
+                    <EuiBadge>{ value }</EuiBadge>
+                    { ` ` }
+                  </span>
+                ))
+              }
+            </div>
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  renderValidationExample() {
+    const { validation } = this.state;
+    const onInsert = value => this.setState({ validation: [...validation, value] });
+    const onRemove = value => this.setState({ validation: validation.filter(source => source !== value) });
+    const validate = value => /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g.test(value); // eslint-disable-line max-len
+
+    const renderContent = value => <Twemoji>{ value }</Twemoji>;
+
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="Field with validation logic"
+            helpText={
+              <span>
+                User input can be validated before parsing occurs via the <EuiCode>isValid</EuiCode> prop.
+                Only valid input will be parsed via <EuiCode>parse</EuiCode> and raised
+                to <EuiCode>onInsert</EuiCode>. This prevents bad data from making its way onto your state.
+              </span>
+            }
+          >
+            <div>
+              <EuiFieldBadges
+                values={validation}
+                onInsert={onInsert}
+                onRemove={onRemove}
+                placeholder="Only emoji here …"
+                isValid={validate}
+                renderContent={renderContent}
+              />
+            </div>
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow
+            label="State"
+            helpText="These are the values realized as state."
+          >
+            <div>
+              {
+                validation.map(value => (
+                  <span key={makeId()}>
+                    <EuiBadge>{ value }</EuiBadge>
+                    { ` ` }
+                  </span>
+                ))
+              }
+            </div>
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+}

src-docs/src/views/form/form_controls.js

@@ -1,3 +1,5 @@
+import { without } from 'lodash';
+
 import React, {
   Component,
 } from 'react';
@@ -8,6 +10,7 @@ import {
   EuiFieldPassword,
   EuiFieldSearch,
   EuiFieldText,
+  EuiFieldBadges,
   EuiRange,
   EuiRadioGroup,
   EuiSelect,
@@ -50,6 +53,7 @@ export default class extends Component {
       }],
       radioIdSelected: `${idPrefix}5`,
       numberInputValue: '',
+      badges: ['a', 'b', 'c', 'd']
     };
   }
 
@@ -85,6 +89,16 @@ export default class extends Component {
     });
   }
 
+  onInsertBadge = value => {
+    const added = [...this.state.badges, value];
+    this.setState({ badges: added });
+  }
+
+  onRemoveBadge = value => {
+    const removed = without(this.state.badges, value);
+    this.setState({ badges: removed });
+  }
+
   render() {
     return (
       <div>
@@ -143,6 +157,17 @@ export default class extends Component {
         <br />
         <br />
 
+        <EuiFieldBadges
+          values={this.state.badges}
+          renderContent={value => value.toUpperCase()}
+          onInsert={this.onInsertBadge}
+          onRemove={this.onRemoveBadge}
+          placeholder="Type and press enter …"
+        />
+
+        <br />
+        <br />
+
         <EuiRange />
 
         <br />