Merge 8a102dd7bc into 99a0dc628a

site/assets/js/partials/code-examples.js

@@ -20,11 +20,14 @@ export default () => {
 
   const btnHtml = [
     '<div class="bd-code-snippet">',
-    '  <div class="bd-clipboard">',
+    '  <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">',
-    '    <button type="button" class="btn-clipboard">',
+    '    <small class="font-monospace text-body-secondary text-uppercase">html</small>',
-    '      <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
+    '    <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 @@ export default () => {
       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/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,18 @@
     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));
+    }
+  }
+
+  > :not(:first-child) {
+    border-top: 1px solid var(--bs-border-color);
   }
 }
 
@@ -31,8 +43,11 @@
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
+
+    &:not(:first-child) {
       @include border-radius(var(--bs-border-radius));
     }
+  }
 
   + p {
     margin-top: 2rem;
@@ -353,7 +368,6 @@
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
-    @include border-radius(calc(var(--bs-border-radius) - 1px));
   }
 
   @include media-breakpoint-up(lg) {
@@ -385,18 +399,6 @@
 
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
-
-  + .highlight {
-    @include border-top-radius(0);
-  }
-}
-
-.bd-file-ref {
-  .highlight-toolbar {
-    @include media-breakpoint-up(md) {
-      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
-    }
-  }
 }
 
 .bd-content .bd-code-snippet {

site/assets/scss/_masthead.scss

@@ -21,19 +21,37 @@
   }
 
   .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 {
+  .highlight-toolbar {
+    padding: 0 !important; // stylelint-disable-line declaration-no-important
+
+    > :first-child {
+      display: none;
+    }
+
+    .btn-clipboard {
+      position: absolute;
+      top: 50%;
+      right: .75rem;
+      z-index: 1;
+      transform: translateY(-50%);
+    }
+  }
+
+  .highlight-toolbar + .highlight {
     width: 100%;
     padding: .5rem 1rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     background-color: rgba(var(--bs-body-color-rgb), .075);
+    border: 0;
     @include border-radius(calc(.5rem - 1px));
 
     @include media-breakpoint-up(lg) {
@@ -46,6 +64,7 @@
       overflow: hidden;
     }
   }
+
   .btn-clipboard {
     position: absolute;
     top: -.625rem;

site/content/docs/5.3/docsref.md

@@ -31,20 +31,40 @@ sitemap:
 
 ## Code example
 
+<div class="bd-example">
+  <div class="test">This is a test using <code>.bd-example</code> directly.</div>
+</div>
+
 ```scss
 .test {
   --color: blue;
 }
 ```
 
-<div class="bd-example">
+```html
-  The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
+<div class="test">This is a triple backtick markup only test.</div>
-</div>
+```
+
+{{< highlight html >}}
+<div class="test">This is a highlight tag markup only test.</div>
+{{< /highlight >}}
+
+{{< example show_preview=false >}}
+<div class="test">This is a markup only test.</div>
+{{< /example >}}
+
+{{< example show_markup=false >}}
+<div class="test">This is a preview only test.</div>
+{{< /example >}}
 
 {{< example >}}
 <div class="test">This is a test.</div>
 {{< /example >}}
 
+{{< example class=bg-body-secondary >}}
+<div class="test">This is a test with a custom background color.</div>
+{{< /example >}}
+
 {{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
 
 {{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}

site/layouts/shortcodes/example.html

@@ -26,21 +26,21 @@
   </div>
   {{- end }}
 
-  {{- if eq $show_markup true -}}
+  <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
-    {{- if eq $show_preview true -}}
-      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
     <small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
     <div class="d-flex ms-auto">
+      {{- if eq $show_preview true -}}
         <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
           <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
         </button>
+      {{- end -}}
       <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
             <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
           </button>
         </div>
       </div>
-    {{- end -}}
 
+  {{- if eq $show_markup true -}}
     {{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
     {{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
     {{- $content = replaceRE ` (class=" *?")` "" $content -}}

site/layouts/shortcodes/js-docs.html

@@ -32,8 +32,8 @@
     {{- $match = replace $match $to_remove "" -}}
   {{- end -}}
 
-  <div class="bd-example-snippet bd-code-snippet bd-file-ref">
+  <div class="bd-example-snippet bd-code-snippet">
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
       <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>

site/layouts/shortcodes/scss-docs.html

@@ -45,8 +45,8 @@
     {{- $match = replace $match " !default" "" -}}
   {{- end -}}
 
-  <div class="bd-example-snippet bd-code-snippet bd-file-ref">
+  <div class="bd-example-snippet bd-code-snippet">
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
       <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>

site/layouts/shortcodes/table.html

@@ -22,10 +22,24 @@
 
 {{- $table := printf "<table%s>\n%s</table>" $table_attributes $table_content -}}
 
-<div class="bd-example">
+<div class="bd-example-snippet bd-code-snippet">
+  <div class="bd-example m-0 border-0">
     <table{{ with $class }} class="{{ . }}"{{ end }}>
       {{ partialCached "table-content" . }}
     </table>
   </div>
 
+  <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-edit text-nowrap" title="Try it on StackBlitz">
+        <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
+      </button>
+      <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
+      </button>
+    </div>
+  </div>
+
   {{- highlight $table "html" "" -}}
+</div>