boundary component

components/system/components/DatePicker.js

@@ -6,10 +6,18 @@ import { css, keyframes } from "@emotion/react";
 import moment from "moment";
 
 import { Input } from "~/components/system/components/Input";
+import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 
-const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
+const weekdays = [
-  (day, i) => <div key={i}>{day}</div>
+  "Sun",
-);
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "Fri",
+  "Sat",
+].map((day, i) => <div key={i}>{day}</div>);
 
 const expand = keyframes`
   0% {
@@ -310,56 +318,66 @@ export class DatePicker extends React.Component {
       ));
     }
     return (
-      <div css={STYLES_DATE_INPUT}>
+      <div>
-        <input
+        <DescriptionGroup
-          ref={this.myInput}
+          tooltip={this.props.tooltip}
-          disabled
+          label={this.props.label}
-          css={STYLES_HIDDEN_INPUT}
+          description={this.props.description}
-          type="date"
-          name={this.props.name}
-          value={this.props.value}
-          onChange={this.props.onChange}
         />
-        <div>
+        <Boundary
-          <Input
+          enabled={this.state.cal}
-            label={this.props.label}
+          onOutsideRectEvent={this._handleCalendar}
-            description={this.props.description}
+          style={{ maxWidth: "480px" }}
-            tooltip={this.props.tooltip}
+        >
-            icon={SVG.Calendar}
+          <div css={STYLES_DATE_INPUT}>
-            max={10}
+            <input
-            value={this.state.value}
+              ref={this.myInput}
-            placeholder="MM/DD/YYYY"
+              disabled
-            pattern="^[0-9\/]*$"
+              css={STYLES_HIDDEN_INPUT}
-            validation={this.state.validation}
+              type="date"
-            onChange={this._handleChange}
+              name={this.props.name}
-            onBlur={this._handleBlur}
+              value={this.props.value}
-            onSubmit={this._handleCalendar}
+              onChange={this.props.onChange}
-          />
+            />
-          {this.state.cal ? (
+            <div>
-            <div css={STYLES_CALENDAR}>
+              <Input
-              <div css={STYLES_MONTH_CONTAINER}>
+                icon={SVG.Calendar}
-                <SVG.ChevronLeft
+                max={10}
-                  height="20px"
+                value={this.state.value}
-                  css={STYLES_ICON}
+                placeholder="MM/DD/YYYY"
-                  onClick={() => this._incrementCal(-1)}
+                pattern="^[0-9\/]*$"
-                />
+                validation={this.state.validation}
-                <div css={STYLES_MONTH}>
+                onChange={this._handleChange}
-                  {this.state.cal.isSame(moment(), "year")
+                onBlur={this._handleBlur}
-                    ? this.state.cal.format("MMMM")
+                onSubmit={this._handleCalendar}
-                    : this.state.cal.format("MMMM YYYY")}
+              />
+              {this.state.cal ? (
+                <div css={STYLES_CALENDAR}>
+                  <div css={STYLES_MONTH_CONTAINER}>
+                    <SVG.ChevronLeft
+                      height="20px"
+                      css={STYLES_ICON}
+                      onClick={() => this._incrementCal(-1)}
+                    />
+                    <div css={STYLES_MONTH}>
+                      {this.state.cal.isSame(moment(), "year")
+                        ? this.state.cal.format("MMMM")
+                        : this.state.cal.format("MMMM YYYY")}
+                    </div>
+                    <SVG.ChevronRight
+                      height="20px"
+                      css={STYLES_ICON}
+                      onClick={() => this._incrementCal(1)}
+                      style={{ justifySelf: "end" }}
+                    />
+                  </div>
+                  <div css={STYLES_WEEKDAYS}>{weekdays}</div>
+                  <div css={STYLES_DATES}>{month}</div>
                 </div>
-                <SVG.ChevronRight
+              ) : null}
-                  height="20px"
-                  css={STYLES_ICON}
-                  onClick={() => this._incrementCal(1)}
-                  style={{ justifySelf: "end" }}
-                />
-              </div>
-              <div css={STYLES_WEEKDAYS}>{weekdays}</div>
-              <div css={STYLES_DATES}>{month}</div>
             </div>
-          ) : null}
+          </div>
-        </div>
+        </Boundary>
       </div>
     );
   }

components/system/components/GlobalModal.js

@@ -4,6 +4,7 @@ import * as SVG from "~/components/system/svg";
 import * as Strings from "~/common/strings";
 
 import { css } from "@emotion/react";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 
 const STYLES_BACKGROUND = css`
   position: fixed;
@@ -63,15 +64,17 @@ export class GlobalModal extends React.Component {
   render() {
     if (!this.state.modal) return null;
     return (
-      <div
+      <div css={STYLES_BACKGROUND} style={this.props.backgroundStyle}>
-        css={STYLES_BACKGROUND}
+        <Boundary
-        style={this.props.backgroundStyle}
+          enabled
-        onClick={this._handleDelete}
+          onOutsideRectEvent={this._handleDelete}
-      >
+          isDataMenuCaptured={true}
-        <div css={STYLES_MODAL} style={this.props.style}>
+        >
-          {this.state.modal}
+          <div css={STYLES_MODAL} style={this.props.style}>
-          <SVG.Close css={STYLES_CLOSE_ICON} onClick={this._handleDelete} />
+            {this.state.modal}
-        </div>
+            <SVG.Dismiss css={STYLES_CLOSE_ICON} onClick={this._handleDelete} />
+          </div>
+        </Boundary>
       </div>
     );
   }

components/system/components/ListEditor.js

@@ -7,6 +7,8 @@ import Draggable from "react-draggable";
 
 import { Input } from "~/components/system/components/Input";
 import { ButtonPrimary } from "~/components/system/components/Buttons";
+import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 
 const ITEM_HEIGHT = 30;
 
@@ -24,7 +26,7 @@ const expand = keyframes`
 const STYLES_INPUT = css`
   box-sizing: border-box;
   display: inline-block;
-  width: calc(100% - 80px);
+  width: 100%;
 `;
 
 const STYLES_INPUT_HIDDEN = css`
@@ -33,7 +35,6 @@ const STYLES_INPUT_HIDDEN = css`
   opacity: 0;
   pointer-events: none;
   position: absolute;
-  height: 0;
 `;
 
 const STYLES_MODAL_BACKGROUND = css`
@@ -66,8 +67,7 @@ const STYLES_DELETE = css`
 const STYLES_REORDER = css`
   box-sizing: border-box;
   height: 14px;
-  margin-top: 4px;
+  margin-top: 1px;
-  cursor: grab;
   color: ${Constants.system.darkGray};
   justify-self: start;
 
@@ -77,6 +77,7 @@ const STYLES_REORDER = css`
 `;
 
 const STYLES_LIST = css`
+  cursor: grab;
   box-sizing: border-box;
   max-width: 480px;
   min-width: 188px;
@@ -89,6 +90,9 @@ const STYLES_LIST = css`
   border-radius: 4px;
   animation: ${expand} 500ms ease-out 1;
   position: absolute;
+  :active {
+    cursor: grabbing;
+  }
 `;
 
 const STYLES_LIST_ITEM = css`
@@ -97,7 +101,7 @@ const STYLES_LIST_ITEM = css`
   height: 30px;
   display: grid;
   align-items: center;
-  grid-template-columns: 2fr 30fr 1fr;
+  grid-template-columns: 24px 1fr 24px;
   border-radius: 4px;
   padding: 0 5px;
   background-color: ${Constants.system.white};
@@ -115,9 +119,14 @@ export class ListEditor extends React.Component {
 
   _handleToggle = () => {
     if (this.state.expand) {
-      this.props.onChange({ name: this.props.name, value: this.state.options });
+      this.props.onChange({
+        target: { name: this.props.name, value: this.state.options },
+      });
     }
-    this.setState({ expand: !this.state.expand });
+    this.setState({ expand: !this.state.expand }),
+      () => {
+        console.log(this.state.expand);
+      };
   };
 
   _handleDelete = (i) => {
@@ -194,48 +203,50 @@ export class ListEditor extends React.Component {
         >
           <SVG.Reorder className="cursor" css={STYLES_REORDER} />
           <div>{item}</div>
-          <SVG.Close
+          <SVG.Dismiss
             css={STYLES_DELETE}
             onClick={() => this._handleDelete(i)}
           />
         </div>
       </Draggable>
     ));
+
     return (
       <div>
-        <div
+        <DescriptionGroup
-          css={this.state.expand ? STYLES_INPUT_HIDDEN : STYLES_INPUT}
+          tooltip={this.props.tooltip}
-          onFocus={this._handleToggle}
+          label={this.props.label}
+          description={this.props.description}
+        />
+        <Boundary
+          enabled={this.state.expand}
+          onOutsideRectEvent={this._handleToggle}
+          style={{
+            maxWidth: "480px",
+          }}
         >
-          <Input
+          <div
-            name={this.props.name}
+            css={this.state.expand ? STYLES_INPUT_HIDDEN : STYLES_INPUT}
-            style={{ cursor: "pointer" }}
+            onFocus={this._handleToggle}
-            value={this.state.options}
+          >
-            readOnly
+            <Input
-            tooltip={this.props.tooltip}
+              name={this.props.name}
-            label={this.props.label}
+              style={{ cursor: "pointer" }}
-            description={this.props.description}
+              value={this.state.options}
-          />
+              readOnly
-        </div>
+            />
-        {this.state.expand ? (
+          </div>
-          <div css={STYLES_MODAL_BACKGROUND} onClick={this._handleToggle} />
+          <div css={this.state.expand ? STYLES_INPUT : STYLES_INPUT_HIDDEN}>
-        ) : null}
+            <Input
-        <div css={this.state.expand ? STYLES_INPUT : STYLES_INPUT_HIDDEN}>
+              value={this.state.search}
-          <Input
+              placeholder={this.props.placeholder}
-            value={this.state.search}
+              icon={this.state.search ? SVG.Plus : null}
-            tooltip={this.props.tooltip}
+              onChange={this._handleChange}
-            label={this.props.label}
+              onSubmit={this._handleAdd}
-            placeholder={this.props.placeholder}
+            />
-            description={this.props.description}
+            <div css={STYLES_LIST}>{options}</div>
-            icon={SVG.Search}
+          </div>
-            onChange={this._handleChange}
+        </Boundary>
-            onSubmit={this._handleAdd}
-          />
-        </div>
-        <ButtonPrimary css={STYLES_BUTTON} onClick={this._handleToggle}>
-          {this.state.expand ? "Save" : "Edit"}
-        </ButtonPrimary>
-        {this.state.expand ? <div css={STYLES_LIST}>{options}</div> : null}
       </div>
     );
   }

components/system/components/fragments/Boundary.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+
+export class Boundary extends React.PureComponent {
+  static defaultProps = {
+    className: undefined,
+    captureResize: false,
+    captureScroll: false,
+    children: null,
+    enabled: false,
+    isDataMenuCaptured: false,
+    onOutsideRectEvent: () => {},
+  };
+
+  _root = undefined;
+
+  componentDidMount() {
+    if (!this.props.enabled) {
+      return;
+    }
+    this._addListeners();
+  }
+
+  componentWillUnmount() {
+    this._removeListeners();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.enabled != prevProps.enabled) {
+      if (this.props.enabled) {
+        this._addListeners();
+        return;
+      }
+      this._removeListeners();
+    }
+  }
+
+  _addListeners = () => {
+    this._removeListeners();
+
+    // NOTE(jim): Ensures the execution of these methods since setTimeout clears the call stack and fires this.
+    window.setTimeout(() => {
+      if (this.props.onOutsideRectEvent) {
+        window.addEventListener("click", this._handleOutsideClick);
+      }
+      if (this.props.captureResize) {
+        window.addEventListener("resize", this._handleWindowResize);
+      }
+      if (this.props.captureScroll) {
+        window.addEventListener("scroll", this._handleWindowScroll);
+      }
+    });
+  };
+
+  _handleOutsideClick = (e) => {
+    // NOTE(jim): anything with `data-menu` is also ignored...
+    if (!e.target) {
+      return;
+    }
+
+    if (
+      this.props.isDataMenuCaptured &&
+      typeof e.target.hasAttribute === "function" &&
+      e.target.hasAttribute("data-menu")
+    ) {
+      return;
+    }
+
+    if (
+      this.props.isDataMenuCaptured &&
+      e.target.parentNode &&
+      typeof e.target.parentNode.hasAttribute === "function" &&
+      e.target.parentNode.hasAttribute("data-menu")
+    ) {
+      return;
+    }
+
+    if (this._root && !this._root.contains(e.target)) {
+      this._handleOutsideRectEvent(e);
+    }
+  };
+
+  _handleWindowResize = (e) => this._handleOutsideRectEvent(e);
+  _handleWindowScroll = (e) => this._handleOutsideRectEvent(e);
+
+  _removeListeners = () => {
+    window.removeEventListener("click", this._handleOutsideClick);
+    window.removeEventListener("resize", this._handleWindowResize);
+    window.removeEventListener("scroll", this._handleWindowScroll);
+  };
+
+  _handleOutsideRectEvent = (e) => {
+    this.props.onOutsideRectEvent(e);
+  };
+
+  render() {
+    return (
+      <div
+        className={this.props.className}
+        ref={(c) => {
+          this._root = c;
+        }}
+        style={this.props.style}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}

components/system/index.js

@@ -55,6 +55,7 @@ import { Toggle } from "~/components/system/components/Toggle";
 import { H1, H2, H3, H4, P, UL, OL, LI } from "~/components/system/components/Typography";
 
 // NOTE(jim): Fragments
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 import { CodeText } from "~/components/system/components/fragments/CodeText";
 import { TooltipAnchor } from "~/components/system/components/fragments/TooltipAnchor";
 import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
@@ -114,6 +115,7 @@ export {
   OL,
   LI,
   // NOTE(jim): Fragments, not meant to be used.
+  Boundary,
   TooltipAnchor,
   DescriptionGroup,
   TableContent,

components/system/svg.js

@@ -9,6 +9,7 @@ export const Dismiss = (props) => (
     strokeLinejoin="round"
     height={props.height}
     style={props.style}
+    {...props}
   >
     <line x1="18" y1="6" x2="6" y2="18" />
     <line x1="6" y1="6" x2="18" y2="18" />
@@ -21,6 +22,7 @@ export const Privacy = (props) => (
     xmlns="http://www.w3.org/2000/svg"
     height={props.height}
     style={props.style}
+    {...props}
   >
     <g
       fill="none"
@@ -44,6 +46,7 @@ export const FileImage = (props) => (
     xmlns="http://www.w3.org/2000/svg"
     height={props.height}
     style={props.style}
+    {...props}
   >
     <g
       fill="none"
@@ -89,6 +92,7 @@ export const Logo = (props) => (
     height={props.height}
     style={props.style}
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       d="m71.4 57.6c-.7 3.3-1.3 6.4-2 9.8 5.9.9 11.7 1.7 17.7 2.6-.5 1.6-.9 3.1-1.4 4.8-5.8-.8-11.5-1.7-17.3-2.5-1.1 4.2-2 8.3-3.3 12.2-1.4 4.4-3 8.7-5 12.9-2.6 5.2-6.8 8.9-12.7 10.1-3.5.7-7 .4-10-1.9-.9-.7-1.8-1.8-1.9-2.8-.1-1.1.5-2.7 1.4-3.3.6-.5 2.3-.1 3.1.5 1.1.8 1.8 2.1 2.6 3.3 1.8 2.5 4.4 2.9 6.8.8 2.9-2.5 4.4-5.8 5.3-9.3 1.9-7.3 3.6-14.8 5.3-22.2.1-.3 0-.7 0-1.3-5.4-.8-10.8-1.7-16.5-2.5.2-1.6.4-3 .6-4.8 5.6.8 11.1 1.6 17 2.4.8-3.2 1.5-6.4 2.3-9.7-6-.9-11.7-1.8-17.8-2.7.2-1.6.4-3.2.6-4.8 6.1.9 12 1.7 18.2 2.6.5-1.8.9-3.5 1.4-5.1 1.7-5.6 3.2-11.3 6.8-16.2s8.1-8.1 14.5-7.8c2.8.1 5.5.9 7.5 3.2.4.5 1 1.1 1 1.6-.1 1.2 0 2.9-.8 3.6-1.1 1.1-2.8.5-4-.6-.9-.9-1.6-1.9-2.3-2.9-1.8-2.4-4.7-2.9-6.8-.7-1.6 1.7-3.2 3.7-3.9 5.9-2.1 6.6-3.8 13.2-5.8 20.2 5.9.9 11.4 1.7 17.1 2.5-.5 1.6-.9 3.1-1.3 4.7-5.5-1.1-10.9-1.9-16.4-2.6z"
@@ -133,169 +137,160 @@ export const CheckBox = (props) => {
 
 export const CopyAndPaste = (props) => {
   return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 24 24"
-        fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="none"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-      >
+      strokeLinejoin="round"
-        <path d="m9.5 21.5h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-16 .00000015c-.00000008-.552285.447715-1 1-1h2" />
+      {...props}
-        <path d="m13.5 3.5h2-.00000004c.552285-.00000002 1 .447715 1 1v3.5" />
+    >
-        <path d="m9.56066.93834c.585786.585786.585786 1.53553 0 2.12132-.585786.585786-1.53553.585786-2.12132 0-.585786-.585786-.585786-1.53553 0-2.12132.585786-.585786 1.53553-.585786 2.12132 0" />
+      <path d="m9.5 21.5h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-16 .00000015c-.00000008-.552285.447715-1 1-1h2" />
-        <path d="m9.915 2.5h2.585-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2.585" />
+      <path d="m13.5 3.5h2-.00000004c.552285-.00000002 1 .447715 1 1v3.5" />
-        <path d="m22.5 22.5c0 .552285-.447715 1-1 1h-9-.00000004c-.552285-.00000002-1-.447715-1-1v-11.5.00000015c-.00000008-.552285.447715-1 1-1h7.086.00000001c.265195.00005664.519507.105451.707.293l1.914 1.914-.00000002-.00000002c.187549.187493.292943.441805.293.707z" />
+      <path d="m9.56066.93834c.585786.585786.585786 1.53553 0 2.12132-.585786.585786-1.53553.585786-2.12132 0-.585786-.585786-.585786-1.53553 0-2.12132.585786-.585786 1.53553-.585786 2.12132 0" />
-        <path d="m14.5 14.5h5" />
+      <path d="m9.915 2.5h2.585-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2.585" />
-        <path d="m14.5 17.5h5" />
+      <path d="m22.5 22.5c0 .552285-.447715 1-1 1h-9-.00000004c-.552285-.00000002-1-.447715-1-1v-11.5.00000015c-.00000008-.552285.447715-1 1-1h7.086.00000001c.265195.00005664.519507.105451.707.293l1.914 1.914-.00000002-.00000002c.187549.187493.292943.441805.293.707z" />
-      </g>
+      <path d="m14.5 14.5h5" />
+      <path d="m14.5 17.5h5" />
     </svg>
   );
 };
 
 export const BandwidthDown = (props) => {
   return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 24 24"
-        fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="none"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-        strokeWidth="1.5"
+      strokeLinejoin="round"
-      >
+      strokeWidth="1.5"
-        <path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
+      {...props}
-        <path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
+    >
-        <path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
+      <path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
-        <path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
+      <path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
-        <path d="m9.75 20.25h-5.25" />
+      <path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
-        <path d="m9 9.75 3 3 3-3" />
+      <path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
-        <path d="m12 12.75v-12" />
+      <path d="m9.75 20.25h-5.25" />
-      </g>
+      <path d="m9 9.75 3 3 3-3" />
+      <path d="m12 12.75v-12" />
     </svg>
   );
 };
 
 export const BandwidthUp = (props) => {
   return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 24 24"
-        fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="none"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-        strokeWidth="1.5"
+      strokeLinejoin="round"
-      >
+      strokeWidth="1.5"
-        <path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
+      {...props}
-        <path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
+    >
-        <path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
+      <path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
-        <path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
+      <path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
-        <path d="m9.75 20.25h-5.25" />
+      <path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
-        <path d="m15 3.75-3-3-3 3" />
+      <path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
-        <path d="m12 .75v12" />
+      <path d="m9.75 20.25h-5.25" />
-      </g>
+      <path d="m15 3.75-3-3-3 3" />
-    </svg>
+      <path d="m12 .75v12" />
-  );
-};
-
-export const Close = (props) => {
-  return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      >
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
-      </g>
     </svg>
   );
 };
 
 export const Search = (props) => {
   return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 24 24"
-        fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="none"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-        strokeWidth="1.5"
+      strokeLinejoin="round"
-      >
+      strokeWidth="1.5"
-        <circle cx="11" cy="11" r="8"></circle>
+      {...props}
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    >
-      </g>
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
     </svg>
   );
 };
 
 export const Reorder = (props) => {
   return (
-    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 14 14"
-        fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="currentColor"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-        strokeWidth="1.5"
+      strokeLinejoin="round"
-      >
+      strokeWidth="1.5"
-        <path d="M2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10Z" />
+      {...props}
-        <path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" />
+    >
-        <path d="M9 10C9.55228 10 10 9.55228 10 9C10 8.44772 9.55228 8 9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10Z" />
+      <path d="M2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10Z" />
-        <path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" />
+      <path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" />
-      </g>
+      <path d="M9 10C9.55228 10 10 9.55228 10 9C10 8.44772 9.55228 8 9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10Z" />
+      <path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" />
     </svg>
   );
 };
 
 export const Calendar = (props) => {
   return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 24 24"
-        fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="none"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-        strokeWidth="1.5"
+      strokeLinejoin="round"
-      >
+      strokeWidth="1.5"
-        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+      {...props}
-        <line x1="16" y1="2" x2="16" y2="6"></line>
+    >
-        <line x1="8" y1="2" x2="8" y2="6"></line>
+      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-        <line x1="3" y1="10" x2="21" y2="10"></line>
+      <line x1="16" y1="2" x2="16" y2="6"></line>
-      </g>
+      <line x1="8" y1="2" x2="8" y2="6"></line>
+      <line x1="3" y1="10" x2="21" y2="10"></line>
     </svg>
   );
 };
 
 export const ChevronRight = (props) => {
   return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 24 24"
-        fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="none"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-        strokeWidth="1.5"
+      strokeLinejoin="round"
-      >
+      strokeWidth="1.5"
-        <polyline points="9 18 15 12 9 6"></polyline>
+      {...props}
-      </g>
+    >
+      <polyline points="9 18 15 12 9 6"></polyline>
     </svg>
   );
 };
 
 export const ChevronLeft = (props) => {
   return (
-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
-      <g
+      viewBox="0 0 24 24"
-        fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
+      fill="none"
-        strokeLinecap="round"
+      stroke="currentColor"
-        strokeLinejoin="round"
+      strokeLinecap="round"
-        strokeWidth="1.5"
+      strokeLinejoin="round"
-      >
+      strokeWidth="1.5"
-        <polyline points="15 18 9 12 15 6"></polyline>
+      {...props}
-      </g>
+    >
+      <polyline points="15 18 9 12 15 6"></polyline>
     </svg>
   );
 };

pages/system/inputs.js

@@ -221,7 +221,7 @@ import { Input, Textarea } from 'slate-react-system';`}
         <System.Input
           label="Icon and submit function"
           name="exampleFive"
-          icon={SVG.Close}
+          icon={SVG.Dismiss}
           onSubmit={() => {
             this.setState({ exampleFive: "" });
           }}
@@ -242,7 +242,7 @@ import { Input, Textarea } from 'slate-react-system';`}
         <Input
           label="Icon with submit function"
           name="exampleFive"
-          icon={SVG.Close}
+          icon={SVG.Dismiss}
           onSubmit={() => {
             this.setState({ exampleFive: "" });
           }}

pages/system/list-editor.js

@@ -59,16 +59,13 @@ import { ListEditor } from 'slate-react-system';`}
         <hr />
         <br />
         <System.ListEditor
+          placeholder="Add a flavor"
           name="flavors"
           options={this.state.flavors}
           onChange={this._handleListChange}
         />
         <br />
-        <System.P>
+        <System.P>Define the List Editor component.</System.P>
-          Define the List Editor component. Note that the _handleListChange
-          takes a different shape than the other onChange functions in this
-          design system.
-        </System.P>
         <br />
         <CodeBlock>
           {`class ExampleOne extends React.Component {
@@ -84,16 +81,17 @@ import { ListEditor } from 'slate-react-system';`}
     ]
   }
 
-  _handleListChange = ({ name, value }) => {
+  _handleChange = (e) => {
-    this.setState({ [name]: value });
+    this.setState({ [e.target.name]: e.target.value });
   };
 
   render() {
     return(
       <ListEditor
+        placeholder="Add a flavor"
         name="flavors"
         options={this.state.flavors}
-        onChange={this._handleListChange}
+        onChange={this._handleChange}
       />
     )
   }