Examples: Introduce <skip> for our examples + Add some Stackblitz examples + undupe code + homogenize our design for the examples in the doc

site/assets/js/code-examples.js

@@ -20,10 +20,13 @@
 
   const btnHtml = [
     '<div class="bd-code-snippet">',
-    '  <div class="bd-clipboard">',
-    '    <button type="button" class="btn-clipboard">',
-    '      <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
-    '    </button>',
+    '  <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">',
+    '    <small class="font-monospace text-body-secondary text-uppercase">html</small>',
+    '    <div class="d-flex ms-auto">',
+    '      <button type="button" class="btn-clipboard mt-0 me-0">',
+    '        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>',
+    '      </button>',
+    '    </div>',
     '  </div>',
     '</div>'
   ].join('')
@@ -35,6 +38,7 @@
       if (!element.closest('.bd-example-snippet')) {
         element.insertAdjacentHTML('beforebegin', btnHtml)
         element.previousElementSibling.append(element)
+        element.previousElementSibling.querySelector('small').textContent = element.querySelector('pre > code').getAttribute('data-lang')
       }
     })
 

site/assets/js/snippets.js

@@ -52,11 +52,13 @@
   // Instantiate all toasts in docs pages only
   document.querySelectorAll('.bd-example .toast')
     .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
-        autohide: false
-      })
+      if (toastNode.id !== 'liveToast') {
+        const toast = new bootstrap.Toast(toastNode, {
+          autohide: false
+        })
 
-      toast.show()
+        toast.show()
+      }
     })
 
   // Instantiate all toasts in docs pages only
@@ -119,6 +121,27 @@
       }
     })
 
+  // -------------------------------
+  // Forms
+  // -------------------------------
+  // Modal 'Varying modal content' example in docs and StackBlitz
+  // js-docs-start forms-validation
+  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  const forms = document.querySelectorAll('.needs-validation')
+
+  // Loop over them and prevent submission
+  Array.from(forms).forEach(form => {
+    form.addEventListener('submit', event => {
+      if (!form.checkValidity()) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+
+      form.classList.add('was-validated')
+    }, false)
+  })
+  // js-docs-end forms-validation
+
   // -------------------------------
   // Links
   // -------------------------------

site/assets/scss/_callouts.scss

@@ -24,10 +24,6 @@
   + .bd-callout {
     margin-top: -.25rem;
   }
-
-  .highlight {
-    background-color: rgba($black, .05);
-  }
 }
 
 // Variations

site/assets/scss/_clipboard-js.scss

@@ -23,7 +23,7 @@
   padding: .5em;
   line-height: 1;
   color: var(--bs-body-color);
-  background-color: var(--bd-pre-bg);
+  background-color: transparent;
   border: 0;
   @include border-radius(.25rem);
 

site/assets/scss/_component-examples.scss

@@ -12,6 +12,19 @@
     margin-left: 0;
     border-width: 1px;
     @include border-radius(var(--bs-border-radius));
+
+    > :first-child {
+      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+    }
+
+    > :last-child {
+      @include border-bottom-radius(calc(var(--bs-border-radius) - 1px));
+    }
+
+    // stylelint-disable-next-line selector-max-universal
+    > * + * {
+      border-top: 1px solid var(--bs-border-color);
+    }
   }
 }
 
@@ -31,7 +44,10 @@
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
-    @include border-radius(var(--bs-border-radius));
+
+    &:not(:first-child) {
+      @include border-radius(var(--bs-border-radius));
+    }
   }
 
   + p {
@@ -353,7 +369,6 @@
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
-    @include border-radius(calc(var(--bs-border-radius) - 1px));
   }
 
   @include media-breakpoint-up(lg) {
@@ -381,10 +396,6 @@
 
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
-
-  + .highlight {
-    @include border-top-radius(0);
-  }
 }
 
 .bd-file-ref {

site/assets/scss/_masthead.scss

@@ -21,10 +21,27 @@
   }
 
   .bd-code-snippet {
+    --bs-border-radius: .5rem;
+
+    position: relative;
     margin: 0;
-    border-color: var(--bs-border-color-translucent);
     border-width: 1px;
-    @include border-radius(.5rem);
+  }
+
+  .highlight-toolbar {
+    padding: 0 !important; // stylelint-disable-line declaration-no-important
+
+    > :first-child {
+      display: none;
+    }
+
+    > :last-child {
+      position: absolute;
+      top: 50%;
+      right: .75rem;
+      z-index: 1;
+      transform: translateY(-50%);
+    }
   }
 
   .highlight {
@@ -34,7 +51,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     background-color: rgba(var(--bs-body-color-rgb), .075);
-    @include border-radius(calc(.5rem - 1px));
+    border: 0;
+    @include border-radius(subtract(var(--bs-border-radius), 1px));
 
     @include media-breakpoint-up(lg) {
       padding-right: 4rem;
@@ -46,12 +64,6 @@
       overflow: hidden;
     }
   }
-  .btn-clipboard {
-    position: absolute;
-    top: -.625rem;
-    right: 0;
-    background-color: transparent;
-  }
 
   #carbonads { // stylelint-disable-line selector-max-id
     margin-inline: auto;

site/content/docs/5.3/components/buttons.md

@@ -243,9 +243,9 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a
 
 Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
 
-<div class="bd-example">
+{{< example show_markup=false >}}
   <button type="button" class="btn btn-bd-primary">Custom button</button>
-</div>
+{{< /example >}}
 
 {{< scss-docs name="btn-css-vars-example" file="site/assets/scss/_buttons.scss" >}}