chore: sync with twbs (#1)

* Make styling of grouped option buttons class-based

Referencing twbs#23728, styling grouped radio and checkbox buttons should not require the data-toggle attribute.

* Fix installing deps in our webpack docs

* Fix nested cards on card group (twbs#24766)

* Update popper.js to v1.12.9. (twbs#24797)

* Don't run postcss for `dist/css/*.min.css` files. (twbs#24676)

* Change the text color to dark on bg color warning examples (twbs#24805)

* Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js (twbs#24825)

* Remove the unused assets/js/ie10-viewport-bug-workaround.js.

* Combine ie-emulation-modes-warning.js with docs.min.js.

* Typos in grid.md (twbs#24828)

Fixed typos in offsetting section of grid.md

* Fix dropup example code

* Update devDependencies. (twbs#24829)

* Add support for fractional viewport widths (zoom/high-dpi displays) (twbs#24299)

* Change breakpoint  max- calculation to fractional values
* Update docs to reflect fractional max-width breakpoint values
* Add fractional max-width to offcanvas example
* Add documentation and SCSS comment for fractional viewport support

* Add a simple script to generate SRI hashes for our assets. (twbs#24814)

* Allow us to run our unit test on differents jquery version

* Run karma tests in parallel.

* Update typography docs (twbs#24863)

* closes twbs#24450

* Rewrite custom form check backgrounds (twbs#24697)

* Rewrite custom form check backgrounds

Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.

Fixes twbs#24598

* restore default vars

* Revamp custom check and radio backgrounds

Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.

* remove now unused mixin

* mention change in migration docs

* lets the centered modal have any height (twbs#24803)

* Custom select updates (twbs#24699)

* Add support for size attribute on custom selects

* Add large custom select, document it and the small variant

* fix custom select focus state

* fix custom file input focus styles

* remove empty line

* Update package.json. (twbs#24582)

1. Use the same jQuery version in jspm
2. Update the files to only include the source and dist folders

* Use Jekyll's `smartify` filter when possible. (twbs#24866)

* Darken outline hover color to match default button hover (twbs#24150)

* Fix Issue twbs#24144

Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button.

* Fix Issue twbs#24144

Filled button on hover should utilize the same color-yiq mixin so that theme buttons match

* default values, fix mixin

* rename it

* document it

* add migration note

* fixes twbs#24728

* Remove unused CSS. (twbs#24872)

* tab.js: do not remove fade class if there's no initial active pane

* Restore currently unused variables (twbs#24891)

* Replace lint-vars.sh with a Node.js script. (twbs#24860)

Also, include it in the `css` npm script since it's instant.

* Fix docs horizontal scrollbar (twbs#24878)

* Fix docs horizontal scrollbar in Components > Modal

* Add overflow to docs example class

* Drop the handleUpdate() variant

While I understand the variant covers the "get a particular plugin instance" case from http://getbootstrap.com/docs/4.0/getting-started/javascript/#programmatic-api it seems weird that we do it here but not everywhere else in the docs (randomly checking other pages, we seem to stick to the documented methods as written on those pages). As this isn't properly explained as is, and as it adds nothing (more of a preference for authors), it would be easier to just drop the variant and stick with the documented method as outlined later on in the same page (avoids having to go off on a "why should you use this instead of that" tangent here).

* Combine path and remove variable used in one place. (twbs#24873)

* Update devDependencies and gems. (twbs#24876)

* Override padding on radio input label (twbs#24899)

We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close twbs#24844.

* Update README.md (twbs#24912)

* Work around Travis failures.

Note that we should revert this when the issue is fixed.

* Revert the Travis workaround. (twbs#24926)

The issue has been fixed.

Gemfile.lock

@@ -28,7 +28,7 @@ GEM
       nokogiri (~> 1.6)
     jekyll-watch (1.5.0)
       listen (~> 3.0, < 3.1)
-    kramdown (1.15.0)
+    kramdown (1.16.1)
     liquid (4.0.0)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)

_config.yml

@@ -72,5 +72,5 @@ cdn:
   js_hash:          "sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
   jquery:           "https://code.jquery.com/jquery-3.2.1.slim.min.js"
   jquery_hash:      "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
-  popper:           "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.7/umd/popper.min.js"
-  popper_hash:      "sha384-TUSpaPr16YQQOdRqTlO+JgktHTijOcvPtWvOyfo7F6Usp/LtNvvmKLpZ+NSgVdjA"
+  popper:           "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+  popper_hash:      "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"

_includes/callout-info-mediaqueries-breakpoints.md

@@ -0,0 +1,3 @@
+{% callout info %}
+Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
+{% endcallout %}

_includes/header.html

@@ -1,14 +1,14 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<meta name="description" content="{{ page.description | default: site.description }}">
+<meta name="description" content="{{ page.description | default: site.description | smartify }}">
 <meta name="author" content="{{ site.authors }}">
 <meta name="generator" content="Jekyll v{{ jekyll.version }}">
 
 <title>
   {%- if page.title -%}
-    {{ page.title }} · {{ site.title }}
+    {{ page.title | smartify }} · {{ site.title | smartify }}
   {%- else -%}
-    {{ site.title }} · {{ site.description }}
+    {{ site.title | smartify }} · {{ site.description | smartify }}
   {%- endif -%}
 </title>
 

_includes/scripts.html

@@ -16,11 +16,10 @@
   <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/ie-emulation-modes-warning.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
 {%- endif -%}
 
-<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
-
 {%- if page.layout == "docs" -%}
 <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
 <script>

_includes/social.html

@@ -2,14 +2,14 @@
 <meta name="twitter:card" content="{% if page.title %}summary{% else %}summary_large_image{% endif %}">
 <meta name="twitter:site" content="@{{ site.twitter }}">
 <meta name="twitter:creator" content="@{{ site.twitter }}">
-<meta name="twitter:title" content="{{ page.title | default: site.title }}">
-<meta name="twitter:description" content="{{ page.description | default: site.description }}">
+<meta name="twitter:title" content="{{ page.title | default: site.title | smartify }}">
+<meta name="twitter:description" content="{{ page.description | default: site.description | smartify }}">
 <meta name="twitter:image" content="{% if page.title %}{{ site.url | append: site.social_logo_path }}{% else %}{{ site.url | append: site.social_image_path }}{% endif %}">
 
 <!-- Facebook -->
 <meta property="og:url" content="{{ site.url | append: page.url }}">
-<meta property="og:title" content="{{ page.title | default: site.title }}">
-<meta property="og:description" content="{{ page.description | default: site.description }}">
+<meta property="og:title" content="{{ page.title | default: site.title | smartify }}">
+<meta property="og:description" content="{{ page.description | default: site.description | smartify }}">
 <meta property="og:type" content="website">
 <meta property="og:image" content="{{ site.url | replace: 'https://', 'http://' | append: site.social_image_path }}">
 <meta property="og:image:secure_url" content="{{ site.url | append: site.social_image_path }}">

_layouts/docs.html

@@ -25,8 +25,8 @@
         {% endif %}
 
         <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">{{ page.title }}</h1>
-          <p class="bd-lead">{{ page.description }}</p>
+          <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+          <p class="bd-lead">{{ page.description | smartify }}</p>
           {% include ads.html %}
           {{ content }}
         </main>

_layouts/simple.html

@@ -4,8 +4,8 @@
 
 <div class="container my-5">
   <main class="bd-content" role="main">
-    <h1 class="bd-title" id="content">{{ page.title }}</h1>
-    <p class="bd-lead">{{ page.description }}</p>
+    <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+    <p class="bd-lead">{{ page.description | smartify }}</p>
     {% include ads.html %}
     {{ content }}
   </main>

assets/js/ie-emulation-modes-warning.js → assets/js/src/ie-emulation-modes-warning.js

@@ -1,13 +1,7 @@
 // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
 // IT'S JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++
-/*!
- * Copyright 2014-2015 The Bootstrap Authors
- * Copyright 2014-2015 Twitter, Inc.
- *
- * Licensed under the Creative Commons Attribution 3.0 Unported License. For
- * details, see https://creativecommons.org/licenses/by/3.0/.
- */
+
 // Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
 (function () {
   'use strict'

assets/scss/_component-examples.scss

@@ -118,6 +118,7 @@
   position: relative;
   padding: 1rem;
   margin: 1rem (-$grid-gutter-width / 2);
+  overflow: auto;
   border: solid #f7f7f9;
   border-width: .2rem 0 0;
   @include clearfix();

assets/scss/_masthead.scss

@@ -41,11 +41,6 @@
   }
 }
 
-.bd-pretext {
-  overflow: hidden;
-  resize: none;
-}
-
 .half-rule {
   width: 6rem;
   margin: 2.5rem 0;

assets/scss/docs.scss

@@ -32,15 +32,12 @@
 @import "variables";
 @import "nav";
 @import "masthead";
-@import "featured-sites";
 @import "ads";
 @import "content";
-@import "page-header";
 @import "skiplink";
 @import "sidebar";
 @import "footer";
 @import "component-examples";
-@import "responsive-tests";
 @import "buttons";
 @import "callouts";
 @import "examples";

build/change-version.js

@@ -14,8 +14,8 @@
 const fs = require('fs')
 const path = require('path')
 const sh = require('shelljs')
+
 sh.config.fatal = true
-const sed = sh.sed
 
 // Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
 RegExp.quote = (string) => string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
@@ -58,7 +58,7 @@ function replaceRecursively(directory, excludedDirectories, allowedExtensions, o
   replacement = RegExp.quoteReplacement(replacement)
   const updateFile = !DRY_RUN ? (filepath) => {
     if (allowedExtensions.has(path.parse(filepath).ext)) {
-      sed('-i', original, replacement, filepath)
+      sh.sed('-i', original, replacement, filepath)
     }
   } : (filepath) => {
     if (allowedExtensions.has(path.parse(filepath).ext)) {

build/generate-sri.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to generate SRI hashes for use in our docs.
+ * Remember to use the same vendor files as the CDN ones,
+ * otherwise the hashes won't match!
+ *
+ * Copyright 2017 The Bootstrap Authors
+ * Copyright 2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+const sriToolbox = require('sri-toolbox')
+const sh = require('shelljs')
+
+sh.config.fatal = true
+
+const configFile = path.join(__dirname, '../_config.yml')
+
+// Array of objects which holds the files to generate SRI hashes for.
+// `file` is the path from the root folder
+// `configPropertyName` is the _config.yml variable's name of the file
+const files = [
+  {
+    file: 'dist/css/bootstrap.min.css',
+    configPropertyName: 'css_hash'
+  },
+  {
+    file: 'dist/js/bootstrap.min.js',
+    configPropertyName: 'js_hash'
+  },
+  {
+    file: 'assets/js/vendor/jquery-slim.min.js',
+    configPropertyName: 'jquery_hash'
+  },
+  {
+    file: 'assets/js/vendor/popper.min.js',
+    configPropertyName: 'popper_hash'
+  }
+]
+
+files.forEach((file) => {
+  fs.readFile(file.file, 'utf8', (err, data) => {
+    if (err) {
+      throw err
+    }
+
+    const integrity = sriToolbox.generate({
+      algorithms: ['sha384']
+    }, data)
+
+    console.log(`${file.configPropertyName}: ${integrity}`)
+
+    sh.sed('-i', new RegExp(`(\\s${file.configPropertyName}:\\s+"|')(\\S+)("|')`), '$1' + integrity + '$3', configFile)
+  })
+})