Rename btn-group-input to just btn-input

patrickhlauke · patrickhlauke · commit d63e00f30eca · 2019-06-07T10:20:56.000+01:00
The class isn't necessarily just for when you want to use these in a group. You can have these just as a single checkbox, or a set of button-like radio buttons NOT in a button group. Makes more
sense to generalise the name.
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -148,7 +148,7 @@
 // See https://github.com/twbs/bootstrap/pull/12794 and
 // https://github.com/twbs/bootstrap/pull/14559 for more information.
 
-.btn-group-input {
+.btn-input {
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -17,7 +17,7 @@
 
   &:focus,
   &.focus,
-  .btn-group-input:focus ~ & {
+  .btn-input:focus ~ & {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -43,7 +43,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-group-input:checked ~ &,
+  .btn-input:checked ~ &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -75,7 +75,7 @@
 
   &:focus,
   &.focus,
-  .btn-group-input:focus ~ & {
+  .btn-input:focus ~ & {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
@@ -87,7 +87,7 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-group-input:checked ~ &,
+  .btn-input:checked ~ &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
@@ -114,7 +114,7 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
 
 {{< example >}}
 <div class="btn-group">
-  <input type="checkbox" class="btn-group-input" id="btnGroupCheckSingle" checked>
+  <input type="checkbox" class="btn-input" id="btnGroupCheckSingle" checked>
   <label class="btn btn-primary" for="btnGroupCheckSingle">
     Checked button
   </label>
@@ -124,15 +124,15 @@ Note that pre-checked buttons require you to manually add the `checked` attribut
 {{< example >}}
 <div class="btn-group">
   <div class="btn-group">
-    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio1" checked>
     <label class="btn btn-primary" for="btnGroupRadio1">Radio button</label>
   </div>
   <div class="btn-group">
-    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio2">
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio2">
     <label class="btn btn-primary" for="btnGroupRadio2">Radio button</label>
   </div>
   <div class="btn-group">
-    <input type="radio" class="btn-group-input" name="btnGroupRadio" id="btnGroupRadio3">
+    <input type="radio" class="btn-input" name="btnGroupRadio" id="btnGroupRadio3">
     <label class="btn btn-primary" for="btnGroupRadio3">Radio button</label>
   </div>
 </div>
