refactor(app components): rename BORDERS constants (#12697)

rename BORDERS constants
Opentrons · May 15, 2023 · 37c0b59 · 37c0b59
1 parent e2ce496
commit 37c0b59
Show file tree

Hide file tree

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

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

diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx
@@ -40,25 +40,25 @@ const CHIP_PROPS_BY_TYPE: Record<
 > = {
  basic: {
  backgroundColor: COLORS.darkBlack20,
- borderRadius: BORDERS.size_one,
+ borderRadius: BORDERS.size1,
  textColor: COLORS.darkBlack90,
  },
  neutral: {
  backgroundColor: COLORS.darkBlack20,
- borderRadius: BORDERS.size_six,
+ borderRadius: BORDERS.size6,
  iconColor: COLORS.darkBlack90,
  textColor: COLORS.darkBlack70,
  },
  success: {
  backgroundColor: COLORS.green3,
- borderRadius: BORDERS.size_six,
+ borderRadius: BORDERS.size6,
  iconColor: COLORS.green1,
  iconName: 'ot-check',
  textColor: COLORS.green1,
  },
  warning: {
  backgroundColor: COLORS.yellow3,
- borderRadius: BORDERS.size_six,
+ borderRadius: BORDERS.size6,
  iconColor: COLORS.yellow1,
  textColor: COLORS.yellow1,
  },

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.size_three}
+ borderRadius={BORDERS.size3}
  data-testid={`InlineNotification_${type}`}
  flexDirection={DIRECTION_ROW}
  gridGap={SPACING.spacing12}

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 ? (
  <ModalShell
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  width="18.0625rem"
  onOutsideClick={onClick}
  >

diff --git a/app/src/atoms/Snackbar/index.tsx b/app/src/atoms/Snackbar/index.tsx
@@ -48,7 +48,7 @@ export function Snackbar(props: SnackbarProps): JSX.Element {
  <Flex
  css={OPEN_STYLE}
  alignItems={ALIGN_CENTER}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  boxShadow={BORDERS.shadowSmall}
  backgroundColor={COLORS.darkBlack100}
  maxWidth="29.25rem"

diff --git a/app/src/atoms/Toast/index.tsx b/app/src/atoms/Toast/index.tsx
@@ -182,11 +182,9 @@ export function Toast(props: ToastProps): JSX.Element {
  css={showODDStyle ? ODD_ANIMATION : DESKTOP_ANIMATION}
  justifyContent={JUSTIFY_SPACE_BETWEEN}
  alignItems={ALIGN_CENTER}
- borderRadius={
- showODDStyle ? BORDERS.size_three : BORDERS.radiusSoftCorners
- }
+ borderRadius={showODDStyle ? BORDERS.size3 : BORDERS.radiusSoftCorners}
  borderColor={toastStyleByType[type].color}
- borderWidth={showODDStyle ? BORDERS.size_one : '1px'}
+ borderWidth={showODDStyle ? BORDERS.size1 : '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.darkBlack60 : COLORS.white
  const FLOATING_ACTION_BUTTON_STYLE = css`
  background-color: ${COLORS.highlightPurple1};
- border-radius: ${BORDERS.size_five};
+ border-radius: ${BORDERS.size5};
  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.size_four};
+ border-radius: ${BORDERS.size4};
  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
@@ -101,7 +101,7 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
  const MEDIUM_BUTTON_STYLE = css`
  background-color: ${MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType]
  .defaultBackgroundColor};
- border-radius: ${BORDERS.size_four};
+ border-radius: ${BORDERS.size4};
  box-shadow: none;
  color: ${MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
  cursor: default;

diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx
@@ -63,7 +63,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.size_four};
+ border-radius: ${BORDERS.size4};
  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.size_five
- : BORDERS.size_four};
+ ? BORDERS.size5
+ : BORDERS.size4};
  box-shadow: none;
  padding: ${SPACING.spacing16} ${SPACING.spacing24};
  ${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.size_four};
+ border-radius: ${BORDERS.size4};
  box-shadow: none;
  font-size: ${TYPOGRAPHY.fontSize22};
  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};

diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
@@ -33,7 +33,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.size_five}`)
+ expect(button).toHaveStyle(`border-radius: ${BORDERS.size5}`)
  expect(button).toHaveStyle(
  `text-transform: ${TYPOGRAPHY.textTransformNone}`
  )

diff --git a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
@@ -24,9 +24,7 @@ describe('SmallButton', () => {
  expect(getByRole('button')).toHaveStyle(
  `background-color: ${COLORS.blueEnabled}`
  )
- expect(getByRole('button')).toHaveStyle(
- `border-radius: ${BORDERS.size_four}`
- )
+ expect(getByRole('button')).toHaveStyle(`border-radius: ${BORDERS.size4}`)
  })
  it('renders the alert button', () => {
  props = {
@@ -78,9 +76,7 @@ describe('SmallButton', () => {
  buttonCategory: 'rounded',
  }
  const { getByRole } = render(props)
- expect(getByRole('button')).toHaveStyle(
- `border-radius: ${BORDERS.size_five}`
- )
+ expect(getByRole('button')).toHaveStyle(`border-radius: ${BORDERS.size5}`)
  })
  it('renders an icon with start placement', () => {
  props = {

diff --git a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx
@@ -38,7 +38,7 @@ describe('Unselected TabbedButton', () => {
  expect(button).toHaveStyle(
  `line-height: ${String(TYPOGRAPHY.lineHeight28)}`
  )
- expect(button).toHaveStyle(`border-radius: ${String(BORDERS.size_four)}`)
+ expect(button).toHaveStyle(`border-radius: ${String(BORDERS.size4)}`)
  expect(button).toHaveStyle(
  `text-transform: ${String(TYPOGRAPHY.textTransformNone)}`
  )
@@ -114,7 +114,7 @@ describe('Selected TabbedButton', () => {
  expect(button).toHaveStyle(
  `line-height: ${String(TYPOGRAPHY.lineHeight28)}`
  )
- expect(button).toHaveStyle(`border-radius: ${String(BORDERS.size_four)}`)
+ expect(button).toHaveStyle(`border-radius: ${String(BORDERS.size4)}`)
  expect(button).toHaveStyle(
  `text-transform: ${String(TYPOGRAPHY.textTransformNone)}`
  )

diff --git a/app/src/molecules/CardButton/index.tsx b/app/src/molecules/CardButton/index.tsx
@@ -22,7 +22,7 @@ const CARD_BUTTON_STYLE = css`
  display: flex;
  flex-direction: ${DIRECTION_COLUMN};
  align-items: ${ALIGN_CENTER};
- border-radius: ${BORDERS.size_four};
+ border-radius: ${BORDERS.size4};
  padding: ${SPACING.spacing32};
  box-shadow: none;
 

diff --git a/app/src/molecules/Modal/OnDeviceDisplay/Modal.stories.tsx b/app/src/molecules/Modal/OnDeviceDisplay/Modal.stories.tsx
@@ -28,7 +28,7 @@ Default.args = {
  },
  children: (
  <Flex
- borderRadius={`0px 0px ${BORDERS.size_three} ${BORDERS.size_three}`}
+ borderRadius={`0px 0px ${BORDERS.size3} ${BORDERS.size3}`}
  paddingTop={SPACING.spacing32}
  height="23.5rem"
  >

diff --git a/app/src/molecules/Modal/OnDeviceDisplay/Modal.tsx b/app/src/molecules/Modal/OnDeviceDisplay/Modal.tsx
@@ -58,7 +58,7 @@ export function Modal(props: ModalProps): JSX.Element {
  width={modalWidth}
  height="max-content"
  maxHeight="33.5rem"
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  boxShadow={BORDERS.shadowSmall}
  margin={SPACING.spacing32}
  flexDirection={DIRECTION_COLUMN}
@@ -83,7 +83,7 @@ export function Modal(props: ModalProps): JSX.Element {
  paddingBottom={SPACING.spacing32}
  paddingTop={header != null ? '0rem' : SPACING.spacing32}
  borderRadius={
- isError ? `0px 0px ${BORDERS.size_three} ${BORDERS.size_three}` : 0
+ isError ? `0px 0px ${BORDERS.size3} ${BORDERS.size3}` : 0
  }
  >
  {children}

diff --git a/app/src/molecules/Modal/OnDeviceDisplay/SmallModalChildren.tsx b/app/src/molecules/Modal/OnDeviceDisplay/SmallModalChildren.tsx
@@ -50,7 +50,7 @@ export function SmallModalChildren(
 
  <Flex
  backgroundColor={COLORS.blueEnabled}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  flexDirection={DIRECTION_COLUMN}
  marginTop={SPACING.spacing32}
  onClick={handleCloseMaxPinsAlert}

diff --git a/app/src/molecules/WizardRequiredEquipmentList/index.tsx b/app/src/molecules/WizardRequiredEquipmentList/index.tsx
@@ -53,7 +53,7 @@ export function WizardRequiredEquipmentList(
  <Flex
  backgroundColor="#16212D33"
  flexDirection={DIRECTION_COLUMN}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  >
  {equipmentList.map((requiredEquipmentProps, index) => (
  <Box

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx
@@ -37,7 +37,7 @@ const LIQUID_CARD_STYLE = css`
 const LIQUID_CARD_ODD_STYLE = css`
  border-color: ${COLORS.medGreyEnabled};
  border: ${SPACING.spacing4} solid ${COLORS.medGreyEnabled};
- border-radius: ${BORDERS.size_three};
+ border-radius: ${BORDERS.size3};
 `
 interface LiquidDetailCardProps {
  liquidId: string
@@ -68,7 +68,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
  const ACTIVE_STYLE = css`
  background-color: ${isOnDevice ? COLORS.medBlue : COLORS.lightBlue};
  border: ${isOnDevice ? SPACING.spacing4 : `1px`} solid ${COLORS.blueEnabled};
- border-radius: ${isOnDevice ? BORDERS.size_three : 0};
+ border-radius: ${isOnDevice ? BORDERS.size3 : 0};
  `
  const volumePerWellRange = getWellRangeForLiquidLabwarePair(
  volumeByWell,

diff --git a/app/src/organisms/InstrumentInfo/index.tsx b/app/src/organisms/InstrumentInfo/index.tsx
@@ -160,7 +160,7 @@ interface InfoItemProps extends StyleProps {
 function InfoItem(props: InfoItemProps): JSX.Element {
  return (
  <Flex
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  backgroundColor={COLORS.lightGreyPressed}
  padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
  justifyContent={JUSTIFY_SPACE_BETWEEN}

diff --git a/app/src/organisms/InstrumentMountItem/LabeledMount.tsx b/app/src/organisms/InstrumentMountItem/LabeledMount.tsx
@@ -23,7 +23,7 @@ const MountButton = styled.button<{ isAttached: boolean }>`
  flex-direction: ${DIRECTION_COLUMN};
  align-items: ${ALIGN_FLEX_START};
  padding: ${SPACING.spacing24};
- border-radius: ${BORDERS.size_three};
+ border-radius: ${BORDERS.size3};
  background-color: ${({ isAttached }) =>
  isAttached ? COLORS.green3 : COLORS.light1};
  &:hover,

diff --git a/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx b/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx
@@ -40,7 +40,7 @@ export const MountItem = styled.div<{ isReady: boolean }>`
  flex-direction: ${DIRECTION_COLUMN};
  align-items: ${ALIGN_FLEX_START};
  padding: ${SPACING.spacing16} ${SPACING.spacing24};
- border-radius: ${BORDERS.size_three};
+ border-radius: ${BORDERS.size3};
  background-color: ${({ isReady }) =>
  isReady ? COLORS.green3 : COLORS.yellow3};
  &:hover,

diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/EmptyRecentRun.tsx
@@ -22,7 +22,7 @@ export function EmptyRecentRun(): JSX.Element {
  width="100%"
  height="27.25rem"
  backgroundColor={`${COLORS.darkBlackEnabled}${COLORS.opacity15HexCode}`}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  flexDirection={DIRECTION_COLUMN}
  alignItems={ALIGN_CENTER}
  padding="5.25rem 3.75rem"

diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx
@@ -133,7 +133,7 @@ export function RecentRunProtocolCard({
  gridGap={SPACING.spacing24}
  backgroundColor={isReadyToBeReRun ? COLORS.green3 : COLORS.yellow3}
  width="25.8125rem"
- borderRadius={BORDERS.size_four}
+ borderRadius={BORDERS.size4}
  onClick={handleCardClick}
  >
  {/* marginLeft is needed to cancel chip's padding */}

diff --git a/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/DeviceReset.tsx b/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/DeviceReset.tsx
@@ -43,7 +43,7 @@ const OptionLabel = styled.label<LabelProps>`
  border: 2px solid
  ${({ isSelected }) =>
  isSelected === true ? COLORS.blueEnabled : COLORS.light2};
- border-radius: ${BORDERS.size_four};
+ border-radius: ${BORDERS.size4};
  background: ${({ isSelected }) =>
  isSelected === true ? COLORS.medBlue : COLORS.white};
 `
@@ -116,7 +116,7 @@ export function DeviceReset({
  alignItems={ALIGN_CENTER}
  gridGap={SPACING.spacing12}
  padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  >
  <Icon name="ot-alert" size="1.5rem" color={COLORS.warningEnabled} />
  <StyledText

diff --git a/...isms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx b/...isms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx
@@ -24,7 +24,7 @@ const STRETCH_LIST_STYLE = css`
  width: 100%;
  padding: ${SPACING.spacing16};
  background-color: ${COLORS.light1};
- border-radius: ${BORDERS.size_three};
+ border-radius: ${BORDERS.size3};
 `
 
 export function EthernetConnectionDetails(): JSX.Element {

diff --git a/.../organisms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx b/.../organisms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx
@@ -78,7 +78,7 @@ function ListItem({ itemName, itemValue }: ListItemProps): JSX.Element {
  padding={`${SPACING.spacing4} ${SPACING.spacing24}`}
  backgroundColor={COLORS.grey3}
  justifyContent={JUSTIFY_SPACE_BETWEEN}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  >
  <StyledText
  fontSize={TYPOGRAPHY.fontSize22}

diff --git a/...rganisms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx b/...rganisms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx
@@ -83,7 +83,7 @@ export function WifiConnectionDetails({
  width="100%"
  padding={SPACING.spacing24}
  backgroundColor={COLORS.green3}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  onClick={() => setShowNetworkDetailModal(true)}
  alignItems={ALIGN_CENTER}
  >

diff --git a/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/NetworkSettings/index.tsx
@@ -190,7 +190,7 @@ function NetworkSettingButton({
  width="100%"
  padding={SPACING.spacing24}
  backgroundColor={buttonBackgroundColor}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  onClick={displayDetailsTab}
  >
  <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing24}>

diff --git a/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/RobotSystemVersion.tsx b/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/RobotSystemVersion.tsx
@@ -76,7 +76,7 @@ export function RobotSystemVersion({
  flexDirection={DIRECTION_ROW}
  padding={`${SPACING.spacing24} ${SPACING.spacing16}`}
  gridGap={SPACING.spacing16}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  alignItems={ALIGN_CENTER}
  backgroundColor={COLORS.warningBackgroundMed}
  >
@@ -103,7 +103,7 @@ export function RobotSystemVersion({
  flexDirection={DIRECTION_ROW}
  padding={SPACING.spacing24}
  justifyContent={JUSTIFY_SPACE_BETWEEN}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  >
  <StyledText
  fontSize="1.5rem"

diff --git a/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/RobotSystemVersionModal.tsx b/app/src/organisms/OnDeviceDisplay/RobotSettingsDashboard/RobotSystemVersionModal.tsx
@@ -57,7 +57,7 @@ export function RobotSystemVersionModal({
  paddingX={SPACING.spacing16}
  paddingY={SPACING.spacing24}
  backgroundColor={COLORS.light2}
- borderRadius={BORDERS.size_three}
+ borderRadius={BORDERS.size3}
  marginY={SPACING.spacing24}
  >
  <Icon