refactor(components, app): move RadioButton and add styling for helix (…

…#15921)

closes AUTH-620

app/src/atoms/buttons/index.ts

@@ -3,7 +3,6 @@ export { FloatingActionButton } from './FloatingActionButton'
 export { LargeButton } from './LargeButton'
 export { MediumButton } from './MediumButton'
 export { QuaternaryButton } from './QuaternaryButton'
-export { RadioButton } from './RadioButton'
 export { SmallButton } from './SmallButton'
 export { SubmitPrimaryButton } from './SubmitPrimaryButton'
 export { TertiaryButton } from './TertiaryButton'

app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx

@@ -4,10 +4,10 @@ import {
   DIRECTION_COLUMN,
   SPACING,
   LegacyStyledText,
+  RadioButton,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { OneColumn } from './OneColumn'
-import { RadioButton } from '../../atoms/buttons/RadioButton'
 
 export interface ButtonProps {
   label: string

app/src/molecules/InterventionModal/__tests__/ModalContentOneColSimpleButtons.test.tsx

@@ -55,14 +55,14 @@ describe('InterventionModal', () => {
     expect(inputElForButtonFromButtonText('third button').checked).toBeFalsy()
 
     fireEvent.click(inputElForButtonFromButtonText('first button'))
-    expect(inputElForButtonFromButtonText('first button').checked).toBeTruthy()
+    expect(screen.getByLabelText('first button')).toBeChecked()
     expect(inputElForButtonFromButtonText('second button').checked).toBeFalsy()
     expect(inputElForButtonFromButtonText('third button').checked).toBeFalsy()
 
     fireEvent.click(inputElForButtonFromButtonText('third button'))
     expect(inputElForButtonFromButtonText('first button').checked).toBeFalsy()
     expect(inputElForButtonFromButtonText('second button').checked).toBeFalsy()
-    expect(inputElForButtonFromButtonText('third button').checked).toBeTruthy()
+    expect(screen.getByLabelText('third button')).toBeChecked()
   })
 
   it('can start with a button selected', () => {
@@ -76,7 +76,7 @@ describe('InterventionModal', () => {
       />
     )
     expect(inputElForButtonFromButtonText('first button').checked).toBeFalsy()
-    expect(inputElForButtonFromButtonText('second button').checked).toBeTruthy()
+    expect(screen.getByLabelText('second button')).toBeChecked()
     expect(inputElForButtonFromButtonText('third button').checked).toBeFalsy()
   })
 

app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx

@@ -9,6 +9,7 @@ import {
   SPACING,
   StyledText,
   RESPONSIVENESS,
+  RadioButton,
 } from '@opentrons/components'
 
 import {
@@ -23,7 +24,6 @@ import {
   RecoverySingleColumnContentWrapper,
   RecoveryRadioGroup,
 } from '../shared'
-import { RadioButton } from '../../../atoms/buttons'
 
 import type { RecoveryContentProps } from '../types'
 

app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx

@@ -7,6 +7,7 @@ import {
   Flex,
   SPACING,
   StyledText,
+  RadioButton,
 } from '@opentrons/components'
 
 import {
@@ -16,7 +17,6 @@ import {
   ODD_ONLY,
   DESKTOP_ONLY,
 } from '../constants'
-import { RadioButton } from '../../../atoms/buttons'
 import {
   RecoveryODDOneDesktopTwoColumnContentWrapper,
   RecoveryRadioGroup,

app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx

@@ -13,9 +13,9 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  RadioButton,
 } from '@opentrons/components'
 
-import { RadioButton } from '../../atoms/buttons'
 import { getLocalRobot } from '../../redux/discovery'
 import { getNetworkInterfaces, fetchStatus } from '../../redux/networking'
 import { useIsUnboxingFlowOngoing } from '../RobotSettingsDashboard/NetworkSettings/hooks'

app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx

@@ -12,11 +12,11 @@ import {
   Flex,
   LegacyStyledText,
   SPACING,
+  RadioButton,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { useAllCsvFilesQuery } from '@opentrons/react-api-client'
 
-import { RadioButton } from '../../atoms/buttons'
 import { getShellUpdateDataFiles } from '../../redux/shell'
 import { ChildNavigation } from '../ChildNavigation'
 import { EmptyFile } from './EmptyFile'

app/src/organisms/ProtocolSetupParameters/ChooseEnum.tsx

@@ -6,9 +6,9 @@ import {
   Flex,
   SPACING,
   LegacyStyledText,
+  RadioButton,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { RadioButton } from '../../atoms/buttons'
 import { useToaster } from '../ToasterOven'
 import { ChildNavigation } from '../ChildNavigation'
 import type { ChoiceParameter } from '@opentrons/shared-data'

app/src/organisms/QuickTransferFlow/SelectDestLabware.tsx

@@ -9,10 +9,9 @@ import {
   POSITION_FIXED,
   ALIGN_CENTER,
   Tabs,
+  RadioButton,
 } from '@opentrons/components'
 
-import { RadioButton } from '../../atoms/buttons'
-
 import { ChildNavigation } from '../ChildNavigation'
 import { getCompatibleLabwareByCategory } from './utils'
 

app/src/organisms/QuickTransferFlow/SelectPipette.tsx

@@ -6,10 +6,10 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
   DIRECTION_COLUMN,
+  RadioButton,
 } from '@opentrons/components'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { RIGHT, LEFT } from '@opentrons/shared-data'
-import { RadioButton } from '../../atoms/buttons'
 import { usePipetteSpecsV2 } from '../../resources/instruments/hooks'
 import { ChildNavigation } from '../ChildNavigation'
 

app/src/organisms/QuickTransferFlow/SelectSourceLabware.tsx

@@ -9,10 +9,9 @@ import {
   POSITION_FIXED,
   ALIGN_CENTER,
   Tabs,
+  RadioButton,
 } from '@opentrons/components'
 
-import { RadioButton } from '../../atoms/buttons'
-
 import { ChildNavigation } from '../ChildNavigation'
 import { getCompatibleLabwareByCategory } from './utils'
 

app/src/organisms/QuickTransferFlow/SelectTipRack.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Flex, SPACING, DIRECTION_COLUMN } from '@opentrons/components'
+import {
+  Flex,
+  SPACING,
+  DIRECTION_COLUMN,
+  RadioButton,
+} from '@opentrons/components'
 import { getAllDefinitions } from '@opentrons/shared-data'
-import { RadioButton } from '../../atoms/buttons'
 import { ChildNavigation } from '../ChildNavigation'
 
 import type { LabwareDefinition2 } from '@opentrons/shared-data'

app/src/organisms/QuickTransferFlow/TipManagement/ChangeTip.tsx

@@ -7,9 +7,9 @@ import {
   DIRECTION_COLUMN,
   POSITION_FIXED,
   COLORS,
+  RadioButton,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../App/portal'
-import { RadioButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 
 import type {

app/src/organisms/QuickTransferFlow/TipManagement/TipDropLocation.tsx

@@ -6,6 +6,7 @@ import {
   SPACING,
   DIRECTION_COLUMN,
   POSITION_FIXED,
+  RadioButton,
   COLORS,
 } from '@opentrons/components'
 import {
@@ -14,7 +15,6 @@ import {
   TRASH_BIN_ADAPTER_FIXTURE,
 } from '@opentrons/shared-data'
 import { getTopPortalEl } from '../../../App/portal'
-import { RadioButton } from '../../../atoms/buttons'
 import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration'
 import { ChildNavigation } from '../../ChildNavigation'
 

app/src/organisms/RobotSettingsDashboard/TouchScreenSleep.tsx

@@ -2,9 +2,13 @@ import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
-import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  RadioButton,
+} from '@opentrons/components'
 
-import { RadioButton } from '../../atoms/buttons'
 import { ChildNavigation } from '../../organisms/ChildNavigation'
 import {
   getOnDeviceDisplaySettings,

app/src/organisms/WellSelection/Selection384Wells.tsx

@@ -8,13 +8,13 @@ import {
   DIRECTION_COLUMN,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
-  SPACING,
   LegacyStyledText,
+  RadioButton,
+  SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
 import { IconButton } from '../../atoms/buttons/IconButton'
-import { RadioButton } from '../../atoms/buttons/RadioButton'
 
 import type { WellGroup } from '@opentrons/components'
 import type {

app/src/atoms/buttons/RadioButton.stories.tsx → components/src/atoms/buttons/RadioButton.stories.tsx

@@ -1,11 +1,11 @@
 import { action } from '@storybook/addon-actions'
-import { VIEWPORT } from '@opentrons/components'
 
-import { RadioButton as RadioButtonComponent } from './index'
+import { VIEWPORT } from '../../ui-style-constants'
+import { RadioButton as RadioButtonComponent } from './RadioButton'
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof RadioButtonComponent> = {
-  title: 'ODD/Atoms/Buttons/RadioButton',
+  title: 'Library/Atoms/Buttons/RadioButton',
   component: RadioButtonComponent,
   argTypes: {
     radioButtonType: {

app/src/atoms/buttons/RadioButton.tsx → components/src/atoms/buttons/RadioButton.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
+import { Flex } from '../../primitives'
 import {
+  ALIGN_CENTER,
   BORDERS,
   COLORS,
-  Flex,
+  DIRECTION_ROW,
+  Icon,
   RESPONSIVENESS,
   SPACING,
   StyledText,
   TYPOGRAPHY,
-} from '@opentrons/components'
-
-import type { StyleProps } from '@opentrons/components'
+} from '../..'
+import type { IconName } from '../..'
+import type { StyleProps } from '../../primitives'
 
 interface RadioButtonProps extends StyleProps {
   buttonLabel: string
@@ -21,8 +24,10 @@ interface RadioButtonProps extends StyleProps {
   radioButtonType?: 'large' | 'small'
   subButtonLabel?: string
   id?: string
+  iconName?: IconName
 }
 
+//  used for ODD and helix
 export function RadioButton(props: RadioButtonProps): JSX.Element {
   const {
     buttonLabel,
@@ -33,6 +38,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     radioButtonType = 'large',
     subButtonLabel,
     id = buttonLabel,
+    iconName,
   } = props
 
   const isLarge = radioButtonType === 'large'
@@ -64,19 +70,19 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     cursor: not-allowed;
   `
 
-  // TODO: (ew, 2023-04-21): button is not tabbable, so focus state
-  // is not possible on ODD. It's testable in storybook but not in real life.
   const SettingButtonLabel = styled.label`
-      border-radius: ${BORDERS.borderRadius16};
+      border-radius: ${BORDERS.borderRadius40};
       cursor: pointer;
-      padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
+      padding: 14px ${SPACING.spacing16};
       width: 100%;
 
       ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
       ${disabled && DISABLED_BUTTON_STYLE}
 
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
         cursor: default;
+        padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
+        border-radius: ${BORDERS.borderRadius16};
       }
     }
   `
@@ -92,12 +98,26 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         value={buttonValue}
       />
       <SettingButtonLabel role="label" htmlFor={id}>
-        <StyledText
-          oddStyle={isLarge ? 'level4HeaderRegular' : 'bodyTextRegular'}
-          desktopStyle="bodyDefaultRegular"
+        <Flex
+          flexDirection={DIRECTION_ROW}
+          gridGap={SPACING.spacing2}
+          alignItems={ALIGN_CENTER}
         >
-          {buttonLabel}
-        </StyledText>
+          {iconName != null ? (
+            <Icon
+              name={iconName}
+              width="1rem"
+              height="1rem"
+              data-testid={`icon_${iconName}`}
+            />
+          ) : null}
+          <StyledText
+            oddStyle={isLarge ? 'level4HeaderRegular' : 'bodyTextRegular'}
+            desktopStyle="bodyDefaultRegular"
+          >
+            {buttonLabel}
+          </StyledText>
+        </Flex>
         {subButtonLabel != null ? (
           <StyledText
             oddStyle="level4HeaderRegular"

app/src/atoms/buttons/__tests__/RadioButton.test.tsx → components/src/atoms/buttons/__tests__/RadioButton.test.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { screen, queryByAttribute } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { COLORS, SPACING } from '@opentrons/components'
-import { renderWithProviders } from '../../../__testing-utils__'
-
-import { RadioButton } from '..'
+import { renderWithProviders } from '../../../testing/utils'
+import { COLORS } from '../../../helix-design-system'
+import { SPACING } from '../../../ui-style-constants'
+import { RadioButton } from '../RadioButton'
 
 const render = (props: React.ComponentProps<typeof RadioButton>) => {
   return renderWithProviders(<RadioButton {...props} />)[0]
@@ -29,7 +29,7 @@ describe('RadioButton', () => {
     render(props)
     const label = screen.getByRole('label')
     expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
+    expect(label).toHaveStyle(`padding: 14px ${SPACING.spacing16}`)
   })
 
   it('renders the large selected button', () => {
@@ -41,18 +41,19 @@ describe('RadioButton', () => {
     render(props)
     const label = screen.getByRole('label')
     expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
+    expect(label).toHaveStyle(`padding: 14px ${SPACING.spacing16}`)
   })
 
-  it('renders the small button', () => {
+  it('renders the small button with an icon', () => {
     props = {
       ...props,
       radioButtonType: 'small',
+      iconName: 'alert-circle',
     }
     render(props)
     const label = screen.getByRole('label')
     expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`)
+    expect(label).toHaveStyle(`padding: 14px ${SPACING.spacing16}`)
   })
 
   it('renders the small selected button', () => {
@@ -64,7 +65,7 @@ describe('RadioButton', () => {
     render(props)
     const label = screen.getByRole('label')
     expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`)
+    expect(label).toHaveStyle(`padding: 14px ${SPACING.spacing16}`)
   })
 
   it('renders id instead of buttonLabel when id is set', () => {

components/src/atoms/buttons/index.ts

@@ -1,3 +1,4 @@
 export * from './AlertPrimaryButton'
 export * from './PrimaryButton'
 export * from './SecondaryButton'
+export * from './RadioButton'