Merge branch 'v4-dev' into mark-padding

CONTRIBUTING.md

@@ -235,6 +235,7 @@ includes code changes) and under the terms of the
 - 2 spaces (no tabs)
 - strict mode
 - "Attractive"
+- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
 
 ### Checking coding style
 

dist/css/bootstrap.css

@@ -555,7 +555,7 @@ small,
 
 mark,
 .mark {
-  padding: .2em;
+  padding: 0.2em;
   background-color: #fcf8e3;
 }
 
@@ -4508,7 +4508,7 @@ input[type="button"].btn-block {
 
 .label {
   display: inline-block;
-  padding: .25em .4em;
+  padding: 0.25em 0.4em;
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
@@ -4535,8 +4535,8 @@ a.label:focus, a.label:hover {
 }
 
 .label-pill {
-  padding-right: .6em;
+  padding-right: 0.6em;
-  padding-left: .6em;
+  padding-left: 0.6em;
   border-radius: 10rem;
 }
 

dist/js/bootstrap.js

@@ -462,6 +462,8 @@ var Button = (function ($) {
               input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
               $(this._element).trigger('change');
             }
+
+            $(input).trigger('focus');
           }
         } else {
           this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));

dist/js/umd/button.js

@@ -108,6 +108,8 @@
                 input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
                 $(this._element).trigger('change');
               }
+
+              $(input).trigger('focus');
             }
           } else {
             this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));

docs/content/reboot.md

@@ -193,7 +193,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
 - `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
 - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
 - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
-- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
+- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
 - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
 
 These changes, and more, are demonstrated below.

docs/dist/css/bootstrap.css

@@ -555,7 +555,7 @@ small,
 
 mark,
 .mark {
-  padding: .2em;
+  padding: 0.2em;
   background-color: #fcf8e3;
 }
 
@@ -4508,7 +4508,7 @@ input[type="button"].btn-block {
 
 .label {
   display: inline-block;
-  padding: .25em .4em;
+  padding: 0.25em 0.4em;
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
@@ -4535,8 +4535,8 @@ a.label:focus, a.label:hover {
 }
 
 .label-pill {
-  padding-right: .6em;
+  padding-right: 0.6em;
-  padding-left: .6em;
+  padding-left: 0.6em;
   border-radius: 10rem;
 }
 

docs/dist/js/bootstrap.js

@@ -462,6 +462,8 @@ var Button = (function ($) {
               input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
               $(this._element).trigger('change');
             }
+
+            $(input).trigger('focus');
           }
         } else {
           this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));

docs/dist/js/umd/button.js

@@ -108,6 +108,8 @@
                 input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
                 $(this._element).trigger('change');
               }
+
+              $(input).trigger('focus');
             }
           } else {
             this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));

js/dist/button.js

@@ -95,6 +95,8 @@ var Button = (function ($) {
               input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
               $(this._element).trigger('change');
             }
+
+            $(input).trigger('focus');
           }
         } else {
           this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));

js/src/button.js

@@ -92,7 +92,10 @@ const Button = (($) => {
             input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
             $(this._element).trigger('change')
           }
+
+          $(input).trigger('focus')
         }
+
       } else {
         this._element.setAttribute('aria-pressed',
           !$(this._element).hasClass(ClassName.ACTIVE))

js/tests/index.html

@@ -44,7 +44,10 @@
           'undelegate'
         ]
         for (var i = 0; i < eventAliases.length; i++) {
-          $.fn[eventAliases[i]] = undefined
+          var eventAlias = eventAliases[i]
+          $.fn[eventAlias] = function () {
+            throw new Error('Using the ".' + eventAlias + '()" method is not allowed, so that Bootstrap can be compatible with custom jQuery builds which exclude the "event aliases" module that defines said method. See https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js')
+          }
         }
       })()
     </script>

js/tests/visual/button.html

@@ -17,6 +17,9 @@
 
   <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
 
+  <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
+  <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p>
+
   <div class="btn-group" data-toggle="buttons">
     <label class="btn btn-primary">
       <input type="checkbox"> checkbox 1
@@ -29,6 +32,8 @@
     </label>
   </div>
 
+  <p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time.  Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse,  ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
+
   <div class="btn-group" data-toggle="buttons">
     <label class="btn btn-primary">
       <input type="radio" name="options" id="option1"> Radio 1

scss/_dropdown.scss

@@ -42,7 +42,7 @@
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   float: left;
-  min-width: 160px;
+  min-width: $dropdown-min-width;
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   font-size: $font-size-base;

scss/_labels.scss

@@ -5,8 +5,8 @@
 
 .label {
   display: inline-block;
-  padding: .25em .4em;
+  padding: $label-padding-y $label-padding-x;
-  font-size: 75%;
+  font-size: $label-font-size;
   font-weight: $label-font-weight;
   line-height: 1;
   color: $label-color;
@@ -43,11 +43,9 @@ a.label {
 // Make them extra rounded with a modifier to replace v3's badges.
 
 .label-pill {
-  padding-right: .6em;
+  padding-right: $label-pill-padding-x;
-  padding-left: .6em;
+  padding-left: $label-pill-padding-x;
-  // Use a higher than normal value to ensure completely rounded edges when
+  @include border-radius($label-pill-border-radius);
-  // customizing padding or font-size on labels.
-  @include border-radius(10rem);
 }
 
 // Colors

scss/_type.scss

@@ -60,14 +60,14 @@ hr {
 
 small,
 .small {
-  font-size: 80%;
+  font-size: $small-font-size;
   font-weight: normal;
 }
 
 mark,
 .mark {
   padding: $mark-padding;
-  background-color: $state-warning-bg;
+  background-color: $mark-bg;
 }
 
 

scss/_variables.scss

@@ -114,7 +114,7 @@ $link-hover-decoration: underline !default;
 
 // Grid breakpoints
 //
-// Define the minimum and maximum dimensions at which your layout will change,
+// Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
 $grid-breakpoints: (
@@ -193,6 +193,8 @@ $headings-color:         inherit !default;
 $lead-font-size:   1.25rem !default;
 $lead-font-weight: 300 !default;
 
+$small-font-size: 80% !default;
+
 $text-muted: $gray-light !default;
 
 $abbr-border-color: $gray-light !default;
@@ -428,6 +430,7 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 //
 // Dropdown menu container and contents.
 
+$dropdown-min-width:             160px !default;
 $dropdown-bg:                    #fff !default;
 $dropdown-border-color:          rgba(0,0,0,.15) !default;
 $dropdown-border-width:          $border-width !default;
@@ -551,6 +554,7 @@ $state-info-border:              darken($state-info-bg, 7%) !default;
 
 $state-warning-text:             #8a6d3b !default;
 $state-warning-bg:               #fcf8e3 !default;
+$mark-bg:                        $state-warning-bg !default;
 $state-warning-border:           darken($state-warning-bg, 5%) !default;
 
 $state-danger-text:              #a94442 !default;
@@ -620,8 +624,15 @@ $label-danger-bg:             $brand-danger !default;
 
 $label-color:                 #fff !default;
 $label-link-hover-color:      #fff !default;
+$label-font-size:             75% !default;
 $label-font-weight:           bold !default;
+$label-padding-x:             .4em !default;
+$label-padding-y:             .25em !default;
 
+$label-pill-padding-x:        .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$label-pill-border-radius:    10rem !default;
 
 // Modals
 

scss/mixins/_grid-framework.scss

@@ -15,8 +15,8 @@
           flex-grow: 1;
           max-width: 100%;
           min-height: 1px;
-          padding-right: ($grid-gutter-width / 2);
+          padding-right: ($gutter / 2);
-          padding-left:  ($grid-gutter-width / 2);
+          padding-left:  ($gutter / 2);
         }
       }