fix: improvements to Toast sizes and spacing (#71)

bloom-housing · Jan 10, 2024 · e9e7df1 · e9e7df1
1 parent 3dc18f0
commit e9e7df1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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
@@ -61,7 +61,7 @@ export const showToasts = () => {
       )}
       {warning && (
         <Toast variant="warn" hideTimeout={5000}>
-          Warn message!
+          Warn message! (And a long bit of text to see what happens)
         </Toast>
       )}
     </>