From e9e7df17a62bda3150ae83a0e375b11db149e095 Mon Sep 17 00:00:00 2001 From: Jared White Date: Wed, 10 Jan 2024 13:49:14 -0800 Subject: [PATCH] fix: improvements to Toast sizes and spacing (#71) --- src/blocks/Toast.scss | 8 ++++---- src/blocks/__stories__/Toast.docs.mdx | 12 ++++++------ src/blocks/__stories__/Toast.stories.tsx | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/blocks/Toast.scss b/src/blocks/Toast.scss index 0361a79..7600a24 100644 --- a/src/blocks/Toast.scss +++ b/src/blocks/Toast.scss @@ -1,8 +1,8 @@ #seeds-toast-stack { --toast-stack-gap: var(--seeds-s4); - --toast-stack-inset-top: var(--seeds-s3); - --toast-stack-inset-right: var(--seeds-s3); - --toast-stack-max-width: var(--seeds-width-sm); + --toast-stack-inset-top: var(--seeds-s4); + --toast-stack-inset-right: var(--seeds-s4); + --toast-stack-width: auto; position: fixed; z-index: var(--seeds-z-index-overlay); @@ -11,7 +11,7 @@ gap: var(--toast-stack-gap); top: var(--toast-stack-inset-top); right: var(--toast-stack-inset-right); - width: var(--toast-stack-max-width); + width: var(--toast-stack-width); max-width: calc(100% - var(--toast-stack-inset-right) * 2); } diff --git a/src/blocks/__stories__/Toast.docs.mdx b/src/blocks/__stories__/Toast.docs.mdx index 67d1faf..eb3e8e1 100644 --- a/src/blocks/__stories__/Toast.docs.mdx +++ b/src/blocks/__stories__/Toast.docs.mdx @@ -24,9 +24,9 @@ import Toast from "../Toast" In addition, there are a set of variables you can customize via `#toast-stack` which affects the fixed container within which toasts are rendered: -| Name | Description | Default | -| --------------------------- | -------------------------------- | ------------------ | -| `--toast-stack-gap` | Spacing between toasts | `--seeds-s4` | -| `--toast-stack-inset-top` | Window top edge -> stack space | `--seeds-s3` | -| `--toast-stack-inset-right` | Window right edge -> stack space | `--seeds-s3` | -| `--toast-stack-max-width` | Size | `--seeds-width-sm` | +| Name | Description | Default | +| --------------------------- | -------------------------------- | ------------ | +| `--toast-stack-gap` | Spacing between toasts | `--seeds-s4` | +| `--toast-stack-inset-top` | Window top edge -> stack space | `--seeds-s4` | +| `--toast-stack-inset-right` | Window right edge -> stack space | `--seeds-s4` | +| `--toast-stack-width` | Size | `auto` | diff --git a/src/blocks/__stories__/Toast.stories.tsx b/src/blocks/__stories__/Toast.stories.tsx index a02f508..cba574d 100644 --- a/src/blocks/__stories__/Toast.stories.tsx +++ b/src/blocks/__stories__/Toast.stories.tsx @@ -61,7 +61,7 @@ export const showToasts = () => { )} {warning && ( - Warn message! + Warn message! (And a long bit of text to see what happens) )}