From e2b609244f1f89be635ec0a5428bb6fec44c87b7 Mon Sep 17 00:00:00 2001 From: Amela Kodzic Date: Thu, 13 Jan 2022 16:33:44 +0100 Subject: [PATCH 1/8] add toast z-index to design-tokens --- packages/design-tokens/themes/shared.ts | 1 + packages/design-tokens/types/index.ts | 1 + packages/design-tokens/utils/theme-prop-type.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/design-tokens/themes/shared.ts b/packages/design-tokens/themes/shared.ts index c8130e63cb..66ced0ef98 100644 --- a/packages/design-tokens/themes/shared.ts +++ b/packages/design-tokens/themes/shared.ts @@ -208,4 +208,5 @@ export const zIndex: ZIndex = { sidebar: 800, navigation: 800, modal: 1000, + toast: 1100, }; diff --git a/packages/design-tokens/types/index.ts b/packages/design-tokens/types/index.ts index 7569b24c00..673394d58c 100644 --- a/packages/design-tokens/types/index.ts +++ b/packages/design-tokens/types/index.ts @@ -191,6 +191,7 @@ export type ZIndex = { sidebar: number; navigation: number; modal: number; + toast: number; }; export interface Theme { diff --git a/packages/design-tokens/utils/theme-prop-type.ts b/packages/design-tokens/utils/theme-prop-type.ts index 021e6e891f..08e5c1a36c 100644 --- a/packages/design-tokens/utils/theme-prop-type.ts +++ b/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 }).isRequired, } as { [key in keyof Theme]: Requireable }); From c14d2c42801e6d1af2d15fcddebea469706944b6 Mon Sep 17 00:00:00 2001 From: Amela Kodzic Date: Thu, 13 Jan 2022 16:36:55 +0100 Subject: [PATCH 2/8] add changeset --- packages/circuit-ui/components/ToastContext/ToastContext.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx index 272fdf1a29..4adaca2225 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.tsx +++ b/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); From d0f9004a0f972936c29d9e458bef722b330a1dec Mon Sep 17 00:00:00 2001 From: Amela Kodzic Date: Thu, 13 Jan 2022 16:37:18 +0100 Subject: [PATCH 3/8] add changeset --- .changeset/tame-pigs-worry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tame-pigs-worry.md diff --git a/.changeset/tame-pigs-worry.md b/.changeset/tame-pigs-worry.md new file mode 100644 index 0000000000..a5acf7da45 --- /dev/null +++ b/.changeset/tame-pigs-worry.md @@ -0,0 +1,5 @@ +--- +'@sumup/design-tokens': minor +--- + +Added new zIndex value for the toast. From 4ae0dd40a4b6b28da59d35e15c9df82d4bc61866 Mon Sep 17 00:00:00 2001 From: Amela Kodzic Date: Thu, 13 Jan 2022 16:45:49 +0100 Subject: [PATCH 4/8] update changeset --- .changeset/smart-yaks-walk.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/smart-yaks-walk.md diff --git a/.changeset/smart-yaks-walk.md b/.changeset/smart-yaks-walk.md new file mode 100644 index 0000000000..22e07a99e1 --- /dev/null +++ b/.changeset/smart-yaks-walk.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Added a z-index to the Toast ListWrapper. From e0ce2bf059fed0cd14241a7f3f4de221d2ee5ced Mon Sep 17 00:00:00 2001 From: Amela Kodzic Date: Thu, 13 Jan 2022 16:54:05 +0100 Subject: [PATCH 5/8] update snapshots --- packages/design-tokens/tests/__snapshots__/index.spec.ts.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap index b7bcf7698b..f874c3f0fa 100644 --- a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap +++ b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap @@ -242,6 +242,7 @@ Object { "navigation": 800, "popover": 30, "sidebar": 800, + "toast": 1100, "tooltip": 40, }, } From 24fe38245b9dd2e6a6ba7f3d317103211675b779 Mon Sep 17 00:00:00 2001 From: amelako <57903317+amelako@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:09:27 +0100 Subject: [PATCH 6/8] Update .changeset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Connor Bär --- .changeset/tame-pigs-worry.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tame-pigs-worry.md b/.changeset/tame-pigs-worry.md index a5acf7da45..d7cfc43f36 100644 --- a/.changeset/tame-pigs-worry.md +++ b/.changeset/tame-pigs-worry.md @@ -2,4 +2,4 @@ '@sumup/design-tokens': minor --- -Added new zIndex value for the toast. +Added a new `zIndex.toast` value for the NotificationToast component in Circuit UI. From 7d7aa6dc5ac30ff662b754ac9121e7f42efce471 Mon Sep 17 00:00:00 2001 From: amelako <57903317+amelako@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:09:38 +0100 Subject: [PATCH 7/8] Update .changeset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Connor Bär --- .changeset/smart-yaks-walk.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/smart-yaks-walk.md b/.changeset/smart-yaks-walk.md index 22e07a99e1..b0fa1e0260 100644 --- a/.changeset/smart-yaks-walk.md +++ b/.changeset/smart-yaks-walk.md @@ -2,4 +2,4 @@ '@sumup/circuit-ui': minor --- -Added a z-index to the Toast ListWrapper. +Added a `z-index` to the NotificationToasts so they always float above other content. From 1ef3075c7541da5e34301b0251a8b53125259aab Mon Sep 17 00:00:00 2001 From: amelako <57903317+amelako@users.noreply.github.com> Date: Thu, 13 Jan 2022 17:33:29 +0100 Subject: [PATCH 8/8] Update .changeset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Robin Métral --- .changeset/smart-yaks-walk.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/smart-yaks-walk.md b/.changeset/smart-yaks-walk.md index b0fa1e0260..748de1fe43 100644 --- a/.changeset/smart-yaks-walk.md +++ b/.changeset/smart-yaks-walk.md @@ -2,4 +2,4 @@ '@sumup/circuit-ui': minor --- -Added a `z-index` to the NotificationToasts so they always float above other content. +Added a `z-index` to the NotificationToasts so they always float above other content. Requires updating to `@sumup/design-tokens@3.3.0`.