Merge branch 'twbs/v4-dev' into dropdown-keyboard

README.md

@@ -4,7 +4,7 @@
 ![Bower version](https://img.shields.io/bower/v/bootstrap.svg)
 [![npm version](https://img.shields.io/npm/v/bootstrap.svg)](https://www.npmjs.com/package/bootstrap)
 [![Gem version](https://img.shields.io/gem/v/bootstrap.svg)](https://rubygems.org/gems/bootstrap)
-[![Build Status](https://img.shields.io/travis/twbs/bootstrap/master.svg)](https://travis-ci.org/twbs/bootstrap)
+[![Build Status](https://img.shields.io/travis/twbs/bootstrap/v4-dev.svg)](https://travis-ci.org/twbs/bootstrap)
 [![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap?type=dev)
 [![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue.svg)](https://atmospherejs.com/twbs/bootstrap)
 [![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap.svg)](https://packagist.org/packages/twbs/bootstrap)

docs/_data/translations.yml

@@ -6,7 +6,7 @@
 - name: Chinese
   code: zh
   description: Bootstrap 4 中文文档教程
-  url: http://boot4.com/
+  url: http://wiki.jikexueyuan.com/project/bootstrap4/
 
 - name: Japanese
   code: ja

docs/assets/scss/_footer.scss

@@ -13,7 +13,8 @@
     font-weight: 500;
     color: $gray;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: $link-color;
     }
   }

docs/assets/scss/_masthead.scss

@@ -39,7 +39,8 @@
     color: $bd-yellow;
     border-color: $bd-yellow;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: $bd-graphite;
       background-color: $bd-yellow;
       border-color: $bd-yellow;

docs/assets/scss/_team.scss

@@ -6,8 +6,12 @@
     color: #555;
   }
 
-  .team-member:hover {
+  .team-member:hover,
+  .team-member:focus {
     color: #333;
+  }
+
+  .team-member:hover {
     text-decoration: none;
   }
 

docs/components/collapse.md

@@ -43,7 +43,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 Extend the default collapse behavior to create an accordion.
 
 {% example html %}
-<div id="accordion" role="tablist" aria-multiselectable="true">
+<div id="accordion" role="tablist">
   <div class="card">
     <div class="card-header" role="tab" id="headingOne">
       <h5 class="mb-0">

docs/components/modal.md

@@ -121,7 +121,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
 </button>
 
 <!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">

docs/getting-started/build-tools.md

@@ -43,7 +43,7 @@ Our Gruntfile includes the following commands and tasks:
 
 Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
 
-We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/postcss.js`](https://github.com/twbs/bootstrap/blob/master/grunt/postcss.js) for details.
+We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/postcss.js`](https://github.com/twbs/bootstrap/blob/v4-dev/grunt/postcss.js) for details.
 
 ## Local documentation
 

js/src/carousel.js

@@ -137,7 +137,7 @@ const Carousel = (($) => {
       if (this._isSliding) {
         throw new Error('Carousel is sliding')
       }
-      this._slide(Direction.PREVIOUS)
+      this._slide(Direction.PREV)
     }
 
     pause(event) {
@@ -195,7 +195,7 @@ const Carousel = (($) => {
 
       const direction = index > activeIndex ?
         Direction.NEXT :
-        Direction.PREVIOUS
+        Direction.PREV
 
       this._slide(direction, this._items[index])
     }
@@ -263,7 +263,7 @@ const Carousel = (($) => {
 
     _getItemByDirection(direction, activeElement) {
       const isNextDirection = direction === Direction.NEXT
-      const isPrevDirection = direction === Direction.PREVIOUS
+      const isPrevDirection = direction === Direction.PREV
       const activeIndex     = this._getItemIndex(activeElement)
       const lastItemIndex   = this._items.length - 1
       const isGoingToWrap   = isPrevDirection && activeIndex === 0 ||
@@ -273,7 +273,7 @@ const Carousel = (($) => {
         return activeElement
       }
 
-      const delta     = direction === Direction.PREVIOUS ? -1 : 1
+      const delta     = direction === Direction.PREV ? -1 : 1
       const itemIndex = (activeIndex + delta) % this._items.length
 
       return itemIndex === -1 ?

js/src/dropdown.js

@@ -24,9 +24,11 @@ const Dropdown = (($) => {
   const DATA_API_KEY             = '.data-api'
   const JQUERY_NO_CONFLICT       = $.fn[NAME]
   const ESCAPE_KEYCODE           = 27 // KeyboardEvent.which value for Escape (Esc) key
+  const SPACE_KEYCODE            = 32 // KeyboardEvent.which value for space key
   const ARROW_UP_KEYCODE         = 38 // KeyboardEvent.which value for up arrow key
   const ARROW_DOWN_KEYCODE       = 40 // KeyboardEvent.which value for down arrow key
   const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse)
+  const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}|${SPACE_KEYCODE}`)
 
   const Event = {
     HIDE             : `hide${EVENT_KEY}`,
@@ -211,7 +213,7 @@ const Dropdown = (($) => {
     }
 
     static _dataApiKeydownHandler(event) {
-      if (!/(38|40|27|32)/.test(event.which) ||
+      if (!REGEXP_KEYDOWN.test(event.which) ||
          /input|textarea/i.test(event.target.tagName)) {
         return
       }

js/tests/visual/collapse.html

@@ -10,7 +10,7 @@
     <div class="container">
       <h1>Collapse <small>Bootstrap Visual Test</small></h1>
 
-      <div id="accordion" role="tablist" aria-multiselectable="true">
+      <div id="accordion" role="tablist">
         <div class="card">
           <div class="card-header" role="tab" id="headingOne">
             <h5 class="mb-0">

js/tests/visual/modal.html

@@ -54,7 +54,7 @@
               <h4>Tooltips in a modal</h4>
               <p><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>
 
-              <div id="accordion" role="tablist" aria-multiselectable="true">
+              <div id="accordion" role="tablist">
                 <div class="card">
                   <div class="card-header" role="tab" id="headingOne">
                     <h5 class="mb-0">

package.json

@@ -29,7 +29,7 @@
     "scss-lint": "bundle exec scss-lint --config scss/.scss-lint.yml --exclude scss/_normalize.scss scss/*.scss",
     "scss-lint-docs": "bundle exec scss-lint --config scss/.scss-lint.yml --exclude docs/assets/scss/docs.scss docs/assets/scss/*.scss",
     "uglify": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
-    "uglify-docs": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output docs/assets/js/docs.min.js docs/assets/js/vendor/*.js docs/assets/js/src/application.js",
+    "uglify-docs": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output docs/assets/js/docs.min.js docs/assets/js/vendor/anchor.min.js docs/assets/js/vendor/clipboard.min.js docs/assets/js/vendor/holder.min.js docs/assets/js/src/application.js",
     "update-shrinkwrap": "npm shrinkwrap --dev && shx mv ./npm-shrinkwrap.json ./grunt/npm-shrinkwrap.json",
     "test": "npm run eslint && grunt test"
   },

scss/bootstrap.scss

@@ -6,9 +6,9 @@
  */
 
 // Core variables and mixins
+@import "custom";
 @import "variables";
 @import "mixins";
-@import "custom";
 
 // Reset and dependencies
 @import "normalize";

scss/mixins/_breakpoints.scss

@@ -2,7 +2,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 576px, md: 768px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,9 +10,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
@@ -21,7 +21,7 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
@@ -31,7 +31,7 @@
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.1.
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
@@ -41,9 +41,9 @@
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
 // Useful for making responsive utilities.
 //
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");