fix(protocol-designer, components): clean up a bunch of warnings in …

…console (#16664) closes RQA-3357
Opentrons · Nov 1, 2024 · d7a6221 · d7a6221
1 parent 9dd40b8
commit d7a6221
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 110 deletions.
diff --git a/components/src/atoms/InputField/index.tsx b/components/src/atoms/InputField/index.tsx
@@ -85,6 +85,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
       tabIndex = 0,
       showDeleteIcon = false,
       hasBackgroundError = false,
+      onDelete,
       ...inputProps
     } = props
     const hasError = props.error != null
@@ -307,7 +308,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
               {showDeleteIcon ? (
                 <Flex
                   alignSelf={TEXT_ALIGN_RIGHT}
-                  onClick={props.onDelete}
+                  onClick={onDelete}
                   cursor="pointer"
                 >
                   <Icon name="close" size="1.75rem" />

diff --git a/components/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx b/components/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx
@@ -1,17 +1,17 @@
-import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import { SPACING } from '../../../ui-style-constants'
 import { BORDERS, COLORS } from '../../../helix-design-system'
 import { Flex } from '../../../primitives'
 import { StyledText } from '../../StyledText'
 import { CURSOR_POINTER } from '../../../styles'
 
+import type { ChangeEventHandler, MouseEvent } from 'react'
 import type { StyleProps } from '../../../primitives'
 
 interface ListButtonRadioButtonProps extends StyleProps {
   buttonText: string
   buttonValue: string | number
-  onChange: React.ChangeEventHandler<HTMLInputElement>
+  onChange: ChangeEventHandler<HTMLInputElement>
   setNoHover?: () => void
   setHovered?: () => void
   disabled?: boolean
@@ -34,48 +34,11 @@ export function ListButtonRadioButton(
     id = buttonText,
   } = props
 
-  const SettingButton = styled.input`
-    display: none;
-  `
-
-  const AVAILABLE_BUTTON_STYLE = css`
-    background: ${COLORS.white};
-    color: ${COLORS.black90};
-
-    &:hover {
-      background-color: ${COLORS.grey10};
-    }
-  `
-
-  const SELECTED_BUTTON_STYLE = css`
-    background: ${COLORS.blue50};
-    color: ${COLORS.white};
-
-    &:active {
-      background-color: ${COLORS.blue60};
-    }
-  `
-
-  const DISABLED_STYLE = css`
-    color: ${COLORS.grey40};
-    background-color: ${COLORS.grey10};
-  `
-
-  const SettingButtonLabel = styled.label`
-    border-radius: ${BORDERS.borderRadius8};
-    cursor: ${CURSOR_POINTER};
-    padding: 14px ${SPACING.spacing12};
-    width: 100%;
-
-    ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-    ${disabled && DISABLED_STYLE}
-  `
-
   return (
     <Flex
       width="100%"
       margin={SPACING.spacing4}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.stopPropagation()
       }}
     >
@@ -89,6 +52,8 @@ export function ListButtonRadioButton(
       />
       <SettingButtonLabel
         role="label"
+        isSelected={isSelected}
+        disabled={disabled}
         htmlFor={id}
         onMouseEnter={setHovered}
         onMouseLeave={setNoHover}
@@ -98,3 +63,46 @@ export function ListButtonRadioButton(
     </Flex>
   )
 }
+
+const SettingButton = styled.input`
+  display: none;
+`
+
+const AVAILABLE_BUTTON_STYLE = css`
+  background: ${COLORS.white};
+  color: ${COLORS.black90};
+
+  &:hover {
+    background-color: ${COLORS.grey10};
+  }
+`
+
+const SELECTED_BUTTON_STYLE = css`
+  background: ${COLORS.blue50};
+  color: ${COLORS.white};
+
+  &:active {
+    background-color: ${COLORS.blue60};
+  }
+`
+
+const DISABLED_STYLE = css`
+  color: ${COLORS.grey40};
+  background-color: ${COLORS.grey10};
+`
+
+interface ButtonLabelProps {
+  isSelected: boolean
+  disabled: boolean
+}
+
+const SettingButtonLabel = styled.label<ButtonLabelProps>`
+  border-radius: ${BORDERS.borderRadius8};
+  cursor: ${CURSOR_POINTER};
+  padding: 14px ${SPACING.spacing12};
+  width: 100%;
+
+  ${({ isSelected }) =>
+    isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
+  ${({ disabled }) => disabled && DISABLED_STYLE}
+`
diff --git a/components/src/atoms/MenuList/OverflowBtn.tsx b/components/src/atoms/MenuList/OverflowBtn.tsx
@@ -16,7 +16,7 @@ export const OverflowBtn: (
     props: OverflowBtnProps,
     ref: React.ForwardedRef<HTMLInputElement>
   ): JSX.Element => {
-    const { fillColor } = props
+    const { fillColor, ...restProps } = props
     return (
       <Btn
         css={css`
@@ -56,7 +56,7 @@ export const OverflowBtn: (
             background-color: transparent;
           }
         `}
-        {...props}
+        {...restProps}
         ref={ref}
       >
         <svg

diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx
@@ -1,8 +1,6 @@
 import styled from 'styled-components'
 import { Flex } from '../../primitives'
 import {
-  BORDERS,
-  COLORS,
   CURSOR_DEFAULT,
   CURSOR_POINTER,
   Icon,
@@ -12,8 +10,17 @@ import {
   JUSTIFY_START,
   ALIGN_CENTER,
   FLEX_MAX_CONTENT,
-} from '../..'
-import type { IconName } from '../..'
+} from '../../index'
+import {
+  black90,
+  blue30,
+  blue50,
+  grey30,
+  grey40,
+  white,
+} from '../../helix-design-system/colors'
+import { borderRadius8 } from '../../helix-design-system/borders'
+import type { IconName } from '../../index'
 
 interface EmptySelectorButtonProps {
   onClick: () => void
@@ -29,27 +36,15 @@ export function EmptySelectorButton(
 ): JSX.Element {
   const { onClick, text, iconName, textAlignment, disabled = false } = props
 
-  const StyledButton = styled.button`
-    border: none;
-    width: ${FLEX_MAX_CONTENT};
-    height: ${FLEX_MAX_CONTENT};
-    cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
-    &:focus-visible {
-      outline: 2px solid ${COLORS.white};
-      box-shadow: 0 0 0 4px ${COLORS.blue50};
-      border-radius: ${BORDERS.borderRadius8};
-    }
-  `
-
   return (
-    <StyledButton onClick={onClick}>
+    <StyledButton onClick={onClick} disabled={disabled}>
       <Flex
         gridGap={SPACING.spacing4}
         padding={SPACING.spacing12}
-        backgroundColor={disabled ? COLORS.grey30 : COLORS.blue30}
-        color={disabled ? COLORS.grey40 : COLORS.black90}
-        borderRadius={BORDERS.borderRadius8}
-        border={`2px dashed ${disabled ? COLORS.grey40 : COLORS.blue50}`}
+        backgroundColor={disabled ? grey30 : blue30}
+        color={disabled ? grey40 : black90}
+        borderRadius={borderRadius8}
+        border={`2px dashed ${disabled ? grey40 : blue50}`}
         width="100%"
         height="100%"
         alignItems={ALIGN_CENTER}
@@ -70,3 +65,19 @@ export function EmptySelectorButton(
     </StyledButton>
   )
 }
+
+interface ButtonProps {
+  disabled: boolean
+}
+
+const StyledButton = styled.button<ButtonProps>`
+  border: none;
+  width: ${FLEX_MAX_CONTENT};
+  height: ${FLEX_MAX_CONTENT};
+  cursor: ${({ disabled }) => (disabled ? CURSOR_DEFAULT : CURSOR_POINTER)};
+  &:focus-visible {
+    outline: 2px solid ${white};
+    box-shadow: 0 0 0 4px ${blue50};
+    border-radius: ${borderRadius8};
+  }
+`
diff --git a/components/src/hardware-sim/Deck/DeckFromLayers.tsx b/components/src/hardware-sim/Deck/DeckFromLayers.tsx
@@ -11,28 +11,28 @@ import {
   RemovalHandle,
   ScrewHoles,
 } from './OT2Layers'
+import { ALL_OT2_DECK_LAYERS } from './constants'
 
 import type { RobotType } from '@opentrons/shared-data'
-import { ALL_OT2_DECK_LAYERS } from './constants'
 
 export interface DeckFromLayersProps {
   robotType: RobotType
   layerBlocklist: string[]
 }
 
 const OT2_LAYER_MAP: {
-  [layer in typeof ALL_OT2_DECK_LAYERS[number]]: JSX.Element
+  [layer in typeof ALL_OT2_DECK_LAYERS[number]]: () => JSX.Element
 } = {
-  fixedBase: <FixedBase />,
-  fixedTrash: <FixedTrash />,
-  doorStops: <DoorStops />,
-  metalFrame: <MetalFrame />,
-  removableDeckOutline: <RemovableDeckOutline />,
-  slotRidges: <SlotRidges />,
-  slotNumbers: <SlotNumbers />,
-  calibrationMarkings: <CalibrationMarkings />,
-  removalHandle: <RemovalHandle />,
-  screwHoles: <ScrewHoles />,
+  fixedBase: () => <FixedBase />,
+  fixedTrash: () => <FixedTrash />,
+  doorStops: () => <DoorStops />,
+  metalFrame: () => <MetalFrame />,
+  removableDeckOutline: () => <RemovableDeckOutline />,
+  slotRidges: () => <SlotRidges />,
+  slotNumbers: () => <SlotNumbers />,
+  calibrationMarkings: () => <CalibrationMarkings />,
+  removalHandle: () => <RemovalHandle />,
+  screwHoles: () => <ScrewHoles />,
 }
 
 /**
@@ -47,10 +47,12 @@ export function DeckFromLayers(props: DeckFromLayersProps): JSX.Element | null {
 
   return (
     <g id="deckLayers">
-      {ALL_OT2_DECK_LAYERS.reduce<JSX.Element[]>((acc, layer) => {
-        if (layerBlocklist.includes(layer)) return acc
-        return [...acc, OT2_LAYER_MAP[layer]]
-      }, [])}
+      {ALL_OT2_DECK_LAYERS.filter(layer => !layerBlocklist.includes(layer)).map(
+        layer => {
+          const LayerComponent = OT2_LAYER_MAP[layer]
+          return <LayerComponent key={layer} />
+        }
+      )}
     </g>
   )
 }
diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx
@@ -112,11 +112,11 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
               {secondaryHeaderButton != null ? secondaryHeaderButton : null}
               {onCloseClick != null && closeButton != null ? (
                 <Btn
+                  disabled={disableCloseButton}
                   onClick={onCloseClick}
                   textDecoration={textDecorationUnderline}
                   data-testid="Toolbox_closeButton"
                   whiteSpace={NO_WRAP}
-                  disable={disableCloseButton}
                 >
                   {closeButton}
                 </Btn>

diff --git a/protocol-designer/src/organisms/MaterialsListModal/index.tsx b/protocol-designer/src/organisms/MaterialsListModal/index.tsx
@@ -110,10 +110,7 @@ export function MaterialsListModal({
                           </Flex>
                         }
                         content={
-                          <Flex
-                            alignItems={ALIGN_CENTER}
-                            grigGap={SPACING.spacing4}
-                          >
+                          <Flex alignItems={ALIGN_CENTER}>
                             <StyledText desktopStyle="bodyDefaultRegular">
                               {t(`shared:${fixture.name}`)}
                             </StyledText>
@@ -145,7 +142,7 @@ export function MaterialsListModal({
                         content={
                           <Flex
                             alignItems={ALIGN_CENTER}
-                            grigGap={SPACING.spacing4}
+                            gridGap={SPACING.spacing4}
                           >
                             <ModuleIcon moduleType={hw.type} size="1rem" />
                             <StyledText desktopStyle="bodyDefaultRegular">

diff --git a/protocol-designer/src/organisms/SlotInformation/index.tsx b/protocol-designer/src/organisms/SlotInformation/index.tsx
@@ -64,7 +64,7 @@ export const SlotInformation: FC<SlotInformationProps> = ({
                   {liquids.join(', ')}
                 </StyledText>
               }
-              description={t('liquid')}
+              description={<Flex width="7.40625rem">{t('liquid')}</Flex>}
             />
           </ListItem>
         ) : (

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
 import { createPortal } from 'react-dom'
+import { useEffect, useState, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
   BORDERS,
-  Btn,
+  Box,
   COLORS,
   CURSOR_DEFAULT,
   CURSOR_POINTER,
@@ -75,9 +75,9 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     isStepAfterError = false,
     dragHovered = false,
   } = props
-  const [top, setTop] = React.useState<number>(0)
-  const menuRootRef = React.useRef<HTMLDivElement | null>(null)
-  const [stepOverflowMenu, setStepOverflowMenu] = React.useState<boolean>(false)
+  const [top, setTop] = useState<number>(0)
+  const menuRootRef = useRef<HTMLDivElement | null>(null)
+  const [stepOverflowMenu, setStepOverflowMenu] = useState<boolean>(false)
   const isStartingOrEndingState =
     title === STARTING_DECK_STATE || title === FINAL_DECK_STATE
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
@@ -124,7 +124,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     setTop(top)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     global.addEventListener('click', handleClick)
     return () => {
       global.removeEventListener('click', handleClick)
@@ -200,7 +200,8 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
         gridGap={SPACING.spacing4}
         flexDirection={DIRECTION_COLUMN}
       >
-        <Btn
+        <Box
+          role="button"
           onDoubleClick={onDoubleClick}
           onClick={onClick}
           padding={SPACING.spacing12}
@@ -250,7 +251,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
               />
             ) : null}
           </Flex>
-        </Btn>
+        </Box>
         {dragHovered ? (
           <Divider
             marginY="0"