address a few more warnings

Opentrons · Nov 1, 2024 · 0dcd851 · 0dcd851
1 parent 1520aba
commit 0dcd851
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 39 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,11 +1,11 @@
-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 * as React from 'react'
 import type { StyleProps } from '../../../primitives'
 
 interface ListButtonRadioButtonProps extends StyleProps {
@@ -34,43 +34,6 @@ 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%"
@@ -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}
+`