feat(Box): remove deprecated elevation values

BREAKING CHANGE: deprecated elevation prop values were removed.
kiwicom · Jan 3, 2025 · 6ff4962 · 6ff4962
1 parent c11297b
commit 6ff4962
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 62 deletions.
diff --git a/packages/orbit-components/src/Box/README.md b/packages/orbit-components/src/Box/README.md
@@ -144,19 +144,15 @@ All this properties - objects have the some own properties and none is required.
 
 ### elevation
 
-| elevation                                                  |
-| :--------------------------------------------------------- |
-| `"action"` – **deprecated (use `"level1"`)**               |
-| `"fixed"`                                                  |
-| `"fixedReverse"`                                           |
-| `"overlay"` – **deprecated (use `"level4"`)**              |
-| `"raised"` – **deprecated (use `"level3"`)**               |
-| `"raisedReverse"` – **deprecated (use `"level3Reverse"`)** |
-| `"level1"`                                                 |
-| `"level2"`                                                 |
-| `"level3"`                                                 |
-| `"level3Reverse"`                                          |
-| `"level4"`                                                 |
+| elevation         |
+| :---------------- |
+| `"fixed"`         |
+| `"fixedReverse"`  |
+| `"level1"`        |
+| `"level2"`        |
+| `"level3"`        |
+| `"level3Reverse"` |
+| `"level4"`        |
 
 ### spacingObject
 

diff --git a/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template b/packages/orbit-components/src/Box/TYPESCRIPT_TEMPLATE.template
@@ -5,12 +5,8 @@ import type * as React from "react";
 import type * as Common from "../common/types";
 
 export type Elevation =
-  | "action"
   | "fixed"
-  | "raised"
-  | "overlay"
   | "fixedReverse"
-  | "raisedReverse"
   | "level1"
   | "level2"
   | "level3"

diff --git a/packages/orbit-components/src/Box/__tests__/index.test.tsx b/packages/orbit-components/src/Box/__tests__/index.test.tsx
@@ -269,18 +269,12 @@ describe("#Box", () => {
 
     const testEl = (idx: number) => render(test[idx]).getByTestId(`${dataTest}-${idx}`);
 
-    expect(testEl(0)).toHaveStyle({
-      "--tw-shadow": theme.orbit.elevationActionBoxShadow,
-    });
-    expect(testEl(1)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationFixedBoxShadow });
-    expect(testEl(2)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationRaisedBoxShadow });
-    expect(testEl(3)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationOverlayBoxShadow });
-    expect(testEl(4)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationFixedReverseBoxShadow });
-    expect(testEl(5)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationRaisedReverseBoxShadow });
-    expect(testEl(6)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel1BoxShadow });
-    expect(testEl(7)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel2BoxShadow });
-    expect(testEl(8)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3BoxShadow });
-    expect(testEl(9)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3ReverseBoxShadow });
-    expect(testEl(10)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel4BoxShadow });
+    expect(testEl(0)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationFixedBoxShadow });
+    expect(testEl(1)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationFixedReverseBoxShadow });
+    expect(testEl(2)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel1BoxShadow });
+    expect(testEl(3)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel2BoxShadow });
+    expect(testEl(4)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3BoxShadow });
+    expect(testEl(5)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel3ReverseBoxShadow });
+    expect(testEl(6)).toHaveStyle({ "--tw-shadow": theme.orbit.elevationLevel4BoxShadow });
   });
 });
diff --git a/packages/orbit-components/src/Box/helpers/tailwindClasses.ts b/packages/orbit-components/src/Box/helpers/tailwindClasses.ts
@@ -40,12 +40,8 @@ export const positionClasses: {
 };
 
 export enum SHADOWS {
-  ACTION = "action", // deprecated
   FIXED = "fixed",
-  RAISED = "raised", // deprecated
-  OVERLAY = "overlay", // deprecated
   FIXED_REVERSE = "fixedReverse",
-  RAISED_REVERSE = "raisedReverse", // deprecated
   LEVEL1 = "level1",
   LEVEL2 = "level2",
   LEVEL3 = "level3",
@@ -56,76 +52,52 @@ export enum SHADOWS {
 export const shadowClasses: {
   [K in QUERIES | SHADOWS]: K extends QUERIES ? Record<SHADOWS, string> : string;
 } = {
-  [SHADOWS.ACTION]: "shadow-action", // deprecated
   [SHADOWS.FIXED]: "shadow-fixed",
-  [SHADOWS.RAISED]: "shadow-raised", // deprecated
-  [SHADOWS.OVERLAY]: "shadow-overlay", // deprecated
   [SHADOWS.FIXED_REVERSE]: "shadow-fixed-reverse",
-  [SHADOWS.RAISED_REVERSE]: "shadow-raised-reverse", // deprecated
   [SHADOWS.LEVEL1]: "shadow-level1",
   [SHADOWS.LEVEL2]: "shadow-level2",
   [SHADOWS.LEVEL3]: "shadow-level3",
   [SHADOWS.LEVEL3_REVERSE]: "shadow-level3-reverse",
   [SHADOWS.LEVEL4]: "shadow-level4",
   [QUERIES.LARGEDESKTOP]: {
-    [SHADOWS.ACTION]: "ld:shadow-action", // deprecated
     [SHADOWS.FIXED]: "ld:shadow-fixed",
-    [SHADOWS.RAISED]: "ld:shadow-raised", // deprecated
-    [SHADOWS.OVERLAY]: "ld:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "ld:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "ld:shadow-raised-reverse", // deprecated
     [SHADOWS.LEVEL1]: "ld:shadow-level1",
     [SHADOWS.LEVEL2]: "ld:shadow-level2",
     [SHADOWS.LEVEL3]: "ld:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "ld:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "ld:shadow-level4",
   },
   [QUERIES.DESKTOP]: {
-    [SHADOWS.ACTION]: "de:shadow-action", // deprecated
     [SHADOWS.FIXED]: "de:shadow-fixed",
-    [SHADOWS.RAISED]: "de:shadow-raised", // deprecated
-    [SHADOWS.OVERLAY]: "de:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "de:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "de:shadow-raised-reverse", // deprecated
     [SHADOWS.LEVEL1]: "de:shadow-level1",
     [SHADOWS.LEVEL2]: "de:shadow-level2",
     [SHADOWS.LEVEL3]: "de:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "de:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "de:shadow-level4",
   },
   [QUERIES.TABLET]: {
-    [SHADOWS.ACTION]: "tb:shadow-action", // deprecated
     [SHADOWS.FIXED]: "tb:shadow-fixed",
-    [SHADOWS.RAISED]: "tb:shadow-raised", // deprecated
-    [SHADOWS.OVERLAY]: "tb:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "tb:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "tb:shadow-raised-reverse", // deprecated
     [SHADOWS.LEVEL1]: "tb:shadow-level1",
     [SHADOWS.LEVEL2]: "tb:shadow-level2",
     [SHADOWS.LEVEL3]: "tb:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "tb:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "tb:shadow-level4",
   },
   [QUERIES.LARGEMOBILE]: {
-    [SHADOWS.ACTION]: "lm:shadow-action", // deprecated
     [SHADOWS.FIXED]: "lm:shadow-fixed",
-    [SHADOWS.RAISED]: "lm:shadow-raised", // deprecated
-    [SHADOWS.OVERLAY]: "lm:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "lm:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "lm:shadow-raised-reverse", // deprecated
     [SHADOWS.LEVEL1]: "lm:shadow-level1",
     [SHADOWS.LEVEL2]: "lm:shadow-level2",
     [SHADOWS.LEVEL3]: "lm:shadow-level3",
     [SHADOWS.LEVEL3_REVERSE]: "lm:shadow-level3-reverse",
     [SHADOWS.LEVEL4]: "lm:shadow-level4",
   },
   [QUERIES.MEDIUMMOBILE]: {
-    [SHADOWS.ACTION]: "mm:shadow-action", // deprecated
     [SHADOWS.FIXED]: "mm:shadow-fixed",
-    [SHADOWS.RAISED]: "mm:shadow-raised", // deprecated
-    [SHADOWS.OVERLAY]: "mm:shadow-overlay", // deprecated
     [SHADOWS.FIXED_REVERSE]: "mm:shadow-fixed-reverse",
-    [SHADOWS.RAISED_REVERSE]: "mm:shadow-raised-reverse", // deprecated
     [SHADOWS.LEVEL1]: "mm:shadow-level1",
     [SHADOWS.LEVEL2]: "mm:shadow-level2",
     [SHADOWS.LEVEL3]: "mm:shadow-level3",

diff --git a/packages/orbit-components/src/Box/types.d.ts b/packages/orbit-components/src/Box/types.d.ts
@@ -5,12 +5,8 @@ import type * as React from "react";
 import type * as Common from "../common/types";
 
 export type Elevation =
-  | "action"
   | "fixed"
-  | "raised"
-  | "overlay"
   | "fixedReverse"
-  | "raisedReverse"
   | "level1"
   | "level2"
   | "level3"