Merge branch 'main' into js-docs-tweaks

.bundlewatch.config.json

@@ -22,15 +22,15 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "6.85 kB"
+      "maxSize": "7 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "25.5 kB"
+      "maxSize": "26 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "23.25 kB"
+      "maxSize": "23.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

.stylelintrc

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "stylelint-config-twbs-bootstrap/scss"
+    "stylelint-config-twbs-bootstrap"
   ],
   "rules": {
     "declaration-property-value-disallowed-list": {

build/postcss.config.js

@@ -1,19 +1,19 @@
 'use strict'
 
-module.exports = ctx => {
+const mapConfig = {
+  inline: false,
+  annotation: true,
+  sourcesContent: true
+}
+
+module.exports = context => {
   return {
-    map: ctx.file.dirname.includes('examples') ?
-      false :
-      {
-        inline: false,
-        annotation: true,
-        sourcesContent: true
-      },
+    map: context.file.dirname.includes('examples') ? false : mapConfig,
     plugins: {
       autoprefixer: {
         cascade: false
       },
-      rtlcss: ctx.env === 'RTL' ? {} : false
+      rtlcss: context.env === 'RTL'
     }
   }
 }

config.yml

@@ -1,7 +1,13 @@
 languageCode:           "en"
 title:                  "Bootstrap"
 baseURL:                "https://getbootstrap.com"
-enableInlineShortcodes: true
+
+security:
+  enableInlineShortcodes: true
+  funcs:
+    getenv:
+      - ^HUGO_
+      - NETLIFY
 
 markup:
   goldmark:

js/src/modal.js

@@ -369,7 +369,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     })
   })
 
-  // avoid conflict when clicking moddal toggler while another one is open
+  // avoid conflict when clicking modal toggler while another one is open
   const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
   if (allReadyOpen) {
     Modal.getInstance(allReadyOpen).hide()

js/src/popover.js

@@ -34,7 +34,7 @@ const Default = {
 
 const DefaultType = {
   ...Tooltip.DefaultType,
-  content: '(string|element|function)'
+  content: '(null|string|element|function)'
 }
 
 const Event = {

js/src/scrollspy.js

@@ -5,11 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import {
-  defineJQueryPlugin,
-  getElement,
-  getSelectorFromElement
-} from './util/index'
+import { defineJQueryPlugin, getElement, getSelectorFromElement } from './util/index'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
@@ -89,45 +85,34 @@ class ScrollSpy extends BaseComponent {
 
   // Public
   refresh() {
-    const autoMethod = this._scrollElement === this._scrollElement.window ?
-      METHOD_OFFSET :
-      METHOD_POSITION
-
-    const offsetMethod = this._config.method === 'auto' ?
-      autoMethod :
-      this._config.method
-
-    const offsetBase = offsetMethod === METHOD_POSITION ?
-      this._getScrollTop() :
-      0
-
     this._offsets = []
     this._targets = []
     this._scrollHeight = this._getScrollHeight()
 
+    const autoMethod = this._scrollElement === this._scrollElement.window ? METHOD_OFFSET : METHOD_POSITION
+    const offsetMethod = this._config.method === 'auto' ? autoMethod : this._config.method
+    const offsetBase = offsetMethod === METHOD_POSITION ? this._getScrollTop() : 0
     const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
       .map(element => {
         const targetSelector = getSelectorFromElement(element)
         const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
 
-        if (target) {
-          const targetBCR = target.getBoundingClientRect()
-          if (targetBCR.width || targetBCR.height) {
-            return [
-              Manipulator[offsetMethod](target).top + offsetBase,
-              targetSelector
-            ]
-          }
+        if (!target) {
+          return null
         }
 
-        return null
+        const targetBCR = target.getBoundingClientRect()
+
+        return targetBCR.width || targetBCR.height ?
+          [Manipulator[offsetMethod](target).top + offsetBase, targetSelector] :
+          null
       })
-        .filter(item => item)
+        .filter(Boolean)
         .sort((a, b) => a[0] - b[0])
 
-    for (const item of targets) {
-      this._offsets.push(item[0])
-      this._targets.push(item[1])
+    for (const target of targets) {
+      this._offsets.push(target[0])
+      this._targets.push(target[1])
     }
   }
 
@@ -188,7 +173,7 @@ class ScrollSpy extends BaseComponent {
       return
     }
 
-    for (let i = this._offsets.length; i--;) {
+    for (const i of this._offsets.keys()) {
       const isActiveTarget = this._activeTarget !== this._targets[i] &&
           scrollTop >= this._offsets[i] &&
           (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1])

js/src/tooltip.js

@@ -117,7 +117,7 @@ class Tooltip extends BaseComponent {
       throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
     }
 
-    super(element)
+    super(element, config)
 
     // Private
     this._isEnabled = true
@@ -128,7 +128,6 @@ class Tooltip extends BaseComponent {
     this._templateFactory = null
 
     // Protected
-    this._config = this._getConfig(config)
     this.tip = null
 
     this._setListeners()

js/tests/unit/popover.spec.js

@@ -1,4 +1,5 @@
 import Popover from '../../src/popover'
+import EventHandler from '../../src/dom/event-handler'
 import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
 
 describe('Popover', () => {
@@ -96,59 +97,74 @@ describe('Popover', () => {
       popover.show()
     })
 
-    it('should show a popover with just content', done => {
-      fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+    it('should show a popover with just content without having header', done => {
+      fixtureEl.innerHTML = '<a href="#">Nice link</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl, {
-        content: 'Popover content'
+        content: 'Some beautiful content :)'
       })
 
       popoverEl.addEventListener('shown.bs.popover', () => {
         const popoverDisplayed = document.querySelector('.popover')
 
         expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
+        expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
+        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
         done()
       })
 
       popover.show()
     })
 
-    it('should show a popover with just content without having header', done => {
+    it('should show a popover with just title without having body', done => {
       fixtureEl.innerHTML = '<a href="#">Nice link</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl, {
-        content: 'Some beautiful content :)'
+        title: 'Title which does not require content'
       })
 
       popoverEl.addEventListener('shown.bs.popover', () => {
         const popoverDisplayed = document.querySelector('.popover')
 
         expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
+        expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
+        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
         done()
       })
 
       popover.show()
     })
 
-    it('should show a popover with just title without having body', done => {
-      fixtureEl.innerHTML = '<a href="#">Nice link</a>'
+    it('should show a popover with just title without having body using data-attribute to get config', done => {
+      fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="Title which does not require content">Nice link</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl, {
-        title: 'Title, which does not require content'
-      })
+      const popover = new Popover(popoverEl)
 
       popoverEl.addEventListener('shown.bs.popover', () => {
         const popoverDisplayed = document.querySelector('.popover')
 
         expect(popoverDisplayed).not.toBeNull()
         expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title, which does not require content')
+        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
+        done()
+      })
+
+      popover.show()
+    })
+
+    it('should NOT show a popover without `title` and `content`', done => {
+      fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
+
+      const popoverEl = fixtureEl.querySelector('a')
+      const popover = new Popover(popoverEl, { animation: false })
+      spyOn(EventHandler, 'trigger').and.callThrough()
+
+      setTimeout(() => {
+        expect(EventHandler.trigger).not.toHaveBeenCalled()
+        expect(document.querySelector('.popover')).toBeNull()
         done()
       })