Merge branch 'v4-dev' into v4-dev-johann-coverall

twbs · Mar 31, 2018 · dde7a32 · dde7a32
2 parents ae4f36a + 902788e
commit dde7a32
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 28 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,7 +8,7 @@
 
     {% include docs-navbar.html %}
 
-    {% if page.layout == "simple" %}
+    {% if page.layout == "simple" or page.layout == "examples" %}
       {{ content }}
     {% else %}
       <main id="content" role="main">

diff --git a/_layouts/examples.html b/_layouts/examples.html
@@ -11,6 +11,6 @@ <h1 class="bd-title mt-0">{{ page.title | smartify }}</h1>
   {% include ads.html %}
 </header>
 
-<main class="bd-content p-5" role="main">
+<main class="bd-content p-5" id="content" role="main">
   {{ content }}
 </main>
diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -17,6 +17,7 @@ const plugins = [
       'defineProperties',
       'createClass',
       'inheritsLoose',
+      'defineProperty',
       'objectSpread'
     ]
   })

diff --git a/docs/4.0/components/scrollspy.md b/docs/4.0/components/scrollspy.md
@@ -148,8 +148,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
       <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
       <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
     </nav>
-    <a class="nav-link" href="#item-2">Item2</a>
-    <a class="nav-link" href="#item-3">Item3</a>
+    <a class="nav-link" href="#item-2">Item 2</a>
+    <a class="nav-link" href="#item-3">Item 3</a>
     <nav class="nav nav-pills flex-column">
       <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
       <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
@@ -184,7 +184,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
     <div class="col-4">
       <div id="list-example" class="list-group">
         <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
-        <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
+        <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
         <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
         <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
       </div>
@@ -207,7 +207,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
 {% highlight html %}
 <div id="list-example" class="list-group">
   <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
-  <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
+  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
   <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
   <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
 </div>

diff --git a/docs/4.0/extend/approach.md b/docs/4.0/extend/approach.md
@@ -73,4 +73,4 @@ Specifically regarding custom CSS, utilities can help combat increasing file siz
 
 ## Flexible HTML
 
-While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`~`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
+While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md
@@ -34,6 +34,7 @@ Similar to the contextual text color classes, easily set the background of an el
 {% for color in site.data.theme-colors %}
 <div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
 {% endcapture %}
 {% include example.html content=example %}
 

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -57,7 +57,7 @@ const Dropdown = (($) => {
     FORM_CHILD    : '.dropdown form',
     MENU          : '.dropdown-menu',
     NAVBAR_NAV    : '.navbar-nav',
-    VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)'
+    VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
   }
 
   const AttachmentMap = {

diff --git a/js/tests/karma-bundle.conf.js b/js/tests/karma-bundle.conf.js
@@ -0,0 +1,53 @@
+/* eslint-env node */
+/* eslint no-process-env: 0 */
+
+module.exports = (config) => {
+  const jqueryFile = process.env.USE_OLD_JQUERY ? 'https://code.jquery.com/jquery-1.9.1.min.js' : 'assets/js/vendor/jquery-slim.min.js'
+
+  config.set({
+    basePath: '../..',
+    frameworks: ['qunit', 'sinon', 'detectBrowsers'],
+    plugins: [
+      'karma-chrome-launcher',
+      'karma-firefox-launcher',
+      'karma-qunit',
+      'karma-sinon',
+      'karma-detect-browsers'
+    ],
+    // list of files / patterns to load in the browser
+    files: [
+      jqueryFile,
+      'assets/js/vendor/popper.min.js',
+      'dist/js/bootstrap.js',
+      'js/tests/unit/*.js'
+    ],
+    reporters: ['dots'],
+    port: 9876,
+    colors: true,
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_ERROR || config.LOG_WARN,
+    autoWatch: false,
+    customLaunchers: {
+      FirefoxHeadless: {
+        base: 'Firefox',
+        flags: ['-headless']
+      }
+    },
+    singleRun: true,
+    concurrency: Infinity,
+    detectBrowsers: {
+      usePhantomJS: false,
+      postDetection(availableBrowser) {
+        if (typeof process.env.TRAVIS_JOB_ID !== 'undefined' || availableBrowser.includes('Chrome')) {
+          return ['ChromeHeadless']
+        }
+
+        if (availableBrowser.includes('Firefox')) {
+          return ['FirefoxHeadless']
+        }
+
+        throw new Error('Please install Firefox or Chrome')
+      }
+    }
+  })
+}
diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json
@@ -6,7 +6,8 @@
   },
   "globals": {
     "sinon": false,
-    "Util": false
+    "Util": false,
+    "bootstrap": false
   },
   "parserOptions": {
     "ecmaVersion": 5,

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
@@ -544,15 +544,15 @@ $(function () {
     $dropdown.trigger('click')
   })
 
-  QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
-    assert.expect(2)
+  QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
+    assert.expect(4)
     var done = assert.async()
     var dropdownHTML = '<div class="tabs">' +
         '<div class="dropdown">' +
         '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
         '<div class="dropdown-menu">' +
-        '<a class="dropdown-item disabled" href="#">Disabled link</a>' +
-        '<a class="dropdown-item" href="#">Another link</a>' +
+        '<a id="item1" class="dropdown-item" href="#">A link</a>' +
+        '<a id="item2" class="dropdown-item" href="#">Another link</a>' +
         '</div>' +
         '</div>' +
         '</div>'
@@ -568,24 +568,32 @@ $(function () {
         $dropdown.trigger($.Event('keydown', {
           which: 40
         }))
-        $dropdown.trigger($.Event('keydown', {
+        assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
+
+        $(document.activeElement).trigger($.Event('keydown', {
           which: 40
         }))
-        assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused')
+        assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')
+
+        $(document.activeElement).trigger($.Event('keydown', {
+          which: 38
+        }))
+        assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
         done()
       })
     $dropdown.trigger('click')
   })
 
-  QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
-    assert.expect(4)
+  QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
+    assert.expect(3)
     var done = assert.async()
     var dropdownHTML = '<div class="tabs">' +
         '<div class="dropdown">' +
         '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
         '<div class="dropdown-menu">' +
-        '<a id="item1" class="dropdown-item" href="#">A link</a>' +
-        '<a id="item2" class="dropdown-item" href="#">Another link</a>' +
+        '<a class="dropdown-item disabled" href="#">Disabled link</a>' +
+        '<button class="dropdown-item" type="button" disabled>Disabled button</button>' +
+        '<a id="item1" class="dropdown-item" href="#">Another link</a>' +
         '</div>' +
         '</div>' +
         '</div>'
@@ -601,17 +609,11 @@ $(function () {
         $dropdown.trigger($.Event('keydown', {
           which: 40
         }))
-        assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
-
-        $(document.activeElement).trigger($.Event('keydown', {
+        assert.ok($(document.activeElement).is($('#item1')), '#item1 is focused')
+        $dropdown.trigger($.Event('keydown', {
           which: 40
         }))
-        assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')
-
-        $(document.activeElement).trigger($.Event('keydown', {
-          which: 38
-        }))
-        assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
+        assert.ok($(document.activeElement).is($('#item1')), '#item1 is still focused')
         done()
       })
     $dropdown.trigger('click')

diff --git a/js/tests/unit/util.js b/js/tests/unit/util.js
@@ -1,6 +1,8 @@
 $(function () {
   'use strict'
 
+  window.Util = typeof bootstrap !== 'undefined' ? bootstrap.Util : Util
+
   QUnit.module('util')
 
   QUnit.test('Util.getSelectorFromElement should return the correct element', function (assert) {

diff --git a/package.json b/package.json
@@ -47,6 +47,8 @@
     "js-test": "npm-run-all --parallel js-test-karma*",
     "js-test-karma": "karma start js/tests/karma.conf.js",
     "js-test-karma-old": "cross-env USE_OLD_JQUERY=true npm run js-test-karma",
+    "js-test-karma-bundle": "cross-env karma start js/tests/karma-bundle.conf.js",
+    "js-test-karma-bundle-old": "cross-env USE_OLD_JQUERY=true npm run js-test-karma-bundle",
     "js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & node build/saucelabs-unit-test.js",
     "coveralls": "shx cat js/coverage/lcov.info | coveralls",
     "docs": "npm-run-all --parallel css-docs js-docs --sequential docs-compile docs-lint",