Skip to content

Commit

Permalink
Dark mode: Toasts (#2380)
Browse files Browse the repository at this point in the history 
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
  • Loading branch information
@louismaximepiton @julien-deramond
louismaximepiton and julien-deramond authored Dec 19, 2023
1 parent ca86257 commit 87f750a
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 3 deletions.
13 changes: 10 additions & 3 deletions site/content/docs/5.3/components/toasts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ We use the following JavaScript to trigger our live toast demo:

Toasts are slightly translucent to blend in with what's below them.

{{< example class="bg-dark" stackblitz_add_js="true" >}}
{{< example class="bg-secondary" stackblitz_add_js="true" >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#ff7900" class="me-2" text="false" title="false" >}}
Expand Down Expand Up @@ -172,10 +172,16 @@ Alternatively, you can also add additional controls and components to toasts.

### Color schemes

Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-secondary` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.
{{< callout-deprecated-dark-variants "toast" >}}

<details>
<summary>See a dark color scheme example</summary>
<br>

Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-dark` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.

{{< example stackblitz_add_js="true" >}}
<div class="toast align-items-center text-bg-secondary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
<div class="d-flex">
<div class="toast-body my-auto">
Hello, world! This is a toast message.
Expand All @@ -184,6 +190,7 @@ Building on the above example, you can create different toast color schemes with
</div>
</div>
{{< /example >}}
</details>

## Placement

Expand Down
87 changes: 87 additions & 0 deletions site/content/docs/5.3/dark-mode.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5800,6 +5800,93 @@ sitemap_exclude: true
</div>
</div>

### Toasts

<h4 class="mt-3">No theme</h4>

<div class="bd-example border p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
</svg>
<strong class="me-auto">Boosted</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="bd-example border p-3 bg-body" data-bs-theme="dark">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
</svg>
<strong class="me-auto">Boosted</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="bd-example border p-3 bg-body" data-bs-theme="light">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
</svg>
<strong class="me-auto">Boosted</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="bd-example border p-3" style="background-color: #282d55;">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
</svg>
<strong class="me-auto">Boosted</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="bd-example border p-3" style="background-color: #b5e8f7">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="light">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
</svg>
<strong class="me-auto">Boosted</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>

### Tooltips

<h4 class="mt-3">No theme</h4>
Expand Down

0 comments on commit 87f750a

Please sign in to comment.