chore: replace border-radius circle by full

kiwicom · Jan 31, 2024 · bd094e5 · bd094e5
1 parent 55c9eff
commit bd094e5
Show file tree

Hide file tree

Showing 18 changed files with 26 additions and 26 deletions.
diff --git 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
@@ -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
@@ -56,7 +56,7 @@ const StyledDesignTokenCircleShape = styled(StyledDesignTokenBase)<ColorProps>`
       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)<ColorProps>`
 export const StyledDesignTokenColor = styled(StyledDesignTokenBase)<ColorProps>`
   ${({ $color, theme, size }) => css`
     background: ${typeof $color === "string" ? $color.replace("<alpha-value>", "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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -38,7 +38,7 @@ export const VerticalBadge = ({
   return (
     <div
       className={cx(
-        "me-xs size-icon-large rounded-circle flex shrink-0 items-center justify-center",
+        "me-xs size-icon-large flex shrink-0 items-center justify-center rounded-full",
         "[&_svg]:size-icon-small",
         type && BACKGROUND[type],
       )}

diff --git a/packages/orbit-components/src/Box/__tests__/index.test.tsx b/packages/orbit-components/src/Box/__tests__/index.test.tsx
@@ -20,7 +20,7 @@ const BORDER_RADIUS: { [K in BORDER_RADIUS_KEYS]: string } = {
   small: theme.orbit.borderRadiusSmall,
   normal: theme.orbit.borderRadiusNormal,
   large: theme.orbit.borderRadiusLarge,
-  circle: theme.orbit.borderRadiusCircle,
+  circle: theme.orbit.borderRadiusFull,
 };
 
 describe("#Box", () => {

diff --git 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
@@ -131,7 +131,7 @@ const CarrierLogo = ({
         <img
           className={cx(
             "max-w-none bg-transparent",
-            rounded ? "rounded-circle" : "rounded-normal",
+            rounded ? "rounded-full" : "rounded-normal",
             inlineStacked ? "not-first:-ms-xs border border-solid border-white" : "last:self-end",
             carriers.length > 1 && !inlineStacked
               ? [

diff --git 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 (
     <div
-      className="animate-loader rounded-circle bg-cloud-dark size-xs me-[6px] [&:nth-child(3)]:m-0"
+      className="animate-loader bg-cloud-dark size-xs me-[6px] rounded-full [&:nth-child(3)]:m-0"
       style={{ animationDelay }}
     />
   );

diff --git a/packages/orbit-components/src/Radio/index.tsx b/packages/orbit-components/src/Radio/index.tsx
@@ -62,7 +62,7 @@ const Radio = React.forwardRef<HTMLInputElement, Props>((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<HTMLInputElement, Props>((props, ref) => {
         >
           <span
             className={cx(
-              "size-xs rounded-circle",
+              "size-xs rounded-full",
               disabled ? "bg-cloud-light" : "bg-form-element-background",
               checked ? "visible" : "invisible",
             )}

diff --git a/packages/orbit-components/src/Stepper/StepperStateless/index.tsx b/packages/orbit-components/src/Stepper/StepperStateless/index.tsx
@@ -18,7 +18,7 @@ const stepperButtonMixin = ({ disabled, active }: { disabled: boolean; active?:
   cx(
     "[&_svg]:p-xxxs",
     "de:[&_svg]:size-icon-medium [&_svg]:size-icon-large",
-    "[&_svg]:rounded-circle",
+    "[&_svg]:rounded-full",
     "focus:outline-0",
     "[&_svg]:focus:outline-blue-normal [&_svg]:focus:outline [&_svg]:focus:outline-2",
     active ? "[&_svg]:bg-blue-normal" : "[&_svg]:bg-cloud-normal",

diff --git a/packages/orbit-components/src/Switch/index.tsx b/packages/orbit-components/src/Switch/index.tsx
@@ -39,7 +39,7 @@ const Switch = React.forwardRef<HTMLInputElement, Props>(
           />
           <div
             className={cx(
-              "rounded-circle bg-white-normal duration-fast shadow-switch absolute box-border inline-flex size-[24px] items-center justify-center",
+              "bg-white-normal duration-fast shadow-switch absolute box-border inline-flex size-[24px] items-center justify-center rounded-full",
               "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
               "[&_svg]:size-icon-small",
               !disabled && "active:shadow-action-active",

diff --git a/packages/orbit-components/src/Tag/index.tsx b/packages/orbit-components/src/Tag/index.tsx
@@ -98,7 +98,7 @@ const Tag = React.forwardRef<HTMLDivElement, Props>(
           <div
             className={cx(
               "orbit-tag-close-container",
-              "ms-xs rounded-circle flex",
+              "ms-xs flex rounded-full",
               "duration-fast transition-[color,_opacity] ease-in-out",
               "focus:opacity-100",
               !selected &&

diff --git a/packages/orbit-components/src/Wizard/WizardStepIcon.tsx b/packages/orbit-components/src/Wizard/WizardStepIcon.tsx
@@ -15,7 +15,7 @@ export const StyledStepIconContainer = styled.div<{ $disabled?: boolean; $glow?:
     justify-content: center;
     width: 20px;
     height: 20px;
-    border-radius: ${theme.orbit.borderRadiusCircle};
+    border-radius: ${theme.orbit.borderRadiusFull};
     background: ${$disabled
       ? theme.orbit.paletteCloudNormalHover
       : theme.orbit.paletteProductNormal};

diff --git a/packages/orbit-tailwind-preset/src/__fixtures__/BorderRadius.tsx b/packages/orbit-tailwind-preset/src/__fixtures__/BorderRadius.tsx
@@ -6,7 +6,7 @@ const BorderRadius = () => {
       <div className="rounded-small">small</div>
       <div className="rounded-normal">normal</div>
       <div className="rounded-large">large</div>
-      <div className="rounded-circle">circle</div>
+      <div className="rounded-full">full</div>
     </div>
   );
 };