feat(Box): add new values for borderRadius prop and deprecate others

New possible values: "none", "full", "50", "100", "150", "300", "400"
Deprecated: "small", "normal", "large", "circle"

packages/orbit-components/src/Box/Box.stories.tsx

@@ -68,10 +68,10 @@ enum ELEVATION {
 }
 
 enum BORDER_RADIUS {
-  SMALL = "small",
-  NORMAL = "normal",
-  LARGE = "large",
-  RADIUSCIRCLE = "circle",
+  FIFTY = "50",
+  ONE_HUNDRED = "100",
+  ONE_HUNDRED_FIFTY = "150",
+  FULL = "full",
 }
 
 enum OVERFLOW {
@@ -270,7 +270,7 @@ PaddingMargin.story = {
 };
 
 export const BorderRadius = () => {
-  const radius = select("borderRadius", Object.values(BORDER_RADIUS), BORDER_RADIUS.NORMAL);
+  const radius = select("borderRadius", Object.values(BORDER_RADIUS), BORDER_RADIUS.ONE_HUNDRED);
 
   return (
     <Box background={DEFAULT_COLOR} maxWidth="150px" borderRadius={radius}>
@@ -378,7 +378,11 @@ export const Playground = () => {
   const height = text("height", "auto");
   const maxHeight = text("max-height", "100px");
   const elevation = select("elevation", Object.values(ELEVATION), ELEVATION.ACTION);
-  const borderRadius = select("border-radius", Object.values(BORDER_RADIUS), BORDER_RADIUS.NORMAL);
+  const borderRadius = select(
+    "border-radius",
+    Object.values(BORDER_RADIUS),
+    BORDER_RADIUS.ONE_HUNDRED,
+  );
   const position = select("position", Object.values(POSITION), POSITION.RELATIVE);
   const top = text("top", "10px");
   const right = text("right", "10px");

packages/orbit-components/src/Box/README.md

@@ -119,12 +119,18 @@ All this properties - objects have the some own properties and none is required.
 
 ### borderRadius
 
-| borderRadius |
-| :----------- |
-| `"small"`    |
-| `"normal"`   |
-| `"large"`    |
-| `"circle"`   |
+| borderRadius                               |
+| :----------------------------------------- |
+| `"small"` – **deprecated (use `"50"`)**    |
+| `"normal"` – **deprecated (use `"100"`)**  |
+| `"large"` – **deprecated (use `"150"`)**   |
+| `"circle"` – **deprecated (use `"full"`)** |
+| `"full"`                                   |
+| `"50"`                                     |
+| `"100"`                                    |
+| `"150"`                                    |
+| `"300"`                                    |
+| `"400"`                                    |
 
 ### overflow
 

packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template

@@ -78,7 +78,17 @@ export interface Props extends Common.Globals {
   readonly elevation?: Elevation;
   readonly color?: ColorTokens;
   readonly background?: ColorTokens;
-  readonly borderRadius?: "small" | "normal" | "large" | "circle";
+  readonly borderRadius?:
+    | "small"
+    | "normal"
+    | "large"
+    | "circle"
+    | "full"
+    | "50"
+    | "100"
+    | "150"
+    | "300"
+    | "400";
   readonly overflow?: "auto" | "hidden" | "scroll" | "visible";
   readonly mediumMobile?: MediaQueryObject;
   readonly largeMobile?: MediaQueryObject;

packages/orbit-components/src/Box/__tests__/index.test.tsx

@@ -17,6 +17,13 @@ import Box from "..";
 const dataTest = "test";
 
 const BORDER_RADIUS: { [K in BORDER_RADIUS_KEYS]: string } = {
+  50: theme.orbit.borderRadius50,
+  100: theme.orbit.borderRadius100,
+  150: theme.orbit.borderRadius150,
+  300: theme.orbit.borderRadius300,
+  400: theme.orbit.borderRadius400,
+  none: theme.orbit.borderRadiusNone,
+  full: theme.orbit.borderRadiusFull,
   small: theme.orbit.borderRadiusSmall,
   normal: theme.orbit.borderRadiusNormal,
   large: theme.orbit.borderRadiusLarge,

packages/orbit-components/src/Box/helpers/tailwindClasses.ts

@@ -100,48 +100,97 @@ export const shadowClasses: {
 };
 
 export enum BORDER_RADIUS {
-  SMALL = "small",
-  NORMAL = "normal",
-  LARGE = "large",
-  CIRCLE = "circle",
+  SMALL = "small", // deprecated
+  NORMAL = "normal", // deprecated
+  LARGE = "large", // deprecated
+  CIRCLE = "circle", // deprecated
+  NONE = "none",
+  FULL = "full",
+  FIFTY = "50",
+  ONE_HUNDRED = "100",
+  ONE_HUNDRED_FIFTY = "150",
+  THREE_HUNDRED = "300",
+  FOUR_HUNDRED = "400",
 }
 
 export const borderRadiusClasses: {
   [K in QUERIES | BORDER_RADIUS]: K extends QUERIES ? Record<BORDER_RADIUS, string> : string;
 } = {
-  [BORDER_RADIUS.SMALL]: "rounded-small",
-  [BORDER_RADIUS.NORMAL]: "rounded-normal",
-  [BORDER_RADIUS.LARGE]: "rounded-large",
-  [BORDER_RADIUS.CIRCLE]: "rounded-full",
+  [BORDER_RADIUS.SMALL]: "rounded-small", // deprecated
+  [BORDER_RADIUS.NORMAL]: "rounded-normal", // deprecated
+  [BORDER_RADIUS.LARGE]: "rounded-large", // deprecated
+  [BORDER_RADIUS.CIRCLE]: "rounded-full", // deprecated
+  [BORDER_RADIUS.NONE]: "rounded-none",
+  [BORDER_RADIUS.FULL]: "rounded-full",
+  [BORDER_RADIUS.FIFTY]: "rounded-50",
+  [BORDER_RADIUS.ONE_HUNDRED]: "rounded-100",
+  [BORDER_RADIUS.ONE_HUNDRED_FIFTY]: "rounded-150",
+  [BORDER_RADIUS.THREE_HUNDRED]: "rounded-300",
+  [BORDER_RADIUS.FOUR_HUNDRED]: "rounded-400",
   [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-full",
+    [BORDER_RADIUS.SMALL]: "ld:rounded-small", // deprecated
+    [BORDER_RADIUS.NORMAL]: "ld:rounded-normal", // deprecated
+    [BORDER_RADIUS.LARGE]: "ld:rounded-large", // deprecated
+    [BORDER_RADIUS.CIRCLE]: "ld:rounded-full", // deprecated
+    [BORDER_RADIUS.NONE]: "ld:rounded-none",
+    [BORDER_RADIUS.FULL]: "rounded-full",
+    [BORDER_RADIUS.FIFTY]: "ld:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "ld:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRED_FIFTY]: "ld:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "ld:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "ld:rounded-400",
   },
   [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-full",
+    [BORDER_RADIUS.SMALL]: "de:rounded-small", // deprecated
+    [BORDER_RADIUS.NORMAL]: "de:rounded-normal", // deprecated
+    [BORDER_RADIUS.LARGE]: "de:rounded-large", // deprecated
+    [BORDER_RADIUS.CIRCLE]: "de:rounded-full", // deprecated
+    [BORDER_RADIUS.NONE]: "de:rounded-none",
+    [BORDER_RADIUS.FULL]: "rounded-full",
+    [BORDER_RADIUS.FIFTY]: "de:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "de:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRED_FIFTY]: "de:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "de:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "de:rounded-400",
   },
   [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-full",
+    [BORDER_RADIUS.SMALL]: "tb:rounded-small", // deprecated
+    [BORDER_RADIUS.NORMAL]: "tb:rounded-normal", // deprecated
+    [BORDER_RADIUS.LARGE]: "tb:rounded-large", // deprecated
+    [BORDER_RADIUS.CIRCLE]: "tb:rounded-full", // deprecated
+    [BORDER_RADIUS.NONE]: "tb:rounded-none",
+    [BORDER_RADIUS.FULL]: "rounded-full",
+    [BORDER_RADIUS.FIFTY]: "tb:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "tb:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRED_FIFTY]: "tb:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "tb:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "tb:rounded-400",
   },
   [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-full",
+    [BORDER_RADIUS.SMALL]: "lm:rounded-small", // deprecated
+    [BORDER_RADIUS.NORMAL]: "lm:rounded-normal", // deprecated
+    [BORDER_RADIUS.LARGE]: "lm:rounded-large", // deprecated
+    [BORDER_RADIUS.CIRCLE]: "lm:rounded-full", // deprecated
+    [BORDER_RADIUS.NONE]: "lm:rounded-none",
+    [BORDER_RADIUS.FULL]: "rounded-full",
+    [BORDER_RADIUS.FIFTY]: "lm:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "lm:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRED_FIFTY]: "lm:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "lm:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "lm:rounded-400",
   },
   [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-full",
+    [BORDER_RADIUS.SMALL]: "mm:rounded-small", // deprecated
+    [BORDER_RADIUS.NORMAL]: "mm:rounded-normal", // deprecated
+    [BORDER_RADIUS.LARGE]: "mm:rounded-large", // deprecated
+    [BORDER_RADIUS.CIRCLE]: "mm:rounded-full", // deprecated
+    [BORDER_RADIUS.NONE]: "mm:rounded-none",
+    [BORDER_RADIUS.FULL]: "rounded-full",
+    [BORDER_RADIUS.FIFTY]: "mm:rounded-50",
+    [BORDER_RADIUS.ONE_HUNDRED]: "mm:rounded-100",
+    [BORDER_RADIUS.ONE_HUNDRED_FIFTY]: "mm:rounded-150",
+    [BORDER_RADIUS.THREE_HUNDRED]: "mm:rounded-300",
+    [BORDER_RADIUS.FOUR_HUNDRED]: "mm:rounded-400",
   },
 };
 

packages/orbit-components/src/Box/types.d.ts

@@ -155,7 +155,17 @@ export interface Props extends Common.Globals {
   readonly elevation?: Elevation;
   readonly color?: ColorTokens;
   readonly background?: ColorTokens;
-  readonly borderRadius?: "small" | "normal" | "large" | "circle";
+  readonly borderRadius?:
+    | "small"
+    | "normal"
+    | "large"
+    | "circle"
+    | "full"
+    | "50"
+    | "100"
+    | "150"
+    | "300"
+    | "400";
   readonly overflow?: "auto" | "hidden" | "scroll" | "visible";
   readonly mediumMobile?: MediaQueryObject;
   readonly largeMobile?: MediaQueryObject;