Unfuck those split button dropdowns

- Really we didn't need to do any of that strip units stuff to generate six new variables, two for each button size
- Using sibling selectors, we can target those split button dropdown toggles using the .dropdown-toggle-split class, and adjust padding and margin as needed
- Now, we nuke the margin-left from the ::after generated caret and tighten up the padding so that those split toggles don't look huge next to their main button

diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md
index ecad0d862a4de65303c30b4bf1fc1f04ce762048..80d8911b968ee3876bb1f97722e263c4dcda7101 100644 (file)
--- a/docs/components/button-dropdown.md
+++ b/docs/components/button-dropdown.md
@@ -17,9 +17,9 @@ Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dro
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-### Single button dropdowns
+## Single button dropdowns
 
-Turn a button into a dropdown toggle with some basic markup changes.
+Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it.
 
 <div class="bd-example">
   <div class="btn-group">
@@ -100,9 +100,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
 </div>
 {% endhighlight %}
 
-### Split button dropdowns
+## Split button dropdowns
 
-Similarly, create split button dropdowns with nearly the same markup as single button dropdowns, but add the `.dropdown-toggle-split` class for proper spacing around the dropdown caret.
+Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret.
+
+We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
 
 <div class="bd-example">
   <div class="btn-group">
@@ -202,9 +204,9 @@ Similarly, create split button dropdowns with nearly the same markup as single b
 </div>
 {% endhighlight %}
 
-### Sizing
+## Sizing
 
-Button dropdowns work with buttons of all sizes.
+Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
 
 <div class="bd-example">
   <div class="btn-toolbar" role="toolbar">
@@ -264,37 +266,58 @@ Button dropdowns work with buttons of all sizes.
 </div><!-- /example -->
 
 {% highlight html %}
-<!-- Large button group -->
+<!-- Large button groups (default and split) -->
+<div class="btn-group">
+  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Large button
+  </button>
+  <div class="dropdown-menu">
+    ...
+  </div>
+</div>
 <div class="btn-group">
   <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Large button
   </button>
+  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
   <div class="dropdown-menu">
     ...
   </div>
 </div>
 
-<!-- Small button group -->
+<!-- Small button groups (default and split) -->
+<div class="btn-group">
+  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Small button
+  </button>
+  <div class="dropdown-menu">
+    ...
+  </div>
+</div>
 <div class="btn-group">
   <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Small button
   </button>
+  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
   <div class="dropdown-menu">
     ...
   </div>
 </div>
 {% endhighlight %}
 
-### Dropup variation
+## Dropup variation
 
 Trigger dropdown menus above elements by adding `.dropup` to the parent.
 
 <div class="bd-example">
   <div class="btn-toolbar" role="toolbar">
     <div class="btn-group dropup">
-      <button type="button" class="btn btn-secondary">Dropup</button>
       <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        <span class="sr-only">Toggle Dropdown</span>
+        Dropup
       </button>
       <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Action</a>
@@ -303,24 +326,28 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
-    </div><!-- /btn-group -->
+    </div>
+
     <div class="btn-group dropup">
-      <button type="button" class="btn btn-primary">Right dropup</button>
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button type="button" class="btn btn-secondary">
+        Split dropup
+      </button>
+      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="sr-only">Toggle Dropdown</span>
       </button>
-      <div class="dropdown-menu dropdown-menu-right">
+      <div class="dropdown-menu">
         <a class="dropdown-item" href="#">Action</a>
         <a class="dropdown-item" href="#">Another action</a>
         <a class="dropdown-item" href="#">Something else here</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Separated link</a>
       </div>
-    </div><!-- /btn-group -->
+    </div>
   </div>
 </div>
 
 {% highlight html %}
+<!-- Default dropup button -->
 <div class="btn-group dropup">
   <button type="button" class="btn btn-secondary">Dropup</button>
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -330,4 +357,17 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
     <!-- Dropdown menu links -->
   </div>
 </div>
+
+<!-- Split dropup button -->
+<div class="btn-group dropup">
+  <button type="button" class="btn btn-secondary">
+    Split dropup
+  </button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdown</span>
+  </button>
+  <div class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </div>
+</div>
 {% endhighlight %}

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 751c3eebd46aba27b4f648eec804cdd6fd4a61d5..7bbfc6b3acd124117a42dbe32ddea1a3c1588964 100644 (file)
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -104,22 +104,26 @@
 // Split button dropdowns
 //
 
-// Give the line between buttons some depth
-.dropdown-toggle-split {
-  padding-right: $btn-dropdown-toggle-split-r;
-  padding-left: $btn-dropdown-toggle-split-l;
+.btn + .dropdown-toggle-split {
+  padding-left: $btn-padding-x * .75;
+  padding-right: $btn-padding-x * .75;
 
-  &.btn-sm {
-    padding-right: $btn-dropdown-toggle-split-r-sm;
-    padding-left: $btn-dropdown-toggle-split-l-sm;
+  &::after {
+    margin-left: 0;
   }
+}
 
-  &.btn-lg {
-    padding-right: $btn-dropdown-toggle-split-r-lg;
-    padding-left: $btn-dropdown-toggle-split-l-lg;
-  }
+.btn-sm + .dropdown-toggle-split {
+  padding-left: $btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * .75;
 }
 
+.btn-lg + .dropdown-toggle-split {
+  padding-left: $btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * .75;
+}
+
+
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
 .btn-group.open .dropdown-toggle {

diff --git a/scss/_variables.scss b/scss/_variables.scss
index bbdbe24c4d62216bb0f64e8a3f23f696fb0c5b74..5be9795454dd12a053ba14ffbfe9ec5f11c62bab 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -298,13 +298,6 @@ $btn-padding-y-lg:               .75rem !default;
 $btn-block-spacing-y:            .5rem !default;
 $btn-toolbar-margin:             .5rem !default;
 
-$btn-dropdown-toggle-split-l:    (strip-unit($btn-padding-x) - ($caret-width * 1.5)) !default;
-$btn-dropdown-toggle-split-r:    (strip-unit($btn-padding-x) - ($caret-width * .5)) !default;
-$btn-dropdown-toggle-split-l-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * 1.5)) !default;
-$btn-dropdown-toggle-split-r-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * .5)) !default;
-$btn-dropdown-toggle-split-l-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * 1.5)) !default;
-$btn-dropdown-toggle-split-r-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * .5)) !default;
-
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:              $border-radius !default;
 $btn-border-radius-lg:           $border-radius-lg !default;