refactor(app): border radius overrides feedback (#14680)

Closes EXEC-332, EXEC-330, and EXEC-333
Opentrons · Mar 18, 2024 · fe9a09f · fe9a09f
1 parent 52d2c79
commit fe9a09f
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 20 deletions.
diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { css } from 'styled-components'
-import { Btn, COLORS, SPACING } from '@opentrons/components'
+import { Btn, BORDERS, COLORS, SPACING } from '@opentrons/components'
 
 export const OverflowBtn: (
   props: React.ComponentProps<typeof Btn>,
@@ -13,7 +13,7 @@ export const OverflowBtn: (
     return (
       <Btn
         css={css`
-          border-radius: ${SPACING.spacing4};
+          border-radius: ${BORDERS.borderRadius8};
           max-height: ${SPACING.spacing32};
 
           &:hover {

diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
@@ -47,12 +47,12 @@ const BUTTON_GROUP_STYLES = css`
   }
 
   button:first-child {
-    border-radius: ${BORDERS.borderRadius4} 0 0 ${BORDERS.borderRadius8};
+    border-radius: ${BORDERS.borderRadius8} 0 0 ${BORDERS.borderRadius8};
     border-right: none;
   }
 
   button:last-child {
-    border-radius: 0 ${BORDERS.borderRadius4} ${BORDERS.borderRadius8} 0;
+    border-radius: 0 ${BORDERS.borderRadius8} ${BORDERS.borderRadius8} 0;
     border-left: none;
   }
 `

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
@@ -216,7 +216,7 @@ export function AddFixtureModal({
                         justifyContent={JUSTIFY_SPACE_BETWEEN}
                         padding={`${SPACING.spacing8} ${SPACING.spacing16}`}
                         backgroundColor={COLORS.grey20}
-                        borderRadius={BORDERS.borderRadius8}
+                        borderRadius={BORDERS.borderRadius4}
                       >
                         <StyledText css={TYPOGRAPHY.pSemiBold}>
                           {fixtureDisplayName}
@@ -253,7 +253,7 @@ export function AddFixtureModal({
 const FIXTURE_BUTTON_STYLE = css`
   background-color: ${COLORS.grey35};
   cursor: default;
-  border-radius: ${BORDERS.borderRadiusFull};
+  border-radius: ${BORDERS.borderRadius16};
   box-shadow: none;
 
   &:focus {

diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx
@@ -195,7 +195,7 @@ const TouchNavLink = styled(NavLink)`
 `
 
 const IconButton = styled('button')`
-  border-radius: ${SPACING.spacing4};
+  border-radius: ${BORDERS.borderRadius8};
   max-height: 100%;
   background-color: ${COLORS.white};
 

diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx
@@ -547,7 +547,7 @@ function RowLabware({
     <Flex
       alignItems={ALIGN_CENTER}
       backgroundColor={COLORS.grey35}
-      borderRadius={BORDERS.borderRadius16}
+      borderRadius={BORDERS.borderRadius8}
       padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
       gridGap={SPACING.spacing32}
     >

diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx
@@ -312,7 +312,7 @@ function ModuleTableItem({
             ? COLORS.grey35
             : COLORS.yellow35
         }
-        borderRadius={BORDERS.borderRadius12}
+        borderRadius={BORDERS.borderRadius8}
         cursor={isDuplicateModuleModel ? 'pointer' : 'inherit'}
         gridGap={SPACING.spacing24}
         padding={`${SPACING.spacing16} ${SPACING.spacing24}`}

diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx
@@ -223,7 +223,7 @@ function SubTask({
           ? BORDERS.activeLineBorder
           : `1px solid ${COLORS.grey30}`
       }
-      borderRadius={BORDERS.borderRadius4}
+      borderRadius={BORDERS.borderRadius8}
       gridGap={SPACING.spacing24}
       width="100%"
     >
@@ -366,7 +366,7 @@ function Task({
         border={
           isActiveTask && !isTaskOpen ? BORDERS.activeLineBorder : undefined
         }
-        borderRadius={BORDERS.borderRadius4}
+        borderRadius={BORDERS.borderRadius8}
         width="100%"
       >
         <Flex

diff --git a/app/src/pages/Devices/RobotSettings/index.tsx b/app/src/pages/Devices/RobotSettings/index.tsx
@@ -107,7 +107,7 @@ export function RobotSettings(): JSX.Element | null {
     <Box minWidth={SIZE_6} height="max-content" padding={SPACING.spacing16}>
       <Flex
         backgroundColor={COLORS.white}
-        borderRadius={BORDERS.borderRadius4}
+        borderRadius={BORDERS.borderRadius8}
         flexDirection={DIRECTION_COLUMN}
         marginBottom={SPACING.spacing16}
         minHeight="calc(100vh - 3.5rem)"

diff --git a/app/src/pages/Labware/index.tsx b/app/src/pages/Labware/index.tsx
@@ -157,7 +157,7 @@ export function Labware(): JSX.Element {
             <Flex
               flexDirection={DIRECTION_ROW}
               alignItems={ALIGN_CENTER}
-              borderRadius={BORDERS.borderRadius4}
+              borderRadius={BORDERS.borderRadius8}
               marginLeft={SPACING.spacing8}
               css={SORT_BY_BUTTON_STYLE}
               onClick={toggleSetShowSortByMenu}

diff --git a/app/src/pages/ProtocolDetails/index.tsx b/app/src/pages/ProtocolDetails/index.tsx
@@ -236,7 +236,7 @@ const Summary = ({ author, description, date }: SummaryProps): JSX.Element => {
       </StyledText>
       <Flex
         backgroundColor={COLORS.grey35}
-        borderRadius={BORDERS.borderRadius4}
+        borderRadius={BORDERS.borderRadius8}
         marginTop={SPACING.spacing24}
         width="max-content"
         padding={`${SPACING.spacing8} ${SPACING.spacing12}`}

diff --git a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
@@ -4,7 +4,7 @@ import { fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { renderWithProviders } from '../../../testing/utils'
-import { COLORS } from '../../../helix-design-system'
+import { BORDERS, COLORS } from '../../../helix-design-system'
 import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
 import { CheckboxField } from '..'
 
@@ -43,7 +43,9 @@ describe('CheckboxField', () => {
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey60)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
+    expect(checkBoxIcon).toHaveStyle(
+      `border-radius: ${String(BORDERS.borderRadius2)}`
+    )
     expect(checkBoxIcon).toHaveStyle(
       `justify-content: ${String(JUSTIFY_CENTER)}`
     )
@@ -82,7 +84,9 @@ describe('CheckboxField', () => {
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue60)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
+    expect(checkBoxIcon).toHaveStyle(
+      `border-radius: ${String(BORDERS.borderRadius2)}`
+    )
     expect(checkBoxIcon).toHaveStyle(
       `justify-content: ${String(JUSTIFY_CENTER)}`
     )
@@ -97,7 +101,9 @@ describe('CheckboxField', () => {
     expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
     expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey60)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
+    expect(checkBoxIcon).toHaveStyle(
+      `border-radius: ${String(BORDERS.borderRadius2)}`
+    )
     expect(checkBoxIcon).toHaveStyle(
       `justify-content: ${String(JUSTIFY_CENTER)}`
     )

diff --git a/components/src/atoms/CheckboxField/index.tsx b/components/src/atoms/CheckboxField/index.tsx
@@ -50,7 +50,7 @@ const INNER_STYLE_VALUE = css`
   min-width: ${SPACING.spacing20};
   color: ${COLORS.blue50};
   display: flex;
-  border-radius: 1px;
+  border-radius: ${BORDERS.borderRadius2};
   justify-content: ${JUSTIFY_CENTER};
   align-items: ${ALIGN_CENTER};
 
@@ -76,7 +76,7 @@ const INNER_STYLE_NO_VALUE = css`
   min-width: ${SPACING.spacing20};
   color: ${COLORS.grey50};
   display: flex;
-  border-radius: 1px;
+  border-radius: ${BORDERS.borderRadius2};
   justify-content: ${JUSTIFY_CENTER};
   align-items: ${ALIGN_CENTER};