From bd094e5c2acda167e1863fab1f0391cff3ac17f8 Mon Sep 17 00:00:00 2001 From: Daniel Sil Date: Wed, 31 Jan 2024 15:25:23 +0100 Subject: [PATCH] chore: replace border-radius circle by full --- docs/src/components/BrandedTile.tsx | 2 +- .../components/ComponentStatus/ComponentStatus.tsx | 2 +- .../DesignTokensList/components/DesignTokenColor.tsx | 4 ++-- docs/src/components/Footer.tsx | 2 +- docs/src/components/Switch.tsx | 4 ++-- docs/src/components/Tile.tsx | 2 +- docs/src/components/Usage/index.tsx | 2 +- .../src/BadgeList/BadgeListItem/index.tsx | 2 +- .../src/Box/__tests__/index.test.tsx | 2 +- .../src/Box/helpers/tailwindClasses.ts | 12 ++++++------ packages/orbit-components/src/CarrierLogo/index.tsx | 2 +- packages/orbit-components/src/Loading/index.tsx | 2 +- packages/orbit-components/src/Radio/index.tsx | 4 ++-- .../src/Stepper/StepperStateless/index.tsx | 2 +- packages/orbit-components/src/Switch/index.tsx | 2 +- packages/orbit-components/src/Tag/index.tsx | 2 +- .../orbit-components/src/Wizard/WizardStepIcon.tsx | 2 +- .../src/__fixtures__/BorderRadius.tsx | 2 +- 18 files changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/src/components/BrandedTile.tsx b/docs/src/components/BrandedTile.tsx index 32ddd08055..076b2be3c2 100644 --- a/docs/src/components/BrandedTile.tsx +++ b/docs/src/components/BrandedTile.tsx @@ -64,7 +64,7 @@ const StyledIcon = styled.div<{ secondary: string }>` height: ${ICON_SIZE}; display: none; background: ${secondary}; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; ${mq.largeMobile(` display: grid; align-content: center; diff --git a/docs/src/components/ComponentStatus/ComponentStatus.tsx b/docs/src/components/ComponentStatus/ComponentStatus.tsx index da6c4777d1..0efc2c248f 100644 --- a/docs/src/components/ComponentStatus/ComponentStatus.tsx +++ b/docs/src/components/ComponentStatus/ComponentStatus.tsx @@ -90,7 +90,7 @@ export const StyledStatusDot = styled.div<{ status: Status }>` ${({ theme, status }) => css` width: ${theme.orbit.spaceXSmall}; height: ${theme.orbit.spaceXSmall}; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; background: ${theme.orbit[STATUS_COLOR[status]]}; `}; `; diff --git a/docs/src/components/DesignTokensList/components/DesignTokenColor.tsx b/docs/src/components/DesignTokensList/components/DesignTokenColor.tsx index 16183c6914..99217a51d3 100644 --- a/docs/src/components/DesignTokensList/components/DesignTokenColor.tsx +++ b/docs/src/components/DesignTokensList/components/DesignTokenColor.tsx @@ -56,7 +56,7 @@ const StyledDesignTokenCircleShape = styled(StyledDesignTokenBase)` display: flex; align-items: center; justify-content: center; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; background-color: ${theme.orbit.paletteCloudDark}; `}; `; @@ -68,7 +68,7 @@ const StyledDesignTokenCircleShape = styled(StyledDesignTokenBase)` export const StyledDesignTokenColor = styled(StyledDesignTokenBase)` ${({ $color, theme, size }) => css` background: ${typeof $color === "string" ? $color.replace("", "1") : $color}; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; box-shadow: 0 0 0 1px ${theme.orbit.paletteCloudLight}; ${size !== "small" && css` diff --git a/docs/src/components/Footer.tsx b/docs/src/components/Footer.tsx index 482b888b1a..a5d368a07b 100644 --- a/docs/src/components/Footer.tsx +++ b/docs/src/components/Footer.tsx @@ -34,7 +34,7 @@ const StyledIconLink = styled.a.attrs(() => ({ display: block; padding: ${theme.orbit.spaceXSmall}; margin-right: -${theme.orbit.spaceXSmall}; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; color: ${theme.orbit.paletteInkDark}; &:hover, &:focus { diff --git a/docs/src/components/Switch.tsx b/docs/src/components/Switch.tsx index 86c82bc3a0..58c29524f0 100644 --- a/docs/src/components/Switch.tsx +++ b/docs/src/components/Switch.tsx @@ -38,7 +38,7 @@ const StyledHandle = styled.div` transition: transform ${theme.orbit.durationFast} ease-in-out; border: 1px solid rgba(7, 64, 92, 0.1); border-box: content; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; background-color: ${theme.orbit.paletteWhite}; background-clip: content-box; box-shadow: 0px 2px 3px 0px rgba(7, 64, 92, 0.16); @@ -49,7 +49,7 @@ const StyledCircle = styled.div` ${({ theme }) => ` width: 10px; height: 10px; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; background-color: ${theme.orbit.paletteInkLight}; transition: background-color ${theme.orbit.durationFast}; `} diff --git a/docs/src/components/Tile.tsx b/docs/src/components/Tile.tsx index da17e5f710..8badc00627 100644 --- a/docs/src/components/Tile.tsx +++ b/docs/src/components/Tile.tsx @@ -104,7 +104,7 @@ const StyledIcon = styled.div<{ isBookmark?: boolean }>` width: ${ICON_SIZE}; height: ${ICON_SIZE}; background: ${isBookmark ? theme.orbit.paletteOrangeLight : theme.orbit.paletteProductLight}; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; color: ${isBookmark ? theme.orbit.paletteOrangeNormal : theme.orbit.paletteProductDark}; svg { diff --git a/docs/src/components/Usage/index.tsx b/docs/src/components/Usage/index.tsx index 0cea4ca10a..6d02d89273 100644 --- a/docs/src/components/Usage/index.tsx +++ b/docs/src/components/Usage/index.tsx @@ -69,7 +69,7 @@ const StyledHeadingIcon = styled.div<{ $color: string }>` width: ${theme.orbit.widthIconMedium}; height: ${theme.orbit.heightIconMedium}; background-color: ${$color}; - border-radius: ${theme.orbit.borderRadiusCircle}; + border-radius: ${theme.orbit.borderRadiusFull}; padding: 2px; svg { width: 100%; diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx b/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx index c34a4dc415..97e78a8ba8 100644 --- a/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx +++ b/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx @@ -38,7 +38,7 @@ export const VerticalBadge = ({ return (
{ diff --git a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts b/packages/orbit-components/src/Box/helpers/tailwindClasses.ts index bb479865c4..f043602323 100644 --- a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts +++ b/packages/orbit-components/src/Box/helpers/tailwindClasses.ts @@ -112,36 +112,36 @@ export const borderRadiusClasses: { [BORDER_RADIUS.SMALL]: "rounded-small", [BORDER_RADIUS.NORMAL]: "rounded-normal", [BORDER_RADIUS.LARGE]: "rounded-large", - [BORDER_RADIUS.CIRCLE]: "rounded-circle", + [BORDER_RADIUS.CIRCLE]: "rounded-full", [QUERIES.LARGEDESKTOP]: { [BORDER_RADIUS.SMALL]: "ld:rounded-small", [BORDER_RADIUS.NORMAL]: "ld:rounded-normal", [BORDER_RADIUS.LARGE]: "ld:rounded-large", - [BORDER_RADIUS.CIRCLE]: "ld:rounded-circle", + [BORDER_RADIUS.CIRCLE]: "ld:rounded-full", }, [QUERIES.DESKTOP]: { [BORDER_RADIUS.SMALL]: "de:rounded-small", [BORDER_RADIUS.NORMAL]: "de:rounded-normal", [BORDER_RADIUS.LARGE]: "de:rounded-large", - [BORDER_RADIUS.CIRCLE]: "de:rounded-circle", + [BORDER_RADIUS.CIRCLE]: "de:rounded-full", }, [QUERIES.TABLET]: { [BORDER_RADIUS.SMALL]: "tb:rounded-small", [BORDER_RADIUS.NORMAL]: "tb:rounded-normal", [BORDER_RADIUS.LARGE]: "tb:rounded-large", - [BORDER_RADIUS.CIRCLE]: "tb:rounded-circle", + [BORDER_RADIUS.CIRCLE]: "tb:rounded-full", }, [QUERIES.LARGEMOBILE]: { [BORDER_RADIUS.SMALL]: "lm:rounded-small", [BORDER_RADIUS.NORMAL]: "lm:rounded-normal", [BORDER_RADIUS.LARGE]: "lm:rounded-large", - [BORDER_RADIUS.CIRCLE]: "lm:rounded-circle", + [BORDER_RADIUS.CIRCLE]: "lm:rounded-full", }, [QUERIES.MEDIUMMOBILE]: { [BORDER_RADIUS.SMALL]: "mm:rounded-small", [BORDER_RADIUS.NORMAL]: "mm:rounded-normal", [BORDER_RADIUS.LARGE]: "mm:rounded-large", - [BORDER_RADIUS.CIRCLE]: "mm:rounded-circle", + [BORDER_RADIUS.CIRCLE]: "mm:rounded-full", }, }; diff --git a/packages/orbit-components/src/CarrierLogo/index.tsx b/packages/orbit-components/src/CarrierLogo/index.tsx index 07af5db2b2..96c64f3584 100644 --- a/packages/orbit-components/src/CarrierLogo/index.tsx +++ b/packages/orbit-components/src/CarrierLogo/index.tsx @@ -131,7 +131,7 @@ const CarrierLogo = ({ 1 && !inlineStacked ? [ diff --git a/packages/orbit-components/src/Loading/index.tsx b/packages/orbit-components/src/Loading/index.tsx index 9d76d877bf..b7309b58c9 100644 --- a/packages/orbit-components/src/Loading/index.tsx +++ b/packages/orbit-components/src/Loading/index.tsx @@ -10,7 +10,7 @@ import useTheme from "../hooks/useTheme"; const CircleLoader = ({ animationDelay }: { animationDelay?: string }) => { return (
); diff --git a/packages/orbit-components/src/Radio/index.tsx b/packages/orbit-components/src/Radio/index.tsx index 35cc69ba06..09dc93b465 100644 --- a/packages/orbit-components/src/Radio/index.tsx +++ b/packages/orbit-components/src/Radio/index.tsx @@ -62,7 +62,7 @@ const Radio = React.forwardRef((props, ref) => { "orbit-radio-icon-container", "relative box-border", "flex flex-none items-center justify-center", - "rounded-circle size-icon-medium", + "size-icon-medium rounded-full", "duration-fast scale-100 transition-all ease-in-out", "lm:border border-[2px] border-solid", "active:scale-95", @@ -74,7 +74,7 @@ const Radio = React.forwardRef((props, ref) => { > ( />
(
{
small
normal
large
-
circle
+
full
); };