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 52fc04d4b1793e3aa68bfd951cad4d5d4552df17..27ad32e3fbb2d13bd368017c4ab7d9512929d8b3 100644 (file)
--- 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 e3cc510fc909b1c5734e8cb216e3b072081e8b57..e2321bfb7b3c336abe0b3ed4f325bafd3957c87e 100644 (file)
--- 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 a29e681ba76c203ac1b60671446bb3799a48fe4c..4fd8e75f3dd972cc54e6596d1f373b8367c0bf3e 100644 (file)
--- 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 3be645a3ba27ed345b319ffe152837e6635fb606..33488ebda6b13da0565f65f4e808a85e12b4ec09 100644 (file)
--- 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 4b3649213770a593c5e19b9b9e2ba2a75c677138..316a643f99e5003107bf52e5c1bf55527be223f7 100644 (file)
--- 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 80ccff49686f5fadbbb349c8b9cb3448fc5a2510..e67f5bdf79e450a5732afa5a18d1024cca4b45cb 100644 (file)
--- 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 b313d9a8d020a3c792e366b7733f437175726c19..99984200c751e4a7b62baf3ea49c74a7394f75ea 100644 (file)
--- 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 106e550b20750d4ad3e13262d48cb73c8c0e8caa..c3522c2f6b6de24143451d11957c334c8283b775 100644 (file)
--- 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]]