@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.18

package/src/forms/LegacyInputField.tsx

@@ -0,0 +1,123 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+export const INPUT_TYPE_TEXT: 'text' = 'text'
+export const INPUT_TYPE_PASSWORD: 'password' = 'password'
+
+// TODO: Ian 2018-09-14 remove 'label' prop when IngredientPropertiesForm gets updated
+
+export interface LegacyInputFieldProps {
+  /** field is disabled if value is true */
+  disabled?: boolean
+  /** change handler */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  /** classes to apply to outer element */
+  className?: string
+  /** inline label text. DEPRECATED */
+  label?: string
+  /** classes to apply to inner label text div */
+  labelTextClassName?: string | null | undefined
+  /** name of field in form */
+  name?: string
+  /** optional ID of <input> element */
+  id?: string
+  /** placeholder text */
+  placeholder?: string
+  /** optional suffix component, appears to the right of input text */
+  units?: React.ReactNode // TODO: Ian 2018-10-30 rename to 'suffix'
+  /** current value of text in box, defaults to '' */
+  value?: string | null | undefined
+  /** if included, InputField will use error style and display error instead of caption */
+  error?: string | null | undefined
+  /** optional caption. hidden when `error` is given */
+  caption?: string | null | undefined
+  /** appears to the right of the caption. Used for character limits, eg '0/45' */
+  secondaryCaption?: string | null | undefined
+  /** optional input type (default "text") */
+  type?: typeof INPUT_TYPE_TEXT | typeof INPUT_TYPE_PASSWORD
+  /** mouse click handler */
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown
+  /** focus handler */
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  /** blur handler */
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  /** makes input field read-only */
+  readOnly?: boolean | undefined
+  /** html tabindex property */
+  tabIndex?: number
+  /** automatically focus field on render */
+  autoFocus?: boolean
+  /** if true, clear out value and add '-' placeholder */
+  isIndeterminate?: boolean
+}
+
+/**
+ * @deprecated Use `InputField`
+ */
+
+export function LegacyInputField(props: LegacyInputFieldProps): JSX.Element {
+  const error = props.error != null
+  const labelClass = cx(styles.form_field, props.className, {
+    [styles.error]: error,
+    [styles.disabled]: props.disabled,
+  })
+
+  if (!props.label) {
+    return (
+      <div className={labelClass}>
+        <Input {...props} />
+      </div>
+    )
+  }
+
+  return (
+    <label className={labelClass}>
+      <div className={cx(props.labelTextClassName, styles.label_text)}>
+        {props.label && error && (
+          <div className={styles.error_icon}>
+            <Icon name="alert" />
+          </div>
+        )}
+        {props.label}
+      </div>
+      <Input {...props} />
+    </label>
+  )
+}
+
+// TODO(mc, 2018-02-21): maybe simplify further and split out?
+function Input(props: LegacyInputFieldProps): JSX.Element {
+  const error = props.error != null
+  const value = props.isIndeterminate ? '' : props.value ?? ''
+  const placeHolder = props.isIndeterminate ? '-' : props.placeholder
+
+  return (
+    <div className={styles.input_field_container}>
+      <div className={styles.input_field}>
+        <input
+          disabled={props.disabled}
+          id={props.id}
+          type={props.type ?? INPUT_TYPE_TEXT}
+          value={value}
+          name={props.name}
+          placeholder={placeHolder}
+          onChange={props.disabled ? undefined : props.onChange}
+          onFocus={props.disabled ? undefined : props.onFocus}
+          onBlur={props.onBlur}
+          onClick={props.disabled ? undefined : props.onClick}
+          readOnly={props.readOnly}
+          tabIndex={props.tabIndex}
+          autoFocus={props.autoFocus}
+        />
+        {props.units && <div className={styles.suffix}>{props.units}</div>}
+      </div>
+      {/* TODO(mc, 2018-10-20): do not render if no caption */}
+      <div className={styles.input_caption}>
+        <span>{error ? props.error : props.caption}</span>
+        <span className={styles.right}>{props.secondaryCaption}</span>
+      </div>
+    </div>
+  )
+}

package/src/forms/RadioGroup.stories.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { Box, SIZE_6 } from '@opentrons/components'
+
+import { RadioGroup as RadioGroupComponent } from './RadioGroup'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Radio Group',
+} as Meta
+
+const OPTIONS = [
+  { name: 'Hazelnut', value: 'hazelnut' },
+  { name: 'Chocolate', value: 'chocolate' },
+  { name: 'Ginger', value: 'ginger' },
+]
+
+const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({
+  value,
+  onChange,
+  ...args
+}) => {
+  const [controlledValue, setControlledValue] = React.useState<string>(
+    args?.options?.[0] != null ? args.options[0].value : ''
+  )
+  return (
+    <Box width={SIZE_6}>
+      <RadioGroupComponent
+        {...args}
+        value={controlledValue}
+        onChange={e => {
+          setControlledValue(
+            'value' in e.target ? (e.target.value as string) : ''
+          )
+        }}
+      />
+    </Box>
+  )
+}
+export const RadioGroup = Template.bind({})
+RadioGroup.args = {
+  options: OPTIONS,
+  inline: false,
+}

package/src/forms/RadioGroup.tsx

@@ -0,0 +1,87 @@
+import type * as React from 'react'
+import cx from 'classnames'
+import { Icon } from '../icons'
+import styles from './forms.module.css'
+
+export interface RadioOption {
+  name: string
+  value: string
+  children?: React.ReactNode
+}
+
+export interface RadioGroupProps {
+  /** blur handler */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
+  /** change handler */
+  onChange: React.ChangeEventHandler
+  /** value that is checked */
+  value?: string
+  /** Array of {name, value} data with optional children */
+  options?: RadioOption[]
+  /** Show radio buttons inline instead of stacked */
+  inline?: boolean
+  /** classes to apply to outer div */
+  className?: string
+  /** classes to apply to inner label text div */
+  labelTextClassName?: string | null | undefined
+  /** if is included, RadioGroup will use error style. The content of the string is ignored. */
+  error?: string | null | undefined
+  /** 'name' attr of input */
+  name?: string
+  /** optional prop to turn radio field blue when checked */
+  useBlueChecked?: boolean
+}
+
+export function RadioGroup(props: RadioGroupProps): JSX.Element {
+  const error = props.error != null
+
+  const outerClassName = cx({
+    [styles.inline]: props.inline,
+    [styles.error]: error,
+  })
+
+  const itemClassName = cx(styles.form_field, props.className, {
+    [styles.inline_item]: props.inline,
+  })
+
+  return (
+    <div className={outerClassName}>
+      {props.options?.map(radio => {
+        const useStyleUpdates =
+          props.useBlueChecked && radio.value === props.value
+        return (
+          <label key={radio.value} id={radio.value} className={itemClassName}>
+            <div
+              className={cx(styles.checkbox_icon, {
+                [styles.checked]: useStyleUpdates,
+              })}
+            >
+              <Icon
+                name={
+                  radio.value === props.value
+                    ? 'radiobox-marked'
+                    : 'radiobox-blank'
+                }
+                width={props.useBlueChecked ? '75%' : '100%'}
+              />
+            </div>
+
+            <input
+              className={cx(styles.input_field, styles.accessibly_hidden)}
+              type="radio"
+              name={props.name}
+              value={radio.value}
+              checked={radio.value === props.value}
+              onBlur={props.onBlur}
+              onChange={props.onChange}
+            />
+            <div className={cx(props.labelTextClassName, styles.label_text)}>
+              {radio.name}
+            </div>
+            {radio.children}
+          </label>
+        )
+      })}
+    </div>
+  )
+}

package/src/forms/Select.module.css

@@ -0,0 +1,118 @@
+/* stylelint-disable selector-class-pattern */
+@import '../index.module.css';
+
+/* NOTE(mc, 2021-04-27): this class only used by storybook */
+.example_select_override {
+  & :global(.ot_select__control) {
+    background-color: blue;
+  }
+}
+
+.select {
+  position: relative;
+
+  & :global(.ot_select__control) {
+    font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+    font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+    color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+    display: flex;
+    position: relative;
+    background-color: var(--c-light-gray);
+    border: none;
+    padding: 0.25rem 0;
+    outline: none;
+    border-radius: var(--bd-radius-form-field);
+    height: 1.75rem;
+    box-shadow: none;
+  }
+
+  & :global(.ot_select__control--menu-is-open) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  & :global(.ot_select__control--menu-is-open),
+  & :global(.ot_select__control--is-focused) {
+    background-color: var(--c-white);
+    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
+  }
+
+  & :global(.ot_select__option) {
+    display: flex;
+    padding: 0.25rem 0.75rem;
+    cursor: default;
+  }
+
+  & :global(.ot_select__option--is-focused) {
+    background-color: var(--c-light-gray);
+  }
+
+  & :global(.ot_select__option--is-disabled) {
+    color: var(--c-font-disabled);
+  }
+
+  & :global(.ot_select__group-heading) {
+    font-size: var(--fs-caption); /* from legacy --font-form-caption */
+    font-weight: var(--fw-semibold); /* from legacy --font-form-caption */
+    color: var(--c-med-gray); /* from legacy --font-form-caption */
+    text-transform: uppercase;
+    margin-left: 0.5rem;
+  }
+
+  & :global(.ot_select__single-value) {
+    display: flex;
+  }
+
+  & :global(.ot_select__group):not(:first-child) {
+    margin-top: 0.25rem;
+    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
+    padding-top: 0.25rem;
+  }
+}
+
+.dropdown_indicator {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  width: 1.25rem;
+  pointer-events: none;
+
+  & > svg {
+    color: var(--c-dark-gray);
+  }
+
+  &.flipped > svg {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdown_indicator_icon {
+  width: 100%;
+}
+
+.menu {
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-dark */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-dark */
+  color: var(--c-font-dark); /* from legacy --font-body-1-dark */
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  background-color: var(--c-white);
+  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
+  border-bottom-left-radius: var(--bd-radius-form-field);
+  border-bottom-right-radius: var(--bd-radius-form-field);
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.menu_control_bridge {
+  position: absolute;
+  background-color: var(--c-white);
+  top: calc(100% - 2px);
+  left: 0;
+  right: 0;
+  z-index: 99;
+  height: 4px;
+}

package/src/forms/Select.stories.tsx

@@ -0,0 +1,117 @@
+import type * as React from 'react'
+
+import { Select } from './Select'
+import styles from './Select.module.css'
+
+import type { Story, Meta } from '@storybook/react'
+
+export default {
+  title: 'Library/Molecules/Forms/Select',
+  component: Select,
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof Select>> = args => (
+  <Select {...args} />
+)
+export const Basic = Template.bind({})
+Basic.parameters = {
+  docs: {
+    description: {
+      component:
+        'Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component',
+    },
+  },
+}
+Basic.args = {
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein', isDisabled: true },
+  ],
+}
+
+export const GroupedOptions = Template.bind({})
+GroupedOptions.parameters = {
+  docs: {
+    description: {
+      component: 'You can also pass grouped options:',
+    },
+  },
+}
+GroupedOptions.args = {
+  options: [
+    {
+      label: 'Nucleic Acids',
+      options: [
+        { label: 'DNA', value: 'dna' },
+        { label: 'RNA', value: 'rna' },
+      ],
+    },
+    {
+      label: 'Polypeptides',
+      options: [
+        { label: 'Dipeptide', value: 'dipeptide' },
+        { label: 'Tripeptide', value: 'Tripeptide' },
+      ],
+    },
+  ],
+}
+
+export const Controlled = Template.bind({})
+Controlled.parameters = {
+  docs: {
+    description: {
+      component:
+        'Passing `value` controls the input. **Note that `value` has the same format as an entry in `options`**',
+    },
+  },
+}
+Controlled.args = {
+  value: { label: 'DNA', value: 'dna' },
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein' },
+  ],
+}
+
+export const FormattedOptionLabel = Template.bind({})
+FormattedOptionLabel.parameters = {
+  docs: {
+    description: {
+      component:
+        'You can control the renders of individual options with the `formatOptionLabel` prop:',
+    },
+  },
+}
+FormattedOptionLabel.args = {
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein' },
+  ],
+  formatOptionLabel: (option, { context }) =>
+    context === 'menu' && option.value === 'rna' ? (
+      <span style={{ color: 'green' }}>{option.label}</span>
+    ) : (
+      option.label
+    ),
+}
+
+export const StyleOverride = Template.bind({})
+StyleOverride.parameters = {
+  docs: {
+    description: {
+      component:
+        "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error",
+    },
+  },
+}
+StyleOverride.args = {
+  className: styles.example_select_override,
+  options: [
+    { label: 'DNA', value: 'dna' },
+    { label: 'RNA', value: 'rna' },
+    { label: 'Protein', value: 'protein' },
+  ],
+}

package/src/forms/Select.tsx

@@ -0,0 +1,132 @@
+import ReactSelect, { components as reactSelectComponents } from 'react-select'
+
+import cx from 'classnames'
+
+import { Icon } from '../icons'
+import styles from './Select.module.css'
+import type {
+  DropdownIndicatorProps,
+  Props as ReactSelectProps,
+  MenuProps,
+  StylesConfig,
+  CSSObjectWithLabel,
+} from 'react-select'
+import type { POSITION_ABSOLUTE, POSITION_FIXED } from '../styles'
+
+export { reactSelectComponents }
+
+export const PLACEMENT_AUTO: 'auto' = 'auto'
+export const PLACEMENT_BOTTOM: 'bottom' = 'bottom'
+export const PLACEMENT_TOP: 'top' = 'top'
+
+export const CONTEXT_MENU: 'menu' = 'menu'
+export const CONTEXT_VALUE: 'value' = 'value'
+
+export const SELECT_CX_PREFIX = 'ot_select'
+
+export type ChangeAction =
+  | 'select-option'
+  | 'deselect-option'
+  | 'remove-value'
+  | 'pop-value'
+  | 'set-value'
+  | 'clear'
+  | 'create-option'
+
+export interface SelectOption {
+  value: string
+  label?: string
+  isDisabled?: boolean
+}
+
+export interface SelectOptionGroup {
+  options: SelectOption[]
+  label?: string
+}
+
+// deprecated this type shouldn't be directly needed as the types for react-select
+// combine options and groups for us now
+export type SelectOptionOrGroup = SelectOption | SelectOptionGroup
+
+export type SelectPlacement =
+  | typeof PLACEMENT_AUTO
+  | typeof PLACEMENT_BOTTOM
+  | typeof PLACEMENT_TOP
+
+export type SelectPosition = typeof POSITION_ABSOLUTE | typeof POSITION_FIXED
+
+export type SelectOptionContext = typeof CONTEXT_MENU | typeof CONTEXT_VALUE
+
+export type SelectProps = ReactSelectProps<SelectOption>
+
+const VOID_STYLE: unknown = undefined
+const NO_STYLE_FN = (): CSSObjectWithLabel => VOID_STYLE as CSSObjectWithLabel
+
+const CLEAR_STYLES: StylesConfig<SelectOption> = {
+  clearIndicator: NO_STYLE_FN,
+  container: NO_STYLE_FN,
+  control: NO_STYLE_FN,
+  dropdownIndicator: NO_STYLE_FN,
+  group: NO_STYLE_FN,
+  groupHeading: NO_STYLE_FN,
+  indicatorsContainer: NO_STYLE_FN,
+  indicatorSeparator: NO_STYLE_FN,
+  input: (styles: CSSObjectWithLabel) => ({
+    ...styles,
+    zIndex: 2,
+    position: 'absolute',
+  }),
+  loadingIndicator: NO_STYLE_FN,
+  loadingMessage: NO_STYLE_FN,
+  menu: NO_STYLE_FN,
+  menuList: NO_STYLE_FN,
+  multiValue: NO_STYLE_FN,
+  multiValueLabel: NO_STYLE_FN,
+  multiValueRemove: NO_STYLE_FN,
+  option: NO_STYLE_FN,
+  // the following should not be cleared to ensure proper positioning
+  // included as comments so we can see what we're not touching
+  // noOptionsMessage: NO_STYLE_FN,
+  // menuPortal: _ => _,
+  // placeholder: _ => _,
+  // singleValue: _ => _,
+  // valueContainer: _ => _,
+}
+
+export function Select(props: SelectProps): JSX.Element {
+  return (
+    <ReactSelect
+      {...props}
+      styles={CLEAR_STYLES}
+      classNamePrefix={SELECT_CX_PREFIX}
+      className={cx(styles.select, props.className)}
+      components={{ DropdownIndicator, Menu }}
+    />
+  )
+}
+
+function DropdownIndicator(
+  props: DropdownIndicatorProps<SelectOption>
+): JSX.Element {
+  return (
+    <reactSelectComponents.DropdownIndicator {...props}>
+      <div
+        className={cx(styles.dropdown_indicator, {
+          [styles.flipped]: props.selectProps.menuIsOpen,
+        })}
+      >
+        <Icon
+          name="menu-down-pd"
+          className={cx(styles.dropdown_indicator_icon)}
+        />
+      </div>
+    </reactSelectComponents.DropdownIndicator>
+  )
+}
+
+const Menu = (props: MenuProps<SelectOption>): JSX.Element => (
+  <reactSelectComponents.Menu {...props}>
+    <div className={styles.menu}>{props.children}</div>
+    <div className={styles.menu_control_bridge} />
+  </reactSelectComponents.Menu>
+)

package/src/forms/SelectField.module.css

@@ -0,0 +1,16 @@
+@import '@opentrons/components/styles';
+
+.select_field.error {
+  & :global(.ot_select__control) {
+    background-color: var(--c-warning-light);
+  }
+}
+
+.select_caption {
+  font-size: var(--fs-caption);
+
+  &.error {
+    color: var(--c-warning-dark);
+    font-weight: var(--fw-semibold);
+  }
+}