Add z-index to Notification Toast ListWrapper

.changeset/smart-yaks-walk.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added a `z-index` to the NotificationToasts so they always float above other content.

.changeset/tame-pigs-worry.md

@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': minor
+---
+
+Added a new `zIndex.toast` value for the NotificationToast component in Circuit UI.

packages/circuit-ui/components/ToastContext/ToastContext.tsx

@@ -60,6 +60,7 @@ const listWrapperStyles = ({ theme }: StyleProps) => css`
   transform: translateX(-50%);
   display: flex;
   flex-direction: column-reverse;
+  z-index: ${theme.zIndex.toast};
 `;
 
 const ListWrapper = styled('ul')(listWrapperStyles);

packages/design-tokens/tests/__snapshots__/index.spec.ts.snap

@@ -242,6 +242,7 @@ Object {
     "navigation": 800,
     "popover": 30,
     "sidebar": 800,
+    "toast": 1100,
     "tooltip": 40,
   },
 }

packages/design-tokens/themes/shared.ts

@@ -208,4 +208,5 @@ export const zIndex: ZIndex = {
   sidebar: 800,
   navigation: 800,
   modal: 1000,
+  toast: 1100,
 };

packages/design-tokens/types/index.ts

@@ -191,6 +191,7 @@ export type ZIndex = {
   sidebar: number;
   navigation: number;
   modal: number;
+  toast: number;
 };
 
 export interface Theme {

packages/design-tokens/utils/theme-prop-type.ts

@@ -237,5 +237,6 @@ export const themePropType = PropTypes.shape({
     sidebar: PropTypes.number.isRequired,
     navigation: PropTypes.number.isRequired,
     modal: PropTypes.number.isRequired,
+    toast: PropTypes.number.isRequired,
   } as { [key in keyof ZIndex]: Requireable<unknown> }).isRequired,
 } as { [key in keyof Theme]: Requireable<unknown> });