Handle border radii and borders in another way

twbs · Nov 15, 2023 · c970476 · c970476
1 parent ce11411
commit c970476
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 46 deletions.
diff --git a/site/assets/js/code-examples.js b/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')
       }
     })
 

diff --git a/site/assets/scss/_clipboard-js.scss b/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);
 

diff --git a/site/assets/scss/_component-examples.scss b/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,7 +43,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 +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 {

diff --git a/site/assets/scss/_masthead.scss b/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;

diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md
@@ -30,20 +30,40 @@ sitemap_exclude: true
 
 ## 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">
-  The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
-</div>
+```html
+<div class="test">This is a triple backtick markup only test.</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/snippets.js" >}}
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
@@ -13,9 +13,9 @@
 {{- $id := .Get "id" -}}
 {{- $class := .Get "class" -}}
 {{- $lang := .Get "lang" | default "html" -}}
-{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
+{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
 {{- $input := .Inner -}}
 {{- $content := .Inner -}}
 
@@ -26,21 +26,21 @@
   </div>
   {{- end -}}
 
-  {{- if eq $show_markup true -}}
-    {{- 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">
-          <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>
-          <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+  <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
+    <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 -}}

diff --git a/site/layouts/shortcodes/js-docs.html b/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="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+  <div class="bd-example-snippet bd-code-snippet">
+    <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>

diff --git a/site/layouts/shortcodes/scss-docs.html b/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="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+  <div class="bd-example-snippet bd-code-snippet">
+    <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>

diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html
@@ -22,10 +22,24 @@
 
 {{- $table := printf "<table%s>\n%s</table>" $table_attributes $table_content -}}
 
-<div class="bd-example">
-  <table{{ with $class }} class="{{ . }}"{{ end }}>
-    {{ partialCached "table-content" . }}
-  </table>
+<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>
-
-{{- highlight $table "html" "" -}}