feat(app): Update LargeButton buttonTypes (#15268)

Closes EXEC-470

Adds the onColor and alertAlt PrimaryButton buttonTypes.

app/src/atoms/buttons/LargeButton.stories.tsx

@@ -58,3 +58,21 @@ export const PrimaryWithSubtext: Story = {
     subtext: 'Button subtext',
   },
 }
+
+export const OnColor: Story = {
+  args: {
+    buttonType: 'onColor',
+    buttonText: 'Button text',
+    disabled: false,
+    subtext: 'Button subtext',
+  },
+}
+
+export const AlertAlt: Story = {
+  args: {
+    buttonType: 'alertAlt',
+    buttonText: 'Button text',
+    disabled: false,
+    subtext: 'Button subtext',
+  },
+}

app/src/atoms/buttons/LargeButton.tsx

@@ -16,13 +16,17 @@ import {
 import { ODD_FOCUS_VISIBLE } from './constants'
 import type { IconName, StyleProps } from '@opentrons/components'
 
-type LargeButtonTypes = 'primary' | 'secondary' | 'alert'
+type LargeButtonTypes =
+  | 'primary'
+  | 'secondary'
+  | 'alert'
+  | 'onColor'
+  | 'alertAlt'
 interface LargeButtonProps extends StyleProps {
   onClick: () => void
   buttonType?: LargeButtonTypes
   buttonText: React.ReactNode
   iconName?: IconName
-  iconColorOverride?: string
   subtext?: string
   disabled?: boolean
 }
@@ -32,7 +36,6 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     buttonType = 'primary',
     buttonText,
     iconName,
-    iconColorOverride,
     subtext,
     disabled = false,
     ...buttonProps
@@ -43,27 +46,61 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     {
       defaultBackgroundColor: string
       activeBackgroundColor: string
+      disabledBackgroundColor: string
       defaultColor: string
+      disabledColor: string
       iconColor: string
+      disabledIconColor: string
+      border?: string
+      disabledBorder?: string
     }
   > = {
     secondary: {
       defaultColor: COLORS.black90,
+      disabledColor: COLORS.grey50,
       defaultBackgroundColor: COLORS.blue35,
       activeBackgroundColor: COLORS.blue40,
+      disabledBackgroundColor: COLORS.grey35,
       iconColor: COLORS.blue50,
+      disabledIconColor: COLORS.grey50,
     },
     alert: {
       defaultColor: COLORS.red60,
+      disabledColor: COLORS.grey50,
       defaultBackgroundColor: COLORS.red35,
       activeBackgroundColor: COLORS.red40,
+      disabledBackgroundColor: COLORS.grey35,
       iconColor: COLORS.red60,
+      disabledIconColor: COLORS.grey50,
     },
     primary: {
       defaultColor: COLORS.white,
+      disabledColor: COLORS.grey50,
       defaultBackgroundColor: COLORS.blue50,
       activeBackgroundColor: COLORS.blue60,
+      disabledBackgroundColor: COLORS.grey35,
       iconColor: COLORS.white,
+      disabledIconColor: COLORS.grey50,
+    },
+    onColor: {
+      defaultColor: COLORS.white,
+      disabledColor: COLORS.grey40,
+      defaultBackgroundColor: COLORS.transparent,
+      activeBackgroundColor: COLORS.transparent,
+      disabledBackgroundColor: COLORS.transparent,
+      iconColor: COLORS.white,
+      disabledIconColor: COLORS.grey40,
+      border: `${BORDERS.borderRadius4} solid ${COLORS.white}`,
+      disabledBorder: `${BORDERS.borderRadius4} solid ${COLORS.grey35}`,
+    },
+    alertAlt: {
+      defaultColor: COLORS.red50,
+      disabledColor: COLORS.grey50,
+      defaultBackgroundColor: COLORS.white,
+      activeBackgroundColor: COLORS.white,
+      disabledBackgroundColor: COLORS.grey35,
+      iconColor: COLORS.red50,
+      disabledIconColor: COLORS.grey50,
     },
   }
 
@@ -77,6 +114,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     box-shadow: none;
     padding: ${SPACING.spacing24};
     line-height: ${TYPOGRAPHY.lineHeight20};
+    border: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].border};
     ${TYPOGRAPHY.pSemiBold}
 
     &:focus {
@@ -85,7 +123,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       box-shadow: none;
     }
     &:hover {
-      border: none;
+      border: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].border};
       box-shadow: none;
       background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
         .defaultBackgroundColor};
@@ -102,8 +140,9 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     }
 
     &:disabled {
-      background-color: ${COLORS.grey35};
-      color: ${COLORS.grey50};
+      color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
+      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+        .disabledBackgroundColor};
     }
   `
   return (
@@ -131,9 +170,8 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
           aria-label={`${iconName} icon`}
           color={
             disabled
-              ? COLORS.grey50
-              : iconColorOverride ??
-                LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
+              ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
+              : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor
           }
           size="5rem"
         />

app/src/atoms/buttons/__tests__/LargeButton.test.tsx

@@ -45,23 +45,35 @@ describe('LargeButton', () => {
       `background-color: ${COLORS.blue35}`
     )
   })
-  it('renders the button as disabled', () => {
+
+  it('renders the onColor button', () => {
     props = {
       ...props,
-      disabled: true,
+      buttonType: 'onColor',
     }
     render(props)
-    expect(screen.getByRole('button')).toBeDisabled()
+    expect(screen.getByRole('button')).toHaveStyle(
+      `background-color: ${COLORS.transparent}`
+    )
   })
 
-  it('renders the icon override color if specified', () => {
+  it('renders the alertAlt button', () => {
     props = {
       ...props,
-      iconColorOverride: COLORS.red50,
+      buttonType: 'alertAlt',
     }
     render(props)
-    expect(screen.getByLabelText('play-round-corners icon')).toHaveStyle(
-      `color: ${COLORS.red50}`
+    expect(screen.getByRole('button')).toHaveStyle(
+      `background-color: ${COLORS.white}`
     )
   })
+
+  it('renders the button as disabled', () => {
+    props = {
+      ...props,
+      disabled: true,
+    }
+    render(props)
+    expect(screen.getByRole('button')).toBeDisabled()
+  })
 })

app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx

@@ -86,15 +86,16 @@ export function RunPausedSplash({
         <LargeButton
           onClick={onCancelClick}
           buttonText={t('cancel_run')}
-          css={CANCEL_RUN_BTN_STYLE}
+          css={SHARED_BUTTON_STYLE}
           iconName={'remove'}
-          iconColorOverride={COLORS.red50}
+          buttonType="alertAlt"
         />
         <LargeButton
           onClick={onLaunchERClick}
           buttonText={t('launch_recovery_mode')}
-          css={LAUNCH_RECOVERY_BTN_STYLE}
+          css={SHARED_BUTTON_STYLE}
           iconName={'recovery'}
+          buttonType="onColor"
         />
       </Flex>
     </Flex>
@@ -133,45 +134,7 @@ const SplashFrame = styled(Flex)`
   padding-bottom: 0px;
 `
 
-const SHARED_BUTTON_STYLE = `
-width: 464px;
-height: 216px;
-`
-
-const LAUNCH_RECOVERY_BTN_STYLE = css`
-  ${SHARED_BUTTON_STYLE};
-  background-color: transparent;
-  border: 4px solid ${COLORS.white};
-
-  &:hover {
-    background-color: transparent;
-    border: 4px solid ${COLORS.white};
-  }
-  &:active {
-    background-color: transparent;
-    border: 4px solid ${COLORS.white};
-  }
-  &:focus-visible {
-    background-color: transparent;
-    border: 4px solid ${COLORS.white};
-  }
-`
-
-const CANCEL_RUN_BTN_STYLE = css`
-  ${SHARED_BUTTON_STYLE};
-  color: ${COLORS.red50};
-  background-color: ${COLORS.white};
-
-  &:hover {
-    color: ${COLORS.red50};
-    background-color: ${COLORS.white};
-  }
-  &:active {
-    color: ${COLORS.red50};
-    background-color: ${COLORS.white};
-  }
-  &:focus-visible {
-    color: ${COLORS.red50};
-    background-color: ${COLORS.white};
-  }
+const SHARED_BUTTON_STYLE = css`
+  width: 29rem;
+  height: 13.5rem;
 `