Merge branch 'twbs-v4-dev' into v4-dev

Gemfile

@@ -4,5 +4,5 @@ group :development, :test do
   gem 'jekyll', '~> 3.6.2'
   gem 'jekyll-redirect-from', '~> 0.13.0'
   gem 'jekyll-sitemap', '~> 1.1.1'
-  gem 'jekyll-toc', '~> 0.5.0.rc'
+  gem 'jekyll-toc', '~> 0.5.1'
 end

Gemfile.lock

@@ -24,7 +24,7 @@ GEM
       sass (~> 3.4)
     jekyll-sitemap (1.1.1)
       jekyll (~> 3.3)
-    jekyll-toc (0.5.0.rc)
+    jekyll-toc (0.5.1)
       nokogiri (~> 1.6)
     jekyll-watch (1.5.1)
       listen (~> 3.0)
@@ -63,7 +63,7 @@ DEPENDENCIES
   jekyll (~> 3.6.2)
   jekyll-redirect-from (~> 0.13.0)
   jekyll-sitemap (~> 1.1.1)
-  jekyll-toc (~> 0.5.0.rc)
+  jekyll-toc (~> 0.5.1)
 
 BUNDLED WITH
    1.16.1

_data/browser-bugs.yml

@@ -248,6 +248,16 @@
   origin: >
     Bootstrap#15298
 
+-
+  browser: >
+    Chrome
+  summary: >
+    Significant performance hit for dynamic SVGs with text depending on the number of fonts in `font-family`.
+  upstream_bug: >
+    Chromium#781344
+  origin: >
+    Bootstrap#24673
+
 -
   browser: >
     Safari

_data/browser-features.yml

@@ -18,16 +18,6 @@
   origin: >
     Bootstrap#19984
 
--
-  browser: >
-    Edge
-  summary: >
-    Implement [sticky positioning](http://html5please.com/#position:sticky) from CSS Positioned Layout Level 3
-  upstream_bug: >
-    UserVoice#6263621
-  origin: >
-    Bootstrap#17021
-
 -
   browser: >
     Edge

_includes/scripts.html

@@ -9,6 +9,10 @@
   <script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
 {%- endif -%}
 
+{%- if page.layout == "docs" -%}
+<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+{%- endif -%}
+
 {%- if site.github -%}
   <script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
 {%- else -%}
@@ -19,36 +23,3 @@
   <script src="{{ site.baseurl }}/assets/js/src/ie-emulation-modes-warning.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
 {%- endif -%}
-
-{%- if page.layout == "docs" -%}
-<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-<script>
-  docsearch({
-    apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
-    indexName: 'bootstrap-v4',
-    inputSelector: '#search-input',
-    handleSelected: function (input, event, suggestion) {
-      var url = suggestion.url;
-      url = suggestion.isLvl1 ? url.split('#')[0]: url;
-      // If it's a title we remove the anchor so it does not jump.
-      window.location.href = url;
-    },
-    transformData: function (hits) {
-      return hits.map(function (hit) {
-        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
-        return hit;
-      });
-    },
-    debug: false // Set debug to true if you want to inspect the dropdown
-  });
-</script>
-{%- endif -%}
-
-<script>
-  Holder.addTheme('gray', {
-    bg: '#777',
-    fg: 'rgba(255,255,255,.75)',
-    font: 'Helvetica',
-    fontweight: 'normal'
-  });
-</script>

assets/js/src/application.js

@@ -10,7 +10,7 @@
  * details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global Clipboard, anchors */
+/* global Clipboard: false, anchors: false, Holder: false */
 
 (function ($) {
   'use strict'
@@ -54,7 +54,7 @@
     })
 
     // Insert copy to clipboard button before .highlight
-    $('.highlight').each(function () {
+    $('figure.highlight, div.highlight').each(function () {
       var btnHtml = '<div class="bd-clipboard"><button class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
       $(this).before(btnHtml)
       $('.btn-clipboard')
@@ -101,5 +101,35 @@
     }
     anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
     $('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
+
+    // Search
+    if (window.docsearch) {
+      window.docsearch({
+        apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
+        indexName: 'bootstrap-v4',
+        inputSelector: '#search-input',
+        handleSelected: function (input, event, suggestion) {
+          var url = suggestion.url
+          url = suggestion.isLvl1 ? url.split('#')[0] : url
+          // If it's a title we remove the anchor so it does not jump.
+          window.location.href = url
+        },
+        transformData: function (hits) {
+          return hits.map(function (hit) {
+            hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0')
+            return hit
+          })
+        },
+        debug: false // Set debug to true if you want to inspect the dropdown
+      })
+    }
+
+    // Holder
+    Holder.addTheme('gray', {
+      bg: '#777',
+      fg: 'rgba(255,255,255,.75)',
+      font: 'Helvetica',
+      fontweight: 'normal'
+    })
   })
 }(jQuery))

build/rollup.config.js

@@ -36,16 +36,16 @@ if (BUNDLE) {
 module.exports = {
   input: path.resolve(__dirname, '../js/src/index.js'),
   output: {
-    file: path.resolve(__dirname, `../dist/js/${fileDest}`),
-    format: 'umd'
-  },
-  name: 'bootstrap',
-  external,
-  globals,
-  plugins,
-  banner: `/*!
+    banner: `/*!
   * Bootstrap v${pkg.version} (${pkg.homepage})
   * Copyright 2011-${year} ${pkg.author}
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-  */`
+  */`,
+    file: path.resolve(__dirname, `../dist/js/${fileDest}`),
+    format: 'umd',
+    globals,
+    name: 'bootstrap'
+  },
+  external,
+  plugins
 }

docs/4.0/components/forms.md

@@ -928,7 +928,7 @@ Our example forms show native textual `<input>`s above, but form validation styl
   <div class="custom-file">
     <input type="file" class="custom-file-input" id="validatedCustomFile" required>
     <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
-    <div class="invalid-feedback">Example invalid custom file feedback</div>  
+    <div class="invalid-feedback">Example invalid custom file feedback</div>
   </div>
 </form>
 {% endexample %}
@@ -1081,19 +1081,13 @@ We hide the default file `<input>` via `opacity` and instead style the `<label>`
 
 #### Translating or customizing the strings
 
-The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for easy translation of the "Browse" and "Choose file..." text into other languages. Simply override or add entries to the `$custom-file-text` SCSS variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):
+The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for translation of the "Browse" text into other languages. Override or add entries to the `$custom-file-text` Sass variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):
 
 {% highlight scss %}
 $custom-file-text: (
-  placeholder: (
-    en: "Choose file...",
-    es: "Seleccionar archivo..."
-  ),
-  button-label: (
-    en: "Browse",
-    es: "Navegar"
-  )
+  en: "Browse",
+  es: "Navegar"
 );
 {% endhighlight %}
 
-You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.
+You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.

docs/4.0/components/navbar.md

@@ -239,7 +239,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 <nav class="navbar navbar-light bg-light">
   <form class="form-inline">
     <button class="btn btn-outline-success" type="button">Main button</button>
-    <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
+    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
   </form>
 </nav>
 {% endexample %}

docs/4.0/examples/album/index.html

@@ -65,41 +65,41 @@ <h1 class="jumbotron-heading">Album example</h1>
 
           <div class="row">
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
           </div>
@@ -127,12 +127,5 @@ <h1 class="jumbotron-heading">Album example</h1>
     <script src="../../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../../../dist/js/bootstrap.min.js"></script>
     <script src="../../../../assets/js/vendor/holder.min.js"></script>
-    <script>
-      Holder.addTheme('thumb', {
-        bg: '#55595c',
-        fg: '#eceeef',
-        text: 'Thumbnail'
-      });
-    </script>
   </body>
 </html>

docs/4.0/extend/icons.md

@@ -13,7 +13,6 @@ We've tested and used these icon sets ourselves.
 
 - [Iconic](https://useiconic.com/open/)
 - [Octicons](https://octicons.github.com/)
-- [Entypo](http://www.entypo.com/)
 
 ## More options
 

docs/4.0/getting-started/theming.md

@@ -93,7 +93,9 @@ Repeat as necessary for any variable in Bootstrap, including the global options
 
 Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended.
 
-For example, to modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
+Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making _removing_ items from a map slightly more difficult.
+
+To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
 
 {% highlight scss %}
 $theme-colors: (
@@ -110,6 +112,12 @@ $theme-colors: (
 );
 {% endhighlight %}
 
+To remove colors from `$theme-colors`, or any other map, use `map-remove`:
+
+{% highlight scss %}
+$theme-colors: map-remove($theme-colors, "success", "info", "danger");
+{% endhighlight %}
+
 ### Functions
 
 Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We've included three functions for getting values from the color maps:

docs/4.0/layout/overview.md

@@ -166,14 +166,14 @@ These higher values start at an arbitrary number, high and specific enough to id
 
 We don't encourage customization of these individual values; should you change one, you likely need to change them all.
 
-```scss
+{% highlight scss %}
 $zindex-dropdown:          1000 !default;
 $zindex-sticky:            1020 !default;
 $zindex-fixed:             1030 !default;
 $zindex-modal-backdrop:    1040 !default;
 $zindex-modal:             1050 !default;
 $zindex-popover:           1060 !default;
 $zindex-tooltip:           1070 !default;
-```
+{% endhighlight %}
 
 To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.

docs/4.0/migration.md

@@ -27,6 +27,8 @@ While Beta 2 saw the bulk of our breaking changes during the beta phase, but we
 
 - Removed `.col-form-legend` in favor of a slightly improved `.col-form-label`. This way `.col-form-label-sm` and `.col-form-label-lg` can be used on `<legend>` elements with ease.
 
+- Custom file inputs received a change to their `$custom-file-text` Sass variable. It's no longer a nested Sass map and now only powers one string—the `Browse` button as that is now the only pseudo-element generated from our Sass. The `Choose file` text now comes from the `.custom-file-label`.
+
 ### Input groups
 
 - Input group addons are now specific to their placement relative to an input. We've dropped `.input-group-addon` and `.input-group-btn` for two new classes, `.input-group-prepend` and `.input-group-append`. You must explicitly use an append or a prepend now, simplifying much of our CSS.

js/src/dropdown.js

@@ -377,6 +377,7 @@ const Dropdown = (($) => {
       return parent || element.parentNode
     }
 
+    // eslint-disable-next-line complexity
     static _dataApiKeydownHandler(event) {
       // If not input/textarea:
       //  - And not a key in REGEXP_KEYDOWN => not a dropdown command

nuget/bootstrap.nuspec

@@ -24,5 +24,6 @@
   <files>
     <file src="dist\css\*.*" target="content\Content" />
     <file src="dist\js\bootstrap*.js" target="content\Scripts" />
+    <file src="dist\js\bootstrap*.js.map" target="content\Scripts" />
   </files>
 </package>

nuget/bootstrap.sass.nuspec

@@ -24,5 +24,6 @@
   <files>
     <file src="scss\**\*.scss" target="content\Content\bootstrap" />
     <file src="dist\js\bootstrap*.js" target="content\Scripts" />
+    <file src="dist\js\bootstrap*.js.map" target="content\Scripts" />
   </files>
 </package>