Skip to content

Commit

Permalink
Feat(web): Introduce stacking of the queue
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamkudrna
adamkudrna committed Feb 28, 2024
1 parent 97461b6 commit c3ade44
Show file tree
Hide file tree
Showing 2 changed files with 226 additions and 40 deletions.
66 changes: 66 additions & 0 deletions packages/web/src/scss/components/Toast/_Toast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,72 @@
align-items: var(--toast-alignment-x, center); // 2.a
}

// Stacking draft start

$_queue-collapse-after: 3;
$_queue-collapsed-visible-limit: 2; // Not to be changed, a different value would require CSS generation.

.Toast__queue:has(.Toast__item) {
row-gap: 0; // Use margin instead of gap to avoid margin accumulation at the start of the queue.
}

.Toast__item {
display: grid;
align-content: var(--toast-alignment-y);
justify-content: var(--toast-alignment-x);
width: 100%;
max-height: 200px; // Whatever larger than the largest toast message. CAUTION, AFFECTS COLLAPSE ANIMATION!
transition: max-height 1.25s cubic-bezier(0.4, 0, 0.2, 1), margin 0.5s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.75s ease-out, opacity 0.75s ease-out, scale 0.5s ease-out;
}

// Put gap between all visible and collapsed items
.Toast__item:nth-last-child(-n + #{$_queue-collapse-after + $_queue-collapsed-visible-limit}):not(:last-child) {
margin-block: var(--toast-item-top-margin, 0) var(--toast-item-bottom-margin, 0);
}

.Toast--top,
.Toast--tablet--top,
.Toast--desktop--top {
--toast-item-bottom-margin: #{theme.$gap};
}

.Toast--bottom,
.Toast--tablet--bottom,
.Toast--desktop--bottom {
--toast-item-top-margin: #{theme.$gap};
}

// Visible items
.Toast__item:nth-last-child(-n + #{$_queue-collapse-after}) {
z-index: 1;
}

// Collapsed items
.Toast__item:nth-last-child(n + #{$_queue-collapse-after + 1}) {
max-height: 0;
}

// Collapsed items: first
.Toast__item:nth-last-child(#{$_queue-collapse-after + $_queue-collapsed-visible-limit - 1}) {
scale: 0.95;
}

// Collapsed items: second
.Toast__item:nth-last-child(#{$_queue-collapse-after + $_queue-collapsed-visible-limit}) {
opacity: 0.5;
scale: 0.9;
}

// Invisible items
.Toast__item:nth-last-child(n + #{$_queue-collapse-after + $_queue-collapsed-visible-limit + 1}) {
visibility: hidden;
opacity: 0;
scale: 0.5;
}

// Stacking draft end

@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
$infix: breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value);

Expand Down
200 changes: 160 additions & 40 deletions packages/web/src/scss/components/Toast/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,55 +74,175 @@ <h2 class="docs-Heading">Alignment</h2>

<div id="toast-example" class="Toast Toast--bottom Toast--center" role="log">
<div class="Toast__queue">
<div class="Toast__item">

<div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#check-plain" />
</svg>
<div class="ToastBar__message">
I was first!
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
</div>
<button
type="button"
onclick="this.parentElement.parentElement.remove()"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>
</div>

<div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#check-plain" />
</svg>
<div class="ToastBar__message">
I was first!
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
<div class="Toast__item">

<div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
I appeared later. This toast has a long message that wraps automatically.
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
</div>
<button
type="button"
onclick="this.parentElement.parentElement.remove()"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-other-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>
</div>
<button
type="button"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>

</div>
<div class="Toast__item">

<div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
I appeared later. This toast has a long message that wraps automatically.
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
</div>
<button
type="button"
onclick="this.parentElement.parentElement.remove()"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-other-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>
</div>

<div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
I appeared later. This toast has a long message that wraps automatically.
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
<div class="Toast__item">

<div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
I appeared later. This toast has a long message that wraps automatically.
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
</div>
<button
type="button"
onclick="this.parentElement.parentElement.remove()"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-other-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>
</div>
<button
type="button"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-other-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>

</div>
<div class="Toast__item">

<div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
I appeared later. This toast has a long message that wraps automatically.
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
</div>
<button
type="button"
onclick="this.parentElement.parentElement.remove()"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-other-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>
</div>

</div>
<div class="Toast__item">

<div id="my-other-dismissible-toast" class="ToastBar ToastBar--warning ToastBar--dismissible">
<div class="ToastBar__content">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
Last one!
I appeared later. This toast has a long message that wraps automatically.
<a href="#" class="link-inverted link-underlined">Action</a>
</div>
</div>
<button
type="button"
onclick="this.parentElement.parentElement.remove()"
class="Button Button--small Button--square Button--inverted"
data-spirit-dismiss="toast"
aria-controls="my-other-dismissible-toast"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>
</div>

</div>
</div>
</div>

Expand Down

0 comments on commit c3ade44

Please sign in to comment.