From 543ff4e3e5c29509b3aa8643073d3cd0d109c536 Mon Sep 17 00:00:00 2001
From: Shohei Yoshida <ysds.code@gmail.com>
Date: Thu, 6 Jun 2019 15:04:48 +0900
Subject: [PATCH] Clean component examples CSS (#28872)

* Remove unused classes/styles and use utilities instead of specific styles
* Use `getElementById` instead of `querySelector`
---
 site/content/docs/4.3/components/navbar.md    | 20 +++---
 site/content/docs/4.3/components/navs.md      | 12 ++--
 site/content/docs/4.3/components/progress.md  |  2 +-
 .../docs/4.3/assets/js/src/application.js     |  2 +-
 .../4.3/assets/scss/_component-examples.scss  | 72 +------------------
 5 files changed, 19 insertions(+), 89 deletions(-)

diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md
index 2861be6674..9d3dd57a7c 100644
--- a/site/content/docs/4.3/components/navbar.md
+++ b/site/content/docs/4.3/components/navbar.md
@@ -543,17 +543,15 @@ With a toggler on the left and brand name on the right:
 Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!
 
 {{< example >}}
-<div class="pos-f-t">
-  <div class="collapse" id="navbarToggleExternalContent">
-    <div class="bg-dark p-4">
-      <h5 class="text-white h4">Collapsed content</h5>
-      <span class="text-muted">Toggleable via the navbar brand.</span>
-    </div>
+<div class="collapse" id="navbarToggleExternalContent">
+  <div class="bg-dark p-4">
+    <h5 class="text-white h4">Collapsed content</h5>
+    <span class="text-muted">Toggleable via the navbar brand.</span>
   </div>
-  <nav class="navbar navbar-dark bg-dark">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-  </nav>
 </div>
+<nav class="navbar navbar-dark bg-dark">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+</nav>
 {{< /example >}}
diff --git a/site/content/docs/4.3/components/navs.md b/site/content/docs/4.3/components/navs.md
index 078f4f8e7e..5281fcdaff 100644
--- a/site/content/docs/4.3/components/navs.md
+++ b/site/content/docs/4.3/components/navs.md
@@ -309,8 +309,8 @@ Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility I
 
 Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
 
-<div class="bd-example bd-example-tabs">
-  <ul class="nav nav-tabs" id="myTab" role="tablist">
+<div class="bd-example">
+  <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
     <li class="nav-item">
       <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
     </li>
@@ -355,9 +355,9 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 
 To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using `<nav>`, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it.
 
-<div class="bd-example bd-example-tabs">
+<div class="bd-example">
   <nav>
-    <div class="nav nav-tabs" id="nav-tab" role="tablist">
+    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
       <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
       <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
       <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
@@ -393,7 +393,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 
 The tabs plugin also works with pills.
 
-<div class="bd-example bd-example-tabs">
+<div class="bd-example">
   <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
     <li class="nav-item">
       <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
@@ -439,7 +439,7 @@ The tabs plugin also works with pills.
 
 And with vertical pills.
 
-<div class="bd-example bd-example-tabs">
+<div class="bd-example">
   <div class="row">
     <div class="col-3">
       <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
diff --git a/site/content/docs/4.3/components/progress.md b/site/content/docs/4.3/components/progress.md
index f5b6fe136a..c41aea4acd 100644
--- a/site/content/docs/4.3/components/progress.md
+++ b/site/content/docs/4.3/components/progress.md
@@ -127,7 +127,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
   <div class="progress">
     <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
   </div>
-  <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off">
+  <button type="button" class="btn btn-secondary mt-3" data-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off">
     Toggle animation
   </button>
 </div>
diff --git a/site/static/docs/4.3/assets/js/src/application.js b/site/static/docs/4.3/assets/js/src/application.js
index dfbced4136..201eb48b3f 100644
--- a/site/static/docs/4.3/assets/js/src/application.js
+++ b/site/static/docs/4.3/assets/js/src/application.js
@@ -83,7 +83,7 @@
   }
 
   // Activate animated progress bar
-  var btnToggleAnimatedProgress = document.querySelector('.bd-toggle-animated-progress')
+  var btnToggleAnimatedProgress = document.getElementById('btnToggleAnimatedProgress')
   if (btnToggleAnimatedProgress) {
     btnToggleAnimatedProgress.addEventListener('click', function () {
       btnToggleAnimatedProgress.parentNode
diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss
index 62ebf6953b..8b7a3bab85 100644
--- a/site/static/docs/4.3/assets/scss/_component-examples.scss
+++ b/site/static/docs/4.3/assets/scss/_component-examples.scss
@@ -18,13 +18,6 @@
   .row + .row {
     margin-top: 1rem;
   }
-
-  .flex-items-top,
-  .flex-items-middle,
-  .flex-items-bottom {
-    min-height: 6rem;
-    background-color: rgba(255, 0, 0, .1);
-  }
 }
 
 .bd-example-row-flex-cols .row {
@@ -138,19 +131,6 @@
     margin-top: 2rem;
   }
 
-  .pos-f-t {
-    position: relative;
-    margin: -1rem;
-
-    @include media-breakpoint-up(sm) {
-      margin: -1.5rem;
-    }
-  }
-
-  .custom-file-input:lang(es) ~ .custom-file-label::after {
-    content: "Elegir";
-  }
-
   > .form-control {
     + .form-control {
       margin-top: .5rem;
@@ -160,12 +140,11 @@
   > .nav + .nav,
   > .alert + .alert,
   > .navbar + .navbar,
-  > .progress + .progress,
-  > .progress + .btn {
+  > .progress + .progress {
     margin-top: 1rem;
   }
 
-  > .dropdown-menu:first-child {
+  > .dropdown-menu {
     position: static;
     display: block;
   }
@@ -173,10 +152,6 @@
   > .form-group:last-child {
     margin-bottom: 0;
   }
-
-  > .close {
-    float: none;
-  }
 }
 
 // Typography
@@ -202,11 +177,6 @@
   }
 }
 
-// Contextual background colors
-.bd-example-bg-classes p {
-  padding: 1rem;
-}
-
 // Images
 .bd-example {
   > svg + svg,
@@ -227,18 +197,6 @@
   }
 }
 
-// Forms
-.bd-example-control-sizing select,
-.bd-example-control-sizing input[type="text"] + input[type="text"] {
-  margin-top: .5rem;
-}
-.bd-example-form .input-group {
-  margin-bottom: .5rem;
-}
-.bd-example > textarea.form-control {
-  resize: vertical;
-}
-
 // List groups
 .bd-example > .list-group {
   max-width: 400px;
@@ -310,37 +268,11 @@
   }
 }
 
-// Example tabbable tabs
-.bd-example-tabs .nav-tabs {
-  margin-bottom: 1rem;
-}
-
-// Popovers
-.bd-example-popover-static {
-  padding-bottom: 1.5rem;
-  background-color: #f9f9f9;
-
-  .popover {
-    position: relative;
-    display: block;
-    float: left;
-    width: 260px;
-    margin: 1.25rem;
-  }
-}
-
 // Tooltips
 .tooltip-demo a {
   white-space: nowrap;
 }
 
-.bd-example-tooltip-static .tooltip {
-  position: relative;
-  display: inline-block;
-  margin: 10px 20px;
-  opacity: 1;
-}
-
 // Scrollspy demo on fixed height div
 .scrollspy-example {
   position: relative;