Merge branch 'v4-dev' into v4-dev-remove-shrink-to-fit

twbs · Dec 15, 2018 · 6918da9 · 6918da9
2 parents 1bc72d2 + b5b4f83
commit 6918da9
Show file tree

Hide file tree

Showing 53 changed files with 339 additions and 170 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 # Ignore docs files
 _gh_pages
 _site
-site/docs/4.1/dist/
+site/docs/**/dist/
 
 # Ignore ruby files
 .ruby-version

diff --git a/build/banner.js b/build/banner.js
@@ -1,8 +1,7 @@
 'use strict'
 
-const path  = require('path')
-const pkg   = require(path.resolve(__dirname, '../package.json'))
-const year  = new Date().getFullYear()
+const pkg = require('../package.json')
+const year = new Date().getFullYear()
 
 function getBanner(pluginFilename) {
   return `/*!

diff --git a/build/gcp-key.json.enc b/build/gcp-key.json.enc
diff --git a/build/generate-sri.js b/build/generate-sri.js
@@ -17,6 +17,8 @@ const fs = require('fs')
 const path = require('path')
 const sh = require('shelljs')
 
+const pkg = require('../package.json')
+
 sh.config.fatal = true
 
 const configFile = path.join(__dirname, '../_config.yml')
@@ -34,7 +36,7 @@ const files = [
     configPropertyName: 'js_hash'
   },
   {
-    file: 'site/docs/4.1/assets/js/vendor/jquery-slim.min.js',
+    file: `site/docs/${pkg.version_short}/assets/js/vendor/jquery-slim.min.js`,
     configPropertyName: 'jquery_hash'
   },
   {

diff --git a/build/svgo.yml b/build/svgo.yml
@@ -15,6 +15,10 @@ js2svg:
   indent: 2
 
 plugins:
+  # remove this with IE 11 is no longer supported
+  - addAttributesToSVGElement:
+      attributes:
+        - focusable: false
   - cleanupAttrs: true
   - cleanupEnableBackground: true
   - cleanupIDs: true
@@ -41,8 +45,9 @@ plugins:
   - removeHiddenElems: true
   - removeMetadata: true
   - removeNonInheritableGroupAttrs: true
-  - removeTitle: true
-  - removeUnknownsAndDefaults: true
+  - removeTitle: false
+  - removeUnknownsAndDefaults:
+      keepRoleAttr: true
   - removeUnusedNS: true
   - removeUselessDefs: true
   - removeUselessStrokeAndFill: true

diff --git a/js/tests/integration/bundle.js b/js/tests/integration/bundle.js
@@ -0,0 +1,8 @@
+import 'popper.js'
+import $ from 'jquery'
+import bootstrap from '../../../dist/js/bootstrap'
+
+$(() => {
+  $('#resultUID').text(bootstrap.Util.getUID('bs'))
+  $('[data-toggle="tooltip"]').tooltip()
+})
diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Hello, world!</h1>
+      <div class="col-12">
+        <div class="mt-5 mb-3">
+          <span>Util.getUID: </span>
+          <span id="resultUID"></span>
+        </div>
+        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+          Tooltip on top
+        </button>
+        <div id="carouselExampleCaptions" class="carousel slide mt-2" data-ride="carousel">
+          <ol class="carousel-indicators">
+            <li data-target="#carouselExampleCaptions" data-slide-to="0"></li>
+            <li data-target="#carouselExampleCaptions" data-slide-to="1" class="active"></li>
+            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
+          </ol>
+          <div class="carousel-inner">
+            <div class="carousel-item">
+              <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826cb%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826cb%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
+              <div class="carousel-caption d-none d-md-block">
+                <h5>First slide label</h5>
+                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+              </div>
+            </div>
+            <div class="carousel-item active">
+              <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826ce%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826ce%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.7%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
+              <div class="carousel-caption d-none d-md-block">
+                <h5>Second slide label</h5>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+              </div>
+            </div>
+            <div class="carousel-item">
+              <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide [800x400]" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_167a6f826cf%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_167a6f826cf%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22217.7%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
+              <div class="carousel-caption d-none d-md-block">
+                <h5>Third slide label</h5>
+                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+              </div>
+            </div>
+          </div>
+          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <script src="../../coverage/bundle.js"></script>
+  </body>
+</html>
diff --git a/js/tests/integration/rollup.bundle.js b/js/tests/integration/rollup.bundle.js
@@ -0,0 +1,20 @@
+/* eslint-env node */
+
+const resolve = require('rollup-plugin-node-resolve')
+const commonjs = require('rollup-plugin-commonjs')
+const babel = require('rollup-plugin-babel')
+
+module.exports = {
+  input: 'js/tests/integration/bundle.js',
+  output: {
+    file: 'js/coverage/bundle.js',
+    format: 'iife'
+  },
+  plugins: [
+    resolve(),
+    commonjs(),
+    babel({
+      exclude: 'node_modules/**'
+    })
+  ]
+}
diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
@@ -1,14 +1,16 @@
 /* eslint-env node */
 /* eslint no-process-env: 0 */
+
 const ip = require('ip')
+const pkg = require('../../package.json')
 const {
   browsers,
   browsersKeys
 } = require('./browsers')
 const path = require('path')
 const jsCoveragePath = path.resolve(__dirname, '../coverage')
 
-const jqueryFile = process.env.USE_OLD_JQUERY ? 'https://code.jquery.com/jquery-1.9.1.min.js' : 'site/docs/4.1/assets/js/vendor/jquery-slim.min.js'
+const jqueryFile = process.env.USE_OLD_JQUERY ? 'https://code.jquery.com/jquery-1.9.1.min.js' : `site/docs/${pkg.version_short}/assets/js/vendor/jquery-slim.min.js`
 const bundle = process.env.BUNDLE === 'true'
 const browserStack = process.env.BROWSER === 'true'
 
@@ -92,7 +94,7 @@ if (bundle) {
   conf.browsers = browsersKeys
   reporters.push('BrowserStack')
   files = files.concat([
-    'site/docs/4.1/assets/js/vendor/jquery-slim.min.js',
+    `site/docs/${pkg.version_short}/assets/js/vendor/jquery-slim.min.js`,
     'js/dist/util.js',
     'js/dist/tooltip.js',
     'js/dist/!(util|index|tooltip).js' // include all of our js/dist files except util.js, index.js and tooltip.js

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,11 +57,12 @@
     "js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
     "js-minify-docs": "cross-env-shell uglifyjs --mangle --comments \\\"/^!/\\\" --output site/docs/$npm_package_version_short/assets/js/docs.min.js site/docs/$npm_package_version_short/assets/js/vendor/anchor.min.js site/docs/$npm_package_version_short/assets/js/vendor/clipboard.min.js site/docs/$npm_package_version_short/assets/js/vendor/bs-custom-file-input.min.js \"site/docs/$npm_package_version_short/assets/js/src/*.js\"",
-    "js-test": "npm-run-all js-test-karma*",
+    "js-test": "npm-run-all js-test-karma* js-test-integration",
     "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 BUNDLE=true npm run js-test-karma",
     "js-test-karma-bundle-old": "cross-env BUNDLE=true USE_OLD_JQUERY=true npm run js-test-karma",
+    "js-test-integration": "rollup --config js/tests/integration/rollup.bundle.js",
     "js-test-cloud": "cross-env BROWSER=true npm run js-test-karma",
     "lint": "npm-run-all js-lint css-lint",
     "coveralls": "shx cat js/coverage/lcov.info | coveralls",
@@ -119,6 +120,7 @@
     "hammer-simulator": "0.0.1",
     "http-server": "^0.11.1",
     "ip": "^1.1.5",
+    "jquery": "^3.3.1",
     "karma": "^3.1.3",
     "karma-browserstack-launcher": "^1.3.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -135,6 +137,7 @@
     "qunit": "^2.8.0",
     "rollup": "^0.67.4",
     "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^4.0.0",
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",

diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -27,7 +27,7 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($close-font-size + $alert-padding-x * 2);
+  padding-right: $close-font-size + $alert-padding-x * 2;
 
   // Adjust close link position
   .close {

diff --git a/scss/_card.scss b/scss/_card.scss
@@ -43,7 +43,7 @@
 }
 
 .card-subtitle {
-  margin-top: -($card-spacer-y / 2);
+  margin-top: -$card-spacer-y / 2;
   margin-bottom: 0;
 }
 
@@ -99,15 +99,15 @@
 //
 
 .card-header-tabs {
-  margin-right: -($card-spacer-x / 2);
+  margin-right: -$card-spacer-x / 2;
   margin-bottom: -$card-spacer-y;
-  margin-left: -($card-spacer-x / 2);
+  margin-left: -$card-spacer-x / 2;
   border-bottom: 0;
 }
 
 .card-header-pills {
-  margin-right: -($card-spacer-x / 2);
-  margin-left: -($card-spacer-x / 2);
+  margin-right: -$card-spacer-x / 2;
+  margin-left: -$card-spacer-x / 2;
 }
 
 // Card image

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -187,9 +187,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: ((100% - $carousel-caption-width) / 2);
+  right: (100% - $carousel-caption-width) / 2;
   bottom: 20px;
-  left: ((100% - $carousel-caption-width) / 2);
+  left: (100% - $carousel-caption-width) / 2;
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;