Wrap alert text content in `<p>` to fix flex gap issue and improve semantics (#42175)

* Wrap alert text content in `<p>` to fix flex gap issue and improve semantics

* bump

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 112e6092100b5e48cefb5349ce0e4d62c2e2559d..4475aa0d68d469ea2738eac2c7671af37e453dfa 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -22,7 +22,7 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "14.0 kB"
+      "maxSize": "14.25 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "39.5 kB"
+      "maxSize": "40.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index beaf022c8f5639d066d6464b38a6f96cd6f0a3f4..2ccf43e4106a81f2e1e292722616e93209e88394 100644 (file)
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -12,7 +12,7 @@
 
       <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.
+        <p><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
       </div>
 
       <div class="alert theme-danger alert-dismissible fade show" role="alert">
@@ -39,7 +39,7 @@
 
       <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.
+        <p>This alert will take 5 seconds to fade out.</p>
       </div>
     </div>
 

diff --git a/scss/_alert.scss b/scss/_alert.scss
index ee751c2db86eff79839b011b469dd158be86946d..90723a4d7e90fc6c0ff2c932fd1d893e8c9f7de1 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -38,6 +38,10 @@ $alert-tokens: defaults(
     @include border-radius(var(--alert-border-radius));
   }
 
+  .alert > p {
+    margin-bottom: 0;
+  }
+
   .alert-heading {
     // Specified to prevent conflicts of changing $headings-color
     color: inherit;

diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 19387f1dc7cbe22fb43a7df20066267f6209b852..f39dc911f45485795d7f2b1647f104fff931a484 100644 (file)
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -652,7 +652,7 @@ export const body_class = 'bg-body-tertiary'
       <div>
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
         <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.
+          <p>A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</p>
           <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
         `)} />

diff --git a/site/src/assets/partials/snippets.js b/site/src/assets/partials/snippets.js
index 9d59e762ae843134b4d7db06e45c2b54200f5d23..112e56ead6a45cce9f814d2667532fe06a27eba2 100644 (file)
--- a/site/src/assets/partials/snippets.js
+++ b/site/src/assets/partials/snippets.js
@@ -86,7 +86,7 @@ export default () => {
     const wrapper = document.createElement('div')
     wrapper.innerHTML = [
       `<div class="alert theme-${type} alert-dismissible" role="alert">`,
-      `   <div>${message}</div>`,
+      `   <p>${message}</p>`,
       '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
       '</div>'
     ].join('')

diff --git a/site/src/content/docs/components/alert.mdx b/site/src/content/docs/components/alert.mdx
index 7657979b56390dc319f8061da6b9df0138ddf633..a3c5b682d69f397d5576c3194f53e624ff9ec525 100644 (file)
--- a/site/src/content/docs/components/alert.mdx
+++ b/site/src/content/docs/components/alert.mdx
@@ -13,7 +13,7 @@ import { getData } from '@libs/data'
 Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be used with theme colors, but have neutral fallback colors for when no theme color is applied. For inline dismissal, use the [alerts JavaScript plugin](#dismiss).
 
 <Example code={`<div class="alert" role="alert">
-    A simple alert—check it out!
+    <p>A simple alert—check it out!</p>
   </div>`} />
 
 ## Variants
@@ -21,7 +21,7 @@ Alerts are available for any length of text, as well as an optional close button
 Use any of our variant theme classes for color mode adaptive, contextual styling.
 
 <Example class="vstack gap-3" code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
-    A simple ${themeColor.name} alert—check it out!
+    <p>A simple ${themeColor.name} alert—check it out!</p>
   </div>`)} />
 
 <Details name="warning-color-assistive-technologies" />
@@ -42,7 +42,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 class="vstack gap-3" 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.
+    <p>A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</p>
   </div>`)} />
 
 ## Additional content
@@ -66,9 +66,7 @@ Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Boo
     <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0" 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>
-    <div>
-      An example alert with an icon
-    </div>
+    <p>An example alert with an icon</p>
   </div>`} />
 
 ## Dismiss
@@ -83,7 +81,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 theme-warning alert-dismissible fade show" role="alert">
-    Something’s wrong, check the fields below and try again.
+    <p>Something’s wrong, check the fields below and try again.</p>
     <CloseButton dismiss="alert" class="ms-auto" />
   </div>`} />
 

diff --git a/site/src/content/docs/components/offcanvas.mdx b/site/src/content/docs/components/offcanvas.mdx
index 7a5d4f61826b85a2df6637028f98a81f73fd859d..f52d362f80f18d9b47d038210ca8447e4cc033e0 100644 (file)
--- a/site/src/content/docs/components/offcanvas.mdx
+++ b/site/src/content/docs/components/offcanvas.mdx
@@ -169,7 +169,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 theme-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"><p>Resize your browser to show the responsive offcanvas toggle.</p></div>
 
   <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
     <div class="offcanvas-header">

diff --git a/site/src/content/docs/customize/theme.mdx b/site/src/content/docs/customize/theme.mdx
index f2f31ce71c95a937b814fed6bb5e55859a7eae1a..23ba77f30bc73b2ea84eb940316df420cc08b502 100644 (file)
--- a/site/src/content/docs/customize/theme.mdx
+++ b/site/src/content/docs/customize/theme.mdx
@@ -211,7 +211,7 @@ Here's the same set of components rendered in both light and dark modes side by
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
       </div>
-      <div class="alert theme-primary">This is a primary alert.</div>
+      <div class="alert theme-primary"><p>This is a primary alert.</p></div>
       <input type="text" class="form-control" placeholder="Form control">
       <div class="checkgroup">
         <div class="check">
@@ -236,7 +236,7 @@ Here's the same set of components rendered in both light and dark modes side by
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
       </div>
-      <div class="alert theme-primary">This is a primary alert.</div>
+      <div class="alert theme-primary"><p>This is a primary alert.</p></div>
       <input type="text" class="form-control" placeholder="Form control">
       <div class="checkgroup">
         <div class="check">
@@ -271,7 +271,7 @@ We generate theme utility classes from the `$theme-colors` Sass map that make al
 
 With theme utilities, you can apply a theme color to an element with a single class.
 
-<Example class="vstack gap-3" code={`<div class="alert theme-primary">Primary alert</div>
+<Example class="vstack gap-3" code={`<div class="alert theme-primary"><p>Primary alert</p></div>
   <div>
     <button type="button" class="btn-solid theme-primary">Primary button</button>
     <button type="button" class="btn-outline theme-primary">Primary outline button</button>
@@ -286,7 +286,7 @@ With theme utilities, you can apply a theme color to an element with a single cl
 And you can apply a theme color utility to a container and any theme-aware children will inherit the theme color.
 
 <Example code={`<div class="vstack gap-3 theme-primary">
-    <div class="alert">Primary alert</div>
+    <div class="alert"><p>Primary alert</p></div>
     <div>
       <button type="button" class="btn-solid">Primary button</button>
       <button type="button" class="btn-outline">Primary outline button</button>
@@ -302,7 +302,7 @@ And you can apply a theme color utility to a container and any theme-aware child
 This also means you can override a container's theme color with another theme color on specific components.
 
 <Example code={`<div class="vstack gap-3 theme-primary">
-    <div class="alert">Primary alert</div>
+    <div class="alert"><p>Primary alert</p></div>
     <div>
       <button type="button" class="btn-solid theme-emphasis">Emphasis button</button>
       <button type="button" class="btn-outline">Primary outline button</button>