diff --git a/.eslintrc.json b/.eslintrc.json index 680642ac6..d5a54d46b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -43,7 +43,6 @@ ], "unicorn/consistent-function-scoping": "off", "unicorn/explicit-length-check": "off", - "unicorn/import-index": "off", "unicorn/no-array-callback-reference": "off", "unicorn/no-for-loop": "off", "unicorn/no-null": "off", diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml index 917ccc188..ea0a25704 100644 --- a/.github/workflows/browserstack.yml +++ b/.github/workflows/browserstack.yml @@ -4,7 +4,6 @@ on: push: env: - CI: true FORCE_COLOR: 2 NODE: 14.x @@ -29,8 +28,8 @@ jobs: path: ~/.npm key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} restore-keys: | - ${{ runner.OS }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} - ${{ runner.OS }}-node-v${{ env.NODE }}- + ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} + ${{ runner.os }}-node-v${{ env.NODE }}- - name: Install npm dependencies run: npm ci diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml index 03b3a2b52..989991f0d 100644 --- a/.github/workflows/bundlewatch.yml +++ b/.github/workflows/bundlewatch.yml @@ -7,7 +7,6 @@ on: pull_request: env: - CI: true FORCE_COLOR: 2 NODE: 14.x @@ -30,8 +29,8 @@ jobs: path: ~/.npm key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} restore-keys: | - ${{ runner.OS }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} - ${{ runner.OS }}-node-v${{ env.NODE }}- + ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} + ${{ runner.os }}-node-v${{ env.NODE }}- - name: Install npm dependencies run: npm ci diff --git a/.github/workflows/css.yml b/.github/workflows/css.yml index 7fb947005..4463d52f4 100644 --- a/.github/workflows/css.yml +++ b/.github/workflows/css.yml @@ -7,7 +7,6 @@ on: pull_request: env: - CI: true FORCE_COLOR: 2 NODE: 14.x @@ -30,8 +29,8 @@ jobs: path: ~/.npm key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} restore-keys: | - ${{ runner.OS }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} - ${{ runner.OS }}-node-v${{ env.NODE }}- + ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} + ${{ runner.os }}-node-v${{ env.NODE }}- - name: Install npm dependencies run: npm ci diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index d2529cbfe..cda6f7748 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -7,7 +7,6 @@ on: pull_request: env: - CI: true FORCE_COLOR: 2 NODE: 14.x @@ -32,8 +31,8 @@ jobs: path: ~/.npm key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} restore-keys: | - ${{ runner.OS }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} - ${{ runner.OS }}-node-v${{ env.NODE }}- + ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} + ${{ runner.os }}-node-v${{ env.NODE }}- - name: Install npm dependencies run: npm ci diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml index 09c110fc8..c56a2dfdd 100644 --- a/.github/workflows/js.yml +++ b/.github/workflows/js.yml @@ -7,7 +7,6 @@ on: pull_request: env: - CI: true FORCE_COLOR: 2 jobs: @@ -35,8 +34,8 @@ jobs: path: ~/.npm key: ${{ runner.os }}-node-v${{ matrix.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}} restore-keys: | - ${{ runner.OS }}-node-v${{ matrix.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} - ${{ runner.OS }}-node-v${{ matrix.node }}- + ${{ runner.os }}-node-v${{ matrix.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} + ${{ runner.os }}-node-v${{ matrix.node }}- - name: Install npm dependencies run: npm ci diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 30c434984..e7a55083d 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -7,7 +7,6 @@ on: pull_request: env: - CI: true FORCE_COLOR: 2 NODE: 14.x @@ -30,8 +29,8 @@ jobs: path: ~/.npm key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} restore-keys: | - ${{ runner.OS }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} - ${{ runner.OS }}-node-v${{ env.NODE }}- + ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} + ${{ runner.os }}-node-v${{ env.NODE }}- - name: Install npm dependencies run: npm ci diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml index 9e9cffa40..285d4bcc8 100644 --- a/.github/workflows/node-sass.yml +++ b/.github/workflows/node-sass.yml @@ -7,7 +7,6 @@ on: pull_request: env: - CI: true FORCE_COLOR: 2 NODE: 14.x diff --git a/.gitignore b/.gitignore index 6208c57d7..0a0f88d15 100644 --- a/.gitignore +++ b/.gitignore @@ -1,19 +1,8 @@ # Ignore docs files /_gh_pages/ -# This is the old Jekyll docs dist folder; -# keeping it here so that when we switch branches it doesn't show up -/site/docs/**/dist/ -# Jekyll's cache folder; keeping it for the same reason as above -/site/.jekyll-cache/ # Hugo resources folder /resources/ -# Ignore ruby/bundler files; -# keeping them here so that when we switch branches they don't show up -/.bundle/ -/vendor/ -/.ruby-version - # Numerous always-ignore extensions *.diff *.err diff --git a/.stylelintrc b/.stylelintrc index 1c9ee1811..c068d30b5 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -3,6 +3,10 @@ "stylelint-config-twbs-bootstrap/scss" ], "rules": { + "declaration-property-value-disallowed-list": { + "border": "none", + "outline": "none" + }, "function-disallowed-list": [ "calc", "lighten", diff --git a/build/build-plugins.js b/build/build-plugins.js index 80a010a7f..d1930b855 100644 --- a/build/build-plugins.js +++ b/build/build-plugins.js @@ -29,6 +29,7 @@ const bsPlugins = { Manipulator: path.resolve(__dirname, '../js/src/dom/manipulator.js'), SelectorEngine: path.resolve(__dirname, '../js/src/dom/selector-engine.js'), Alert: path.resolve(__dirname, '../js/src/alert.js'), + Base: path.resolve(__dirname, '../js/src/base-component.js'), Button: path.resolve(__dirname, '../js/src/button.js'), Carousel: path.resolve(__dirname, '../js/src/carousel.js'), Collapse: path.resolve(__dirname, '../js/src/collapse.js'), @@ -44,11 +45,13 @@ const bsPlugins = { const defaultPluginConfig = { external: [ bsPlugins.Data, + bsPlugins.Base, bsPlugins.EventHandler, bsPlugins.SelectorEngine ], globals: { [bsPlugins.Data]: 'Data', + [bsPlugins.Base]: 'Base', [bsPlugins.EventHandler]: 'EventHandler', [bsPlugins.SelectorEngine]: 'SelectorEngine' } @@ -73,6 +76,7 @@ const getConfigByPluginKey = pluginKey => { } if ( + pluginKey === 'Base' || pluginKey === 'Button' || pluginKey === 'Carousel' || pluginKey === 'Collapse' || @@ -112,11 +116,13 @@ const getConfigByPluginKey = pluginKey => { return { external: [ bsPlugins.Data, + bsPlugins.Base, bsPlugins.EventHandler, bsPlugins.Manipulator ], globals: { [bsPlugins.Data]: 'Data', + [bsPlugins.Base]: 'Base', [bsPlugins.EventHandler]: 'EventHandler', [bsPlugins.Manipulator]: 'Manipulator' } diff --git a/build/zip-examples.js b/build/zip-examples.js index 898e5860f..e5eb56f22 100644 --- a/build/zip-examples.js +++ b/build/zip-examples.js @@ -15,34 +15,64 @@ const sh = require('shelljs') const pkg = require('../package.json') const versionShort = pkg.config.version_short -const folderName = `bootstrap-${pkg.version}-examples` +const distFolder = `bootstrap-${pkg.version}-examples` +const rootDocsDir = '_gh_pages' +const docsDir = `${rootDocsDir}/docs/${versionShort}/` + +// these are the files we need in the examples +const cssFiles = [ + 'bootstrap.min.css', + 'bootstrap.min.css.map', + 'bootstrap.rtl.min.css', + 'bootstrap.rtl.min.css.map' +] +const jsFiles = [ + 'bootstrap.bundle.min.js', + 'bootstrap.bundle.min.js.map' +] +const imgFiles = [ + 'bootstrap-logo.svg', + 'bootstrap-logo-white.svg' +] sh.config.fatal = true -if (!sh.test('-d', '_gh_pages')) { - throw new Error('The "_gh_pages" folder does not exist, did you forget building the docs?') +if (!sh.test('-d', rootDocsDir)) { + throw new Error(`The "${rootDocsDir}" folder does not exist, did you forget building the docs?`) } // switch to the root dir sh.cd(path.join(__dirname, '..')) // remove any previously created folder with the same name -sh.rm('-rf', folderName) -// create any folders so that `cp` works -sh.mkdir('-p', folderName) -sh.mkdir('-p', `${folderName}/assets/brand/`) +sh.rm('-rf', distFolder) -sh.cp('-Rf', `_gh_pages/docs/${versionShort}/examples/*`, folderName) -sh.cp('-Rf', `_gh_pages/docs/${versionShort}/dist/`, `${folderName}/assets/`) -// also copy the two brand images we use in the examples -sh.cp('-f', [ - `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-logo.svg`, - `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-logo-white.svg` -], `${folderName}/assets/brand/`) -sh.rm(`${folderName}/index.html`) +// create any folders so that `cp` works +sh.mkdir('-p', [ + distFolder, + `${distFolder}/assets/brand/`, + `${distFolder}/assets/dist/css/`, + `${distFolder}/assets/dist/js/` +]) + +sh.cp('-Rf', `${docsDir}/examples/*`, distFolder) + +cssFiles.forEach(file => { + sh.cp('-f', `${docsDir}/dist/css/${file}`, `${distFolder}/assets/dist/css/`) +}) + +jsFiles.forEach(file => { + sh.cp('-f', `${docsDir}/dist/js/${file}`, `${distFolder}/assets/dist/js/`) +}) + +imgFiles.forEach(file => { + sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`) +}) + +sh.rm(`${distFolder}/index.html`) // get all examples' HTML files -sh.find(`${folderName}/**/*.html`).forEach(file => { +sh.find(`${distFolder}/**/*.html`).forEach(file => { const fileContents = sh.cat(file) .toString() .replace(new RegExp(`"/docs/${versionShort}/`, 'g'), '"../') @@ -54,7 +84,7 @@ sh.find(`${folderName}/**/*.html`).forEach(file => { }) // create the zip file -sh.exec(`zip -r9 "${folderName}.zip" "${folderName}"`, { fatal: true }) +sh.exec(`zip -r9 "${distFolder}.zip" "${distFolder}"`) // remove the folder we created -sh.rm('-rf', folderName) +sh.rm('-rf', distFolder) diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js index 2ee13bafc..e3c685530 100644 --- a/js/src/dom/event-handler.js +++ b/js/src/dom/event-handler.js @@ -112,6 +112,7 @@ function bootstrapDelegationHandler(element, selector, fn) { event.delegateTarget = target if (handler.oneOff) { + // eslint-disable-next-line unicorn/consistent-destructuring EventHandler.off(element, event.type, fn) } diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 008294e9b..bada537c9 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -263,7 +263,7 @@ class Dropdown extends BaseComponent { typeof config.reference.getBoundingClientRect !== 'function' ) { // Popper virtual elements require a getBoundingClientRect method - throw new Error(`${NAME}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`) + throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`) } return config diff --git a/js/src/modal.js b/js/src/modal.js index 87c22943a..fe1b5a4c6 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -590,7 +590,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( data = new Modal(target, config) } - data.show(this) + data.toggle(this) }) /** diff --git a/js/src/util/index.js b/js/src/util/index.js index 9ccad1cbb..22d0a578b 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -111,15 +111,14 @@ const typeCheckConfig = (componentName, config, configTypes) => { Object.keys(configTypes).forEach(property => { const expectedTypes = configTypes[property] const value = config[property] - const valueType = value && isElement(value) ? - 'element' : - toType(value) + const valueType = value && isElement(value) ? 'element' : toType(value) if (!new RegExp(expectedTypes).test(valueType)) { - throw new Error( + throw new TypeError( `${componentName.toUpperCase()}: ` + `Option "${property}" provided type "${valueType}" ` + - `but expected type "${expectedTypes}".`) + `but expected type "${expectedTypes}".` + ) } }) } diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js index d908dd661..ce3d455a6 100644 --- a/js/src/util/sanitizer.js +++ b/js/src/util/sanitizer.js @@ -37,7 +37,7 @@ const allowedAttribute = (attr, allowedAttributeList) => { if (allowedAttributeList.includes(attrName)) { if (uriAttrs.has(attrName)) { - return Boolean(attr.nodeValue.match(SAFE_URL_PATTERN) || attr.nodeValue.match(DATA_URL_PATTERN)) + return Boolean(SAFE_URL_PATTERN.test(attr.nodeValue) || DATA_URL_PATTERN.test(attr.nodeValue)) } return true @@ -47,7 +47,7 @@ const allowedAttribute = (attr, allowedAttributeList) => { // Check if a regular expression validates the attribute. for (let i = 0, len = regExp.length; i < len; i++) { - if (attrName.match(regExp[i])) { + if (regExp[i].test(attrName)) { return true } } diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js index 38c7003bb..cd4946525 100644 --- a/js/tests/karma.conf.js +++ b/js/tests/karma.conf.js @@ -1,5 +1,7 @@ /* eslint-env node */ +'use strict' + const path = require('path') const ip = require('ip') const { babel } = require('@rollup/plugin-babel') @@ -12,10 +14,11 @@ const { browsersKeys } = require('./browsers') -const { env } = process -const browserStack = env.BROWSER === 'true' -const debug = env.DEBUG === 'true' -const jQueryTest = env.JQUERY === 'true' +const ENV = process.env +const BROWSERSTACK = Boolean(ENV.BROWSERSTACK) +const DEBUG = Boolean(ENV.DEBUG) +const JQUERY_TEST = Boolean(ENV.JQUERY) + const frameworks = [ 'jasmine' ] @@ -30,16 +33,16 @@ const reporters = ['dots'] const detectBrowsers = { usePhantomJS: false, postDetection(availableBrowser) { - if (env.CI === true || availableBrowser.includes('Chrome')) { - return debug ? ['Chrome'] : ['ChromeHeadless'] + if (ENV.CI === true || availableBrowser.includes('Chrome')) { + return DEBUG ? ['Chrome'] : ['ChromeHeadless'] } if (availableBrowser.includes('Chromium')) { - return debug ? ['Chromium'] : ['ChromiumHeadless'] + return DEBUG ? ['Chromium'] : ['ChromiumHeadless'] } if (availableBrowser.includes('Firefox')) { - return debug ? ['Firefox'] : ['FirefoxHeadless'] + return DEBUG ? ['Firefox'] : ['FirefoxHeadless'] } throw new Error('Please install Chrome, Chromium or Firefox') @@ -67,7 +70,7 @@ const conf = { 'node_modules/hammer-simulator/index.js', { pattern: 'js/tests/unit/**/!(jquery).spec.js', - watched: !browserStack + watched: !BROWSERSTACK } ], preprocessors: { @@ -101,11 +104,11 @@ const conf = { } } -if (browserStack) { +if (BROWSERSTACK) { conf.hostname = ip.address() conf.browserStack = { - username: env.BROWSER_STACK_USERNAME, - accessKey: env.BROWSER_STACK_ACCESS_KEY, + username: ENV.BROWSER_STACK_USERNAME, + accessKey: ENV.BROWSER_STACK_ACCESS_KEY, build: `bootstrap-${new Date().toISOString()}`, project: 'Bootstrap', retryLimit: 2 @@ -114,7 +117,7 @@ if (browserStack) { conf.customLaunchers = browsers conf.browsers = browsersKeys reporters.push('BrowserStack', 'kjhtml') -} else if (jQueryTest) { +} else if (JQUERY_TEST) { frameworks.push('detectBrowsers') plugins.push( 'karma-chrome-launcher', @@ -155,7 +158,7 @@ if (browserStack) { } } - if (debug) { + if (DEBUG) { conf.hostname = ip.address() plugins.push('karma-jasmine-html-reporter') reporters.push('kjhtml') @@ -169,7 +172,6 @@ conf.plugins = plugins conf.reporters = reporters module.exports = karmaConfig => { - // possible values: karmaConfig.LOG_DISABLE || karmaConfig.LOG_ERROR || karmaConfig.LOG_WARN || karmaConfig.LOG_INFO || karmaConfig.LOG_DEBUG - conf.logLevel = karmaConfig.LOG_ERROR || karmaConfig.LOG_WARN + conf.logLevel = karmaConfig.LOG_ERROR karmaConfig.set(conf) } diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 3d2a515b1..6c98f20d1 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -1136,11 +1136,9 @@ describe('Carousel', () => { jQueryMock.fn.carousel = Carousel.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.carousel.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) }) diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index 4af21e13f..ff493cf51 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -819,11 +819,9 @@ describe('Collapse', () => { jQueryMock.fn.collapse = Collapse.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.collapse.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) }) diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index ba1d0f443..cc4139603 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -393,13 +393,13 @@ describe('Dropdown', () => { expect(() => new Dropdown(btnDropdown, { reference: {} - })).toThrow() + })).toThrowError(TypeError, 'DROPDOWN: Option "reference" provided type "object" without a required "getBoundingClientRect" method.') expect(() => new Dropdown(btnDropdown, { reference: { getBoundingClientRect: 'not-a-function' } - })).toThrow() + })).toThrowError(TypeError, 'DROPDOWN: Option "reference" provided type "object" without a required "getBoundingClientRect" method.') // use onFirstUpdate as Poppers internal update is executed async const dropdown = new Dropdown(btnDropdown, { @@ -1557,11 +1557,9 @@ describe('Dropdown', () => { jQueryMock.fn.dropdown = Dropdown.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.dropdown.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) }) diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index f645e9892..29c90bbf1 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -870,7 +870,7 @@ describe('Modal', () => { }) describe('data-api', () => { - it('should open modal', done => { + it('should toggle modal', done => { fixtureEl.innerHTML = [ '', '' @@ -885,6 +885,15 @@ describe('Modal', () => { expect(modalEl.getAttribute('aria-hidden')).toEqual(null) expect(modalEl.style.display).toEqual('block') expect(document.querySelector('.modal-backdrop')).toBeDefined() + setTimeout(() => trigger.click(), 10) + }) + + modalEl.addEventListener('hidden.bs.modal', () => { + expect(modalEl.getAttribute('aria-modal')).toEqual(null) + expect(modalEl.getAttribute('role')).toEqual(null) + expect(modalEl.getAttribute('aria-hidden')).toEqual('true') + expect(modalEl.style.display).toEqual('none') + expect(document.querySelector('.modal-backdrop')).toEqual(null) done() }) @@ -1061,11 +1070,9 @@ describe('Modal', () => { jQueryMock.fn.modal = Modal.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.modal.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) it('should call show method', () => { diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index 3c04e7ac1..e5c235e2a 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -206,11 +206,9 @@ describe('Popover', () => { jQueryMock.fn.popover = Popover.jQueryInterface jQueryMock.elements = [popoverEl] - try { + expect(() => { jQueryMock.fn.popover.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) it('should should call show method', () => { diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index eab9183aa..0d175aafa 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -625,11 +625,9 @@ describe('ScrollSpy', () => { jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.scrollspy.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) }) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 67a85b2e4..d098ab027 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -397,11 +397,9 @@ describe('Tab', () => { jQueryMock.fn.tab = Tab.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.tab.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) }) diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js index cc873d1fe..2920eb2ef 100644 --- a/js/tests/unit/toast.spec.js +++ b/js/tests/unit/toast.spec.js @@ -368,11 +368,9 @@ describe('Toast', () => { jQueryMock.fn.toast = Toast.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.toast.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) }) diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index 8224c3437..213dcc91f 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -1207,11 +1207,9 @@ describe('Tooltip', () => { jQueryMock.fn.tooltip = Tooltip.jQueryInterface jQueryMock.elements = [div] - try { + expect(() => { jQueryMock.fn.tooltip.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } + }).toThrowError(TypeError, `No method named "${action}"`) }) }) }) diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index d4b09bf77..00ab44f1e 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -212,7 +212,7 @@ describe('Util', () => { expect(() => { Util.typeCheckConfig(namePlugin, config, defaultType) - }).toThrow(new Error('COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')) + }).toThrowError(TypeError, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".') }) it('should return null stringified when null is passed', () => { diff --git a/package-lock.json b/package-lock.json index c87b740e9..531a1d0e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3802,17 +3802,17 @@ } }, "eslint-plugin-unicorn": { - "version": "25.0.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-25.0.1.tgz", - "integrity": "sha512-MEyEWoyou/qhJH6rEER9YHACtCsQT+eewc6Fdxbi2eiTvsGrBR8JZMA6qaeof3oMQeRxOpaERoBKzU7R5c4A/w==", + "version": "26.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-26.0.1.tgz", + "integrity": "sha512-SWgF9sIVY74zqkkSN2dclSCqRfocWSUGD0haC0NX2oRfmdp9p8dQvJYkYSQePaCyssPUE/pqpsIEEZNTh8crUA==", "dev": true, "requires": { "ci-info": "^2.0.0", "clean-regexp": "^1.0.0", "eslint-ast-utils": "^1.1.0", - "eslint-template-visitor": "^2.2.1", + "eslint-template-visitor": "^2.2.2", "eslint-utils": "^2.1.0", - "import-modules": "^2.0.0", + "import-modules": "^2.1.0", "lodash": "^4.17.20", "pluralize": "^8.0.0", "read-pkg-up": "^7.0.1", @@ -9014,9 +9014,9 @@ "dev": true }, "sass": { - "version": "1.32.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.2.tgz", - "integrity": "sha512-u1pUuzqwz3SAgvHSWp1k0mRhX82b2DdlVnP6UIetQPZtYbuJUDaPQhZE12jyjB7vYeOScfz9WPsZJB6Rpk7heA==", + "version": "1.32.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.4.tgz", + "integrity": "sha512-N0BT0PI/t3+gD8jKa83zJJUb7ssfQnRRfqN+GIErokW6U4guBpfYl8qYB+OFLEho+QvnV5ZH1R9qhUC/Z2Ch9w==", "dev": true, "requires": { "chokidar": ">=2.0.0 <4.0.0" diff --git a/package.json b/package.json index 0c3a36e35..495af9c34 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "js-test-karma": "karma start js/tests/karma.conf.js", "js-test-integration-bundle": "rollup --config js/tests/integration/rollup.bundle.js", "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js", - "js-test-cloud": "cross-env BROWSER=true npm run js-test-karma", + "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma", "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma", "lint": "npm-run-all --parallel js-lint css-lint lockfile-lint", "docs": "npm-run-all docs-build docs-lint", @@ -115,7 +115,7 @@ "eslint": "^7.17.0", "eslint-config-xo": "^0.34.0", "eslint-plugin-import": "^2.22.1", - "eslint-plugin-unicorn": "^25.0.1", + "eslint-plugin-unicorn": "^26.0.1", "find-unused-sass-variables": "^3.1.0", "glob": "^7.1.6", "hammer-simulator": "0.0.1", @@ -140,7 +140,7 @@ "rollup": "^2.36.1", "rollup-plugin-istanbul": "^3.0.0", "rtlcss": "^3.0.0", - "sass": "^1.32.2", + "sass": "^1.32.4", "shelljs": "^0.8.4", "stylelint": "^13.8.0", "stylelint-config-twbs-bootstrap": "^2.1.0", diff --git a/scss/_close.scss b/scss/_close.scss index db5d02787..32a0f68cc 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -22,7 +22,7 @@ } &:focus { - outline: none; + outline: 0; box-shadow: $btn-close-focus-shadow; opacity: $btn-close-focus-opacity; } diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 7a1cf7354..5c533d7f5 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -47,4 +47,5 @@ .toast-body { padding: $toast-padding-x; // apply to both vertical and horizontal + word-wrap: break-word; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 3fc03a08e..3d677728a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -938,7 +938,7 @@ $dropdown-box-shadow: $box-shadow !default; $dropdown-link-color: $gray-900 !default; $dropdown-link-hover-color: shade-color($gray-900, 10%) !default; -$dropdown-link-hover-bg: $gray-100 !default; +$dropdown-link-hover-bg: $gray-200 !default; $dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-bg: $component-active-bg !default; diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index b603a7bc3..ae1d841d5 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -12,7 +12,7 @@ appearance: none; &:focus { - outline: none; + outline: 0; // Pseudo-elements must be split across multiple rulesets to have an effect. // No box-shadow() mixin for focus accessibility. diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index 8979aa3cd..8377ff423 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -1,7 +1,7 @@ .bd-subnavbar { // The position and z-index are needed for the dropdown to stay on top of the content position: relative; - z-index: $bd-navbar-zindex; + z-index: $zindex-sticky; background-color: rgba($white, .95); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 6e1ae2efd..110600260 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -11,6 +11,3 @@ $bd-warning: #f0ad4e; $bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,"); $sidebar-collapse-icon: url("data:image/svg+xml,"); - -// Higher than core's $zindex-tooltip, which is 1070 -$bd-navbar-zindex: 1080; diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index b6f7e3893..bd7bcae9c 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -43,7 +43,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi ### Translucent -Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast. +Toasts are slightly translucent, too, so they blend over whatever they might appear over. {{< example class="bg-dark" >}}