refactor(app): Border radius helix migration - find and replace (#14659)

Closes EXEC-323, EXEC-324, EXEC-325, EXEC-326, EXEC-327, EXEC-328
Opentrons · Mar 14, 2024 · b882d61 · b882d61
1 parent 0cd75c1
commit b882d61
Show file tree

Hide file tree

Showing 185 changed files with 390 additions and 359 deletions.
diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx
@@ -74,7 +74,7 @@ const Template: Story<ColorsStorybookProps> = args => {
           gridGap={SPACING.spacing4}
           width="20rem"
           height="6rem"
-          borderRadius={BORDERS.borderRadiusSize2}
+          borderRadius={BORDERS.borderRadius8}
           onClick={() => handleClick(color[0])}
           style={{ cursor: 'pointer' }}
           border={`2px solid ${COLORS.black90}`}

diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx
@@ -105,7 +105,7 @@ export function Banner(props: BannerProps): JSX.Element {
       font-size: 1.25rem;
       font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
       background-color: ${COLORS.yellow35};
-      border-radius: ${BORDERS.borderRadiusSize3};
+      border-radius: ${BORDERS.borderRadius12};
       line-height: 1.5rem;
     }
   `

diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -36,7 +36,7 @@ describe('Chip', () => {
     const chip = screen.getByTestId('Chip_success')
     const chipText = screen.getByText('mockSuccess')
     expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
     const icon = screen.getByLabelText('icon_mockSuccess')
     expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
@@ -52,7 +52,7 @@ describe('Chip', () => {
     const chip = screen.getByTestId('Chip_success')
     const chipText = screen.getByText('mockSuccess')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
     const icon = screen.getByLabelText('icon_mockSuccess')
     expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
@@ -67,7 +67,7 @@ describe('Chip', () => {
     const chip = screen.getByTestId('Chip_warning')
     const chipText = screen.getByText('mockWarning')
     expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
     const icon = screen.getByLabelText('icon_mockWarning')
     expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
@@ -83,7 +83,7 @@ describe('Chip', () => {
     const chip = screen.getByTestId('Chip_warning')
     const chipText = screen.getByText('mockWarning')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
     const icon = screen.getByLabelText('icon_mockWarning')
     expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
@@ -100,7 +100,7 @@ describe('Chip', () => {
     expect(chip).toHaveStyle(
       `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
     )
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     const icon = screen.getByLabelText('icon_mockNeutral')
     expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
@@ -116,7 +116,7 @@ describe('Chip', () => {
     const chip = screen.getByTestId('Chip_neutral')
     const chipText = screen.getByText('mockNeutral')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
     const icon = screen.getByLabelText('icon_mockNeutral')
     expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
@@ -131,7 +131,7 @@ describe('Chip', () => {
     const chip = screen.getByTestId('Chip_error')
     const chipText = screen.getByText('mockError')
     expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
     const icon = screen.getByLabelText('icon_mockError')
     expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
@@ -147,7 +147,7 @@ describe('Chip', () => {
     const chip = screen.getByTestId('Chip_error')
     const chipText = screen.getByText('mockError')
     expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
     const icon = screen.getByLabelText('icon_mockError')
     expect(icon).toHaveStyle(`color: ${COLORS.red60}`)

diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx
@@ -40,31 +40,31 @@ const CHIP_PROPS_BY_TYPE: Record<
 > = {
   basic: {
     backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
-    borderRadius: BORDERS.borderRadiusSize1,
+    borderRadius: BORDERS.borderRadius4,
     textColor: COLORS.grey60,
   },
   error: {
     backgroundColor: COLORS.red35,
-    borderRadius: BORDERS.borderRadiusSize5,
+    borderRadius: BORDERS.borderRadius40,
     iconColor: COLORS.red60,
     textColor: COLORS.red60,
   },
   neutral: {
     backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
-    borderRadius: BORDERS.borderRadiusSize5,
+    borderRadius: BORDERS.borderRadius40,
     iconColor: COLORS.grey60,
     textColor: COLORS.grey60,
   },
   success: {
     backgroundColor: COLORS.green35,
-    borderRadius: BORDERS.borderRadiusSize5,
+    borderRadius: BORDERS.borderRadius40,
     iconColor: COLORS.green60,
     iconName: 'ot-check',
     textColor: COLORS.green60,
   },
   warning: {
     backgroundColor: COLORS.yellow35,
-    borderRadius: BORDERS.borderRadiusSize5,
+    borderRadius: BORDERS.borderRadius40,
     iconColor: COLORS.yellow60,
     textColor: COLORS.yellow60,
   },

diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
@@ -72,7 +72,7 @@ export function InlineNotification(
     <Flex
       alignItems={ALIGN_CENTER}
       backgroundColor={INLINE_NOTIFICATION_PROPS_BY_TYPE[type].backgroundColor}
-      borderRadius={BORDERS.borderRadiusSize3}
+      borderRadius={BORDERS.borderRadius12}
       data-testid={`InlineNotification_${type}`}
       flexDirection={DIRECTION_ROW}
       gridGap={SPACING.spacing12}

diff --git a/app/src/atoms/InstrumentContainer/index.tsx b/app/src/atoms/InstrumentContainer/index.tsx
@@ -17,7 +17,7 @@ export const InstrumentContainer = (
   return (
     <Flex
       backgroundColor={`${COLORS.black90}${COLORS.opacity20HexCode}`}
-      borderRadius={BORDERS.radiusSoftCorners}
+      borderRadius={BORDERS.borderRadius4}
       paddingX={SPACING.spacing8}
       paddingY={SPACING.spacing2}
       width="max-content"

diff --git a/app/src/atoms/ListItem/__tests__/ListItem.test.tsx b/app/src/atoms/ListItem/__tests__/ListItem.test.tsx
@@ -28,7 +28,7 @@ describe('ListItem', () => {
     expect(listItem).toHaveStyle(
       `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
     )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
   })
   it('should render correct style - noActive', () => {
     props.type = 'noActive'
@@ -39,7 +39,7 @@ describe('ListItem', () => {
     expect(listItem).toHaveStyle(
       `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
     )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
   })
   it('should render correct style - success', () => {
     props.type = 'success'
@@ -50,7 +50,7 @@ describe('ListItem', () => {
     expect(listItem).toHaveStyle(
       `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
     )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
   })
   it('should render correct style - warning', () => {
     props.type = 'warning'
@@ -61,6 +61,6 @@ describe('ListItem', () => {
     expect(listItem).toHaveStyle(
       `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
     )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadiusSize3}`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
   })
 })
diff --git a/app/src/atoms/ListItem/index.tsx b/app/src/atoms/ListItem/index.tsx
@@ -42,7 +42,7 @@ export function ListItem(props: ListItemProps): JSX.Element {
       height="max-content"
       padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
       backgroundColor={listItemProps.backgroundColor}
-      borderRadius={BORDERS.borderRadiusSize3}
+      borderRadius={BORDERS.borderRadius12}
       {...styleProps}
     >
       {children}

diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx
@@ -48,7 +48,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
         width="9.125rem"
         onClick={toggleSetShowDropdownMenu}
         border={BORDERS.lineBorder}
-        borderRadius={BORDERS.radiusRoundEdge}
+        borderRadius={BORDERS.borderRadiusFull}
         padding={SPACING.spacing8}
         backgroundColor={COLORS.white}
         css={css`
@@ -65,7 +65,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
         <Flex
           ref={dropDownMenuWrapperRef}
           zIndex={2}
-          borderRadius={BORDERS.radiusSoftCorners}
+          borderRadius={BORDERS.borderRadius4}
           boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
           position={POSITION_ABSOLUTE}
           backgroundColor={COLORS.white}

diff --git a/app/src/atoms/MenuList/index.tsx b/app/src/atoms/MenuList/index.tsx
@@ -20,7 +20,7 @@ export const MenuList = (props: MenuListProps): JSX.Element | null => {
   const { children, isOnDevice = false, onClick = null } = props
   return isOnDevice && onClick != null ? (
     <LegacyModalShell
-      borderRadius={BORDERS.borderRadiusSize4}
+      borderRadius={BORDERS.borderRadius16}
       width="max-content"
       onOutsideClick={onClick}
     >

diff --git a/app/src/atoms/SelectField/Select.tsx b/app/src/atoms/SelectField/Select.tsx
@@ -41,7 +41,7 @@ export function Select(props: SelectComponentProps): JSX.Element {
     clearIndicator: NO_STYLE_FN,
     control: (styles: CSSObjectWithLabel) => ({
       ...styles,
-      borderRadius: BORDERS.radiusRoundEdge,
+      borderRadius: BORDERS.borderRadiusFull,
       border: BORDERS.lineBorder,
       width: props.width != null ? props.width : 'auto',
       height: SPACING.spacing16,

diff --git a/app/src/atoms/Skeleton/index.tsx b/app/src/atoms/Skeleton/index.tsx
@@ -12,7 +12,7 @@ interface SkeletonProps {
 export const Skeleton = (props: SkeletonProps): JSX.Element => {
   const { width, height, backgroundSize, borderRadius } = props
   const SKELETON_STYLE = css`
-    border-radius: ${borderRadius ?? BORDERS.radiusSoftCorners};
+    border-radius: ${borderRadius ?? BORDERS.borderRadius4};
     animation: shimmer 2s infinite linear;
     background: linear-gradient(
       to right,

diff --git a/app/src/atoms/Snackbar/index.tsx b/app/src/atoms/Snackbar/index.tsx
@@ -77,7 +77,7 @@ export function Snackbar(props: SnackbarProps): JSX.Element {
     <Flex
       css={animationStyle}
       alignItems={ALIGN_CENTER}
-      borderRadius={BORDERS.borderRadiusSize3}
+      borderRadius={BORDERS.borderRadius12}
       boxShadow={BORDERS.shadowSmall}
       backgroundColor={COLORS.black90}
       maxWidth="max-content"

diff --git a/app/src/atoms/StatusLabel/index.tsx b/app/src/atoms/StatusLabel/index.tsx
@@ -43,7 +43,7 @@ export const StatusLabel = (props: StatusLabelProps): JSX.Element | null => {
     <Flex>
       <Flex
         backgroundColor={backgroundColor}
-        borderRadius={BORDERS.radiusSoftCorners}
+        borderRadius={BORDERS.borderRadius4}
         gridGap={SPACING.spacing4}
         paddingX={SPACING.spacing6}
         paddingY={SPACING.spacing2}

diff --git a/app/src/atoms/Toast/index.tsx b/app/src/atoms/Toast/index.tsx
@@ -303,10 +303,10 @@ export function Toast(props: ToastProps): JSX.Element {
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       alignItems={ALIGN_CENTER}
       borderRadius={
-        showODDStyle ? BORDERS.borderRadiusSize3 : BORDERS.radiusSoftCorners
+        showODDStyle ? BORDERS.borderRadius12 : BORDERS.borderRadius4
       }
       borderColor={toastStyleByType[type].color}
-      borderWidth={showODDStyle ? BORDERS.borderRadiusSize1 : '1px'}
+      borderWidth={showODDStyle ? BORDERS.borderRadius4 : '1px'}
       border={BORDERS.styleSolid}
       boxShadow={BORDERS.shadowBig}
       backgroundColor={toastStyleByType[type].backgroundColor}

diff --git a/app/src/atoms/buttons/FloatingActionButton.tsx b/app/src/atoms/buttons/FloatingActionButton.tsx
@@ -39,7 +39,7 @@ export function FloatingActionButton(
   const contentColor = disabled ? COLORS.grey50 : COLORS.white
   const FLOATING_ACTION_BUTTON_STYLE = css`
     background-color: ${COLORS.purple50};
-    border-radius: ${BORDERS.borderRadiusSize5};
+    border-radius: ${BORDERS.borderRadius40};
     box-shadow: ${BORDERS.shadowBig};
     color: ${contentColor};
     cursor: default;

diff --git a/app/src/atoms/buttons/LargeButton.tsx b/app/src/atoms/buttons/LargeButton.tsx
@@ -68,7 +68,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
     background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType]
       .defaultBackgroundColor};
     cursor: default;
-    border-radius: ${BORDERS.borderRadiusSize4};
+    border-radius: ${BORDERS.borderRadius16};
     box-shadow: none;
     padding: ${SPACING.spacing24};
     line-height: ${TYPOGRAPHY.lineHeight20};

diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx
@@ -107,8 +107,8 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
     background-color: ${MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType]
       .defaultBackgroundColor};
     border-radius: ${buttonCategory === 'rounded'
-      ? BORDERS.borderRadiusSize5
-      : BORDERS.borderRadiusSize4};
+      ? BORDERS.borderRadius40
+      : BORDERS.borderRadius16};
     box-shadow: none;
     color: ${MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
     cursor: default;

diff --git a/app/src/atoms/buttons/QuaternaryButton.tsx b/app/src/atoms/buttons/QuaternaryButton.tsx
@@ -10,7 +10,7 @@ import {
 
 export const QuaternaryButton = styled(NewSecondaryBtn)`
   background-color: ${COLORS.white};
-  border-radius: ${BORDERS.radiusRoundEdge};
+  border-radius: ${BORDERS.borderRadiusFull};
   box-shadow: none;
   color: ${COLORS.blue50};
   overflow: no-wrap;

diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx
@@ -65,7 +65,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
   // TODO: (ew, 2023-04-21): button is not tabbable, so focus state
   // is not possible on ODD. It's testable in storybook but not in real life.
   const SettingButtonLabel = styled.label`
-    border-radius: ${BORDERS.borderRadiusSize4};
+    border-radius: ${BORDERS.borderRadius16};
     cursor: pointer;
     padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
     width: 100%;

diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx
@@ -100,8 +100,8 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
       .defaultBackgroundColor};
     cursor: default;
     border-radius: ${buttonCategory === 'rounded'
-      ? BORDERS.borderRadiusSize5
-      : BORDERS.borderRadiusSize4};
+      ? BORDERS.borderRadius40
+      : BORDERS.borderRadius16};
     box-shadow: none;
     ${TYPOGRAPHY.pSemiBold}
 

diff --git a/app/src/atoms/buttons/SubmitPrimaryButton.tsx b/app/src/atoms/buttons/SubmitPrimaryButton.tsx
@@ -19,7 +19,7 @@ export const SubmitPrimaryButton = (
 ): JSX.Element => {
   const SUBMIT_INPUT_STYLE = css`
     background-color: ${COLORS.blue50};
-    border-radius: ${BORDERS.radiusSoftCorners};
+    border-radius: ${BORDERS.borderRadius4};
     padding: ${SPACING.spacing8} ${SPACING.spacing16};
     color: ${COLORS.white};
     ${TYPOGRAPHY.pSemiBold}

diff --git a/app/src/atoms/buttons/TabbedButton.tsx b/app/src/atoms/buttons/TabbedButton.tsx
@@ -45,7 +45,7 @@ interface TabbedButtonProps extends React.ComponentProps<typeof Btn> {
 export const TabbedButton = styled(Btn)<TabbedButtonProps>`
   ${props =>
     css`
-      border-radius: ${BORDERS.borderRadiusSize4};
+      border-radius: ${BORDERS.borderRadius16};
       box-shadow: none;
       font-size: ${TYPOGRAPHY.fontSize22};
       font-weight: ${TYPOGRAPHY.fontWeightSemiBold};

diff --git a/app/src/atoms/buttons/TertiaryButton.tsx b/app/src/atoms/buttons/TertiaryButton.tsx
@@ -10,7 +10,7 @@ import {
 
 export const TertiaryButton = styled(NewPrimaryBtn)`
   background-color: ${COLORS.blue50};
-  border-radius: ${BORDERS.radiusRoundEdge};
+  border-radius: ${BORDERS.borderRadiusFull};
   box-shadow: none;
   color: ${COLORS.white};
   overflow: no-wrap;

diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
@@ -34,7 +34,7 @@ describe('FloatingActionButton', () => {
     expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSize28}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
     expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight36}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadiusSize5}`)
+    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
     expect(button).toHaveStyle(
       `text-transform: ${TYPOGRAPHY.textTransformNone}`
     )

diff --git a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
@@ -93,7 +93,7 @@ describe('MediumButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `border-radius: ${BORDERS.borderRadiusSize5}`
+      `border-radius: ${BORDERS.borderRadius40}`
     )
   })
 })
diff --git a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
@@ -24,7 +24,7 @@ describe('QuaternaryButton', () => {
     render(props)
     const button = screen.getByText('secondary tertiary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.white}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.radiusRoundEdge}`)
+    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
     expect(button).toHaveStyle('box-shadow: 0 0 0')
     expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
     expect(button).toHaveStyle(

diff --git a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
@@ -28,7 +28,7 @@ describe('SmallButton', () => {
       `background-color: ${COLORS.blue60}`
     )
     expect(screen.getByRole('button')).toHaveStyle(
-      `border-radius: ${BORDERS.borderRadiusSize4}`
+      `border-radius: ${BORDERS.borderRadius16}`
     )
   })
   it('renders the alert button', () => {
@@ -82,7 +82,7 @@ describe('SmallButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `border-radius: ${BORDERS.borderRadiusSize5}`
+      `border-radius: ${BORDERS.borderRadius40}`
     )
   })
   it('renders an icon with start placement', () => {