fixup! fixup! Feat(web): Introduce Toast component #DS-1112

packages/web/src/scss/components/Toast/_Toast.scss

@@ -1,11 +1,36 @@
 // 1. Spread the `Toast` container over the viewport.
-// 2. On devices with rounded displays (like iPhone X and later), prefer the safe area value over our spacing, if
-//    bigger. The `viewport-fit="cover"` meta must be present in HTML for this to work.
-// 3. Allow scrolling when the messages do not fit the screen.
+// 2. Use grid layout to control horizontal (x) and vertical (y) alignment of the messages.
+//
+//    a) Horizontal alignment is controlled by the `justify-content` property of the grid container. This is further
+//       reinforced by the `align-items` property of the toast queue (6).
+//    b) Vertical alignment is controlled by the `align-self` property of the toast queue itself (6). The reason for
+//       this is that vertical scrolling of the toast container is not possible with `align-content: end` (more on that
+//       below). This is also the reason why the initial scroll position is at the top of the container in both cases.
+//
+//    ⚠️ CAUTION: Vertical scrolling of grid containers works only with `align-content` other than `end`.
+//    While the CSS spec speaks [1] about the interaction of `overflow` and `align-content` properties, there may be
+//    a blind spot in the spec because all major browsers (Firefox, Chrome, Safari) do not allow scrolling for
+//    `align-content: end`.
+//
+//    [1] https://drafts.csswg.org/css-align-3/#overflow-scroll-position
+//
+//    A similar Chromium bug with flex containers is tracked here:
+//
+//    https://issues.chromium.org/issues/41130651
+//
+// 3. Allow scrolling when the messages do not fit the screen. Scrolling is only possible over the toast message boxes
+//    and not over the entire container. This is because the `pointer-events` property of the container is set to `none`
+//    (4) so neither the toast container, nor the toast queue stands in the way of the user's interaction with the page
+//    content beneath it.
+//
+//    (The alternative would be to scroll the toast queue itself, but this would go against (4) by blocking user's
+//    interaction with the underlying content.)
 // 4. Because the `Toast` container is present on the page all the time, we must allow interaction with the page content
-//    beneath it.
-// 5. The toast queue element is in place so we can reverse the visual order of child toast messages when alignment-y is
-//    set to `bottom`.
+//    beneath it. The same applies to the toast queue element (6).
+// 5. On devices with rounded displays (like iPhone X and later), prefer the safe area value over our spacing, if
+//    bigger. The `viewport-fit="cover"` meta must be present in HTML for this to work.
+// 6. The toast queue element is in place so we can reverse the visual order of child toast messages when vertical
+//    alignment is set to `bottom`. Reversing order of all child elements is only possible with flex containers.
 
 @use 'sass:map';
 @use '../../tools/breakpoint';
@@ -17,16 +42,14 @@
 
     position: fixed; // 1.
     inset: 0; // 1.
-    display: grid;
-    grid-auto-flow: row;
-    align-content: var(--toast-alignment-y);
-    justify-content: var(--toast-alignment-x);
+    display: grid; // 2.
+    justify-content: var(--toast-alignment-x); // 2.a
 
-    // 2.
+    // 5.
     padding: max(var(--toast-padding-y), env(safe-area-inset-top))
         max(var(--toast-padding-x), env(safe-area-inset-right)) max(var(--toast-padding-y), env(safe-area-inset-bottom))
         max(var(--toast-padding-x), env(safe-area-inset-left));
-    overflow-y: auto; // 3. TODO
+    overflow-y: auto; // 3.
     pointer-events: none; // 4.
 
     @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
@@ -38,12 +61,13 @@
     }
 }
 
-// 5.
+// 6.
 .Toast__queue {
     display: flex;
     flex-direction: column;
     row-gap: theme.$gap;
-    align-items: var(--toast-alignment-x);
+    align-self: var(--toast-alignment-y); // 2.b
+    align-items: var(--toast-alignment-x); // 2.a
 }
 
 // TODO responsive
@@ -67,7 +91,7 @@
     --toast-alignment-x: end;
 }
 
-// 5.
+// 6.
 .Toast--bottom > .Toast__queue {
     flex-direction: column-reverse;
 }

packages/web/src/scss/components/Toast/index.html

@@ -89,7 +89,7 @@ <h2 class="docs-Heading">Alignment</h2>
 
         <div id="my-other-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible">
           <div class="ToastBar__content">
-            <svg width="24" height="24" aria-hidden="true">
+            <svg width="20" height="20" aria-hidden="true">
               <use xlink:href="/icons/svg/sprite.svg#info" />
             </svg>
             <div class="ToastBar__message">