feat(protocol-designer): move labware tools wire up

components/src/atoms/Checkbox/index.tsx

@@ -26,6 +26,10 @@ export interface CheckboxProps {
   tabIndex?: number
   /** if disabled is true, mouse events will not trigger onClick callback */
   disabled?: boolean
+  /** optional borderRadius type */
+  type?: 'round' | 'neutral'
+  /** optional width for helix */
+  width?: string
 }
 export function Checkbox(props: CheckboxProps): JSX.Element {
   const {
@@ -34,18 +38,22 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
     onClick,
     tabIndex = 0,
     disabled = false,
+    width = FLEX_MAX_CONTENT,
+    type = 'round',
   } = props
   const truncatedLabel = truncateString(labelText, 25)
 
   const CHECKBOX_STYLE = css`
-    width: ${FLEX_MAX_CONTENT};
+    width: ${width};
     grid-gap: ${SPACING.spacing12};
     border: none;
     align-items: ${ALIGN_CENTER};
     flex-direction: ${DIRECTION_ROW};
     color: ${isChecked ? COLORS.white : COLORS.black90};
     background-color: ${isChecked ? COLORS.blue50 : COLORS.blue35};
-    border-radius: ${BORDERS.borderRadiusFull};
+    border-radius: ${type === 'round'
+      ? BORDERS.borderRadiusFull
+      : BORDERS.borderRadius8};
     padding: ${SPACING.spacing12} ${SPACING.spacing16};
     justify-content: ${JUSTIFY_SPACE_BETWEEN};
     cursor: ${CURSOR_POINTER};

components/src/atoms/CheckboxField/index.tsx

@@ -4,7 +4,12 @@ import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { COLORS, BORDERS } from '../../helix-design-system'
 import { Flex, Box } from '../../primitives'
 import { Icon } from '../../icons'
-import { ALIGN_CENTER, CURSOR_POINTER, JUSTIFY_CENTER } from '../../styles'
+import {
+  ALIGN_CENTER,
+  CURSOR_AUTO,
+  CURSOR_POINTER,
+  JUSTIFY_CENTER,
+} from '../../styles'
 
 export interface CheckboxFieldProps {
   /** change handler */
@@ -94,7 +99,8 @@ const INNER_STYLE_NO_VALUE = css`
   }
 
   &:disabled {
-    color: ${COLORS.grey60};
+    color: ${COLORS.grey50};
+    cursor: ${CURSOR_AUTO};
   }
 `
 

components/src/molecules/DropdownMenu/index.tsx

@@ -22,6 +22,7 @@ import { useOnClickOutside } from '../../interaction-enhancers'
 import { LegacyStyledText } from '../../atoms/StyledText/LegacyStyledText'
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { Tooltip } from '../../atoms/Tooltip'
+import { StyledText } from '../../atoms/StyledText'
 import { LiquidIcon } from '../LiquidIcon'
 
 /** this is the max height to display 10 items */
@@ -35,6 +36,7 @@ export interface DropdownOption {
   value: string
   /** optional dropdown option for adding the liquid color icon */
   liquidColor?: string
+  disabled?: boolean
 }
 
 export type DropdownBorder = 'rounded' | 'neutral'
@@ -55,9 +57,11 @@ export interface DropdownMenuProps {
   /** dropdown item caption */
   caption?: string | null
   /** text for tooltip */
-  tooltipText?: string
+  tooltipText?: string | null
   /** html tabindex property */
   tabIndex?: number
+  /** optional error */
+  error?: string | null
 }
 
 // TODO: (smb: 4/15/22) refactor this to use html select for accessibility
@@ -73,6 +77,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     caption,
     tooltipText,
     tabIndex = 0,
+    error,
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
   const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
@@ -134,13 +139,19 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     setShowDropdownMenu(!showDropdownMenu)
   }
 
+  let defaultBorderColor = COLORS.grey50
+  if (showDropdownMenu) {
+    defaultBorderColor = COLORS.blue50
+  } else if (error) {
+    defaultBorderColor = COLORS.red50
+  }
+
   const DROPDOWN_STYLE = css`
     flex-direction: ${DIRECTION_ROW};
     background-color: ${COLORS.white};
     cursor: ${CURSOR_POINTER};
     padding: ${SPACING.spacing8} ${SPACING.spacing12};
-    border: 1px ${BORDERS.styleSolid}
-      ${showDropdownMenu ? COLORS.blue50 : COLORS.grey50};
+    border: 1px ${BORDERS.styleSolid} ${defaultBorderColor};
     border-radius: ${dropdownType === 'rounded'
       ? BORDERS.borderRadiusFull
       : BORDERS.borderRadius4};
@@ -151,11 +162,15 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
 
     &:hover {
       border: 1px ${BORDERS.styleSolid}
-        ${showDropdownMenu ? COLORS.blue50 : COLORS.grey55};
+        ${error
+          ? COLORS.red50
+          : showDropdownMenu
+          ? COLORS.blue50
+          : COLORS.grey55};
     }
 
     &:active {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+      border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.blue50};
     }
 
     &:focus-visible {
@@ -170,16 +185,16 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     }
   `
   return (
-    <Flex flexDirection={DIRECTION_COLUMN} ref={dropDownMenuWrapperRef}>
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      ref={dropDownMenuWrapperRef}
+      gridGap={SPACING.spacing4}
+    >
       {title !== null ? (
-        <Flex gridGap={SPACING.spacing8}>
-          <LegacyStyledText
-            as="label"
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-            paddingBottom={SPACING.spacing8}
-          >
+        <Flex gridGap={SPACING.spacing8} paddingBottom={SPACING.spacing8}>
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
             {title}
-          </LegacyStyledText>
+          </StyledText>
           {tooltipText != null ? (
             <>
               <Flex {...targetProps}>
@@ -208,18 +223,22 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             {currentOption.liquidColor != null ? (
               <LiquidIcon color={currentOption.liquidColor} />
             ) : null}
-            <LegacyStyledText
-              css={css`
-                ${dropdownType === 'rounded'
+            <Flex
+              fontWeight={
+                dropdownType === 'rounded'
                   ? TYPOGRAPHY.pSemiBold
-                  : TYPOGRAPHY.pRegular}
+                  : TYPOGRAPHY.pRegular
+              }
+              css={css`
                 white-space: ${NO_WRAP};
-                overflow: $ ${OVERFLOW_HIDDEN};
+                overflow: ${OVERFLOW_HIDDEN};
                 text-overflow: ellipsis;
               `}
             >
-              {currentOption.name}
-            </LegacyStyledText>
+              <StyledText desktopStyle="captionRegular">
+                {currentOption.name}
+              </StyledText>
+            </Flex>
           </Flex>
           {showDropdownMenu ? (
             <Icon size="0.75rem" name="menu-down" transform="rotate(180deg)" />
@@ -262,14 +281,15 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
         )}
       </Flex>
       {caption != null ? (
-        <LegacyStyledText
-          as="label"
-          paddingTop={SPACING.spacing4}
-          color={COLORS.grey60}
-        >
+        <LegacyStyledText as="label" color={COLORS.grey60}>
           {caption}
         </LegacyStyledText>
       ) : null}
+      {error != null ? (
+        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.red50}>
+          {error}
+        </StyledText>
+      ) : null}
     </Flex>
   )
 }

components/src/organisms/Toolbox/index.tsx

@@ -25,6 +25,7 @@ export interface ToolboxProps {
   closeButtonText?: string
   side?: 'left' | 'right'
   horizontalSide?: 'top' | 'bottom'
+  childrenPadding?: string
 }
 
 export function Toolbox(props: ToolboxProps): JSX.Element {
@@ -41,6 +42,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     confirmButton,
     side = 'right',
     horizontalSide = 'bottom',
+    childrenPadding = SPACING.spacing16,
   } = props
 
   const slideOutRef = React.useRef<HTMLDivElement>(null)
@@ -108,7 +110,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
           ) : null}
         </Flex>
         <Box
-          padding={SPACING.spacing16}
+          padding={childrenPadding}
           flex="1 1 auto"
           overflowY="auto"
           ref={slideOutRef}

protocol-designer/src/assets/localization/en/protocol_steps.json

@@ -2,9 +2,11 @@
   "delete": "Delete step",
   "duplicate": "Duplicate step",
   "final_deck_state": "Final deck state",
+  "new_location": "New location",
   "protocol_steps": "Protocol steps",
   "protocol_timeline": "Protocol timeline",
   "rename": "Rename step",
+  "select_labware": "Select labware",
   "starting_deck_state": "Starting deck state",
   "view_commands": "View commands"
 }

protocol-designer/src/components/StepEditForm/fields/LabwareLocationField/index.tsx

@@ -22,8 +22,8 @@ export function LabwareLocationField(
     useGripper: boolean
   } & { canSave: boolean } & { labware: string }
 ): JSX.Element {
-  const { t } = useTranslation('form')
   const { labware, useGripper, value } = props
+  const { t } = useTranslation('form')
   const additionalEquipmentEntities = useSelector(
     getAdditionalEquipmentEntities
   )

protocol-designer/src/molecules/CheckboxStepFormField/index.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import {
+  Checkbox,
+  Flex,
+  SPACING,
+  TOOLTIP_TOP,
+  Tooltip,
+  useHoverTooltip,
+} from '@opentrons/components'
+import type { Placement } from '@opentrons/components'
+import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
+
+type CheckboxStepFormFieldProps = FieldProps & {
+  children?: React.ReactElement
+  label?: string
+  tooltipContent?: React.ReactNode
+  tooltipPlacement?: Placement
+}
+
+export function CheckboxStepFormField(
+  props: CheckboxStepFormFieldProps
+): JSX.Element {
+  const {
+    disabled,
+    isIndeterminate,
+    label,
+    tooltipContent,
+    updateValue,
+    value,
+    children,
+    tooltipPlacement = TOOLTIP_TOP,
+  } = props
+
+  const [targetProps, tooltipProps] = useHoverTooltip({
+    placement: tooltipPlacement,
+  })
+  return (
+    <>
+      {tooltipContent && (
+        <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
+      )}
+      <Flex gridGap={SPACING.spacing8} padding={SPACING.spacing16}>
+        <Flex {...targetProps} width="100%">
+          <Checkbox
+            width="100%"
+            type="neutral"
+            isChecked={disabled ? false : Boolean(value)}
+            onClick={() => {
+              updateValue(!value)
+            }}
+            labelText={label ?? ''}
+            disabled={disabled}
+          />
+        </Flex>
+        {value && !disabled && !isIndeterminate ? children : null}
+      </Flex>
+    </>
+  )
+}

protocol-designer/src/molecules/DropdownStepFormField/index.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { DropdownMenu, Flex, SPACING } from '@opentrons/components'
+import type { Options } from '@opentrons/components'
+import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
+
+export interface DropdownStepFormFieldProps extends FieldProps {
+  options: Options
+  title: string
+}
+
+export function DropdownStepFormField(
+  props: DropdownStepFormFieldProps
+): JSX.Element {
+  const { options, value, updateValue, title, errorToShow } = props
+  const availableOptionId = options.find(opt => opt.value === value)
+
+  return (
+    <Flex padding={SPACING.spacing16}>
+      <DropdownMenu
+        width="17.5rem"
+        error={errorToShow}
+        dropdownType="neutral"
+        filterOptions={options}
+        title={title}
+        currentOption={
+          availableOptionId ?? { name: 'Choose option', value: '' }
+        }
+        onClick={value => {
+          updateValue(value)
+        }}
+      />
+    </Flex>
+  )
+}

protocol-designer/src/molecules/index.ts

@@ -1 +1,3 @@
+export * from './CheckboxStepFormField'
+export * from './DropdownStepFormField'
 export * from './SettingsIcon'

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -93,6 +93,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
       /> */}
 
       <Toolbox
+        childrenPadding="0"
         onCloseClick={handleClose}
         closeButtonText={t('shared:cancel')}
         confirmButton={