refactor(app): are you sure you want to cancel modal on desktop app (#…

…15662)
Opentrons · Jul 19, 2024 · a6348e5 · a6348e5
1 parent 9379b4a
commit a6348e5
Show file tree

Hide file tree

Showing 12 changed files with 178 additions and 360 deletions.
diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx
@@ -6,7 +6,7 @@ import {
   Flex,
   RESPONSIVENESS,
   SPACING,
-  LegacyStyledText,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -65,16 +65,17 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   // 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};
-    cursor: pointer;
-    padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
-    width: 100%;
+      border-radius: ${BORDERS.borderRadius16};
+      cursor: pointer;
+      padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
+      width: 100%;
 
-    ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-    ${disabled && DISABLED_BUTTON_STYLE}
+      ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
+      ${disabled && DISABLED_BUTTON_STYLE}
 
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      cursor: default;
+        cursor: default;
+      }
     }
   `
 
@@ -89,19 +90,19 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         value={buttonValue}
       />
       <SettingButtonLabel role="label" htmlFor={buttonLabel}>
-        <LegacyStyledText
-          fontSize={isLarge ? TYPOGRAPHY.fontSize28 : TYPOGRAPHY.fontSize22}
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          lineHeight={
-            isLarge ? TYPOGRAPHY.lineHeight36 : TYPOGRAPHY.lineHeight28
-          }
+        <StyledText
+          oddStyle={isLarge ? 'level4HeaderRegular' : 'bodyTextRegular'}
+          desktopStyle="bodyDefaultRegular"
         >
           {buttonLabel}
-        </LegacyStyledText>
+        </StyledText>
         {subButtonLabel != null ? (
-          <LegacyStyledText as="h4" fontWeight={TYPOGRAPHY.fontWeightRegular}>
+          <StyledText
+            oddStyle="level4HeaderRegular"
+            fontWeight={TYPOGRAPHY.fontWeightRegular}
+          >
             {subButtonLabel}
-          </LegacyStyledText>
+          </StyledText>
         ) : null}
       </SettingButtonLabel>
     </Flex>

diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx
@@ -10,7 +10,7 @@ import {
   Icon,
   JUSTIFY_CENTER,
   SPACING,
-  LegacyStyledText,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from './constants'
@@ -180,13 +180,12 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
           </Flex>
         ) : null}
 
-        <LegacyStyledText
-          fontSize="1.375rem"
-          lineHeight={TYPOGRAPHY.lineHeight28}
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+        <StyledText
+          oddStyle="bodyTextSemiBold"
+          desktopStyle="bodyDefaultSemiBold"
         >
           {buttonText}
-        </LegacyStyledText>
+        </StyledText>
         {iconPlacement === 'endIcon' && iconName != null ? (
           <Flex
             aria-label={

diff --git a/app/src/molecules/InterventionModal/index.tsx b/app/src/molecules/InterventionModal/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
+import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
@@ -15,6 +16,7 @@ import {
   POSITION_STICKY,
   SPACING,
   DIRECTION_COLUMN,
+  RESPONSIVENESS,
 } from '@opentrons/components'
 
 import { getIsOnDevice } from '../../redux/config'
@@ -157,12 +159,11 @@ export function InterventionModal({
             {...headerStyle}
             backgroundColor={headerColor}
             justifyContent={headerJustifyContent}
-            onClick={iconHeadingOnClick}
           >
             {titleHeading}
-            <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing12}>
+            <Flex alignItems={ALIGN_CENTER} onClick={iconHeadingOnClick}>
               {iconName != null ? (
-                <Icon name={iconName} size={SPACING.spacing32} />
+                <Icon name={iconName} css={ICON_STYLE} />
               ) : null}
               {iconHeading != null ? iconHeading : null}
             </Flex>
@@ -173,3 +174,14 @@ export function InterventionModal({
     </Flex>
   )
 }
+
+const ICON_STYLE = css`
+  width: ${SPACING.spacing16};
+  height: ${SPACING.spacing16};
+  margin: ${SPACING.spacing4};
+  @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+    width: ${SPACING.spacing32};
+    height: ${SPACING.spacing32};
+    margin: ${SPACING.spacing12};
+  }
+`
diff --git a/app/src/organisms/ErrorRecoveryFlows/ErrorRecoveryWizard.tsx b/app/src/organisms/ErrorRecoveryFlows/ErrorRecoveryWizard.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { LegacyStyledText } from '@opentrons/components'
+import { StyledText } from '@opentrons/components'
 
 import { RecoveryError } from './RecoveryError'
 import { RecoveryDoorOpen } from './RecoveryDoorOpen'
@@ -90,13 +90,20 @@ export function ErrorRecoveryComponent(
 
   const buildTitleHeading = (): JSX.Element => {
     const titleText = hasLaunchedRecovery ? t('recovery_mode') : t('cancel_run')
-    return <LegacyStyledText as="h4Bold">{titleText}</LegacyStyledText>
+    return (
+      <StyledText
+        oddStyle="level4HeaderBold"
+        desktopStyle="headingSmallRegular"
+      >
+        {titleText}
+      </StyledText>
+    )
   }
 
   const buildIconHeading = (): JSX.Element => (
-    <LegacyStyledText as="pSemiBold">
+    <StyledText oddStyle="bodyTextSemiBold" desktopStyle="bodyDefaultSemiBold">
       {t('view_error_details')}
-    </LegacyStyledText>
+    </StyledText>
   )
 
   // TODO(jh, 07-16-24): Revisit making RecoveryDoorOpen a route.

diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
@@ -8,7 +9,8 @@ import {
   Flex,
   Icon,
   SPACING,
-  LegacyStyledText,
+  StyledText,
+  RESPONSIVENESS,
 } from '@opentrons/components'
 
 import { RECOVERY_MAP } from '../constants'
@@ -68,24 +70,25 @@ function CancelRunConfirmation({
         alignItems={ALIGN_CENTER}
         gridGap={SPACING.spacing24}
         height="100%"
-        width="848px"
+        css={FLEX_WIDTH}
       >
         <Icon
           name="ot-alert"
-          size="3.75rem"
+          css={ICON_SIZE}
           marginTop={SPACING.spacing24}
           color={COLORS.red50}
         />
-        <LegacyStyledText as="h3Bold">
+        <StyledText oddStyle="level3HeaderBold" desktopStyle="headingSmallBold">
           {t('are_you_sure_you_want_to_cancel')}
-        </LegacyStyledText>
-        <LegacyStyledText
-          as="h4"
+        </StyledText>
+        <StyledText
+          oddStyle="level4HeaderRegular"
+          desktopStyle="bodyDefaultRegular"
           color={COLORS.grey60}
           textAlign={ALIGN_CENTER}
         >
           {t('if_tips_are_attached')}
-        </LegacyStyledText>
+        </StyledText>
       </Flex>
       <RecoveryFooterButtons
         primaryBtnOnClick={handleCancelRunClick}
@@ -143,3 +146,19 @@ export function useOnCancelRun({
 
   return { showBtnLoadingState, handleCancelRunClick }
 }
+
+const FLEX_WIDTH = css`
+  width: 41.625rem;
+  @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+    width: 53rem;
+  }
+`
+
+const ICON_SIZE = css`
+  width: ${SPACING.spacing40};
+  height: ${SPACING.spacing40};
+  @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+    width: ${SPACING.spacing60};
+    height: ${SPACING.spacing60};
+  }
+`
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/ManageTips.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/ManageTips.tsx
@@ -1,20 +1,28 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import head from 'lodash/head'
+import { css } from 'styled-components'
 
 import {
   DIRECTION_COLUMN,
   SPACING,
   Flex,
-  LegacyStyledText,
+  StyledText,
+  RESPONSIVENESS,
 } from '@opentrons/components'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { RadioButton } from '../../../atoms/buttons'
-import { ODD_SECTION_TITLE_STYLE, RECOVERY_MAP } from '../constants'
+import {
+  ODD_SECTION_TITLE_STYLE,
+  RECOVERY_MAP,
+  ODD_ONLY,
+  DESKTOP_ONLY,
+} from '../constants'
 import {
   RecoveryFooterButtons,
   RecoverySingleColumnContentWrapper,
+  RecoveryRadioGroup,
 } from '../shared'
 import { DropTipWizardFlows } from '../../DropTipWizardFlows'
 import { DT_ROUTES } from '../../DropTipWizardFlows/constants'
@@ -89,12 +97,32 @@ export function BeginRemoval({
     }
   }
 
+  const DESKTOP_ONLY_GRID_GAP = css`
+    @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+      gap: 0rem;
+    }
+  `
+
+  const RADIO_GROUP_MARGIN = css`
+    @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+      margin-left: 0.5rem;
+    }
+  `
+
   return (
-    <RecoverySingleColumnContentWrapper>
-      <LegacyStyledText css={ODD_SECTION_TITLE_STYLE} as="h4SemiBold">
+    <RecoverySingleColumnContentWrapper css={DESKTOP_ONLY_GRID_GAP}>
+      <StyledText
+        css={ODD_SECTION_TITLE_STYLE}
+        oddStyle="level4HeaderSemiBold"
+        desktopStyle="headingSmallSemiBold"
+      >
         {t('you_may_want_to_remove', { mount })}
-      </LegacyStyledText>
-      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      </StyledText>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing2}
+        css={ODD_ONLY}
+      >
         <RadioButton
           buttonLabel={t('begin_removal')}
           buttonValue={t('begin_removal')}
@@ -112,6 +140,45 @@ export function BeginRemoval({
           isSelected={selected === 'skip'}
         />
       </Flex>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing4}
+        css={DESKTOP_ONLY}
+      >
+        <RecoveryRadioGroup
+          css={css`
+            padding: ${SPACING.spacing4};
+          `}
+          value={selected}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setSelected(e.currentTarget.value as RemovalOptions)
+          }}
+          options={[
+            {
+              value: t('begin_removal'),
+              children: (
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  css={RADIO_GROUP_MARGIN}
+                >
+                  {t('begin_removal')}
+                </StyledText>
+              ),
+            },
+            {
+              value: t('skip'),
+              children: (
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  css={RADIO_GROUP_MARGIN}
+                >
+                  {t('skip')}
+                </StyledText>
+              ),
+            },
+          ]}
+        />
+      </Flex>
       <RecoveryFooterButtons primaryBtnOnClick={primaryOnClick} />
     </RecoverySingleColumnContentWrapper>
   )

diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/ManageTips.test.tsx
@@ -93,16 +93,16 @@ describe('ManageTips', () => {
     screen.getByText(
       'You may want to remove the tips from the left pipette before using it again in a protocol'
     )
-    screen.getByText('Begin removal')
-    screen.getByText('Skip')
+    screen.queryAllByText('Begin removal')
+    screen.queryAllByText('Skip')
     expect(screen.getAllByText('Continue').length).toBe(2)
   })
 
   it('routes correctly when continuing on BeginRemoval', () => {
     render(props)
 
-    const beginRemovalBtn = screen.getByText('Begin removal')
-    const skipBtn = screen.getByText('Skip')
+    const beginRemovalBtn = screen.queryAllByText('Begin removal')[0]
+    const skipBtn = screen.queryAllByText('Skip')[0]
 
     fireEvent.click(beginRemovalBtn)
     clickButtonLabeled('Continue')
@@ -124,7 +124,7 @@ describe('ManageTips', () => {
     }
     render(props)
 
-    const skipBtn = screen.getByText('Skip')
+    const skipBtn = screen.queryAllByText('Skip')[0]
 
     fireEvent.click(skipBtn)
     clickButtonLabeled('Continue')