refactor(components, app): move LargeButton to components and add he…

…lix styling (#15929) closes AUTH-622
Opentrons · Aug 8, 2024 · f7b543f · f7b543f
1 parent 807dd49
commit f7b543f
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 71 deletions.
diff --git a/app/src/atoms/buttons/index.ts b/app/src/atoms/buttons/index.ts
@@ -1,6 +1,5 @@
 export { BackButton } from './BackButton'
 export { FloatingActionButton } from './FloatingActionButton'
-export { LargeButton } from './LargeButton'
 export { MediumButton } from './MediumButton'
 export { QuaternaryButton } from './QuaternaryButton'
 export { SmallButton } from './SmallButton'

diff --git a/app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx b/app/src/organisms/ErrorRecoveryFlows/RunPausedSplash.tsx
@@ -21,11 +21,11 @@ import {
   JUSTIFY_END,
   PrimaryButton,
   SecondaryButton,
+  LargeButton,
 } from '@opentrons/components'
 
 import { useErrorName } from './hooks'
 import { getErrorKind } from './utils'
-import { LargeButton } from '../../atoms/buttons'
 import { RECOVERY_MAP } from './constants'
 import {
   RecoveryInterventionModal,

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx
@@ -8,9 +8,9 @@ import {
   POSITION_FIXED,
   COLORS,
   ALIGN_CENTER,
+  LargeButton,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../App/portal'
-import { LargeButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
 import { ACTIONS } from '../constants'

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx
@@ -6,6 +6,7 @@ import {
   SPACING,
   DIRECTION_COLUMN,
   POSITION_FIXED,
+  LargeButton,
   COLORS,
 } from '@opentrons/components'
 import {
@@ -14,7 +15,6 @@ import {
   TRASH_BIN_ADAPTER_FIXTURE,
 } from '@opentrons/shared-data'
 import { getTopPortalEl } from '../../../App/portal'
-import { LargeButton } from '../../../atoms/buttons'
 import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration'
 import { ChildNavigation } from '../../ChildNavigation'
 import { ACTIONS } from '../constants'

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx
@@ -8,9 +8,9 @@ import {
   POSITION_FIXED,
   COLORS,
   ALIGN_CENTER,
+  LargeButton,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../App/portal'
-import { LargeButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
 import { ACTIONS } from '../constants'

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx
@@ -7,10 +7,10 @@ import {
   DIRECTION_COLUMN,
   POSITION_FIXED,
   COLORS,
+  LargeButton,
   ALIGN_CENTER,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../App/portal'
-import { LargeButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
 import { ACTIONS } from '../constants'

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx
@@ -7,11 +7,11 @@ import {
   DIRECTION_COLUMN,
   POSITION_FIXED,
   COLORS,
+  LargeButton,
   ALIGN_CENTER,
 } from '@opentrons/components'
 import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration'
 import { getTopPortalEl } from '../../../App/portal'
-import { LargeButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { useBlowOutLocationOptions } from './BlowOut'
 import { getVolumeRange } from '../utils'

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx
@@ -8,9 +8,9 @@ import {
   POSITION_FIXED,
   COLORS,
   ALIGN_CENTER,
+  LargeButton,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../App/portal'
-import { LargeButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
 import { ACTIONS } from '../constants'

diff --git a/app/src/pages/RunSummary/index.tsx b/app/src/pages/RunSummary/index.tsx
@@ -26,6 +26,7 @@ import {
   POSITION_RELATIVE,
   SPACING,
   TYPOGRAPHY,
+  LargeButton,
   WRAP,
 } from '@opentrons/components'
 import {
@@ -40,7 +41,6 @@ import {
   useDeleteRunMutation,
 } from '@opentrons/react-api-client'
 
-import { LargeButton } from '../../atoms/buttons'
 import {
   useRunTimestamps,
   useRunControls,

diff --git a/...src/atoms/buttons/LargeButton.stories.tsx → ...src/atoms/buttons/LargeButton.stories.tsx b/...src/atoms/buttons/LargeButton.stories.tsx → ...src/atoms/buttons/LargeButton.stories.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react'
-import { Box, COLORS, SPACING, ICON_DATA_BY_NAME } from '@opentrons/components'
-import { LargeButton } from './'
+
+import { ICON_DATA_BY_NAME } from '../../icons'
+import { SPACING } from '../../ui-style-constants'
+import { Box } from '../../primitives'
+import { COLORS } from '../../helix-design-system'
+import { LargeButton } from './LargeButton'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof LargeButton> = {
-  title: 'ODD/Atoms/Buttons/LargeButton',
+  title: 'Library/Atoms/Buttons/LargeButton',
   component: LargeButton,
   argTypes: {
     onClick: { action: 'clicked' },

diff --git a/app/src/atoms/buttons/LargeButton.tsx → components/src/atoms/buttons/LargeButton.tsx b/app/src/atoms/buttons/LargeButton.tsx → components/src/atoms/buttons/LargeButton.tsx
@@ -1,19 +1,21 @@
 import * as React from 'react'
 import { css } from 'styled-components'
+import { Box, 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 {
-  BORDERS,
-  Btn,
-  COLORS,
+  ALIGN_CENTER,
+  ALIGN_FLEX_START,
   DIRECTION_COLUMN,
   DISPLAY_FLEX,
-  Icon,
-  Flex,
   JUSTIFY_SPACE_BETWEEN,
-  SPACING,
-  LegacyStyledText,
-  TYPOGRAPHY,
-} from '@opentrons/components'
-import type { IconName, StyleProps } from '@opentrons/components'
+} from '../..'
+import { Icon } from '../../icons'
+import type { StyleProps } from '../../primitives'
+import type { IconName } from '../../icons'
 
 type LargeButtonTypes =
   | 'primary'
@@ -126,80 +128,102 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     LARGE_BUTTON_PROPS_BY_TYPE[style].activeIconColor
       ? `color: ${LARGE_BUTTON_PROPS_BY_TYPE[style].activeIconColor}`
       : ''
+
   const LARGE_BUTTON_STYLE = css`
-    text-align: ${TYPOGRAPHY.textAlignLeft};
     color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
     background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
       .defaultBackgroundColor};
     cursor: default;
-    border-radius: ${BORDERS.borderRadius16};
-    box-shadow: none;
-    padding: ${SPACING.spacing24};
-    line-height: ${TYPOGRAPHY.lineHeight20};
-    gap: ${SPACING.spacing60};
-    border: ${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};
-    }
+    padding: ${SPACING.spacing16} ${SPACING.spacing24};
+    text-align: ${TYPOGRAPHY.textAlignCenter};
+    border-radius: ${BORDERS.borderRadiusFull};
+    align-items: ${ALIGN_CENTER};
 
     &:active {
       background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
         .activeBackgroundColor};
       ${activeColorFor(buttonType)};
-      border: ${BORDERS.borderRadius4} solid
-        ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor};
     }
     &:active #btn-icon {
       ${activeIconStyle(buttonType)};
     }
 
-    &:focus-visible {
-      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
-        .focusVisibleBackgroundColor};
-      ${activeColorFor(buttonType)};
-      padding: calc(${SPACING.spacing24} + ${SPACING.spacing2});
-      border: ${SPACING.spacing2} solid ${COLORS.transparent};
-      outline: 3px solid
-        ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleOutlineColor};
-      background-clip: padding-box;
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      align-items: ${ALIGN_FLEX_START};
+      flex-direction: ${DIRECTION_COLUMN};
+      border-radius: ${BORDERS.borderRadius16};
       box-shadow: none;
-    }
+      padding: ${SPACING.spacing24};
+      line-height: ${TYPOGRAPHY.lineHeight20};
+      gap: ${SPACING.spacing60};
+      border: ${BORDERS.borderRadius4} solid
+        ${buttonType === 'alertStroke' && !disabled
+          ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor
+          : 'none'};
 
-    &:disabled {
-      color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
-      background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
-        .disabledBackgroundColor};
+      ${TYPOGRAPHY.pSemiBold}
+
+      #btn-icon: {
+        color: ${disabled
+          ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledIconColor
+          : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].iconColor};
+      }
+      &:active {
+        border: ${BORDERS.borderRadius4} solid
+          ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor};
+      }
+
+      &:focus-visible {
+        background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+          .focusVisibleBackgroundColor};
+        ${activeColorFor(buttonType)};
+        padding: calc(${SPACING.spacing24} + ${SPACING.spacing2});
+        border: ${SPACING.spacing2} solid ${COLORS.transparent};
+        outline: 3px solid
+          ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleOutlineColor};
+        background-clip: padding-box;
+        box-shadow: none;
+      }
+
+      &:disabled {
+        color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
+        background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
+          .disabledBackgroundColor};
+      }
     }
   `
   return (
     <Btn
       display={DISPLAY_FLEX}
       css={LARGE_BUTTON_STYLE}
-      flexDirection={DIRECTION_COLUMN}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       disabled={disabled}
       {...buttonProps}
     >
-      <Flex flexDirection={DIRECTION_COLUMN}>
-        <LegacyStyledText css={TYPOGRAPHY.level3HeaderSemiBold}>
-          {buttonText}
-        </LegacyStyledText>
-      </Flex>
+      <LegacyStyledText
+        css={css`
+          font-size: ${fontSizeBodyLargeSemiBold};
+          padding-right: ${SPACING.spacing8};
+          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+            ${TYPOGRAPHY.level3HeaderSemiBold}
+          }
+        `}
+      >
+        {buttonText}
+      </LegacyStyledText>
       {iconName ? (
-        <Icon
-          name={iconName}
-          aria-label={`${iconName} icon`}
-          size="5rem"
-          id={`btn-icon`}
-        />
+        <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>
       ) : null}
     </Btn>
   )

diff --git a/...ms/buttons/__tests__/LargeButton.test.tsx → ...ms/buttons/__tests__/LargeButton.test.tsx b/...ms/buttons/__tests__/LargeButton.test.tsx → ...ms/buttons/__tests__/LargeButton.test.tsx
@@ -2,9 +2,9 @@ import * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
-import { COLORS } from '@opentrons/components'
-import { renderWithProviders } from '../../../__testing-utils__'
 
+import { renderWithProviders } from '../../../testing/utils'
+import { COLORS } from '../../../helix-design-system'
 import { LargeButton } from '../LargeButton'
 
 const render = (props: React.ComponentProps<typeof LargeButton>) => {

diff --git a/components/src/atoms/buttons/index.ts b/components/src/atoms/buttons/index.ts
@@ -1,4 +1,5 @@
 export * from './AlertPrimaryButton'
+export * from './LargeButton'
 export * from './PrimaryButton'
-export * from './SecondaryButton'
 export * from './RadioButton'
+export * from './SecondaryButton'