Skip to content

v6: docs - Update utility class names in docs and examples #42418

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

Open
coliff wants to merge 1 commit into
base: v6-dev
Choose a base branch
from
Open

v6: docs - Update utility class names in docs and examples #42418

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
4 changes: 2 additions & 2 deletions site/src/assets/examples/blog/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<header class="border-bottom lh-1 py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="link-secondary" href="#">Subscribe</a>
<a class="theme-secondary" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">
<a class="theme-secondary" href="#" aria-label="Search">
<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" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
</a>
<a class="btn-outline theme-secondary btn-sm" href="#">Sign up</a>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/dashboard/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const extra_js = [

<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 fg-2 text-uppercase">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<a class="theme-secondary" href="#" aria-label="Add a new report">
<svg class="bi" aria-hidden="true"><use href="#plus-circle"/></svg>
</a>
</h6>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/drawer-navbar/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge text-bg-light rounded-pill align-text-bottom">27</span>
<span class="badge theme-secondary rounded-pill align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>
Expand Down
4 changes: 2 additions & 2 deletions site/src/assets/examples/headers/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const extra_css = ['headers.css']
</div>

<ul class="nav col-12 md:col-auto mb-2 justify-content-center md:mb-0">
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 theme-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2">Features</a></li>
<li><a href="#" class="nav-link px-2">Pricing</a></li>
<li><a href="#" class="nav-link px-2">FAQs</a></li>
Expand Down Expand Up @@ -125,7 +125,7 @@ export const extra_css = ['headers.css']
</a>

<ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
<li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
<li><a href="#" class="nav-link px-2 theme-secondary">Overview</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/navbar-fixed/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const extra_css = ['navbar-fixed.css']
<nav class="navbar md:navbar-expand navbar-dark fixed-top bg-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">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
Expand Down
6 changes: 3 additions & 3 deletions site/src/assets/examples/navbars-drawer/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const extra_css = ['navbars-drawer.css']
<nav class="navbar navbar-dark bg-dark" aria-label="Dark drawer navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark drawer navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<dialog class="drawer drawer-end text-bg-dark" tabindex="-1" id="drawerNavbarDark" aria-labelledby="drawerNavbarDarkLabel">
Expand Down Expand Up @@ -49,7 +49,7 @@ export const extra_css = ['navbars-drawer.css']
<nav class="navbar bg-body-tertiary" aria-label="Light drawer navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">Light drawer navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarLight" aria-controls="drawerNavbarLight" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarLight" aria-controls="drawerNavbarLight" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="drawerNavbarLight" aria-labelledby="drawerNavbarLightLabel">
Expand Down Expand Up @@ -89,7 +89,7 @@ export const extra_css = ['navbars-drawer.css']
<nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Drawer navbar large">
<div class="container-fluid">
<a class="navbar-brand" href="#">Responsive drawer navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" aria-label="Toggle navigation">
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
</button>
<dialog class="drawer drawer-end text-bg-dark" tabindex="-1" id="drawerNavbar2" aria-labelledby="drawerNavbar2Label">
Expand Down
28 changes: 14 additions & 14 deletions site/src/assets/examples/pricing/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,30 +155,30 @@ export const extra_css = ['pricing.css']
<div class="col-6 md:col">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Cool stuff</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Random feature</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Team feature</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Stuff for developers</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Another one</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 md:col">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Resource</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Resource name</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Another resource</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 md:col">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Team</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Locations</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Privacy</a></li>
<li class="mb-1"><a class="theme-secondary text-decoration-none" href="#">Terms</a></li>
</ul>
</div>
</div>
Expand Down
36 changes: 18 additions & 18 deletions site/src/assets/examples/product/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,39 +148,39 @@ export const extra_css = ['product.css']
<div class="col-6 md:col">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Cool stuff</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Random feature</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Team feature</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Stuff for developers</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Another one</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 md:col">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Resource name</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Resource</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Another resource</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 md:col">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary text-decoration-none" href="#">Business</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Education</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Government</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Business</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Education</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Government</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Gaming</a></li>
</ul>
</div>
<div class="col-6 md:col">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
<li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Team</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Locations</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Privacy</a></li>
<li><a class="theme-secondary text-decoration-none" href="#">Terms</a></li>
</ul>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/home/MastHead.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
<p class="fg-2 mb-0">
Currently <strong>v{getConfig().current_version}</strong>
<span class="px-1">&middot;</span>
<a href={getVersionedDocsPath('getting-started/install')} class="link-secondary">Download</a>
<a href={getVersionedDocsPath('getting-started/install')} class="theme-secondary">Download</a>
<span class="px-1">&middot;</span>
<a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
<a href="/docs/versions/" class="theme-secondary text-nowrap">All releases</a>
</p>
<Ads />
</div>
Expand Down
20 changes: 10 additions & 10 deletions site/src/content/docs/components/navbar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ Place various form controls and components within a navbar:
<div class="container-fluid">
<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-outline theme-success" type="submit">Search</button>
</form>
</div>
</nav>`} />
Expand All @@ -258,7 +258,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
<a class="navbar-brand">Navbar</a>
<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-outline theme-success" type="submit">Search</button>
</form>
</div>
</nav>`} />
Expand All @@ -278,8 +278,8 @@ Various buttons are supported as part of these navbar forms, too. This is also a

<Example code={`<nav class="navbar bg-1 fg-2">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
<button class="btn-outline theme-success me-2" type="button">Main button</button>
<button class="btn-outline theme-secondary btn-sm" type="button">Smaller button</button>
</form>
</nav>`} />

Expand Down Expand Up @@ -433,7 +433,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
</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 theme-secondary" type="submit">Search</button>
<button class="btn-outline theme-secondary" type="submit">Search</button>
</form>
</div>
</dialog>
Expand Down Expand Up @@ -468,7 +468,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" data-bs-theme="light" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-solid theme-inverse" type="submit">Search</button>
<button class="btn-solid theme-inverse" type="submit">Search</button>
</form>
</div>
</dialog>
Expand Down Expand Up @@ -503,7 +503,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
</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-primary" type="submit">Search</button>
<button class="btn-outline theme-primary" type="submit">Search</button>
</form>
</div>
</dialog>
Expand Down Expand Up @@ -645,7 +645,7 @@ With no `.navbar-brand` shown (hidden inside the drawer):
</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-outline theme-success" type="submit">Search</button>
</form>
</div>
</dialog>
Expand Down Expand Up @@ -673,7 +673,7 @@ With a brand name shown on the left and toggler on the right:
</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-outline theme-success" type="submit">Search</button>
</form>
</div>
</dialog>
Expand Down Expand Up @@ -701,7 +701,7 @@ With a toggler on the left and brand name on the right:
</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-outline theme-success" type="submit">Search</button>
</form>
</div>
</dialog>
Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/components/spinner.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex

#### Floats

<Example code={`<div class="clearfix">
<Example code={`<div class="d-flow-root">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/content/reboot.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are

<Example code={`<hr>

<div class="text-success">
<div class="fg-success">
<hr>
</div>

Expand Down
Loading