Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from
Mar 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
487ed53
shiny new borders file
mjhuff Mar 14, 2024
265f4fc
update components index
mjhuff Mar 14, 2024
b52af78
migrate the constants
mjhuff Mar 14, 2024
9cd567e
replace radiusRoundEdge
mjhuff Mar 14, 2024
ee87384
scrap the old borders.ts
mjhuff Mar 14, 2024
8a4baca
get rid of tabBorder
mjhuff Mar 14, 2024
58cadaf
get rid of cardOutlineBorder abstraction per Mel
mjhuff Mar 14, 2024
a4f293d
fix remaining import issues
mjhuff Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/DesignTokens/Colors/Colors.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/Banner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`
Expand Down
16 changes: 8 additions & 8 deletions app/src/atoms/Chip/__tests__/Chip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`)
Expand All @@ -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}`)
Expand All @@ -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}`)
Expand All @@ -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}`)
Expand All @@ -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}`)
Expand All @@ -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}`)
Expand All @@ -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}`)
Expand All @@ -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}`)
Expand Down
10 changes: 5 additions & 5 deletions app/src/atoms/Chip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/InlineNotification/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/InstrumentContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions app/src/atoms/ListItem/__tests__/ListItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand All @@ -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'
Expand All @@ -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}`)
})
})
2 changes: 1 addition & 1 deletion app/src/atoms/ListItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions app/src/atoms/MenuList/DropdownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/MenuList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/SelectField/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/Skeleton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/Snackbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/StatusLabel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions app/src/atoms/Toast/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/FloatingActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/LargeButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
4 changes: 2 additions & 2 deletions app/src/atoms/buttons/MediumButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/QuaternaryButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/RadioButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
4 changes: 2 additions & 2 deletions app/src/atoms/buttons/SmallButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/SubmitPrimaryButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/TabbedButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/TertiaryButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`
)
Expand Down
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/__tests__/MediumButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ describe('MediumButton', () => {
}
render(props)
expect(screen.getByRole('button')).toHaveStyle(
`border-radius: ${BORDERS.borderRadiusSize5}`
`border-radius: ${BORDERS.borderRadius40}`
)
})
})
2 changes: 1 addition & 1 deletion app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions app/src/atoms/buttons/__tests__/SmallButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down
Loading
Loading