Merge branch 'main' into dependabot/npm_and_yarn/adobe/css-tools-4.3.2

e2e/toasts.e2e.ts

@@ -40,6 +40,9 @@ test("Toast warn", async ({ page }) =>
 test("Toast message", async ({ page }) =>
   testToast({ page, toast: "toast-message" }));
 
+test("Toast multiline message", async ({ page }) =>
+  testToast({ page, toast: "toast-multiline" }));
+
 test("Should close toast", async ({ page }) => {
   await page.goto(testUrl);
 

src/docs/components/DocsIconMenu.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { DEFAULT_ICON_SIZE } from "$lib/constants/constants";
+  import { menuCollapsed } from "$lib";
+  import { fade } from "svelte/transition";
+
+  export let text: string;
+</script>
+
+{#if $menuCollapsed}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={DEFAULT_ICON_SIZE}
+    viewBox="0 0 24 24"
+    width={DEFAULT_ICON_SIZE}
+    fill="currentColor"
+    in:fade><text x="4" y="20">{text}</text></svg
+  >
+{/if}
+
+<style lang="scss">
+  text {
+    font-size: var(--font-size-h3);
+    font-weight: bold;
+  }
+</style>

src/docs/components/DocsMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import MenuItem from "$lib/components/MenuItem.svelte";
-  import IconLaunchpad from "$lib/icons/IconLaunchpad.svelte";
+  import DocsIconMenu from "$docs/components/DocsIconMenu.svelte";
 
   let pathname: string;
   $: ({
@@ -10,38 +10,38 @@
 </script>
 
 <MenuItem href="/" selected={pathname === "/"} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="H" slot="icon" />
   Home</MenuItem
 >
 <MenuItem href="/start" selected={pathname === "/start"} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="G" slot="icon" />
   Getting Started
 </MenuItem>
 <MenuItem
   href="/components"
   selected={pathname.startsWith("/components")}
   on:click
 >
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="C" slot="icon" />
   Components
 </MenuItem>
 <MenuItem
   href="/utility-classes"
   selected={pathname.startsWith("/utility-classes")}
   on:click
 >
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="U" slot="icon" />
   Utility Classes
 </MenuItem>
 <MenuItem href="/styling" selected={pathname.startsWith("/styling")} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="S" slot="icon" />
   Styling
 </MenuItem>
 <MenuItem href="/icons" selected={pathname.startsWith("/icons")} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="I" slot="icon" />
   Icons
 </MenuItem>
 <MenuItem href="/resources" selected={pathname === "/resources"} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="R" slot="icon" />
   Resources
 </MenuItem>

src/lib/components/Toast.svelte

@@ -160,9 +160,11 @@
       word-break: break-word;
 
       &.scroll {
-        // (>=3 lines x 1rem) + top/bottom paddings
-        max-height: calc(8.5 * var(--padding));
         overflow-y: auto;
+        // >=3 lines x font-size x (line-height-normal=1.2 + extra-space=0.1 (needs for FF))
+        max-height: calc(var(--font-size-standard) * 3 * 1.3);
+        // Workaround to get rid of the redundant scrollbar (even when there is enough space).
+        line-height: normal;
       }
 
       &.truncate {
@@ -184,7 +186,9 @@
 
     .title {
       display: block;
-      @include fonts.h4(true);
+      @include fonts.standard(true);
+      // Workaround to get rid of the redundant scrollbar (even when there is enough space).
+      line-height: normal;
     }
 
     button.close {

src/lib/icons/IconDown.svelte

@@ -10,6 +10,7 @@
   viewBox="0 0 20 20"
   fill="currentColor"
   xmlns="http://www.w3.org/2000/svg"
+  data-tid="icon-down"
 >
   <path
     fill-rule="evenodd"

src/lib/icons/IconErrorOutline.svelte

@@ -15,6 +15,7 @@
   stroke-width="1.5"
   stroke-linecap="round"
   stroke-linejoin="round"
+  data-tid="icon-error-outline"
 >
   <path
     d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2Z"

src/lib/icons/IconReimbursed.svelte

@@ -14,6 +14,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
   xmlns="http://www.w3.org/2000/svg"
+  data-tid="icon-reimbursed"
 >
   <path
     d="M16.9793 11.1559V9.9918C16.9793 6.13516 13.8449 3.00782 9.9793 3.00782C8.9277 3.00652 7.88936 3.24244 6.94157 3.69801C5.99377 4.15358 5.16094 4.81706 4.50508 5.63907M3 8.84219V10.0063C3 13.8672 6.13281 16.9922 10 16.9922C11.0486 16.9907 12.0836 16.7552 13.0297 16.303C13.9758 15.8508 14.809 15.1932 15.4688 14.3781"

src/lib/icons/IconUp.svelte

@@ -10,6 +10,7 @@
   viewBox="0 0 20 20"
   fill="currentColor"
   xmlns="http://www.w3.org/2000/svg"
+  data-tid="icon-up"
 >
   <path
     fill-rule="evenodd"

src/lib/styles/global/utility-classes.scss

@@ -46,6 +46,13 @@
   border-radius: var(--border-radius);
 }
 
+.content-cell-island__card {
+  @extend .content-cell-island;
+
+  background: var(--island-card-background);
+  color: var(--description-color);
+}
+
 // Spacing
 
 .no-margin {

src/routes/(page)/utility-classes/cells/+page.md

@@ -41,11 +41,22 @@ Some pre-defined utilities to set spaces for grid's cells.
     </div>
 
     <div class="content-b content-cell-island">
+        <code>class="content-cell-island"</code>
         <h2 class="content-cell-title">Lorem ipsum</h2>
 
         <div class="content-cell-details">
             <DocsLoremIpsum length={2} />
         </div>
+
+        <div class="content-cell-details">
+            <DocsLoremIpsum length={1} />
+
+            <div class="content-cell-island__card">
+                <code>class="content-cell-island__card"</code>
+                <DocsLoremIpsum length={1} />
+            </div>
+
+        </div>
     </div>
 
 </div>

src/routes/(split)/components/toasts/+page.md

@@ -49,6 +49,19 @@
         overflow: "truncate",
         icon: IconMeter,
         theme: "inverted",
+    });    
+
+    const multiline = () => toastsStore.show({
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        level: "info",
+        duration: 3000
+    });
+
+    const title = () => toastsStore.show({
+        title: "A title",
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        level: "info",
+        duration: 3000
     });
 </script>
 
@@ -115,6 +128,10 @@ A toast message can be created with following properties.
 
     <button class="primary small" on:click={duration}>Info and auto fade after 3s</button>
 
+    <button class="primary small" on:click={multiline} data-tid="toast-multiline">Multi-line message</button>
+
+    <button class="primary small" on:click={title}>With a title</button>
+
 </div>
 
 <p>Top end toasts:</p>