From: Mark Otto <markd.otto@gmail.com>
Date: Thu, 18 Dec 2025 22:46:26 +0000 (-0800)
Subject: Rename some components to be singular (#41952)
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=02d288876064cf78afe41c915ec63677370cbab6;p=thirdparty%2Fbootstrap.git

Rename some components to be singular (#41952)

* Singular spinner

* Rename some component files to be singular
---

diff --git a/scss/_placeholders.scss b/scss/_placeholder.scss
similarity index 100%
rename from scss/_placeholders.scss
rename to scss/_placeholder.scss
diff --git a/scss/_spinners.scss b/scss/_spinner.scss
similarity index 100%
rename from scss/_spinners.scss
rename to scss/_spinner.scss
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 52fc04d4b1..27ad32e3fb 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -24,10 +24,10 @@
 @forward "navbar";
 @forward "offcanvas";
 @forward "pagination";
-@forward "placeholders";
+@forward "placeholder";
 @forward "popover";
 @forward "progress";
-@forward "spinners";
+@forward "spinner";
 @forward "toasts";
 @forward "tooltip";
 @forward "transitions";
diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss
index e3cc510fc9..e2321bfb7b 100644
--- a/scss/content/_prose.scss
+++ b/scss/content/_prose.scss
@@ -87,7 +87,6 @@
       font-size: 1.75em;
     }
     h3 {
-      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
       font-size: 1.5em;
     }
     h4 {
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index a29e681ba7..4fd8e75f3d 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -35,7 +35,6 @@
     - title: Color modes
     - title: Components
     - title: CSS variables
-    # - title: RTL
     - title: Optimize
 
 - title: Layout
@@ -82,7 +81,7 @@
   icon_color: cyan
   pages:
     - title: Accordion
-    - title: Alerts
+    - title: Alert
     - title: Badge
     - title: Breadcrumb
     - title: Buttons
@@ -92,17 +91,17 @@
     - title: Close button
     - title: Collapse
     - title: Dialog
-    - title: Dropdowns
+    - title: Dropdown
     - title: List group
     - title: Navbar
     - title: Navs & tabs
     - title: Offcanvas
     - title: Pagination
-    - title: Placeholders
+    - title: Placeholder
     - title: Popover
     - title: Progress
     - title: Scrollspy
-    - title: Spinners
+    - title: Spinner
     - title: Toasts
     - title: Tooltip
 
diff --git a/site/src/assets/partials/snippets.js b/site/src/assets/partials/snippets.js
index 3be645a3ba..33488ebda6 100644
--- a/site/src/assets/partials/snippets.js
+++ b/site/src/assets/partials/snippets.js
@@ -80,7 +80,7 @@ export default () => {
   const appendAlert = (message, type) => {
     const wrapper = document.createElement('div')
     wrapper.innerHTML = [
-      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
+      `<div class="alert theme-${type} alert-dismissible" role="alert">`,
       `   <div>${message}</div>`,
       '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
       '</div>'
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alert.mdx
similarity index 91%
rename from site/src/content/docs/components/alerts.mdx
rename to site/src/content/docs/components/alert.mdx
index 4b36492137..316a643f99 100644
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alert.mdx
@@ -1,7 +1,9 @@
 ---
-title: Alerts
+title: Alert
 description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
 toc: true
+aliases:
+  - /docs/[[config:docs_version]]/components/alerts/
 ---
 
 import { getData } from '@libs/data'
@@ -20,8 +22,8 @@ Alerts are available for any length of text, as well as an optional close button
 
 Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
 
-<Example addStackblitzJs code={`<div id="liveAlertPlaceholder"></div>
-<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>`} />
+<Example addStackblitzJs class="d-flex flex-column align-items-start gap-3" code={`<div id="liveAlertPlaceholder"></div>
+<button type="button" class="btn-solid theme-primary flex-grow-0" id="liveAlertBtn">Show live alert</button>`} />
 
 We use the following JavaScript to trigger our live alert demo:
 
@@ -31,7 +33,7 @@ We use the following JavaScript to trigger our live alert demo:
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
-<Example code={getData('theme-colors').map((themeColor) => `<div class="alert alert-${themeColor.name}" role="alert">
+<Example code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
     A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
   </div>`)} />
 
@@ -39,7 +41,7 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
 
 Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
-<Example code={`<div class="alert alert-success" role="alert">
+<Example code={`<div class="alert theme-success" role="alert">
     <h4 class="alert-heading">Well done!</h4>
     <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
     <hr>
@@ -50,7 +52,7 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d
 
 Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Bootstrap Icons]([[config:icons]]) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
 
-<Example code={`<div class="alert alert-primary d-flex align-items-center" role="alert">
+<Example code={`<div class="alert theme-primary d-flex align-items-center" role="alert">
     <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
       <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
     </svg>
@@ -73,25 +75,25 @@ Need more than one icon for your alerts? Consider using more Bootstrap Icons and
     </symbol>
   </svg>
 
-  <div class="alert alert-primary d-flex align-items-center" role="alert">
+  <div class="alert theme-primary d-flex align-items-center" role="alert">
     <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use href="#info-fill"/></svg>
     <div>
       An example alert with an icon
     </div>
   </div>
-  <div class="alert alert-success d-flex align-items-center" role="alert">
+  <div class="alert theme-success d-flex align-items-center" role="alert">
     <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use href="#check-circle-fill"/></svg>
     <div>
       An example success alert with an icon
     </div>
   </div>
-  <div class="alert alert-warning d-flex align-items-center" role="alert">
+  <div class="alert theme-warning d-flex align-items-center" role="alert">
     <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use href="#exclamation-triangle-fill"/></svg>
     <div>
       An example warning alert with an icon
     </div>
   </div>
-  <div class="alert alert-danger d-flex align-items-center" role="alert">
+  <div class="alert theme-danger d-flex align-items-center" role="alert">
     <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use href="#exclamation-triangle-fill"/></svg>
     <div>
       An example danger alert with an icon
@@ -109,7 +111,7 @@ Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
 
 You can see this in action with a live demo:
 
-<Example code={`<div class="alert alert-warning alert-dismissible fade show" role="alert">
+<Example code={`<div class="alert theme-warning alert-dismissible fade show" role="alert">
     <strong>Holy guacamole!</strong> You should check in on some of those fields below.
     <CloseButton dismiss="alert" />
   </div>`} />
diff --git a/site/src/content/docs/components/dropdowns.mdx b/site/src/content/docs/components/dropdown.mdx
similarity index 99%
rename from site/src/content/docs/components/dropdowns.mdx
rename to site/src/content/docs/components/dropdown.mdx
index 80ccff4968..e67f5bdf79 100644
--- a/site/src/content/docs/components/dropdowns.mdx
+++ b/site/src/content/docs/components/dropdown.mdx
@@ -2,6 +2,8 @@
 title: Dropdown
 description: Toggle contextual menus and custom overlays for lists of links, forms, and more with the Bootstrap dropdown plugin. Powered by [Floating UI](https://floating-ui.com/).
 toc: true
+aliases:
+  - /docs/[[config:docs_version]]/components/dropdowns/
 ---
 
 ## Overview
diff --git a/site/src/content/docs/components/placeholders.mdx b/site/src/content/docs/components/placeholder.mdx
similarity index 97%
rename from site/src/content/docs/components/placeholders.mdx
rename to site/src/content/docs/components/placeholder.mdx
index b313d9a8d0..99984200c7 100644
--- a/site/src/content/docs/components/placeholders.mdx
+++ b/site/src/content/docs/components/placeholder.mdx
@@ -1,7 +1,9 @@
 ---
-title: Placeholders
+title: Placeholder
 description: Use loading placeholders (skeleton loaders) for your components or pages to indicate something may still be loading.
 toc: true
+aliases:
+  - /docs/[[config:docs_version]]/components/placeholders/
 ---
 
 import { getData } from '@libs/data'
@@ -128,4 +130,4 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 ### Sass variables
 
-<ScssDocs name="placeholders" file="scss/_placeholders.scss" />
+<ScssDocs name="placeholders" file="scss/_placeholder.scss" />
diff --git a/site/src/content/docs/components/spinners.mdx b/site/src/content/docs/components/spinner.mdx
similarity index 92%
rename from site/src/content/docs/components/spinners.mdx
rename to site/src/content/docs/components/spinner.mdx
index 106e550b20..c3522c2f6b 100644
--- a/site/src/content/docs/components/spinners.mdx
+++ b/site/src/content/docs/components/spinner.mdx
@@ -2,6 +2,8 @@
 title: Spinners
 description: Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
 toc: true
+aliases:
+  - /docs/[[config:docs_version]]/components/spinners/
 ---
 
 import { getData } from '@libs/data'
@@ -143,27 +145,27 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 Border spinner variables:
 
-<ScssDocs name="spinner-border-css-vars" file="scss/_spinners.scss" />
+<ScssDocs name="spinner-border-css-vars" file="scss/_spinner.scss" />
 
 Growing spinner variables:
 
-<ScssDocs name="spinner-grow-css-vars" file="scss/_spinners.scss" />
+<ScssDocs name="spinner-grow-css-vars" file="scss/_spinner.scss" />
 
 For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the `.spinner-border-sm` class does the following:
 
-<ScssDocs name="spinner-border-sm-css-vars" file="scss/_spinners.scss" />
+<ScssDocs name="spinner-border-sm-css-vars" file="scss/_spinner.scss" />
 
 ### Sass variables
 
-<ScssDocs name="spinner-variables" file="scss/_spinners.scss" />
+<ScssDocs name="spinner-variables" file="scss/_spinner.scss" />
 
 ### Keyframes
 
-Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`.
+Used for creating the CSS animations for our spinners. Included in `scss/_spinner.scss`.
 
-<ScssDocs name="spinner-border-keyframes" file="scss/_spinners.scss" />
+<ScssDocs name="spinner-border-keyframes" file="scss/_spinner.scss" />
 
-<ScssDocs name="spinner-grow-keyframes" file="scss/_spinners.scss" />
+<ScssDocs name="spinner-grow-keyframes" file="scss/_spinner.scss" />
 
 [color]: [[docsref:/utilities/colors]]
 [flex]: [[docsref:/utilities/flex]]