fix(components, app): Fix newly migrated atoms to components on t…

…he ODD (#16412)
Opentrons · Oct 3, 2024 · 3b680dc · 3b680dc
1 parent 970a50e
commit 3b680dc
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 80 deletions.
diff --git a/app/src/molecules/OddModal/OddModalHeader.tsx b/app/src/molecules/OddModal/OddModalHeader.tsx
@@ -34,7 +34,7 @@ export function OddModalHeader(props: OddModalHeaderBaseProps): JSX.Element {
       borderRadius={`${BORDERS.borderRadius12} ${BORDERS.borderRadius12} 0px 0px`}
       {...styleProps}
     >
-      <Flex flexDirection={DIRECTION_ROW}>
+      <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
         {iconName != null && iconColor != null ? (
           <Icon
             aria-label={`icon_${iconName}`}

diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx
@@ -198,21 +198,19 @@ export function RecoverySplash(props: RecoverySplashProps): JSX.Element | null {
           gridGap={SPACING.spacing16}
         >
           <LargeButton
+            css={SHARED_BUTTON_STYLE_ODD}
             onClick={onCancelClick}
             buttonText={t('cancel_run')}
-            css={
-              isDisabled() ? BTN_STYLE_DISABLED_ODD : SHARED_BUTTON_STYLE_ODD
-            }
-            iconName={'remove'}
+            iconName="remove"
+            ariaDisabled={isDisabled()}
             buttonType="alertAlt"
           />
           <LargeButton
+            css={SHARED_BUTTON_STYLE_ODD}
             onClick={onLaunchERClick}
             buttonText={t('launch_recovery_mode')}
-            css={
-              isDisabled() ? BTN_STYLE_DISABLED_ODD : SHARED_BUTTON_STYLE_ODD
-            }
-            iconName={'recovery'}
+            iconName="recovery"
+            ariaDisabled={isDisabled()}
             buttonType="alertStroke"
           />
         </Flex>
@@ -297,30 +295,6 @@ const SHARED_BUTTON_STYLE_ODD = css`
   width: 29rem;
   height: 13.5rem;
 `
-const BTN_STYLE_DISABLED_ODD = css`
-  ${SHARED_BUTTON_STYLE_ODD}
-
-  background-color: ${COLORS.grey35};
-  color: ${COLORS.grey50};
-  border: none;
-  box-shadow: none;
-
-  #btn-icon: {
-    color: ${COLORS.grey50};
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    background-color: ${COLORS.grey35};
-    color: ${COLORS.grey50};
-  }
-  &:active,
-  &:focus,
-  &:hover #btn-icon {
-    color: ${COLORS.grey50};
-  }
-`
 
 const PRIMARY_BTN_STYLES_DESKTOP = css`
   background-color: ${COLORS.red50};

diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx
@@ -1,11 +1,10 @@
 import type * as React from 'react'
 import { css } from 'styled-components'
-import { Box, Btn } from '../../primitives'
+import { Btn } from '../../primitives'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { LegacyStyledText } from '../../atoms/StyledText'
-import { fontSizeBodyLargeSemiBold } from '../../helix-design-system/product/typography'
+import { StyledText } from '../StyledText'
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
@@ -49,6 +48,8 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     ...buttonProps
   } = props
 
+  const computedDisabled = disabled || ariaDisabled
+
   const LARGE_BUTTON_PROPS_BY_TYPE: Record<
     LargeButtonTypes,
     {
@@ -155,17 +156,37 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       ? `color: ${LARGE_BUTTON_PROPS_BY_TYPE[style].activeIconColor}`
       : ''
 
+  // In order to keep button sizes consistent and expected, all large button types need an outline.
+  // The outline color is always the same as the background color unless the background color is uniquely different
+  // from the outline.
+  const computedBorderStyle = (): string => {
+    const borderColor = (): string => {
+      if (computedDisabled) {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor
+      } else if (buttonType === 'alertStroke') {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor
+      } else {
+        return LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultBackgroundColor
+      }
+    }
+
+    const calculatedBorderRadius =
+      buttonType === 'stroke' ? BORDERS.borderRadius2 : BORDERS.borderRadius4
+
+    return `${calculatedBorderRadius} solid ${borderColor()}`
+  }
+
   const LARGE_BUTTON_STYLE = css`
     color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
     background-color: ${
       LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultBackgroundColor
     };
     cursor: ${CURSOR_POINTER};
     padding: ${SPACING.spacing16} ${SPACING.spacing24};
-    text-align: ${TYPOGRAPHY.textAlignCenter};
+    text-align: ${TYPOGRAPHY.textAlignLeft};
     border-radius: ${BORDERS.borderRadiusFull};
     align-items: ${ALIGN_CENTER};
-    border: ${buttonType === 'stroke' ? `2px solid ${COLORS.blue50}` : 'none'};
+    border: ${computedBorderStyle()};
 
     &:active {
       background-color: ${
@@ -184,7 +205,9 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       };
 
       border: ${
-        buttonType === 'stroke' ? `2px solid ${COLORS.blue55}` : 'none'
+        buttonType === 'stroke'
+          ? `2px solid ${COLORS.blue55}`
+          : `${computedBorderStyle()}`
       };
     }
 
@@ -215,33 +238,17 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       padding: ${SPACING.spacing24};
       line-height: ${TYPOGRAPHY.lineHeight20};
       gap: ${SPACING.spacing60};
-      outline: ${BORDERS.borderRadius4} solid
-        ${
-          buttonType === 'alertStroke' && !disabled
-            ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor
-            : 'none'
-        };
-
-      ${TYPOGRAPHY.pSemiBold}
-
-      #btn-icon: {
-        color: ${
-          disabled
-            ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
-            : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
-        };
-      }
 
       &:active {
         background-color: ${
-          disabled
+          computedDisabled
             ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
             : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor
         };
-        ${!disabled && activeColorFor(buttonType)};
+        ${!computedDisabled && activeColorFor(buttonType)};
         outline: ${BORDERS.borderRadius4} solid
           ${
-            disabled
+            computedDisabled
               ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
               : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor
           };
@@ -252,15 +259,15 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
 
       &:focus-visible {
         background-color: ${
-          disabled
+          computedDisabled
             ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor
             : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleBackgroundColor
         };
-        ${!disabled && activeColorFor(buttonType)};
+        ${!computedDisabled && activeColorFor(buttonType)};
         padding: calc(${SPACING.spacing24} + ${SPACING.spacing2});
-        border: ${SPACING.spacing2} solid ${COLORS.transparent};
+        border: ${computedBorderStyle()};
         outline: ${
-          disabled
+          computedDisabled
             ? 'none'
             : `3px solid
     ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleOutlineColor}`
@@ -276,6 +283,11 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
         };
       }
   `
+
+  const appliedIconColor = computedDisabled
+    ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
+    : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
+
   return (
     <Btn
       type={type}
@@ -286,31 +298,32 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       aria-disabled={ariaDisabled}
       {...buttonProps}
     >
-      <LegacyStyledText
+      <StyledText
+        oddStyle="level3HeaderSemiBold"
+        desktopStyle="bodyLargeSemiBold"
         css={css`
-          font-size: ${fontSizeBodyLargeSemiBold};
           padding-right: ${iconName != null ? SPACING.spacing8 : '0'};
-          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-            ${TYPOGRAPHY.level3HeaderSemiBold}
-          }
         `}
       >
         {buttonText}
-      </LegacyStyledText>
+      </StyledText>
       {iconName ? (
-        <Box
-          css={css`
-            width: 1.5rem;
-            height: 1.5rem;
-            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-              width: 5rem;
-              height: 5rem;
-            }
-          `}
-        >
-          <Icon name={iconName} aria-label={`${iconName} icon`} id="btn-icon" />
-        </Box>
+        <Icon
+          name={iconName}
+          aria-label={`${iconName} icon`}
+          color={appliedIconColor}
+          css={ICON_STYLE}
+        />
       ) : null}
     </Btn>
   )
 }
+
+const ICON_STYLE = css`
+  width: 1.5rem;
+  height: 1.5rem;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 5rem;
+    height: 5rem;
+  }
+`