From 28b59aac6f5e86701d745d580ac054cdbb078852 Mon Sep 17 00:00:00 2001
From: Patrick Dillon <pdillon@users.noreply.github.com>
Date: Mon, 21 Sep 2020 16:36:28 -0400
Subject: [PATCH] [DXDP-1437] Update read-only checkbox and select styles
 (#1727)

* [DXDP-1437] Update read-only checkbox and select styles

* Update snapshot

* Placeholder and checkbox updates

* Only apply placeholder styles if set

* No hover for disabled checkboxes

* Do not adjust readonly text for masked inputs

* Sync radio and checkbox styles

* Sync read only checkbox styles

* Remove box shadow for read-only
---
 .../atoms/_simple-select/simple-select.tsx    |  25 +-
 .../atoms/_styled-input/styled-input.ts       |  42 +-
 core/components/atoms/checkbox/checkbox.tsx   | 109 ++--
 core/components/atoms/radio/radio.tsx         |  88 ++--
 core/components/atoms/select/select.story.tsx | 496 ++++++++----------
 core/components/tokens/colors.ts              | 302 +++++------
 .../unit/__snapshots__/select.test.tsx.snap   |   2 +-
 7 files changed, 515 insertions(+), 549 deletions(-)

diff --git a/core/components/atoms/_simple-select/simple-select.tsx b/core/components/atoms/_simple-select/simple-select.tsx
index 4b3566986..597f75d5c 100644
--- a/core/components/atoms/_simple-select/simple-select.tsx
+++ b/core/components/atoms/_simple-select/simple-select.tsx
@@ -8,11 +8,6 @@ import { StyledInput } from "../_styled-input";
 import Icon from "../icon";
 import { ISelectOptions } from "../select/interfaces";
 
-const selectOpacity = {
-  default: 1,
-  disabled: 0.5
-};
-
 const PLACEHOLDER_VALUE = "0";
 
 const valueIsUndefined = (value) => value === undefined || value === null;
@@ -69,10 +64,15 @@ const SimpleSelect = ({ options, ...props }: ISimpleSelectProps) => {
 
   return (
     <SimpleSelect.Wrapper>
-      <SimpleSelect.ArrowIcon name="dropdown-fill" size="14" color="default" />
+      <SimpleSelect.ArrowIcon name="dropdown-fill" size="14" color={props.disabled ? colors.input.icon : "default"} />
       <Form.Field.ContextConsumer>
         {(context) => (
-          <SimpleSelect.Element id={props.id || context.formFieldId} {...Automation("select")} {...props}>
+          <SimpleSelect.Element
+            id={props.id || context.formFieldId}
+            isUsingPlaceholder={!!props.placeholder && shouldUsePlaceholder}
+            {...Automation("select")}
+            {...props}
+          >
             {/* First option will be selected if there is no value passed as a prop */}
             {props.placeholder && (
               <option disabled={true} value={PLACEHOLDER_VALUE} {...Automation("select.option")}>
@@ -89,14 +89,15 @@ const SimpleSelect = ({ options, ...props }: ISimpleSelectProps) => {
 };
 
 SimpleSelect.Element = styled(StyledInput).attrs({ as: "select" })`
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   appearance: none;
-
   padding-right: ${spacing.large};
-
   height: ${misc.input.default.height};
-  opacity: ${(props) => (props.disabled ? selectOpacity.disabled : selectOpacity.default)};
-  background-color: ${(props) => (props.disabled ? colors.input.backgroundReadOnly : colors.input.background)};
+  color: ${(props) => (props.isUsingPlaceholder ? colors.input.placeholder : colors.input.text)};
+
+  &:disabled {
+    opacity: 1;
+    color: ${(props) => (props.isUsingPlaceholder ? colors.input.placeholderReadOnly : colors.input.text)};
+  }
 `;
 
 SimpleSelect.Wrapper = styled.div`
diff --git a/core/components/atoms/_styled-input/styled-input.ts b/core/components/atoms/_styled-input/styled-input.ts
index b72e00399..e2ee3a90b 100644
--- a/core/components/atoms/_styled-input/styled-input.ts
+++ b/core/components/atoms/_styled-input/styled-input.ts
@@ -1,7 +1,6 @@
-import styled from '../../styled'
-
-import { colors, fonts, spacing, misc } from '../../tokens'
-import containerStyles from '../../_helpers/container-styles'
+import containerStyles from "../../_helpers/container-styles";
+import styled from "../../styled";
+import { colors, fonts, misc, spacing } from "../../tokens";
 
 const config = {
   basic: {
@@ -9,29 +8,36 @@ const config = {
     border: colors.input.border,
     hoverBorder: colors.input.borderHover,
     focusBorder: colors.input.borderFocus,
-    placeholder: colors.input.placeholder
+    placeholder: colors.input.placeholder,
+    cursor: "auto"
   },
   readOnly: {
     background: colors.input.backgroundReadOnly,
     border: colors.input.border,
     hoverBorder: colors.input.border,
     focusBorder: colors.input.border,
-    placeholder: colors.input.placeholderReadOnly
+    placeholder: colors.input.placeholderReadOnly,
+    cursor: "not-allowed"
   },
   error: {
     background: colors.input.background,
     border: colors.input.borderError,
     hoverBorder: colors.input.borderError,
     focusBorder: colors.input.borderError,
-    placeholder: colors.input.placeholder
+    placeholder: colors.input.placeholder,
+    cursor: "auto"
   }
-}
+};
 
 const getAttributes = (props) => {
-  if (props.readOnly) { return config.readOnly }
-  else if (props.hasError || props.error) { return config.error }
-  else { return config.basic }
-}
+  if (props.readOnly || props.disabled) {
+    return config.readOnly;
+  } else if (props.hasError || props.error) {
+    return config.error;
+  } else {
+    return config.basic;
+  }
+};
 
 const StyledInput = styled.input`
   ${containerStyles};
@@ -43,13 +49,13 @@ const StyledInput = styled.input`
   border-color: ${(props) => getAttributes(props).border};
   border-radius: ${misc.radius};
 
-  font-family: ${(props) => (props.code ? fonts.family.code : 'inherit')};
-  font-size: ${(props) => (props.code ? '13px' : 'inherit')};
+  font-family: ${(props) => (props.code ? fonts.family.code : "inherit")};
+  font-size: ${(props) => (props.code ? "13px" : "inherit")};
   color: ${colors.text.inputs};
 
   padding: ${misc.inputs.padding} ${spacing.small};
 
-  cursor: ${(props) => (props.readOnly ? 'not-allowed' : 'auto')};
+  cursor: ${(props) => getAttributes(props).cursor};
   transition: border-color ${misc.animationDuration}, box-shadow ${misc.animationDuration};
 
   &:hover {
@@ -61,8 +67,8 @@ const StyledInput = styled.input`
     outline: none;
   }
   &::-webkit-input-placeholder {
-    color: ${(props) => getAttributes(props).placeholder};
+    color: ${(props) => (props.masked ? colors.text.inputs : getAttributes(props).placeholder)};
   }
-`
+`;
 
-export { StyledInput }
+export { StyledInput };
diff --git a/core/components/atoms/checkbox/checkbox.tsx b/core/components/atoms/checkbox/checkbox.tsx
index 7ecf97fc3..51b13925b 100644
--- a/core/components/atoms/checkbox/checkbox.tsx
+++ b/core/components/atoms/checkbox/checkbox.tsx
@@ -6,35 +6,35 @@ import Form from "../../molecules/form";
 import styled from "../../styled";
 import { colors, fonts, spacing } from "../../tokens";
 
-const CheckMark = styled.span``
-const Label = styled.div``
+const CheckMark = styled.span``;
+const Label = styled.div``;
 
 const justifyContent = {
   horizontal: `margin-right: ${spacing.medium}`,
   vertical: `margin-bottom: ${spacing.xsmall}`
-}
+};
 
 export interface ICheckboxProps {
   /** HTML ID of the checkbox */
-  id?: string
+  id?: string;
   /** The name of the checkbox */
-  name: string
+  name: string;
   /** The value of the currently-selected option */
-  selected?: string[]
+  selected?: string[];
   /** If true, all options in the group will be disabled */
-  readOnly?: boolean
+  readOnly?: boolean;
   /** Callback function which is called when the user selects an option */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** Label */
-  children?: JSX.Element | JSX.Element[] | string
-  defaultChecked?: boolean
-  checked?: boolean
-  value?: any
-  align?: 'vertical' | 'horizontal'
+  children?: JSX.Element | JSX.Element[] | string;
+  defaultChecked?: boolean;
+  checked?: boolean;
+  value?: any;
+  align?: "vertical" | "horizontal";
 }
 
 const Checkbox = (props: ICheckboxProps) => (
-  <Checkbox.Option readOnly={props.readOnly} {...Automation('checkbox')}>
+  <Checkbox.Option readOnly={props.readOnly} {...Automation("checkbox")}>
     <Form.Field.ContextConsumer>
       {(context) => (
         <input
@@ -44,23 +44,24 @@ const Checkbox = (props: ICheckboxProps) => (
           value={props.value}
           checked={props.checked}
           defaultChecked={props.defaultChecked}
-          onChange={props.onChange}
+          onChange={!props.readOnly ? props.onChange : undefined}
           readOnly={true}
-          {...Automation('checkbox.input')}
+          disabled={props.readOnly}
+          {...Automation("checkbox.input")}
         />
       )}
     </Form.Field.ContextConsumer>
     <CheckMark />
     <Label>{props.children}</Label>
   </Checkbox.Option>
-)
+);
 
 Checkbox.Option = styled.label`
   ${containerStyles};
-
+  cursor: ${(props) => (props.readOnly ? "not-allowed" : "pointer")};
   display: flex;
   position: relative;
-  cursor: pointer;
+
   margin-bottom: 0;
   font-weight: ${fonts.weight.normal};
   padding-left: ${spacing.medium};
@@ -69,16 +70,10 @@ Checkbox.Option = styled.label`
   -ms-user-select: none;
   user-select: none;
   vertical-align: middle;
-  pointer-events: ${(props) => (props.readOnly ? 'none' : null)};
 
   input {
     position: absolute;
     opacity: 0;
-    cursor: pointer;
-  }
-
-  ${Label} {
-    opacity: ${(props) => (props.readOnly ? 0.5 : null)};
   }
 
   ${CheckMark} {
@@ -88,20 +83,19 @@ Checkbox.Option = styled.label`
     transform: translateY(20%);
     height: 16px;
     width: 16px;
-    opacity: ${(props) => (props.readOnly ? 0.5 : null)};
-    background-color: ${colors.radio.background};
-    border: 1px solid ${colors.radio.border};
-    box-shadow: inset 0 1px 2px 0 ${colors.radio.shadow};
+    background-color: ${(props) => (props.readOnly ? colors.radio.backgroundDisabled : colors.radio.background)};
+    border: 1px solid ${(props) => (props.readOnly ? colors.radio.borderDisabled : colors.radio.border)};
+    box-shadow: ${(props) => (props.readOnly ? `none` : `inset 0 1px 2px 0  ${colors.radio.shadow}`)};
     border-radius: 2px;
   }
 
   &:hover input ~ ${CheckMark} {
-    box-shadow: inset 0 1px 4px 0 ${colors.radio.shadow};
+    box-shadow: ${(props) => (props.readOnly ? `none` : `inset 0 1px 4px 0 ${colors.radio.shadow}`)};
   }
 
   input:checked ~ ${CheckMark} {
-    background-color: ${colors.radio.backgroundSelected};
-    border: 1px solid ${colors.radio.borderSelected};
+    background-color: ${(props) => (props.readOnly ? colors.base.gray : colors.radio.backgroundSelected)};
+    border: 1px solid ${(props) => (props.readOnly ? colors.base.gray : colors.radio.borderSelected)};
   }
 
   input:focus ~ ${CheckMark} {
@@ -109,7 +103,7 @@ Checkbox.Option = styled.label`
   }
 
   ${CheckMark}:after {
-    content: '';
+    content: "";
     position: absolute;
     display: none;
   }
@@ -128,56 +122,59 @@ Checkbox.Option = styled.label`
     left: 20%;
     top: 50%;
   }
-`
+`;
 
 Checkbox.Element = styled.div`
   ${Checkbox.Option} {
-    display: ${(props) => (props.align === 'horizontal' ? 'inline-block' : 'table')};
+    display: ${(props) => (props.align === "horizontal" ? "inline-block" : "table")};
     ${(props) => justifyContent[props.align]};
 
     &:last-child {
       margin: 0;
     }
   }
-`
+`;
 
 export interface ICheckboxGroupProps {
   /** The direction in which the options should be laid out */
-  align?: 'horizontal' | 'vertical'
-  children?: JSX.Element | JSX.Element[]
-  name?: string
-  selected?: any[]
-  checked?: boolean
-  readOnly?: boolean
-  onChange?: Function
+  align?: "horizontal" | "vertical";
+  children?: JSX.Element | JSX.Element[];
+  name?: string;
+  selected?: any[];
+  checked?: boolean;
+  readOnly?: boolean;
+  onChange?: Function;
 }
 
 const CheckboxGroup = (props: ICheckboxGroupProps) => (
-  <Checkbox.Element {...props} {...Automation('checkbox.group')}>
+  <Checkbox.Element {...props} {...Automation("checkbox.group")}>
     {React.Children.map(props.children, (child) => {
       if (!child) {
-        return null
+        return null;
       }
+
+      const isReadOnly = props.readOnly || child.props.readOnly;
+
       return React.cloneElement(child, {
         name: props.name,
         defaultChecked: props.selected.indexOf(child.props.value) > -1,
         checked: props.checked,
-        readOnly: props.readOnly || child.props.readOnly,
-        onChange: props.onChange
-      })
+        readOnly: isReadOnly,
+        onChange: !isReadOnly ? props.onChange : undefined
+      });
     })}
   </Checkbox.Element>
-)
+);
 
-Checkbox.Group = CheckboxGroup
+Checkbox.Group = CheckboxGroup;
 
 // Backwards compatibility (will be removed in 1.0)
-const StyledCheckbox = Checkbox.Element
-const StyledCheckboxOption = Checkbox.Option
+const StyledCheckbox = Checkbox.Element;
+const StyledCheckboxOption = Checkbox.Option;
 
 CheckboxGroup.defaultProps = {
-  align: 'vertical'
-}
+  align: "vertical"
+};
 
-export default Checkbox
-export { StyledCheckbox, StyledCheckboxOption }
+export default Checkbox;
+export { StyledCheckbox, StyledCheckboxOption };
diff --git a/core/components/atoms/radio/radio.tsx b/core/components/atoms/radio/radio.tsx
index 32db61fb7..3220ef2ad 100644
--- a/core/components/atoms/radio/radio.tsx
+++ b/core/components/atoms/radio/radio.tsx
@@ -5,51 +5,51 @@ import Form from "../../molecules/form";
 import styled from "../../styled";
 import { colors, spacing } from "../../tokens";
 
-const CheckMark = styled.span``
-const Label = styled.div``
+const CheckMark = styled.span``;
+const Label = styled.div``;
 
 const justifyContent = {
   horizontal: `margin-right: ${spacing.medium}`,
   vertical: `margin-bottom: ${spacing.xsmall}`
-}
+};
 
 export interface IRadioProps {
   /** HTML ID of the component */
-  id?: string
+  id?: string;
   /** The name of the radio */
-  name: string
+  name: string;
   /** The direction in which the options should be laid out */
-  align?: 'horizontal' | 'vertical'
+  align?: "horizontal" | "vertical";
   /** The value of the currently-selected option */
-  selected?: string
+  selected?: string;
   /** If true all options in the group will be disabled */
-  readOnly?: boolean
+  readOnly?: boolean;
   /** Callback function which is called when the user selects an option */
-  onChange?: Function
-  children?: JSX.Element | JSX.Element[]
-  onClick?: Function
+  onChange?: Function;
+  children?: JSX.Element | JSX.Element[];
+  onClick?: Function;
 }
 
 const Radio = (props: IRadioProps) => (
-  <Radio.Element {...props} {...Automation('radio')}>
+  <Radio.Element {...props} {...Automation("radio")}>
     {React.Children.map(props.children, (child) => {
       if (!child) {
-        return null
+        return null;
       }
       return React.cloneElement(child, {
         name: props.name,
         checked: props.selected === child.props.value,
         readOnly: props.readOnly || child.props.readOnly
-      })
+      });
     })}
   </Radio.Element>
-)
+);
 
 export interface IRadioOptionProps {
-  id?: string
-  value?: any
-  readOnly?: boolean
-  children: string | JSX.Element | JSX.Element[]
+  id?: string;
+  value?: any;
+  readOnly?: boolean;
+  children: string | JSX.Element | JSX.Element[];
 }
 
 const RadioOption = ({ readOnly, children, ...props }: IRadioOptionProps) => (
@@ -58,9 +58,10 @@ const RadioOption = ({ readOnly, children, ...props }: IRadioOptionProps) => (
       {(context) => (
         <input
           id={props.id || context.formFieldId}
-          {...Automation('radio.option')}
+          {...Automation("radio.option")}
           type="radio"
           readOnly={true}
+          disabled={readOnly}
           {...props}
         />
       )}
@@ -69,24 +70,18 @@ const RadioOption = ({ readOnly, children, ...props }: IRadioOptionProps) => (
     <CheckMark />
     <Label>{children}</Label>
   </RadioOption.Element>
-)
+);
 
 RadioOption.Element = styled.label`
   position: relative;
-  cursor: pointer;
+  cursor: ${(props) => (props.readOnly ? "not-allowed" : "pointer")};
   padding-left: ${spacing.medium};
   user-select: none;
   vertical-align: middle;
-  pointer-events: ${(props) => (props.readOnly ? 'none' : null)};
 
   input {
     position: absolute;
     opacity: 0;
-    cursor: pointer;
-  }
-
-  ${Label} {
-    opacity: ${(props) => (props.readOnly ? 0.5 : null)};
   }
 
   ${CheckMark} {
@@ -96,22 +91,19 @@ RadioOption.Element = styled.label`
     transform: translateY(20%);
     height: 16px;
     width: 16px;
-    background-color: ${(props) =>
-      props.readOnly ? colors.radio.backgroundDisabled : colors.radio.background};
-    border: 1px solid
-      ${(props) => (props.readOnly ? colors.radio.borderDisabled : colors.radio.border)};
-    box-shadow: inset 0 1px 2px 0
-      ${(props) => (props.readOnly ? colors.radio.shadowDisabled : colors.radio.shadow)};
+    background-color: ${(props) => (props.readOnly ? colors.radio.backgroundDisabled : colors.radio.background)};
+    border: 1px solid ${(props) => (props.readOnly ? colors.radio.borderDisabled : colors.radio.border)};
+    box-shadow: ${(props) => (props.readOnly ? `none` : `inset 0 1px 2px 0  ${colors.radio.shadow}`)};
     border-radius: 50%;
   }
 
   &:hover input ~ ${CheckMark} {
-    box-shadow: inset 0 1px 4px 0 ${colors.radio.shadow};
+    box-shadow: ${(props) => (props.readOnly ? `none` : `inset 0 1px 4px 0 ${colors.radio.shadow}`)};
   }
 
   input:checked ~ ${CheckMark} {
-    background-color: ${colors.radio.backgroundSelected};
-    border: 1px solid ${colors.radio.borderSelected};
+    background-color: ${(props) => (props.readOnly ? colors.base.gray : colors.radio.backgroundSelected)};
+    border: 1px solid ${(props) => (props.readOnly ? colors.base.gray : colors.radio.borderSelected)};
   }
 
   input:focus ~ ${CheckMark} {
@@ -119,7 +111,7 @@ RadioOption.Element = styled.label`
   }
 
   ${CheckMark}:after {
-    content: '';
+    content: "";
     position: absolute;
     display: none;
   }
@@ -138,27 +130,27 @@ RadioOption.Element = styled.label`
     top: 50%;
     transform: translate(-50%, -50%);
   }
-`
+`;
 
-Radio.Option = RadioOption
+Radio.Option = RadioOption;
 
 Radio.Element = styled.div`
   ${Radio.Option.Element} {
-    display: ${(props) => (props.align === 'horizontal' ? 'inline-block' : 'table')};
+    display: ${(props) => (props.align === "horizontal" ? "inline-block" : "table")};
     ${(props) => justifyContent[props.align]};
 
     &:last-child {
       margin: 0;
     }
   }
-`
+`;
 
 Radio.defaultProps = {
-  align: 'vertical'
-}
+  align: "vertical"
+};
 
-const StyledRadio = Radio.Element
-const StyledRadioOption = Radio.Option.Element
+const StyledRadio = Radio.Element;
+const StyledRadioOption = Radio.Option.Element;
 
-export default Radio
-export { StyledRadio, StyledRadioOption }
+export default Radio;
+export { StyledRadio, StyledRadioOption };
diff --git a/core/components/atoms/select/select.story.tsx b/core/components/atoms/select/select.story.tsx
index 24bee3e29..cda8cf951 100644
--- a/core/components/atoms/select/select.story.tsx
+++ b/core/components/atoms/select/select.story.tsx
@@ -1,109 +1,102 @@
-import * as React from 'react'
-import styled from '../../styled'
-import { storiesOf } from '@storybook/react'
-import { Example } from '../../_helpers/story-helpers'
+import * as React from "react";
 
-import { Select, Dialog } from '../../'
+import { storiesOf } from "@storybook/react";
+
+import { Dialog, Select } from "../../";
+import { Example } from "../../_helpers/story-helpers";
+import styled from "../../styled";
 
 const ExampleForSelect = styled(Example)`
   min-height: 450px;
-`
-type InteractiveSelectProps = { children: (value: any, onChange: Function) => JSX.Element }
-type InteractiveSelectState = { value: any }
+`;
+type InteractiveSelectProps = { children: (value: any, onChange: Function) => JSX.Element };
+type InteractiveSelectState = { value: any };
 class InteractiveSelect extends React.Component<InteractiveSelectProps, InteractiveSelectState> {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { value: null }
-    this.onChange = this.onChange.bind(this)
+    this.state = { value: null };
+    this.onChange = this.onChange.bind(this);
   }
 
   public onChange(event) {
-    this.setState({ value: event.target.value })
+    this.setState({ value: event.target.value });
   }
 
   public render() {
-    return this.props.children(this.state.value, this.onChange)
+    return this.props.children(this.state.value, this.onChange);
   }
 }
 
-storiesOf('Select', module).add('simple', () => (
+storiesOf("Select", module).add("simple", () => (
   <ExampleForSelect title="Select: simple">
     <Select
-      options={[{ text: 'One', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }]}
+      options={[{ text: "One", value: 1 }, { text: "Two", value: 2 }, { text: "Three", value: 3 }]}
       onChange={(event) => console.log(event)}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('simple with placeholder', () => (
+storiesOf("Select", module).add("simple with placeholder", () => (
   <ExampleForSelect title="Select: with placeholder">
     <InteractiveSelect>
       {(value, onChange) => (
         <Select
           placeholder="Select an option..."
           value={value}
-          options={[
-            { text: 'One', value: 1 },
-            { text: 'Two', value: 2 },
-            { text: 'Three', value: 3 }
-          ]}
+          options={[{ text: "One", value: 1 }, { text: "Two", value: 2 }, { text: "Three", value: 3 }]}
           onChange={onChange}
         />
       )}
     </InteractiveSelect>
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('simple with error', () => (
+storiesOf("Select", module).add("simple with error", () => (
   <ExampleForSelect title="Select: simple">
     <Select
       hasError
-      options={[{ text: 'One', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }]}
+      options={[{ text: "One", value: 1 }, { text: "Two", value: 2 }, { text: "Three", value: 3 }]}
       onChange={(event) => console.log(event)}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('multiple tags', () => (
+storiesOf("Select", module).add("multiple tags", () => (
   <ExampleForSelect title="Select: stressed multiple tags">
     <Select
       multiple
       value={[1, 2, 3]}
-      options={[
-        { text: 'Applications', value: 1 },
-        { text: 'Connections', value: 2 },
-        { text: 'Logs', value: 3 }
-      ]}
+      options={[{ text: "Applications", value: 1 }, { text: "Connections", value: 2 }, { text: "Logs", value: 3 }]}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('simple with custom getOptionValue', () => (
+storiesOf("Select", module).add("simple with custom getOptionValue", () => (
   <ExampleForSelect title="Select: custom getOptionValue">
     <InteractiveSelect>
       {(value, onChange) => (
         <div>
           <Select
             options={[
-              { text: '1', myCustomValue: 1 },
-              { text: '2', myCustomValue: 2 },
-              { text: '3', myCustomValue: 3 },
-              { text: '4', myCustomValue: 4 },
-              { text: '5', myCustomValue: 5 },
-              { text: '6', myCustomValue: 6 },
-              { text: '7', myCustomValue: 7 },
-              { text: '8', myCustomValue: 8 },
-              { text: '9', myCustomValue: 9 },
-              { text: '10', myCustomValue: 10 },
-              { text: '11', myCustomValue: 11 },
-              { text: '12', myCustomValue: 12 },
-              { text: '13', myCustomValue: 13 },
-              { text: '14', myCustomValue: 14 },
-              { text: '15', myCustomValue: 15 },
-              { text: '16', myCustomValue: 16 },
-              { text: '17', myCustomValue: 17 },
-              { text: '18', myCustomValue: 18 }
+              { text: "1", myCustomValue: 1 },
+              { text: "2", myCustomValue: 2 },
+              { text: "3", myCustomValue: 3 },
+              { text: "4", myCustomValue: 4 },
+              { text: "5", myCustomValue: 5 },
+              { text: "6", myCustomValue: 6 },
+              { text: "7", myCustomValue: 7 },
+              { text: "8", myCustomValue: 8 },
+              { text: "9", myCustomValue: 9 },
+              { text: "10", myCustomValue: 10 },
+              { text: "11", myCustomValue: 11 },
+              { text: "12", myCustomValue: 12 },
+              { text: "13", myCustomValue: 13 },
+              { text: "14", myCustomValue: 14 },
+              { text: "15", myCustomValue: 15 },
+              { text: "16", myCustomValue: 16 },
+              { text: "17", myCustomValue: 17 },
+              { text: "18", myCustomValue: 18 }
             ]}
             value={value}
             onChange={onChange}
@@ -114,9 +107,9 @@ storiesOf('Select', module).add('simple with custom getOptionValue', () => (
       )}
     </InteractiveSelect>
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('multiple with custom getOptionValue', () => (
+storiesOf("Select", module).add("multiple with custom getOptionValue", () => (
   <ExampleForSelect title="Select: custom getOptionValue">
     <InteractiveSelect>
       {(value, onChange) => (
@@ -125,85 +118,81 @@ storiesOf('Select', module).add('multiple with custom getOptionValue', () => (
             multiple
             searchable
             options={[
-              { text: 'One', myCustomValue: 1 },
-              { text: 'Two', myCustomValue: 2 },
-              { text: 'Three', myCustomValue: 3 }
+              { text: "One", myCustomValue: 1 },
+              { text: "Two", myCustomValue: 2 },
+              { text: "Three", myCustomValue: 3 }
             ]}
             value={value}
             onChange={onChange}
             getOptionValue={(option) => option.myCustomValue}
           />
-          <p>Selected value: {(value || []).join(',')}</p>
+          <p>Selected value: {(value || []).join(",")}</p>
         </div>
       )}
     </InteractiveSelect>
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('multiple tags: open', () => (
+storiesOf("Select", module).add("multiple tags: open", () => (
   <ExampleForSelect title="Select: stressed multiple tags">
     <Select
       multiple
       defaultMenuOpen
       value={[1]}
-      options={[
-        { text: 'Applications', value: 1 },
-        { text: 'Connections', value: 2 },
-        { text: 'Logs', value: 3 }
-      ]}
+      options={[{ text: "Applications", value: 1 }, { text: "Connections", value: 2 }, { text: "Logs", value: 3 }]}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('stressed: multiple tags', () => (
+storiesOf("Select", module).add("stressed: multiple tags", () => (
   <ExampleForSelect title="Select: stressed multiple tags">
     <Select
       multiple
       defaultMenuOpen
       value={[1, 2, 3, 4, 5, 6, 7]}
       options={[
-        { text: 'This is a very long tag, like super long', value: 1 },
-        { text: 'This is a very long tag, like super long for real', value: 2 },
-        { text: 'This is a long tag, like super long for real', value: 3 },
-        { text: 'Very long tag, like super long for real', value: 4 },
-        { text: 'Long tag, like super long for real', value: 5 },
-        { text: 'This is a long tag', value: 6 },
-        { text: 'This is a very long tag, like super long for real', value: 7 }
+        { text: "This is a very long tag, like super long", value: 1 },
+        { text: "This is a very long tag, like super long for real", value: 2 },
+        { text: "This is a long tag, like super long for real", value: 3 },
+        { text: "Very long tag, like super long for real", value: 4 },
+        { text: "Long tag, like super long for real", value: 5 },
+        { text: "This is a long tag", value: 6 },
+        { text: "This is a very long tag, like super long for real", value: 7 }
       ]}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('stressed: multiple tags - open', () => (
+storiesOf("Select", module).add("stressed: multiple tags - open", () => (
   <ExampleForSelect title="Select: stressed multiple tags">
     <Select
       multiple
       defaultMenuOpen
       value={[1]}
       options={[
-        { text: 'This is a very long tag, like super long', value: 1 },
-        { text: 'This is a very long tag, like super long for real', value: 2 },
-        { text: 'This is a long tag, like super long for real', value: 3 },
-        { text: 'Very long tag, like super long for real', value: 4 },
-        { text: 'Long tag, like super long for real', value: 5 },
-        { text: 'This is a long tag', value: 6 },
-        { text: 'This is a very long tag, like super long for real', value: 7 }
+        { text: "This is a very long tag, like super long", value: 1 },
+        { text: "This is a very long tag, like super long for real", value: 2 },
+        { text: "This is a long tag, like super long for real", value: 3 },
+        { text: "Very long tag, like super long for real", value: 4 },
+        { text: "Long tag, like super long for real", value: 5 },
+        { text: "This is a long tag", value: 6 },
+        { text: "This is a very long tag, like super long for real", value: 7 }
       ]}
     />
   </ExampleForSelect>
-))
+));
 
 class SelectWithEmptyString extends React.Component<{ defaultMenuOpen?: boolean }, { value: any }> {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { value: 'custom' }
+    this.state = { value: "custom" };
 
-    this.handleValue = this.handleValue.bind(this)
+    this.handleValue = this.handleValue.bind(this);
   }
 
   public handleValue(event) {
-    this.setState({ value: event.target.value })
+    this.setState({ value: event.target.value });
   }
 
   public render() {
@@ -211,87 +200,87 @@ class SelectWithEmptyString extends React.Component<{ defaultMenuOpen?: boolean
       <Select
         defaultMenuOpen={this.props.defaultMenuOpen}
         options={[
-          { text: 'All apps', value: '' },
-          { text: 'Custom apps', value: 'custom' },
-          { text: 'Private apps', value: 'private' }
+          { text: "All apps", value: "" },
+          { text: "Custom apps", value: "custom" },
+          { text: "Private apps", value: "private" }
         ]}
         value={this.state.value}
         onChange={this.handleValue}
       />
-    )
+    );
   }
 }
 
-storiesOf('Select', module).add('simple with empty string', () => (
+storiesOf("Select", module).add("simple with empty string", () => (
   <ExampleForSelect title="Select: simple">
     <SelectWithEmptyString />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('default value', () => (
+storiesOf("Select", module).add("default value", () => (
   <ExampleForSelect title="Select: with default value">
     <Select
       value={2}
-      options={[{ text: 'One', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }]}
+      options={[{ text: "One", value: 1 }, { text: "Two", value: 2 }, { text: "Three", value: 3 }]}
       onChange={(event) => console.log(event)}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('disabled', () => (
+storiesOf("Select", module).add("disabled", () => (
   <ExampleForSelect title="Select: disabled">
     <Select
       value={2}
       disabled
-      options={[{ text: 'One', value: 1 }, { text: 'Two', value: 2 }, { text: 'Three', value: 3 }]}
+      options={[{ text: "One", value: 1 }, { text: "Two", value: 2 }, { text: "Three", value: 3 }]}
       onChange={(event) => console.log(event)}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('disabled option', () => (
+storiesOf("Select", module).add("disabled option", () => (
   <ExampleForSelect title="Select: disabled option">
     <Select
       defaultMenuOpen
       placeholder="Select from the enabled options"
-      options={[
-        { text: 'One', value: 1, disabled: true },
-        { text: 'Two', value: 2 },
-        { text: 'Three', value: 3 }
-      ]}
+      options={[{ text: "One", value: 1, disabled: true }, { text: "Two", value: 2 }, { text: "Three", value: 3 }]}
+      onChange={(event) => console.log(event)}
+    />
+  </ExampleForSelect>
+));
+
+storiesOf("Select", module).add("disabled with placeholder", () => (
+  <ExampleForSelect title="Select: disabled with placeholder">
+    <Select
+      defaultMenuOpen
+      disabled={true}
+      placeholder="Select from the enabled options"
+      options={[{ text: "One", value: 1, disabled: true }, { text: "Two", value: 2 }, { text: "Three", value: 3 }]}
       onChange={(event) => console.log(event)}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('groups', () => (
+storiesOf("Select", module).add("groups", () => (
   <ExampleForSelect title="Select: groups">
     <Select
       defaultMenuOpen
       placeholder="Groups"
       options={[
         {
-          groupName: 'Group one',
-          items: [
-            { text: 'One one', value: 11 },
-            { text: 'One two', value: 12 },
-            { text: 'One three', value: 13 }
-          ]
+          groupName: "Group one",
+          items: [{ text: "One one", value: 11 }, { text: "One two", value: 12 }, { text: "One three", value: 13 }]
         },
         {
-          groupName: 'Group two',
-          items: [
-            { text: 'Two one', value: 21 },
-            { text: 'Two two', value: 22 },
-            { text: 'Two three', value: 23 }
-          ]
+          groupName: "Group two",
+          items: [{ text: "Two one", value: 21 }, { text: "Two two", value: 22 }, { text: "Two three", value: 23 }]
         }
       ]}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('interactive: groups', () => (
+storiesOf("Select", module).add("interactive: groups", () => (
   <ExampleForSelect title="Select: groups">
     <InteractiveSelect>
       {(value, onChange) => (
@@ -301,29 +290,21 @@ storiesOf('Select', module).add('interactive: groups', () => (
           placeholder="Groups"
           options={[
             {
-              groupName: 'Group one',
-              items: [
-                { text: 'One one', value: 11 },
-                { text: 'One two', value: 12 },
-                { text: 'One three', value: 13 }
-              ]
+              groupName: "Group one",
+              items: [{ text: "One one", value: 11 }, { text: "One two", value: 12 }, { text: "One three", value: 13 }]
             },
             {
-              groupName: 'Group two',
-              items: [
-                { text: 'Two one', value: 21 },
-                { text: 'Two two', value: 22 },
-                { text: 'Two three', value: 23 }
-              ]
+              groupName: "Group two",
+              items: [{ text: "Two one", value: 21 }, { text: "Two two", value: 22 }, { text: "Two three", value: 23 }]
             }
           ]}
         />
       )}
     </InteractiveSelect>
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('interactive: groups - multiple', () => (
+storiesOf("Select", module).add("interactive: groups - multiple", () => (
   <ExampleForSelect title="Select: groups">
     <InteractiveSelect>
       {(value, onChange) => (
@@ -335,29 +316,21 @@ storiesOf('Select', module).add('interactive: groups - multiple', () => (
           placeholder="Groups"
           options={[
             {
-              groupName: 'Group one',
-              items: [
-                { text: 'One one', value: 11 },
-                { text: 'One two', value: 12 },
-                { text: 'One three', value: 13 }
-              ]
+              groupName: "Group one",
+              items: [{ text: "One one", value: 11 }, { text: "One two", value: 12 }, { text: "One three", value: 13 }]
             },
             {
-              groupName: 'Group two',
-              items: [
-                { text: 'Two one', value: 21 },
-                { text: 'Two two', value: 22 },
-                { text: 'Two three', value: 23 }
-              ]
+              groupName: "Group two",
+              items: [{ text: "Two one", value: 21 }, { text: "Two two", value: 22 }, { text: "Two three", value: 23 }]
             }
           ]}
         />
       )}
     </InteractiveSelect>
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('stressed', () => (
+storiesOf("Select", module).add("stressed", () => (
   <ExampleForSelect title="Select: stressed - 56 characters with 300px width">
     <div style={{ width: 300 }}>
       <Select
@@ -365,15 +338,15 @@ storiesOf('Select', module).add('stressed', () => (
         defaultMenuOpen
         options={[
           {
-            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             value: 1
           },
           {
-            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             value: 2
           },
           {
-            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             value: 3
           }
         ]}
@@ -381,9 +354,9 @@ storiesOf('Select', module).add('stressed', () => (
       />
     </div>
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('interactive: stressed', () => (
+storiesOf("Select", module).add("interactive: stressed", () => (
   <ExampleForSelect title="Select: stressed - 56 characters with 300px width">
     <div style={{ width: 300 }}>
       <InteractiveSelect>
@@ -394,15 +367,15 @@ storiesOf('Select', module).add('interactive: stressed', () => (
             defaultMenuOpen
             options={[
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                 value: 1
               },
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                 value: 2
               },
               {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                 value: 3
               }
             ]}
@@ -411,21 +384,18 @@ storiesOf('Select', module).add('interactive: stressed', () => (
       </InteractiveSelect>
     </div>
   </ExampleForSelect>
-))
+));
 
-class CustomRendererExample extends React.Component<
-  { defaultMenuOpen?: boolean },
-  { selectedItems?: any[] }
-> {
+class CustomRendererExample extends React.Component<{ defaultMenuOpen?: boolean }, { selectedItems?: any[] }> {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { selectedItems: [] }
+    this.state = { selectedItems: [] };
   }
 
   public handleChange(event) {
-    const selectedItems = event.target.value
-    this.setState({ selectedItems })
+    const selectedItems = event.target.value;
+    this.setState({ selectedItems });
   }
 
   public renderOption(option, { isHovered }) {
@@ -436,7 +406,7 @@ class CustomRendererExample extends React.Component<
         </p>
         <p>{option.description}</p>
       </div>
-    )
+    );
   }
 
   public render() {
@@ -449,68 +419,68 @@ class CustomRendererExample extends React.Component<
         defaultMenuOpen={this.props.defaultMenuOpen}
         options={[
           {
-            label: 'One',
-            description: 'This item holds the One number as 1.',
+            label: "One",
+            description: "This item holds the One number as 1.",
             value: 1
           },
           {
-            label: 'Two',
-            description: 'This item holds the Two number as 2.',
+            label: "Two",
+            description: "This item holds the Two number as 2.",
             value: 2
           },
           {
-            label: 'Three',
-            description: 'This item holds the Three number as 3.',
+            label: "Three",
+            description: "This item holds the Three number as 3.",
             value: 3
           },
           {
-            label: 'Four',
-            description: 'This item holds the Four number as 4.',
+            label: "Four",
+            description: "This item holds the Four number as 4.",
             value: 4
           },
           {
-            label: 'Five',
-            description: 'This item holds the Five number as 5.',
+            label: "Five",
+            description: "This item holds the Five number as 5.",
             value: 5
           },
           {
-            label: 'Six',
-            description: 'This item holds the Six number as 6.',
+            label: "Six",
+            description: "This item holds the Six number as 6.",
             value: 6
           },
           {
-            label: 'Seven',
-            description: 'This item holds the Seven number as 7.',
+            label: "Seven",
+            description: "This item holds the Seven number as 7.",
             value: 7
           },
           {
-            label: 'Eight',
-            description: 'This item holds the Eight number as 8.',
+            label: "Eight",
+            description: "This item holds the Eight number as 8.",
             value: 8
           },
           {
-            label: 'Nine',
-            description: 'This item holds the Nine number as 9.',
+            label: "Nine",
+            description: "This item holds the Nine number as 9.",
             value: 9
           },
           {
-            label: 'Ten',
-            description: 'This item holds the Ten number as 10.',
+            label: "Ten",
+            description: "This item holds the Ten number as 10.",
             value: 10
           }
         ]}
       />
-    )
+    );
   }
 }
 
-storiesOf('Select', module).add('custom renderer', () => (
+storiesOf("Select", module).add("custom renderer", () => (
   <ExampleForSelect title="Select: custom renderer">
     <CustomRendererExample />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('custom value renderer', () => (
+storiesOf("Select", module).add("custom value renderer", () => (
   <ExampleForSelect title="Select: custom value renderer">
     <Select
       defaultMenuOpen
@@ -524,31 +494,31 @@ storiesOf('Select', module).add('custom value renderer', () => (
       )}
       options={[
         {
-          value: 'Harry Kane',
-          text: 'Harry Kane',
-          country: '🇬🇧'
+          value: "Harry Kane",
+          text: "Harry Kane",
+          country: "🇬🇧"
         },
         {
-          value: 'Lionel Messi',
-          text: 'Lionel Messi',
-          country: '🇦🇷'
+          value: "Lionel Messi",
+          text: "Lionel Messi",
+          country: "🇦🇷"
         },
         {
-          value: 'Antoine Griezmann',
-          text: 'Antoine Griezmann',
-          country: '🇫🇷'
+          value: "Antoine Griezmann",
+          text: "Antoine Griezmann",
+          country: "🇫🇷"
         },
         {
-          value: 'Luis Suarez',
-          text: 'Luis Suarez',
-          country: '🇺🇾'
+          value: "Luis Suarez",
+          text: "Luis Suarez",
+          country: "🇺🇾"
         }
       ]}
     />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('interactive: custom value renderer', () => (
+storiesOf("Select", module).add("interactive: custom value renderer", () => (
   <ExampleForSelect title="Select: custom value renderer (interactive)">
     <InteractiveSelect>
       {(value, onChange) => (
@@ -563,123 +533,123 @@ storiesOf('Select', module).add('interactive: custom value renderer', () => (
           )}
           options={[
             {
-              value: 'Harry Kane',
-              text: 'Harry Kane',
-              country: '🇬🇧'
+              value: "Harry Kane",
+              text: "Harry Kane",
+              country: "🇬🇧"
             },
             {
-              value: 'Lionel Messi',
-              text: 'Lionel Messi',
-              country: '🇦🇷'
+              value: "Lionel Messi",
+              text: "Lionel Messi",
+              country: "🇦🇷"
             },
             {
-              value: 'Antoine Griezmann',
-              text: 'Antoine Griezmann',
-              country: '🇫🇷'
+              value: "Antoine Griezmann",
+              text: "Antoine Griezmann",
+              country: "🇫🇷"
             },
             {
-              value: 'Luis Suarez',
-              text: 'Luis Suarez',
-              country: '🇺🇾'
+              value: "Luis Suarez",
+              text: "Luis Suarez",
+              country: "🇺🇾"
             }
           ]}
         />
       )}
     </InteractiveSelect>
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('custom renderer in dialog', () => (
+storiesOf("Select", module).add("custom renderer in dialog", () => (
   <ExampleForSelect title="Select: custom renderer">
     <Dialog open title="A dialog example">
       <CustomRendererExample defaultMenuOpen />
     </Dialog>
   </ExampleForSelect>
-))
+));
 
-type AsyncExampleItems = Array<{ label: string; description: string; value: number }>
+type AsyncExampleItems = Array<{ label: string; description: string; value: number }>;
 class AsyncExample extends React.Component<{}, { selectedItems: AsyncExampleItems }> {
-  public allOptions: AsyncExampleItems
+  public allOptions: AsyncExampleItems;
 
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { selectedItems: [] }
+    this.state = { selectedItems: [] };
     this.allOptions = [
       {
-        label: 'One',
-        description: 'This item holds the One number as 1.',
+        label: "One",
+        description: "This item holds the One number as 1.",
         value: 1
       },
       {
-        label: 'Two',
-        description: 'This item holds the Two number as 2.',
+        label: "Two",
+        description: "This item holds the Two number as 2.",
         value: 2
       },
       {
-        label: 'Three',
-        description: 'This item holds the Three number as 3.',
+        label: "Three",
+        description: "This item holds the Three number as 3.",
         value: 3
       },
       {
-        label: 'Four',
-        description: 'This item holds the Four number as 4.',
+        label: "Four",
+        description: "This item holds the Four number as 4.",
         value: 4
       },
       {
-        label: 'Five',
-        description: 'This item holds the Five number as 5.',
+        label: "Five",
+        description: "This item holds the Five number as 5.",
         value: 5
       },
       {
-        label: 'Six',
-        description: 'This item holds the Six number as 6.',
+        label: "Six",
+        description: "This item holds the Six number as 6.",
         value: 6
       },
       {
-        label: 'Seven',
-        description: 'This item holds the Seven number as 7.',
+        label: "Seven",
+        description: "This item holds the Seven number as 7.",
         value: 7
       },
       {
-        label: 'Eight',
-        description: 'This item holds the Eight number as 8.',
+        label: "Eight",
+        description: "This item holds the Eight number as 8.",
         value: 8
       },
       {
-        label: 'Nine',
-        description: 'This item holds the Nine number as 9.',
+        label: "Nine",
+        description: "This item holds the Nine number as 9.",
         value: 9
       },
       {
-        label: 'Ten',
-        description: 'This item holds the Ten number as 10.',
+        label: "Ten",
+        description: "This item holds the Ten number as 10.",
         value: 10
       }
-    ]
+    ];
 
-    this.loadOptions = this.loadOptions.bind(this)
-    this.noOptionsMessage = this.noOptionsMessage.bind(this)
+    this.loadOptions = this.loadOptions.bind(this);
+    this.noOptionsMessage = this.noOptionsMessage.bind(this);
   }
 
   public handleChange(event) {
-    const selectedItems = event.target.value
-    console.log({ selectedItems })
-    this.setState({ selectedItems })
+    const selectedItems = event.target.value;
+    console.log({ selectedItems });
+    this.setState({ selectedItems });
   }
 
   public filterOptions(value) {
-    return this.allOptions.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
+    return this.allOptions.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()));
   }
 
   public loadOptions(inputValue, callback) {
     setTimeout(() => {
-      callback(this.filterOptions(inputValue))
-    }, 500)
+      callback(this.filterOptions(inputValue));
+    }, 500);
   }
 
   public noOptionsMessage({ inputValue }) {
-    return inputValue.length > 0 ? 'No options' : 'Type to search...'
+    return inputValue.length > 0 ? "No options" : "Type to search...";
   }
 
   public render() {
@@ -692,17 +662,17 @@ class AsyncExample extends React.Component<{}, { selectedItems: AsyncExampleItem
         noOptionsMessage={this.noOptionsMessage}
         loadOptions={this.loadOptions}
       />
-    )
+    );
   }
 }
 
-storiesOf('Select', module).add('async select', () => (
+storiesOf("Select", module).add("async select", () => (
   <ExampleForSelect title="Select: async select">
     <AsyncExample />
   </ExampleForSelect>
-))
+));
 
-storiesOf('Select', module).add('disabled options', () => (
+storiesOf("Select", module).add("disabled options", () => (
   <ExampleForSelect title="Select: disabled options">
     <div style={{ width: 300 }}>
       <Select
@@ -711,17 +681,17 @@ storiesOf('Select', module).add('disabled options', () => (
         defaultMenuOpen
         options={[
           {
-            text: 'Lorem ipsum dolor sit amet',
+            text: "Lorem ipsum dolor sit amet",
             value: 1,
             disabled: true
           },
           {
-            text: 'Lorem ipsum dolor sit amet',
+            text: "Lorem ipsum dolor sit amet",
             value: 2,
             disabled: true
           },
           {
-            text: 'Lorem ipsum dolor sit amet',
+            text: "Lorem ipsum dolor sit amet",
             value: 3
           }
         ]}
@@ -729,4 +699,4 @@ storiesOf('Select', module).add('disabled options', () => (
       />
     </div>
   </ExampleForSelect>
-))
+));
diff --git a/core/components/tokens/colors.ts b/core/components/tokens/colors.ts
index e67336180..3589b2a30 100644
--- a/core/components/tokens/colors.ts
+++ b/core/components/tokens/colors.ts
@@ -1,207 +1,207 @@
 const colors = {
   base: {
-    white: '#FFF',
-    black: '#000',
-    default: '#333',
-    gray: '#979797',
-    grayDarkest: '#676767',
-    grayDark: '#636363',
-    grayMedium: '#A8A8A8',
-    grayLight: '#D9D9D9',
-    grayLightest: '#F1F1F1',
-    blueDarker: '#097093',
-    blue: '#0a84ae',
-    blueLight: '#44c7f4',
-    blueLightest: '#f5f7f9',
-    orange: '#eb5424',
-    orangeLighter: '#ff784d',
-    orangeLightest: '#ffb299',
-    orangeDark: '#FF3E00',
-    greenDarker: '#3F6910',
-    green: '#4CD964',
-    red: '#FF0000',
-    redDarker: '#801F00',
-    yellow: '#786600',
+    white: "#FFF",
+    black: "#000",
+    default: "#333",
+    gray: "#979797",
+    grayDarkest: "#676767",
+    grayDark: "#636363",
+    grayMedium: "#A8A8A8",
+    grayLight: "#D9D9D9",
+    grayLightest: "#F1F1F1",
+    blueDarker: "#097093",
+    blue: "#0a84ae",
+    blueLight: "#44c7f4",
+    blueLightest: "#f5f7f9",
+    orange: "#eb5424",
+    orangeLighter: "#ff784d",
+    orangeLightest: "#ffb299",
+    orangeDark: "#FF3E00",
+    greenDarker: "#3F6910",
+    green: "#4CD964",
+    red: "#FF0000",
+    redDarker: "#801F00",
+    yellow: "#786600",
     text: undefined // TODO: Review with Fer
   },
   text: {
-    default: '#212121',
-    inputs: '#555',
-    secondary: '#757575',
-    subtle: '#BDBDBD',
-    error: '#FF0000'
+    default: "#212121",
+    inputs: "#555",
+    secondary: "#757575",
+    subtle: "#BDBDBD",
+    error: "#FF0000"
   },
   form: {
-    title: '#000',
-    divider: 'rgba(151,151,151,0.29)',
-    background: '#f9f9f9'
+    title: "#000",
+    divider: "rgba(151,151,151,0.29)",
+    background: "#f9f9f9"
   },
   input: {
-    background: '#FFF',
-    backgroundReadOnly: '#F3F4F4',
-    border: '#CCCCCC',
-    borderHover: '#B7B7B7',
-    borderFocus: '#0a84ae',
-    borderError: '#FF0000',
-    icon: '#A2A2A2',
-    text: '#333',
-    placeholder: '#B2B2B2',
-    placeholderDisabled: '#C1C1C1',
-    placeholderReadOnly: '#333',
-    label: '#333',
-    labelDisabled: '#C6C6C6'
+    background: "#FFF",
+    backgroundReadOnly: "#F3F4F4",
+    border: "#CCCCCC",
+    borderHover: "#B7B7B7",
+    borderFocus: "#0a84ae",
+    borderError: "#FF0000",
+    icon: "#A2A2A2",
+    text: "#333",
+    placeholder: "#B2B2B2",
+    placeholderDisabled: "#C1C1C1",
+    placeholderReadOnly: "#A8A8A8",
+    label: "#333",
+    labelDisabled: "#C6C6C6"
   },
   link: {
-    default: '#0a84ae',
-    defaultHover: '#053b4e',
-    defaultFocus: '#053b4e',
-    sidebar: '#333',
-    sidebarHover: '#FF3E00',
-    sidebarFocus: '#FF3E00'
+    default: "#0a84ae",
+    defaultHover: "#053b4e",
+    defaultFocus: "#053b4e",
+    sidebar: "#333",
+    sidebarHover: "#FF3E00",
+    sidebarFocus: "#FF3E00"
   },
   tooltip: {
-    background: '#1A1A1A',
-    text: '#FFF'
+    background: "#1A1A1A",
+    text: "#FFF"
   },
   tabs: {
-    default: '#212121',
-    defaultHover: '#0a84ae'
+    default: "#212121",
+    defaultHover: "#0a84ae"
   },
   button: {
     default: {
-      background: '#F1F1F1',
-      backgroundHover: '#E9E8E8',
-      backgroundFocus: '#E9E8E8',
-      backgroundActive: '#DADADA',
-      text: '#333',
-      icon: 'default',
-      border: '#F1F1F1',
-      borderHover: '#E9E8E8',
-      borderFocus: '#E9E8E8',
-      borderActive: '#DADADA'
+      background: "#F1F1F1",
+      backgroundHover: "#E9E8E8",
+      backgroundFocus: "#E9E8E8",
+      backgroundActive: "#DADADA",
+      text: "#333",
+      icon: "default",
+      border: "#F1F1F1",
+      borderHover: "#E9E8E8",
+      borderFocus: "#E9E8E8",
+      borderActive: "#DADADA"
     },
     primary: {
-      background: '#44C7F4',
-      backgroundHover: '#13B7ED',
-      backgroundFocus: '#13B7ED',
-      backgroundActive: '#11A7D9',
-      text: '#FAFAFA',
-      icon: 'white',
-      border: '#44C7F4',
-      borderHover: '#13B7ED',
-      borderFocus: '#13B7ED',
-      borderActive: '#11A7D9'
+      background: "#44C7F4",
+      backgroundHover: "#13B7ED",
+      backgroundFocus: "#13B7ED",
+      backgroundActive: "#11A7D9",
+      text: "#FAFAFA",
+      icon: "white",
+      border: "#44C7F4",
+      borderHover: "#13B7ED",
+      borderFocus: "#13B7ED",
+      borderActive: "#11A7D9"
     },
     secondary: {
-      background: 'transparent',
-      backgroundHover: 'rgba(0,0,0,0.05)',
-      backgroundFocus: 'rgba(0,0,0,0.05)',
-      backgroundActive: '#DADADA',
-      text: '#333',
-      icon: 'default',
-      border: '#D0D2D3',
-      borderHover: '#B5B7B8',
-      borderFocus: '#B5B7B8',
-      borderActive: '#DADADA'
+      background: "transparent",
+      backgroundHover: "rgba(0,0,0,0.05)",
+      backgroundFocus: "rgba(0,0,0,0.05)",
+      backgroundActive: "#DADADA",
+      text: "#333",
+      icon: "default",
+      border: "#D0D2D3",
+      borderHover: "#B5B7B8",
+      borderFocus: "#B5B7B8",
+      borderActive: "#DADADA"
     },
     cta: {
-      background: '#EB5424',
-      backgroundHover: '#D94514',
-      backgroundFocus: '#D94514',
-      backgroundActive: '#BF3A11',
-      text: '#FAFAFA',
-      icon: 'white',
-      border: '#EB5424',
-      borderHover: '#D94514',
-      borderFocus: '#D94514',
-      borderActive: '#BF3A11'
+      background: "#EB5424",
+      backgroundHover: "#D94514",
+      backgroundFocus: "#D94514",
+      backgroundActive: "#BF3A11",
+      text: "#FAFAFA",
+      icon: "white",
+      border: "#EB5424",
+      borderHover: "#D94514",
+      borderFocus: "#D94514",
+      borderActive: "#BF3A11"
     },
     destructive: {
-      background: '#FF0000',
-      backgroundHover: '#E40002',
-      backgroundFocus: '#E40002',
-      backgroundActive: '#BE0001',
-      text: '#FAFAFA',
-      icon: 'white',
-      border: '#FF0000',
-      borderHover: '#E40002',
-      borderFocus: '#E40002',
-      borderActive: '#BE0001'
+      background: "#FF0000",
+      backgroundHover: "#E40002",
+      backgroundFocus: "#E40002",
+      backgroundActive: "#BE0001",
+      text: "#FAFAFA",
+      icon: "white",
+      border: "#FF0000",
+      borderHover: "#E40002",
+      borderFocus: "#E40002",
+      borderActive: "#BE0001"
     },
     success: {
-      background: '#4CD964',
-      backgroundHover: '#4CD964',
-      backgroundFocus: '#4CD964',
-      text: '#FAFAFA',
-      icon: 'white',
-      border: '#4CD964',
-      borderHover: '#4CD964',
-      borderFocus: '#4CD964',
-      borderActive: '#4CD964',
+      background: "#4CD964",
+      backgroundHover: "#4CD964",
+      backgroundFocus: "#4CD964",
+      text: "#FAFAFA",
+      icon: "white",
+      border: "#4CD964",
+      borderHover: "#4CD964",
+      borderFocus: "#4CD964",
+      borderActive: "#4CD964",
       backgroundActive: undefined // TODO: Review with Fer
     },
     link: {
-      text: '#0a84ae',
-      icon: 'blue',
-      hover: '#0a84ae',
-      focus: '#0a84ae'
+      text: "#0a84ae",
+      icon: "blue",
+      hover: "#0a84ae",
+      focus: "#0a84ae"
     }
   },
   icon: {
-    default: '#333',
-    light: '#A8A8A8',
-    sidebar: 'default',
-    sidebarHover: 'orangeDark',
-    sidebarFocus: 'orangeDark'
+    default: "#333",
+    light: "#A8A8A8",
+    sidebar: "default",
+    sidebarHover: "orangeDark",
+    sidebarFocus: "orangeDark"
   },
   list: {
-    backgroundHover: '#FAFAFA',
-    borderColor: '#DDD'
+    backgroundHover: "#FAFAFA",
+    borderColor: "#DDD"
   },
   alert: {
     default: {
-      background: '#F0F0F0',
-      text: '#333'
+      background: "#F0F0F0",
+      text: "#333"
     },
     information: {
-      background: '#DBF4FC',
-      text: '#097093'
+      background: "#DBF4FC",
+      text: "#097093"
     },
     success: {
-      background: '#E5F8D1',
-      text: '#3F6910'
+      background: "#E5F8D1",
+      text: "#3F6910"
     },
     warning: {
-      background: '#FFF6CB',
-      text: '#786600'
+      background: "#FFF6CB",
+      text: "#786600"
     },
     danger: {
-      background: '#FFD8CC',
-      text: '#801F00'
+      background: "#FFD8CC",
+      text: "#801F00"
     }
   },
   radio: {
-    background: '#FFF',
-    border: '#BEBEBE',
-    backgroundSelected: '#3B99FC',
-    borderSelected: '#2C90FC',
-    backgroundDisabled: '#F6F6F6',
-    borderDisabled: '#CCC',
-    shadow: 'rgba(0,0,0,0.20)',
-    shadowDisabled: 'rgba(0,0,0,0.10)'
+    background: "#FFF",
+    border: "#BEBEBE",
+    backgroundSelected: "#3B99FC",
+    borderSelected: "#2C90FC",
+    backgroundDisabled: "#F6F6F6",
+    borderDisabled: "#CCC",
+    shadow: "rgba(0,0,0,0.20)",
+    shadowDisabled: "rgba(0,0,0,0.10)"
   },
   status: {
-    default: '#7D7D7D',
-    information: '#3BC0F2',
-    success: '#73CD1F',
-    warning: '#F49C20',
-    danger: '#D14B49'
+    default: "#7D7D7D",
+    information: "#3BC0F2",
+    success: "#73CD1F",
+    warning: "#F49C20",
+    danger: "#D14B49"
   },
   tag: {
-    background: '#DBF4FD',
-    border: '#3BC0F2',
-    text: '#3BC0F2'
+    background: "#DBF4FD",
+    border: "#3BC0F2",
+    text: "#3BC0F2"
   }
-}
+};
 
-export default colors
+export default colors;
diff --git a/internal/test/unit/__snapshots__/select.test.tsx.snap b/internal/test/unit/__snapshots__/select.test.tsx.snap
index 6e3c7ee9e..5e7fc1791 100644
--- a/internal/test/unit/__snapshots__/select.test.tsx.snap
+++ b/internal/test/unit/__snapshots__/select.test.tsx.snap
@@ -282,7 +282,7 @@ exports[`Select simple variant renders SimpleSelect 1`] = `
     </svg>
   </i>
   <select
-    class="sc-fzXfMD sc-fzXfNg biHsse"
+    class="sc-fzXfMD sc-fzXfNg gnEaJI"
     data-cosmos-key="select"
     placeholder="Something"
   >