Remove the deprecated zIndex.sidebar token (#1509)

* Remove deprecated This also replaces its use in the legacy Sidebar component by the new . * Add changeset * Update migration guide * Update snapshot
sumup-oss · Apr 6, 2022 · c7dfe6a · c7dfe6a
1 parent f8e18f2
commit c7dfe6a
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 15 deletions.
diff --git a/.changeset/beige-feet-itch.md b/.changeset/beige-feet-itch.md
@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': major
+---
+
+Removed the deprecated `zIndex.sidebar` token. Use `zIndex.navigation` instead.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -2,10 +2,12 @@
 
 - [🤖 Codemods](#-codemods)
 - [From v4 to v5](#from-v4-to-v5)
+  - [Dependencies](#dependencies)
   - [New semantic color names](#new-semantic-color-names)
     - [In design tokens](#in-design-tokens)
     - [In component variants](#in-component-variants)
   - [Notification components](#notification-components)
+  - [Other changes](#other-changes)
 - [From v4 to v4.1](#from-v4-to-v41)
   - [Combined LoadingButton and Button](#combined-loadingbutton-and-button)
 - [From v3.x to v4](#from-v3x-to-v4)
@@ -18,7 +20,7 @@
     - [Overview of `@sumup/icons` v2](#overview-of-sumupicons-v2)
     - [Migrating to `@sumup/icons` v2](#migrating-to-sumupicons-v2)
 - [From v2.x to v3](#from-v2x-to-v3)
-  - [Dependencies](#dependencies)
+  - [Dependencies](#dependencies-1)
   - [Accessibility](#accessibility)
   - [New JSX transform](#new-jsx-transform)
   - [Typography](#typography)
@@ -33,7 +35,7 @@
     - [Modal](#modal)
     - [Popover](#popover)
   - [Component heights](#component-heights)
-  - [Other changes](#other-changes)
+  - [Other changes](#other-changes-1)
   - [Cleaning up](#cleaning-up)
 - [From v1.x to v2](#from-v1x-to-v2)
   - [Library format](#library-format)
@@ -77,7 +79,13 @@ Tip: Provide the `--transform`/`-t` argument at the end of the command, so that
 
 ## From v4 to v5
 
-Circuit UI v5 is not out yet, but there are already steps you can take to make migration easier in the future.
+### Dependencies
+
+Start by upgrading `@sumup/circuit-ui` and its peer dependencies:
+
+```sh
+yarn upgrade @sumup/circuit-ui @sumup/design-tokens @sumup/icons --latest
+```
 
 ### New semantic color names
 
@@ -132,6 +140,10 @@ Furthermore, some patterns that were previously not supported by Circuit UI are
 
 Read more about the new notification components in [the Notification section in Storybook](https://circuit.sumup.com/?path=/docs/notification).
 
+### Other changes
+
+- The deprecated `zIndex.sidebar` design token was removed from `@sumup/design-tokens`. Use `sIndex.navigation` instead. There is no codemod for this change: search and replace the old value for the new one in your codebase.
+
 ## From v4 to v4.1
 
 ### Combined LoadingButton and Button

diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.js b/packages/circuit-ui/components/Sidebar/Sidebar.js
@@ -41,7 +41,7 @@ const baseStyles = ({ theme }) => css`
   transition: transform ${theme.transitions.default};
   position: absolute;
   transform: translateX(-100%);
-  z-index: ${theme.zIndex.sidebar};
+  z-index: ${theme.zIndex.navigation};
   ${theme.mq.giga} {
     transform: translateX(0);
     position: relative;

diff --git a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts b/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts
@@ -34,7 +34,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
   transition: opacity 150ms ease-in-out, visibility 150ms ease-in-out;
   visibility: hidden;
   opacity: 0;
-  z-index: ${theme.zIndex.sidebar};
+  z-index: ${theme.zIndex.navigation};
   ${theme.mq.giga} {
     visibility: hidden;
   }

diff --git a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap
@@ -245,7 +245,6 @@ Object {
     "modal": 1000,
     "navigation": 800,
     "popover": 30,
-    "sidebar": 800,
     "toast": 1100,
     "tooltip": 40,
   },

diff --git a/packages/design-tokens/themes/shared.ts b/packages/design-tokens/themes/shared.ts
@@ -202,10 +202,6 @@ export const zIndex: ZIndex = {
   tooltip: 40,
   header: 600,
   backdrop: 700,
-  /**
-   * @deprecated Use `theme.zIndex.navigation` instead.
-   */
-  sidebar: 800,
   navigation: 800,
   modal: 1000,
   toast: 1100,

diff --git a/packages/design-tokens/types/index.ts b/packages/design-tokens/types/index.ts
@@ -189,10 +189,6 @@ export type ZIndex = {
   tooltip: number;
   header: number;
   backdrop: number;
-  /**
-   * @deprecated Use `theme.zIndex.navigation` instead.
-   */
-  sidebar: number;
   navigation: number;
   modal: number;
   toast: number;

diff --git a/packages/design-tokens/utils/theme-prop-type.ts b/packages/design-tokens/utils/theme-prop-type.ts
@@ -238,7 +238,6 @@ export const themePropType = PropTypes.shape({
     tooltip: PropTypes.number.isRequired,
     header: PropTypes.number.isRequired,
     backdrop: PropTypes.number.isRequired,
-    sidebar: PropTypes.number.isRequired,
     navigation: PropTypes.number.isRequired,
     modal: PropTypes.number.isRequired,
     toast: PropTypes.number.isRequired,