diff --git a/packages/orbit-components/src/Box/Box.stories.tsx b/packages/orbit-components/src/Box/Box.stories.tsx index 3126bec917..a1de1eab54 100644 --- a/packages/orbit-components/src/Box/Box.stories.tsx +++ b/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 ( @@ -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"); diff --git a/packages/orbit-components/src/Box/README.md b/packages/orbit-components/src/Box/README.md index aeae44fc63..609e84aad1 100644 --- a/packages/orbit-components/src/Box/README.md +++ b/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 diff --git a/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template b/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template index 6f7f59a36d..a18e326d4f 100644 --- a/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template +++ b/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; diff --git a/packages/orbit-components/src/Box/__tests__/index.test.tsx b/packages/orbit-components/src/Box/__tests__/index.test.tsx index 51aa035518..cf0d0802e4 100644 --- a/packages/orbit-components/src/Box/__tests__/index.test.tsx +++ b/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, diff --git a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts b/packages/orbit-components/src/Box/helpers/tailwindClasses.ts index 7739ccf14a..d9cad00bcb 100644 --- a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts +++ b/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 : 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", }, }; diff --git a/packages/orbit-components/src/Box/types.d.ts b/packages/orbit-components/src/Box/types.d.ts index 5ae9cb1b5a..f593767797 100644 --- a/packages/orbit-components/src/Box/types.d.ts +++ b/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;