Switch to btn-check

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index a2cf7cf274d05242abcf5fa136c2dfc12e9b1fc5..8be6c0f52fa16f216e093f87f8d5ba792c42c02b 100644 (file)
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -14,8 +14,8 @@
 
   // Bring the hover, focused, and "active" buttons to the front to overlay
   // the borders properly
-  > .btn-toggle:checked + .btn,
-  > .btn-toggle:focus + .btn,
+  > .btn-check:checked + .btn,
+  > .btn-check:focus + .btn,
   > .btn:hover,
   > .btn:focus,
   > .btn:active,
@@ -51,7 +51,7 @@
   // - Target second buttons which are not part of toggle buttons
   // - Target third or more child
   // - Target buttons in a button group
-  > :not(.btn-toggle) + .btn,
+  > :not(.btn-check) + .btn,
   > .btn:nth-child(n + 3),
   > .btn-group:not(:first-child) > .btn {
     @include border-left-radius(0);

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 67c70de3b1833089e75d3dd792e13db72b2fc0bd..e17d4895e1659fd218b36cc22bdae3a771cb9b9f 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -24,14 +24,14 @@
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
-  .btn-toggle:focus + &,
+  .btn-check:focus + &,
   &:focus {
     outline: 0;
     box-shadow: $btn-focus-box-shadow;
   }
 
-  .btn-toggle:checked + &,
-  .btn-toggle:active + &,
+  .btn-check:checked + &,
+  .btn-check:active + &,
   &:active,
   &.active {
     @include box-shadow($btn-active-box-shadow);

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index fef7be6fe0092a30399c9cf74ee11911d55b190d..f1635780fe53983dcca4d021bec2e2ce6109a474 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -135,7 +135,7 @@
   margin-right: $form-check-inline-margin-right;
 }
 
-.btn-toggle {
+.btn-check {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index e8655105d5b7d6b6bd37d83b94995b7c1bcfc345..09ef0cb38c671c8bd1d36a78bae8aa0f621ad8ae 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -25,7 +25,7 @@
     border-color: $hover-border;
   }
 
-  .btn-toggle:focus + &,
+  .btn-check:focus + &,
   &:focus {
     color: $hover-color;
     @include gradient-bg($hover-background);
@@ -38,8 +38,8 @@
     }
   }
 
-  .btn-toggle:checked + &,
-  .btn-toggle:active + &,
+  .btn-check:checked + &,
+  .btn-check:active + &,
   &:active,
   &.active,
   .show > &.dropdown-toggle {
@@ -85,13 +85,13 @@
     border-color: $active-border;
   }
 
-  .btn-toggle:focus + &,
+  .btn-check:focus + &,
   &:focus {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
-  .btn-toggle:checked + &,
-  .btn-toggle:active + &,
+  .btn-check:checked + &,
+  .btn-check:active + &,
   &:active,
   &.active,
   &.dropdown-toggle.show {

diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md
index cc0887487e9ff3e30a3ce1580cd2dff6f2830e96..fbd9600dcd88907ca4782f4a519b0fb6ddd25d9b 100644 (file)
--- a/site/content/docs/5.0/components/buttons.md
+++ b/site/content/docs/5.0/components/buttons.md
@@ -103,7 +103,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
 
 ## Button plugin
 
-Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
+The button plugin allows you to create simple on/off toggle buttons.
 
 ### Toggle states
 

diff --git a/site/content/docs/5.0/forms/checks.md b/site/content/docs/5.0/forms/checks.md
index fec40b962b60074466b2b47a1671b79a9a92078f..a8b366625861fac7b0505fe3a00375823d9304cd 100644 (file)
--- a/site/content/docs/5.0/forms/checks.md
+++ b/site/content/docs/5.0/forms/checks.md
@@ -214,16 +214,16 @@ Omit the wrapping `.form-check` for checkboxes and radios that have no label tex
 
 ### Checkbox toggle buttons
 
-Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox style button toggling. Add an input with a `.btn-toggle` class as previous sibling to toggle the input state.
+Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox style button toggling. Add an input with a `.btn-check` class as previous sibling to toggle the input state.
 
 {{< example >}}
-<input type="checkbox" class="btn-toggle" id="btn-toggle" autocomplete="off">
-<label class="btn btn-primary" for="btn-toggle">Single toggle</label>
+<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
+<label class="btn btn-primary" for="btn-check">Single toggle</label>
 {{< /example >}}
 
 {{< example >}}
-<input type="checkbox" class="btn-toggle" id="btn-toggle-2" checked autocomplete="off">
-<label class="btn btn-primary" for="btn-toggle-2">Checked</label>
+<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
+<label class="btn btn-primary" for="btn-check-2">Checked</label>
 {{< /example >}}
 
 ### Radio toggle buttons
@@ -232,13 +232,13 @@ Toggle buttons can be grouped in a [button group]({{< docsref "/components/butto
 
 {{< example >}}
 <div class="btn-group">
-  <input type="radio" class="btn-toggle" name="options" id="option1" autocomplete="off" checked>
+  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
   <label class="btn btn-secondary" for="option1">Checked</label>
 
-  <input type="radio" class="btn-toggle" name="options" id="option2" autocomplete="off">
+  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
   <label class="btn btn-secondary" for="option2">Radio</label>
 
-  <input type="radio" class="btn-toggle" name="options" id="option3" autocomplete="off">
+  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
   <label class="btn btn-secondary" for="option3">Radio</label>
 </div>
 {{< /example >}}
@@ -246,17 +246,17 @@ Toggle buttons can be grouped in a [button group]({{< docsref "/components/butto
 ### Outlined styles
 
 {{< example >}}
-<input type="checkbox" class="btn-toggle" id="btn-toggle-outlined" autocomplete="off">
-<label class="btn btn-outline-primary" for="btn-toggle-outlined">Single toggle</label><br>
+<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
+<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
 
-<input type="checkbox" class="btn-toggle" id="btn-toggle-2-outlined" checked autocomplete="off">
-<label class="btn btn-outline-secondary" for="btn-toggle-2-outlined">Checked</label><br>
+<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
+<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
 
 <div class="btn-group">
-  <input type="radio" class="btn-toggle" name="options-outlined" id="success-outlined" autocomplete="off" checked>
+  <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
   <label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
 
-  <input type="radio" class="btn-toggle" name="options-outlined" id="danger-outlined" autocomplete="off">
+  <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
   <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
 </div>
 {{< /example >}}

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 7edc89819185b27c0f15ab14af423e0568f817a1..e018990eb780dcac02250d6161386f1fff5e5bb1 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -150,7 +150,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 
 ### Buttons
 
-- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks]({{< docsref "/forms/checks#toggle-buttons" >}}) docs. The `.btn-toggle` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650).
+- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks]({{< docsref "/forms/checks#toggle-buttons" >}}) docs. The `.btn-check` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650).
 
 ### Cards