Merge branch 'master' into master-xmr-docs-a11y

build/change-version.js

@@ -90,6 +90,7 @@ function main(args) {
   const newVersion = args[1]
   const EXCLUDED_DIRS = new Set([
     '.git',
+    '_gh_pages',
     'node_modules',
     'vendor'
   ])

js/src/dropdown/dropdown.js

@@ -83,15 +83,17 @@ const Default = {
   flip: true,
   boundary: 'scrollParent',
   reference: 'toggle',
-  display: 'dynamic'
+  display: 'dynamic',
+  popperConfig: null
 }
 
 const DefaultType = {
   offset: '(number|string|function)',
   flip: 'boolean',
   boundary: '(string|element)',
   reference: '(string|element)',
-  display: 'string'
+  display: 'string',
+  popperConfig: '(null|object)'
 }
 
 /**
@@ -359,7 +361,10 @@ class Dropdown {
       }
     }
 
-    return popperConfig
+    return {
+      ...popperConfig,
+      ...this._config.popperConfig
+    }
   }
 
   // Static

js/src/dropdown/dropdown.spec.js

@@ -99,6 +99,28 @@ describe('Dropdown', () => {
 
       expect(dropdown.toggle).toHaveBeenCalled()
     })
+
+    it('should allow to pass config to popper.js with `popperConfig`', () => {
+      fixtureEl.innerHTML = [
+        '<div class="dropdown">',
+        '  <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
+        '  <div class="dropdown-menu">',
+        '    <a class="dropdown-item" href="#">Secondary link</a>',
+        '  </div>',
+        '</div>'
+      ].join('')
+
+      const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]')
+      const dropdown = new Dropdown(btnDropdown, {
+        popperConfig: {
+          placement: 'left'
+        }
+      })
+
+      const popperConfig = dropdown._getPopperConfig()
+
+      expect(popperConfig.placement).toEqual('left')
+    })
   })
 
   describe('toggle', () => {

js/src/tooltip/tooltip.js

@@ -56,7 +56,8 @@ const DefaultType = {
   boundary: '(string|element)',
   sanitize: 'boolean',
   sanitizeFn: '(null|function)',
-  whiteList: 'object'
+  whiteList: 'object',
+  popperConfig: '(null|object)'
 }
 
 const AttachmentMap = {
@@ -84,7 +85,8 @@ const Default = {
   boundary: 'scrollParent',
   sanitize: true,
   sanitizeFn: null,
-  whiteList: DefaultWhitelist
+  whiteList: DefaultWhitelist,
+  popperConfig: null
 }
 
 const HoverState = {
@@ -129,10 +131,6 @@ const Trigger = {
 
 class Tooltip {
   constructor(element, config) {
-    /**
-     * Check for Popper dependency
-     * Popper - https://popper.js.org
-     */
     if (typeof Popper === 'undefined') {
       throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org)')
     }
@@ -247,7 +245,7 @@ class Tooltip {
     this._timeout = null
     this._hoverState = null
     this._activeTrigger = null
-    if (this._popper !== null) {
+    if (this._popper) {
       this._popper.destroy()
     }
 
@@ -301,27 +299,7 @@ class Tooltip {
 
       EventHandler.trigger(this.element, this.constructor.Event.INSERTED)
 
-      this._popper = new Popper(this.element, tip, {
-        placement: attachment,
-        modifiers: {
-          offset: this._getOffset(),
-          flip: {
-            behavior: this.config.fallbackPlacement
-          },
-          arrow: {
-            element: `.${this.constructor.NAME}-arrow`
-          },
-          preventOverflow: {
-            boundariesElement: this.config.boundary
-          }
-        },
-        onCreate: data => {
-          if (data.originalPlacement !== data.placement) {
-            this._handlePopperPlacementChange(data)
-          }
-        },
-        onUpdate: data => this._handlePopperPlacementChange(data)
-      })
+      this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
 
       tip.classList.add(ClassName.SHOW)
 
@@ -482,6 +460,35 @@ class Tooltip {
 
   // Private
 
+  _getPopperConfig(attachment) {
+    const defaultBsConfig = {
+      placement: attachment,
+      modifiers: {
+        offset: this._getOffset(),
+        flip: {
+          behavior: this.config.fallbackPlacement
+        },
+        arrow: {
+          element: `.${this.constructor.NAME}-arrow`
+        },
+        preventOverflow: {
+          boundariesElement: this.config.boundary
+        }
+      },
+      onCreate: data => {
+        if (data.originalPlacement !== data.placement) {
+          this._handlePopperPlacementChange(data)
+        }
+      },
+      onUpdate: data => this._handlePopperPlacementChange(data)
+    }
+
+    return {
+      ...defaultBsConfig,
+      ...this.config.popperConfig
+    }
+  }
+
   _addAttachmentClass(attachment) {
     this.getTipElement().classList.add(`${CLASS_PREFIX}-${attachment}`)
   }

js/src/tooltip/tooltip.spec.js

@@ -108,6 +108,21 @@ describe('Tooltip', () => {
 
       tooltipInContainerEl.click()
     })
+
+    it('should allow to pass config to popper.js with `popperConfig`', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip"/>'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl, {
+        popperConfig: {
+          placement: 'left'
+        }
+      })
+
+      const popperConfig = tooltip._getPopperConfig('top')
+
+      expect(popperConfig.placement).toEqual('left')
+    })
   })
 
   describe('enable', () => {

scss/_reboot.scss

@@ -505,9 +505,9 @@ progress {
 // Fix height of inputs with a type of datetime-local, date, month, week, or time
 // See https://github.com/twbs/bootstrap/issues/18842
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: 0;
+::-webkit-datetime-edit {
+  overflow: visible;
+  line-height: 0;
 }
 
 

scss/_variables.scss

@@ -489,6 +489,7 @@ $input-line-height-lg:                  $input-btn-line-height-lg !default;
 
 $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-200 !default;
+$input-disabled-border-color:           null !default;
 
 $input-color:                           $gray-700 !default;
 $input-border-color:                    $gray-400 !default;
@@ -581,23 +582,24 @@ $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
 
-$form-select-padding-y:           $input-padding-y !default;
-$form-select-padding-x:           $input-padding-x !default;
-$form-select-font-family:         $input-font-family !default;
-$form-select-font-size:           $input-font-size !default;
-$form-select-height:              $input-height !default;
-$form-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$form-select-font-weight:         $input-font-weight !default;
-$form-select-line-height:         $input-line-height !default;
-$form-select-color:               $input-color !default;
-$form-select-disabled-color:      $gray-600 !default;
-$form-select-bg:                  $input-bg !default;
-$form-select-disabled-bg:         $gray-200 !default;
-$form-select-bg-size:             16px 12px !default; // In pixels because image dimensions
-$form-select-indicator-color:     $gray-800 !default;
-$form-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
-
-$form-select-background:          no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$form-select-padding-y:             $input-padding-y !default;
+$form-select-padding-x:             $input-padding-x !default;
+$form-select-font-family:           $input-font-family !default;
+$form-select-font-size:             $input-font-size !default;
+$form-select-height:                $input-height !default;
+$form-select-indicator-padding:     1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$form-select-font-weight:           $input-font-weight !default;
+$form-select-line-height:           $input-line-height !default;
+$form-select-color:                 $input-color !default;
+$form-select-disabled-color:        $gray-600 !default;
+$form-select-bg:                    $input-bg !default;
+$form-select-disabled-bg:           $gray-200 !default;
+$form-select-disabled-border-color: $input-disabled-border-color !default;
+$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
+$form-select-indicator-color:       $gray-800 !default;
+$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+
+$form-select-background:            no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 
 $form-select-feedback-icon-padding-right: calc((1em + #{2 * $form-select-padding-y}) * 3 / 4 + #{$form-select-padding-x + $form-select-indicator-padding}) !default;
 $form-select-feedback-icon-position:      center right ($form-select-padding-x + $form-select-indicator-padding) !default;
@@ -645,6 +647,7 @@ $form-file-height:                $input-height !default;
 $form-file-focus-border-color:    $input-focus-border-color !default;
 $form-file-focus-box-shadow:      $input-focus-box-shadow !default;
 $form-file-disabled-bg:           $input-disabled-bg !default;
+$form-file-disabled-border-color: $input-disabled-border-color !default;
 
 $form-file-padding-y:             $input-padding-y !default;
 $form-file-padding-x:             $input-padding-x !default;

scss/forms/_form-control.scss

@@ -7,7 +7,7 @@
 .form-control {
   display: block;
   width: 100%;
-  height: $input-height;
+  min-height: $input-height;
   padding: $input-padding-y $input-padding-x;
   font-family: $input-font-family;
   @include font-size($input-font-size);
@@ -59,6 +59,7 @@
   &:disabled,
   &[readonly] {
     background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
@@ -95,21 +96,17 @@
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
 .form-control-sm {
-  height: $input-height-sm;
+  min-height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
   @include font-size($input-font-size-sm);
   line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
 .form-control-lg {
-  height: $input-height-lg;
+  min-height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
   @include font-size($input-font-size-lg);
   line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
-
-textarea.form-control {
-  height: auto;
-}

scss/forms/_form-file.scss

@@ -30,6 +30,7 @@
   // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
   &[disabled] ~ .form-file-label .form-file-text {
     background-color: $form-file-disabled-bg;
+    border-color: $form-file-disabled-border-color;
   }
 }
 

scss/forms/_form-select.scss

@@ -50,6 +50,7 @@
   &:disabled {
     color: $form-select-disabled-color;
     background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
   }
 
   // Hides the default caret in IE11

scss/forms/_input-group.scss

@@ -123,7 +123,10 @@
 // Remix the default form control sizing classes into new ones for easier
 // manipulation.
 
-.input-group-lg > .form-control:not(textarea),
+.input-group-lg > .form-control {
+  min-height: $input-height-lg;
+}
+
 .input-group-lg > .form-select {
   height: $input-height-lg;
 }
@@ -140,7 +143,10 @@
   @include border-radius($input-border-radius-lg);
 }
 
-.input-group-sm > .form-control:not(textarea),
+.input-group-sm > .form-control {
+  min-height: $input-height-sm;
+}
+
 .input-group-sm > .form-select {
   height: $input-height-sm;
 }

site/content/docs/4.3/components/dropdowns.md

@@ -855,6 +855,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>'dynamic'</td>
       <td>By default, we use Popper.js for dynamic positioning. Disable this with <code>static</code>.</td>
     </tr>
+    <tr>
+      <td>popperConfig</td>
+      <td>null | object</td>
+      <td>null</td>
+      <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td>
+    </tr>
   </tbody>
 </table>
 

site/content/docs/4.3/components/popovers.md

@@ -281,6 +281,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
       <td>null</td>
       <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
     </tr>
+    <tr>
+      <td>popperConfig</td>
+      <td>null | object</td>
+      <td>null</td>
+      <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td>
+    </tr>
   </tbody>
 </table>
 

site/content/docs/4.3/components/tooltips.md

@@ -278,6 +278,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
       <td>null</td>
       <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
     </tr>
+    <tr>
+      <td>popperConfig</td>
+      <td>null | object</td>
+      <td>null</td>
+      <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td>
+    </tr>
   </tbody>
 </table>