Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toasts: Change showing timings and classes to keep toast display:none by default #33610

Merged
merged 1 commit into from
Jul 22, 2021
Merged

Toasts: Change showing timings and classes to keep toast display:none by default #33610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions js/src/toast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`

const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_HIDE = 'hide'
const CLASS_NAME_HIDE = 'hide' // @deprecated - kept here only for backwards compatibility
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_SHOWING = 'showing'

Expand Down Expand Up @@ -101,15 +101,14 @@ class Toast extends BaseComponent {

const complete = () => {
this._element.classList.remove(CLASS_NAME_SHOWING)
this._element.classList.add(CLASS_NAME_SHOW)

EventHandler.trigger(this._element, EVENT_SHOWN)

this._maybeScheduleHide()
}

this._element.classList.remove(CLASS_NAME_HIDE)
this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated
reflow(this._element)
this._element.classList.add(CLASS_NAME_SHOW)
this._element.classList.add(CLASS_NAME_SHOWING)

this._queueCallback(complete, this._element, this._config.animation)
Expand All @@ -127,11 +126,13 @@ class Toast extends BaseComponent {
}

const complete = () => {
this._element.classList.add(CLASS_NAME_HIDE)
this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
this._element.classList.remove(CLASS_NAME_SHOWING)
this._element.classList.remove(CLASS_NAME_SHOW)
EventHandler.trigger(this._element, EVENT_HIDDEN)
}

this._element.classList.remove(CLASS_NAME_SHOW)
this._element.classList.add(CLASS_NAME_SHOWING)
this._queueCallback(complete, this._element, this._config.animation)
}

Expand Down
4 changes: 2 additions & 2 deletions scss/_toasts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
box-shadow: $toast-box-shadow;
@include border-radius($toast-border-radius);

&:not(.showing):not(.show) {
&.showing {
opacity: 0;
}

&.hide {
&:not(.show) {
display: none;
}
}
Expand Down
10 changes: 7 additions & 3 deletions site/content/docs/5.0/components/toasts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi
</div>
{{< /example >}}

{{< callout warning >}}
Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
{{< /callout >}}

### Live example

Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with `.hide`.
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
Expand All @@ -67,7 +71,7 @@ Click the button below to show a toast (positioned with our utilities in the low
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
Expand Down