From ec44efeaac0cc5a6cc32f5934971d583fbadff92 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Tue, 11 Jun 2024 17:02:46 +0200 Subject: [PATCH 01/13] feat: add initial toast positioning props --- .../NotificationToast/NotificationToast.mdx | 14 +++++ .../NotificationToast.stories.tsx | 62 +++++++++++++------ .../ToastContext/ToastContext.module.css | 17 ++++- .../components/ToastContext/ToastContext.tsx | 7 ++- 4 files changed, 78 insertions(+), 22 deletions(-) diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx index b0b7ba4520..c35247bd25 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx @@ -59,6 +59,20 @@ export function App({}) { } ``` +### Custom positioning + +It's possible to change a position of notifications in the by passing `position` prop. Supported values are `bottom` (default), `top` and `top-right`: + +```tsx +// _app.tsx for Next.js or App.js for CRA +import { ToastProvider } from '@sumup/circuit-ui'; + +export default function App() { + // all notifications will appear at the top of the screen + return {/* Your content goes here... */}; +} +``` + ## Accessibility By their nature as status messages, toasts are rendered inside a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) using `role="status"` and `aria-live="polite"`. diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx index 07bf35c667..bd1528ba24 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx @@ -55,29 +55,25 @@ const TOASTS = [ }, ] as NotificationToastProps[]; -export const Base = (toast: NotificationToastProps): JSX.Element => { - const App = () => { - const { setToast } = useNotificationToast(); - const randomIndex = isChromatic() - ? 1 - : Math.floor(Math.random() * TOASTS.length); - return ( - - ); - }; +const App = ({ toast }: { toast: NotificationToastProps }) => { + const { setToast } = useNotificationToast(); + const randomIndex = isChromatic() + ? 1 + : Math.floor(Math.random() * TOASTS.length); return ( - - - + ); }; - -Base.play = async ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => { +const play = async ({ + canvasElement, +}: { + canvasElement: HTMLCanvasElement; +}) => { const canvas = within(canvasElement); const button = canvas.getByRole('button', { name: 'Open toast', @@ -87,6 +83,32 @@ Base.play = async ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => { await screen.findByRole('status'); }; +export const Base = (toast: NotificationToastProps): JSX.Element => ( + + + +); + +Base.play = play; + +export const WithTopPosition = (toast: NotificationToastProps): JSX.Element => ( + + + +); + +WithTopPosition.play = play; + +export const WithTopRightPosition = ( + toast: NotificationToastProps, +): JSX.Element => ( + + + +); + +WithTopRightPosition.play = play; + const variants = ['info', 'success', 'warning', 'danger'] as const; export const Variants = (toast: NotificationToastProps) => ( diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.module.css b/packages/circuit-ui/components/ToastContext/ToastContext.module.css index 534891fc1b..4694fce6f2 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.module.css +++ b/packages/circuit-ui/components/ToastContext/ToastContext.module.css @@ -1,6 +1,5 @@ .base { position: fixed; - bottom: var(--cui-spacings-giga); left: 0; z-index: var(--cui-z-index-toast); display: flex; @@ -21,3 +20,19 @@ .toast { margin-top: var(--cui-spacings-byte); } + +/* Positions */ +.top { + top: var(--cui-spacings-giga); +} + +.bottom { + bottom: var(--cui-spacings-giga); +} + +.top-right { + top: var(--cui-spacings-giga); + right: var(--cui-spacings-giga); + left: inherit; + transform: translateX(0%); +} diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx index 30b24c2182..7a0bb85d7c 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.tsx +++ b/packages/circuit-ui/components/ToastContext/ToastContext.tsx @@ -24,6 +24,7 @@ import { } from 'react'; import { useStack, type StackItem } from '../../hooks/useStack/index.js'; +import { clsx } from '../../styles/clsx.js'; import type { BaseToastProps, ToastComponent } from './types.js'; import classes from './ToastContext.module.css'; @@ -50,10 +51,14 @@ export interface ToastProviderProps { * The ToastProvider should wrap your entire application. */ children: ReactNode; + position?: 'bottom' | 'top' | 'top-right'; + className?: string; } export function ToastProvider({ children, + position = 'bottom', + className, }: ToastProviderProps): JSX.Element { const [toasts, dispatch] = useStack>([]); @@ -109,7 +114,7 @@ export function ToastProvider({ {children}
Date: Wed, 12 Jun 2024 17:09:26 +0200 Subject: [PATCH 02/13] fix: top-right position issues --- .../ToastContext/ToastContext.module.css | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.module.css b/packages/circuit-ui/components/ToastContext/ToastContext.module.css index 4694fce6f2..87eb08b6a6 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.module.css +++ b/packages/circuit-ui/components/ToastContext/ToastContext.module.css @@ -8,6 +8,15 @@ padding: 0 var(--cui-spacings-giga); } +.top, +.top-right { + top: var(--cui-spacings-giga); +} + +.bottom { + bottom: var(--cui-spacings-giga); +} + @media (min-width: 480px) { .base { left: 50%; @@ -15,24 +24,14 @@ padding: 0; transform: translateX(-50%); } + + .top-right { + right: var(--cui-spacings-giga); + left: inherit; + transform: translateX(0%); + } } .toast { margin-top: var(--cui-spacings-byte); } - -/* Positions */ -.top { - top: var(--cui-spacings-giga); -} - -.bottom { - bottom: var(--cui-spacings-giga); -} - -.top-right { - top: var(--cui-spacings-giga); - right: var(--cui-spacings-giga); - left: inherit; - transform: translateX(0%); -} From 5cd444b3c34c244c6db8e4c8650a493f16af3b52 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Wed, 12 Jun 2024 17:12:27 +0200 Subject: [PATCH 03/13] docs: add changeset --- .changeset/clever-islands-hang.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clever-islands-hang.md diff --git a/.changeset/clever-islands-hang.md b/.changeset/clever-islands-hang.md new file mode 100644 index 0000000000..4e222e3930 --- /dev/null +++ b/.changeset/clever-islands-hang.md @@ -0,0 +1,5 @@ +--- +"@sumup/circuit-ui": patch +--- + +feat: add toast positioning prop From 0007fd33519182eff4de9a044b06f1305bbd1a9e Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Wed, 12 Jun 2024 17:14:37 +0200 Subject: [PATCH 04/13] docs: update changeset --- .changeset/clever-islands-hang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/clever-islands-hang.md b/.changeset/clever-islands-hang.md index 4e222e3930..b0b14a58e1 100644 --- a/.changeset/clever-islands-hang.md +++ b/.changeset/clever-islands-hang.md @@ -2,4 +2,4 @@ "@sumup/circuit-ui": patch --- -feat: add toast positioning prop +feat: Update NotificationToast with position and className props From 79c36882b19bd35f40ce9b1216ddcec3f555e8eb Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Wed, 12 Jun 2024 17:43:58 +0200 Subject: [PATCH 05/13] docs: update changeset description --- .changeset/clever-islands-hang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/clever-islands-hang.md b/.changeset/clever-islands-hang.md index b0b14a58e1..f37cf356a9 100644 --- a/.changeset/clever-islands-hang.md +++ b/.changeset/clever-islands-hang.md @@ -2,4 +2,4 @@ "@sumup/circuit-ui": patch --- -feat: Update NotificationToast with position and className props +feat: Update NotificationToast provider with position and className props From 00985c86bd023d21afd1261550470a47fcf165f1 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 18:50:16 +0200 Subject: [PATCH 06/13] docs: update readme text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Connor Bär --- .../components/NotificationToast/NotificationToast.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx index c35247bd25..1ddb1ed11c 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx @@ -61,7 +61,7 @@ export function App({}) { ### Custom positioning -It's possible to change a position of notifications in the by passing `position` prop. Supported values are `bottom` (default), `top` and `top-right`: +Change the position of notifications by passing the `position` prop. Supported values are `bottom` (default), `top` and `top-right`: ```tsx // _app.tsx for Next.js or App.js for CRA From 147a4a74a95066bcf1949c7dae96d4b6bb658c89 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 18:50:56 +0200 Subject: [PATCH 07/13] docs: update changeset description MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Connor Bär --- .changeset/clever-islands-hang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/clever-islands-hang.md b/.changeset/clever-islands-hang.md index f37cf356a9..ca54ca52b4 100644 --- a/.changeset/clever-islands-hang.md +++ b/.changeset/clever-islands-hang.md @@ -2,4 +2,4 @@ "@sumup/circuit-ui": patch --- -feat: Update NotificationToast provider with position and className props +Added new `position` and `className` props to the ToastProvider component. From f472423e149cd9da9eca7d79afd2626e4cf41144 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 18:51:14 +0200 Subject: [PATCH 08/13] docs: update version to minor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Connor Bär --- .changeset/clever-islands-hang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/clever-islands-hang.md b/.changeset/clever-islands-hang.md index ca54ca52b4..baf28a42c1 100644 --- a/.changeset/clever-islands-hang.md +++ b/.changeset/clever-islands-hang.md @@ -1,5 +1,5 @@ --- -"@sumup/circuit-ui": patch +"@sumup/circuit-ui": minor --- Added new `position` and `className` props to the ToastProvider component. From a8b8c3b646615d7f79d94ef7c7acca8471d4333a Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 19:06:53 +0200 Subject: [PATCH 09/13] chore: unify position stories --- .../NotificationToast/NotificationToast.mdx | 12 ++-------- .../NotificationToast.stories.tsx | 24 +++++++++---------- 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx index 1ddb1ed11c..b1f1b915a7 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.mdx @@ -61,17 +61,9 @@ export function App({}) { ### Custom positioning -Change the position of notifications by passing the `position` prop. Supported values are `bottom` (default), `top` and `top-right`: +Change the position of notifications by passing the `position` prop. Supported values are `bottom` (default), `top` and `top-right`: -```tsx -// _app.tsx for Next.js or App.js for CRA -import { ToastProvider } from '@sumup/circuit-ui'; - -export default function App() { - // all notifications will appear at the top of the screen - return {/* Your content goes here... */}; -} -``` + ## Accessibility diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx index bd1528ba24..e099cda54a 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.stories.tsx @@ -30,6 +30,12 @@ import { export default { title: 'Notification/NotificationToast', component: NotificationToast, + argTypes: { + position: { + options: ['top', 'top-right', 'bottom'], + control: { type: 'select' }, + }, + }, }; const TOASTS = [ @@ -91,23 +97,17 @@ export const Base = (toast: NotificationToastProps): JSX.Element => ( Base.play = play; -export const WithTopPosition = (toast: NotificationToastProps): JSX.Element => ( - +export const Position = (toast: NotificationToastProps): JSX.Element => ( + ); -WithTopPosition.play = play; - -export const WithTopRightPosition = ( - toast: NotificationToastProps, -): JSX.Element => ( - - - -); +Position.args = { + position: 'top', +}; -WithTopRightPosition.play = play; +Position.play = play; const variants = ['info', 'success', 'warning', 'danger'] as const; From 1465d686c9b47049095c94bad6d9e2fe520b82f4 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 19:13:43 +0200 Subject: [PATCH 10/13] docs: add props docs --- .../circuit-ui/components/ToastContext/ToastContext.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx index 7a0bb85d7c..ba01c811ca 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.tsx +++ b/packages/circuit-ui/components/ToastContext/ToastContext.tsx @@ -51,7 +51,13 @@ export interface ToastProviderProps { * The ToastProvider should wrap your entire application. */ children: ReactNode; + /** + * Choose the position of all toasts on screen. Default: 'bottom'. + */ position?: 'bottom' | 'top' | 'top-right'; + /** + * The class name to add to the toast wrapper element. + */ className?: string; } From c1bfb2c48137a968dc3595171b9827eeb78f8454 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 19:16:02 +0200 Subject: [PATCH 11/13] docs: extend props docs --- packages/circuit-ui/components/ToastContext/ToastContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx index ba01c811ca..4e5719aac5 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.tsx +++ b/packages/circuit-ui/components/ToastContext/ToastContext.tsx @@ -52,7 +52,7 @@ export interface ToastProviderProps { */ children: ReactNode; /** - * Choose the position of all toasts on screen. Default: 'bottom'. + * Choose the position of all toasts on screen (please consider sticking to default value if possible). Default: 'bottom'. */ position?: 'bottom' | 'top' | 'top-right'; /** From 420600bff32c911489c6dd78b419a2825afa12a1 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 19:22:21 +0200 Subject: [PATCH 12/13] chore: adjust class names --- .../components/ToastContext/ToastContext.module.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.module.css b/packages/circuit-ui/components/ToastContext/ToastContext.module.css index 87eb08b6a6..df5f183bb6 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.module.css +++ b/packages/circuit-ui/components/ToastContext/ToastContext.module.css @@ -19,16 +19,19 @@ @media (min-width: 480px) { .base { - left: 50%; width: auto; padding: 0; + } + + .top, + .bottom { + left: 50%; transform: translateX(-50%); } .top-right { right: var(--cui-spacings-giga); - left: inherit; - transform: translateX(0%); + left: initial; } } From e88777e2088f7f4faed870d277e810129880fd45 Mon Sep 17 00:00:00 2001 From: Dmytro Voronianski Date: Thu, 13 Jun 2024 19:23:56 +0200 Subject: [PATCH 13/13] chore: adjust class names (stick to inherit) --- .../circuit-ui/components/ToastContext/ToastContext.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.module.css b/packages/circuit-ui/components/ToastContext/ToastContext.module.css index df5f183bb6..5d1bad3936 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.module.css +++ b/packages/circuit-ui/components/ToastContext/ToastContext.module.css @@ -31,7 +31,7 @@ .top-right { right: var(--cui-spacings-giga); - left: initial; + left: inherit; } }