feedback and cleanup

Opentrons · Oct 3, 2024 · 63bc28c · 63bc28c
1 parent 36dd124
commit 63bc28c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/app/src/molecules/OddModal/OddModalHeader.tsx b/app/src/molecules/OddModal/OddModalHeader.tsx
@@ -34,15 +34,14 @@ 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}`}
             name={iconName}
             color={iconColor}
             size="2rem"
             alignSelf={ALIGN_CENTER}
-            marginRight={SPACING.spacing16}
           />
         ) : null}
         <LegacyStyledText

diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx
@@ -202,15 +202,15 @@ export function RecoverySplash(props: RecoverySplashProps): JSX.Element | null {
             onClick={onCancelClick}
             buttonText={t('cancel_run')}
             iconName="remove"
-            disabled={isDisabled()}
+            ariaDisabled={isDisabled()}
             buttonType="alertAlt"
           />
           <LargeButton
             css={SHARED_BUTTON_STYLE_ODD}
             onClick={onLaunchERClick}
             buttonText={t('launch_recovery_mode')}
             iconName="recovery"
-            disabled={isDisabled()}
+            ariaDisabled={isDisabled()}
             buttonType="alertStroke"
           />
         </Flex>

diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx
@@ -48,6 +48,8 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     ...buttonProps
   } = props
 
+  const computedDisabled = disabled || ariaDisabled
+
   const LARGE_BUTTON_PROPS_BY_TYPE: Record<
     LargeButtonTypes,
     {
@@ -157,9 +159,9 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
   // 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 computedOutlineStyle = (): string => {
-    const outlineColor = (): string => {
-      if (disabled) {
+  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
@@ -171,7 +173,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     const calculatedBorderRadius =
       buttonType === 'stroke' ? BORDERS.borderRadius2 : BORDERS.borderRadius4
 
-    return `${calculatedBorderRadius} solid ${outlineColor()}`
+    return `${calculatedBorderRadius} solid ${borderColor()}`
   }
 
   const LARGE_BUTTON_STYLE = css`
@@ -184,7 +186,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     text-align: ${TYPOGRAPHY.textAlignLeft};
     border-radius: ${BORDERS.borderRadiusFull};
     align-items: ${ALIGN_CENTER};
-    border: ${computedOutlineStyle()};
+    border: ${computedBorderStyle()};
 
     &:active {
       background-color: ${
@@ -203,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()}`
       };
     }
 
@@ -237,14 +241,14 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
 
       &: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
           };
@@ -255,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}`
@@ -280,7 +284,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       }
   `
 
-  const appliedIconColor = disabled
+  const appliedIconColor = computedDisabled
     ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
     : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
 
@@ -309,7 +313,6 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
           aria-label={`${iconName} icon`}
           color={appliedIconColor}
           css={ICON_STYLE}
-          id="btn-icon"
         />
       ) : null}
     </Btn>