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

Jump to bottom

Docs: handle deprecated dark variants more precisely #39291

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Docs: handle deprecated dark variants more precisely #39291

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
2 changes: 1 addition & 1 deletion js/tests/visual/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/scrollspy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<nav class="navbar navbar-expand-md bg-dark fixed-top" data-bs-theme="dark">
<a class="navbar-brand" href="#">Scrollspy test</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/carousel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
{{< callout-deprecated-dark-variants "carousel" >}}

{{< example >}}
<div id="carouselExampleDark" class="carousel carousel-dark slide">
<div id="carouselExampleDark" class="carousel slide" data-bs-theme="dark">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
Expand Down
8 changes: 4 additions & 4 deletions site/content/docs/5.3/components/dropdowns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,11 +356,11 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
{{< callout-deprecated-dark-variants "dropdown-menu" >}}

{{< example >}}
<div class="dropdown">
<div class="dropdown" data-bs-theme="dark">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
Expand All @@ -373,7 +373,7 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
And putting it to use in a navbar:

{{< example >}}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
Expand All @@ -385,7 +385,7 @@ And putting it to use in a navbar:
<button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
Expand Down
15 changes: 10 additions & 5 deletions site/content/docs/5.3/components/navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ Here's what you need to know before getting started with the navbar:
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
- Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
- **New in v5.3.0:** `.navbar-dark` has been deprecated.

{{< callout info >}}
{{< partial "callouts/info-prefersreducedmotion.md" >}}
Expand Down Expand Up @@ -661,7 +662,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
<span class="text-body-secondary">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<nav class="navbar bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down Expand Up @@ -738,17 +739,21 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br

When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas.

{{< callout warning >}}
**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
{{< /callout >}}

{{< example >}}
<nav class="navbar navbar-dark bg-dark fixed-top">
<nav class="navbar bg-dark fixed-top" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas dark navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
Expand All @@ -762,7 +767,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/components/offcanvas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,10 +148,10 @@ Change the appearance of offcanvases with utilities to better match them to diff
{{< /callout >}}

{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel" data-bs-theme="dark">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Place offcanvas content here.</p>
Expand Down
8 changes: 6 additions & 2 deletions site/content/docs/5.3/components/toasts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,13 +172,17 @@ Alternatively, you can also add additional controls and components to toasts.

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-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.

{{< callout warning >}}
**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
{{< /callout >}}

{{< example >}}
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
{{< /example >}}
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/album-rtl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h4>تواصل معي</h4>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="navbar bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/album/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h4>Contact</h4>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="navbar bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/carousel-rtl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
---

<header data-bs-theme="dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<nav class="navbar navbar-expand-md fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">شرائح العرض</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
Expand All @@ -27,7 +27,7 @@
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
<button class="btn btn-outline-success" type="submit">بحث</button>
<button class="btn btn-success" type="submit">بحث</button>
</form>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/carousel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
---

<header data-bs-theme="dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<nav class="navbar navbar-expand-md fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
Expand All @@ -26,7 +26,7 @@
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/cheatsheet-rtl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1261,7 +1261,7 @@ <h3>شريط التنقل</h3>
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
<nav class="navbar navbar-expand-lg bg-primary mt-5" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/cheatsheet/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1260,7 +1260,7 @@ <h3>Navbar</h3>
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
<nav class="navbar navbar-expand-lg bg-primary mt-5" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/navbar-bottom/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h1>Bottom Navbar example</h1>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</div>
</main>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<nav class="navbar fixed-bottom navbar-expand-sm bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bottom navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/navbar-fixed/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
- "navbar-fixed.css"
---

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<nav class="navbar navbar-expand-md fixed-top bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
Expand All @@ -25,7 +25,7 @@
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/navbar-static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
- "navbar-static.css"
---

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<nav class="navbar navbar-expand-md bg-dark mb-4" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Top navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
Expand All @@ -25,7 +25,7 @@
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions site/content/docs/5.3/examples/navbars-offcanvas/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
---

<main>
<nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
<nav class="navbar bg-dark" aria-label="Dark offcanvas navbar" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
Expand All @@ -41,7 +41,7 @@ <h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
Expand Down Expand Up @@ -90,7 +90,7 @@ <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Offcanvas</h5>
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large">
<nav class="navbar navbar-expand-lg bg-dark" aria-label="Offcanvas navbar large" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Responsive offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
Expand All @@ -99,7 +99,7 @@ <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Offcanvas</h5>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
Expand All @@ -125,7 +125,7 @@ <h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
</ul>
<form class="d-flex mt-3 mt-lg-0" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
Expand Down
Loading