Fix some Alert usage by replacing `.alert-{severity}` by `.theme-{severity}` (#42209)

diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index c5b09b170ca7cf133a2b4d61bd200b5565368580..beaf022c8f5639d066d6464b38a6f96cd6f0a3f4 100644 (file)
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -10,12 +10,12 @@
     <div class="container">
       <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
-      <div class="alert alert-warning alert-dismissible fade show" role="alert">
+      <div class="alert theme-warning alert-dismissible fade show" role="alert">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <div class="alert theme-danger alert-dismissible fade show" role="alert">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
@@ -26,7 +26,7 @@
         </p>
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <div class="alert theme-danger alert-dismissible fade show" role="alert">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
@@ -37,7 +37,7 @@
         </p>
       </div>
 
-      <div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
+      <div class="alert theme-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         This alert will take 5 seconds to fade out.
       </div>

diff --git a/js/tests/visual/dropdown-submenu.html b/js/tests/visual/dropdown-submenu.html
index 5212ba1e11fe0801d802ace5ec361c05cb21712a..b9ddcee627a28fe65f49c56595e3385b75d4ee68 100644 (file)
--- a/js/tests/visual/dropdown-submenu.html
+++ b/js/tests/visual/dropdown-submenu.html
@@ -46,7 +46,7 @@
     <div class="container py-4">
       <h1 class="mb-4">Dropdown Submenus <small class="text-body-secondary">Bootstrap Visual Test</small></h1>
 
-      <div class="alert alert-info">
+      <div class="alert theme-info">
         <strong>Keyboard Navigation:</strong>
         <span class="keyboard-hint">↓</span> <span class="keyboard-hint">↑</span> navigate items,
         <span class="keyboard-hint">→</span> enter submenu,

diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 824e2c8992db5266e563d1b6dd5dc9f269112ee4..a36aeac9bb6eca97d1fef80dd5f7c704ac2d7cab 100644 (file)
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -651,18 +651,20 @@ export const body_class = 'bg-body-tertiary'
 
       <div>
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
-        <div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
+        <div class="alert theme-${themeColor.name} alert-dismissible fade show mb-3" role="alert">
           A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
         `)} />
 
         <Example showMarkup={false} code={`
-        <div class="alert alert-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>
-          <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+        <div class="alert theme-success" role="alert">
+          <vstack>
+            <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>
+            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+          </vstack>
         </div>
         `} />
       </div>

diff --git a/site/src/content/docs/components/offcanvas.mdx b/site/src/content/docs/components/offcanvas.mdx
index e0ea092223e8de173a0a9bfa3581197020deef87..6022ef6edf18b4b73a5e1adb874ef88778130d1c 100644 (file)
--- a/site/src/content/docs/components/offcanvas.mdx
+++ b/site/src/content/docs/components/offcanvas.mdx
@@ -151,7 +151,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo
 
 <Example code={`<button class="btn-solid theme-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
 
-  <div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
+  <div class="alert theme-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
 
   <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
     <div class="offcanvas-header">