From 59943ab868aedc23d1ea90bc2cd142e0589ea58d Mon Sep 17 00:00:00 2001 From: Bruno Baguette <1922257+Levure@users.noreply.github.com> Date: Wed, 17 Jun 2020 19:43:54 +0200 Subject: [PATCH 01/19] Several typo fixes (#31077) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Typo fix : thesse ⮞ these * Several typo fixes verical ⮞ vertical availble ⮞ available thesse ⮞ these --- site/content/docs/5.0/layout/grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index d79056c8bf0d..ec8c35ce8171 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -44,7 +44,7 @@ Breaking it down, here's how the grid system comes together: - **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `col-4` spans four). `width`s are set in percentages so you always have the same relative sizing. -- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, verical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also availble to remove gutters. +- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters. - **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. @@ -61,7 +61,7 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br - Extra large (xl) - Extra extra large (xxl) -As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across thesse breakpoints: +As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints: From d2aefa7d94d62fd637163d96d3054af2a35b3383 Mon Sep 17 00:00:00 2001 From: Bruno Baguette <1922257+Levure@users.noreply.github.com> Date: Wed, 17 Jun 2020 18:37:12 +0200 Subject: [PATCH 02/19] =?UTF-8?q?Typo=20fix=20:=20ocassions=20=E2=AE=9E=20?= =?UTF-8?q?occasions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/content/docs/5.0/layout/columns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md index b7c6c9cae808..b9f54f2e1a7d 100644 --- a/site/content/docs/5.0/layout/columns.md +++ b/site/content/docs/5.0/layout/columns.md @@ -14,7 +14,7 @@ toc: true - **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level]({{< docsref "/layout/grid#row-columns" >}}). You choose how columns grow, shrink, or otherwise change. -- **When building grid layouts, all content goes in columns.** The hierarchy of Bootstrap's grid goes from [container]({{< docsref "/layout/containers" >}}) to row to column to your content. On rare ocassions, you may combine content and column, but be aware there can be unintended consequences. +- **When building grid layouts, all content goes in columns.** The hierarchy of Bootstrap's grid goes from [container]({{< docsref "/layout/containers" >}}) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences. - **Bootstrap includes predefined classes for creating fast, responsive layouts.** With [six breakpoints]({{< docsref "/layout/breakpoints" >}}) and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish. From 588a029abc16cc7a54acbbd6ead9c3c0d72f686b Mon Sep 17 00:00:00 2001 From: Bruno Baguette <1922257+Levure@users.noreply.github.com> Date: Wed, 17 Jun 2020 18:53:11 +0200 Subject: [PATCH 03/19] =?UTF-8?q?Typo=20fix=20:=20individiual=20=E2=AE=9E?= =?UTF-8?q?=20individual?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/content/docs/5.0/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index e018990eb780..a4df01fe3c7c 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -97,7 +97,7 @@ Changes to Reboot, typography, tables, and more. ## Typography - Removed `$display-*` variables for a new `$display-font-sizes` Sass map. -- Removed individiual `$display-*-weight` variables for a single `$display-font-weight`. +- Removed individual `$display-*-weight` variables for a single `$display-font-weight`. - Added two new `.display-*` heading styles, `.display-5` and `.display-6`. - Resized existing display headings for a slightly more consistent set of `font-size`s. From f4e6932611a15ba4738f1cf519e5bf24c15ae8e3 Mon Sep 17 00:00:00 2001 From: Bruno Baguette <1922257+Levure@users.noreply.github.com> Date: Wed, 17 Jun 2020 18:59:00 +0200 Subject: [PATCH 04/19] =?UTF-8?q?Typo=20fix=20:=20depedending=20=E2=AE=9E?= =?UTF-8?q?=20depending?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/content/docs/5.0/content/tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md index 156a68e90d13..f68e79418f75 100644 --- a/site/content/docs/5.0/content/tables.md +++ b/site/content/docs/5.0/content/tables.md @@ -215,7 +215,7 @@ For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hovera - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. - Then we add a gradient on the table cells with `background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));` to layer on top of any specified `background-color`. Since `--bs-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default. - When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. -- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depedending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. +- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. - Text and border colors are generated the same way, and their colors are inherited by default. Behind the scenes it looks like this: From e6ce44e5e21031b9396272a343cc3c228ebf4fa9 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 17 Jun 2020 18:48:31 +0100 Subject: [PATCH 05/19] Docs: tweak accessibility section - point to WCAG 2.1 rather than 2.0 - soften/expand the language around color contrast, since the situation has definitely improved in v5 but we still can't guarantee all possible permutations of colors/opacities/etc - minor language/stylistic tweaks - add further resources --- .../docs/5.0/getting-started/accessibility.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index fef29ee9d4f8..d9076872ae74 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -8,9 +8,9 @@ toc: true Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box. -## Overview and Limitations +## Overview and limitations -The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [WCAG 2.0](https://www.w3.org/TR/WCAG20/) (A/AA/AAA), [Section 508](https://www.section508.gov/) and similar accessibility standards and requirements. +The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [WCAG 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/) and similar accessibility standards and requirements. ### Structural markup @@ -24,7 +24,7 @@ Because Bootstrap's components are purposely designed to be fairly generic, auth ### Color contrast -Most colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to *insufficient* color contrast (below the recommended [WCAG 2.0 color contrast ratio of 4.5:1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios. +Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG21/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios. ### Visually hidden content @@ -37,7 +37,7 @@ Content which should be visually hidden, but remain accessible to assistive tech

{{< /highlight >}} -For visually hidden interactive controls, such as traditional "skip" links, use the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, since Bootstrap 5 the `.sr-only-focusable` class may not be used in combination with the `.sr-only` class.** +For visually hidden interactive controls, such as traditional "skip" links, use the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, since Bootstrap 5 `.sr-only-focusable` is a standalone class, and must not be used in combination with the `.sr-only` class.** {{< highlight html >}} Skip to main content @@ -49,9 +49,11 @@ Bootstrap includes support for the [`prefers-reduced-motion` media feature](http ## Additional resources -- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/) +- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) - [The A11Y Project](https://a11yproject.com/) - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility) - [Tenon.io Accessibility Checker](https://tenon.io/) - [Color Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/) - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) +- [Microsoft Accessibility Insights](https://accessibilityinsights.io/) +- [Deque Axe testing tools](https://www.deque.com/axe/) From ffbdb08474cac2b721099e48ebf6a756c1ee30ec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 17 Jun 2020 11:37:05 -0700 Subject: [PATCH 06/19] Add oxford commas --- site/content/docs/5.0/getting-started/accessibility.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md index d9076872ae74..027ce8a21412 100644 --- a/site/content/docs/5.0/getting-started/accessibility.md +++ b/site/content/docs/5.0/getting-started/accessibility.md @@ -10,7 +10,7 @@ Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, ## Overview and limitations -The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [WCAG 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/) and similar accessibility standards and requirements. +The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [WCAG 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements. ### Structural markup @@ -18,7 +18,7 @@ Bootstrap's styling and layout can be applied to a wide range of markup structur ### Interactive components -Bootstrap's interactive components—such as modal dialogs, dropdown menus and custom tooltips—are designed to work for touch, mouse and keyboard users. Through the use of relevant [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers). +Bootstrap's interactive components—such as modal dialogs, dropdown menus, and custom tooltips—are designed to work for touch, mouse, and keyboard users. Through the use of relevant [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers). Because Bootstrap's components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation. From d80a9fc553b609f94c1a24a5c310fd5d17c63c41 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Thu, 18 Jun 2020 09:02:44 +0200 Subject: [PATCH 07/19] Fix tooltip when hovering a children element (delegateTarget) (#30928) Co-authored-by: XhmikosR --- js/src/dom/event-handler.js | 2 ++ js/src/tooltip.js | 18 ++++++++-------- js/tests/unit/tooltip.spec.js | 22 ++++++++++++++++++++ site/content/docs/5.0/components/tooltips.md | 11 ++++++++++ 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js index b76677858885..5fea03018288 100644 --- a/js/src/dom/event-handler.js +++ b/js/src/dom/event-handler.js @@ -94,6 +94,7 @@ function getEvent(element) { function bootstrapHandler(element, fn) { return function handler(event) { + event.delegateTarget = element if (handler.oneOff) { EventHandler.off(element, event.type, fn) } @@ -109,6 +110,7 @@ function bootstrapDelegationHandler(element, selector, fn) { for (let { target } = event; target && target !== this; target = target.parentNode) { for (let i = domElements.length; i--;) { if (domElements[i] === target) { + event.delegateTarget = target if (handler.oneOff) { EventHandler.off(element, event.type, fn) } diff --git a/js/src/tooltip.js b/js/src/tooltip.js index d76679a6a09b..64011796de39 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -194,14 +194,14 @@ class Tooltip { if (event) { const dataKey = this.constructor.DATA_KEY - let context = Data.getData(event.target, dataKey) + let context = Data.getData(event.delegateTarget, dataKey) if (!context) { context = new this.constructor( - event.target, + event.delegateTarget, this._getDelegateConfig() ) - Data.setData(event.target, dataKey, context) + Data.setData(event.delegateTarget, dataKey, context) } context._activeTrigger.click = !context._activeTrigger.click @@ -587,14 +587,14 @@ class Tooltip { _enter(event, context) { const dataKey = this.constructor.DATA_KEY - context = context || Data.getData(event.target, dataKey) + context = context || Data.getData(event.delegateTarget, dataKey) if (!context) { context = new this.constructor( - event.target, + event.delegateTarget, this._getDelegateConfig() ) - Data.setData(event.target, dataKey, context) + Data.setData(event.delegateTarget, dataKey, context) } if (event) { @@ -627,14 +627,14 @@ class Tooltip { _leave(event, context) { const dataKey = this.constructor.DATA_KEY - context = context || Data.getData(event.target, dataKey) + context = context || Data.getData(event.delegateTarget, dataKey) if (!context) { context = new this.constructor( - event.target, + event.delegateTarget, this._getDelegateConfig() ) - Data.setData(event.target, dataKey, context) + Data.setData(event.delegateTarget, dataKey, context) } if (event) { diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index e713fe560202..0a98096a405e 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -324,6 +324,28 @@ describe('Tooltip', () => { tooltip.show() }) + it('should show a tooltip when hovering a children element', done => { + fixtureEl.innerHTML = + '' + + '' + + '' + + '' + + '' + + '' + + const tooltipEl = fixtureEl.querySelector('a') + const tooltip = new Tooltip(tooltipEl) + + spyOn(tooltip, 'show') + + tooltipEl.querySelector('rect').dispatchEvent(createEvent('mouseover', { bubbles: true })) + + setTimeout(() => { + expect(tooltip.show).toHaveBeenCalled() + done() + }, 0) + }) + it('should show a tooltip on mobile', done => { fixtureEl.innerHTML = '' diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 384be8781873..19d95e0281d7 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -81,6 +81,17 @@ And with custom HTML added: {{< /highlight >}} +With an SVG: + +
+ + + + + + +
+ ## Usage The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. From 3a2741507eb97fc34cd9159b2c77e28e45ef8625 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 18 Jun 2020 10:32:59 +0300 Subject: [PATCH 08/19] Update devDependencies (#31086) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * rollup ^2.16.1 → ^2.17.0 * sirv-cli ^1.0.0 → ^1.0.1 * stylelint ^13.6.0 → ^13.6.1 --- package-lock.json | 100 ++++++++++++++++++---------------------------- package.json | 6 +-- 2 files changed, 42 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index de9955b9247b..c290e0a3ff5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2470,9 +2470,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001081", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001081.tgz", - "integrity": "sha512-iZdh3lu09jsUtLE6Bp8NAbJskco4Y3UDtkR3GTCJGsbMowBU5IWDFF79sV2ws7lSqTzWyKazxam2thasHymENQ==", + "version": "1.0.30001084", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz", + "integrity": "sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==", "dev": true }, "caseless": { @@ -3535,9 +3535,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.469", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.469.tgz", - "integrity": "sha512-O9JM6ZsFhS0uy0S2Y3G8EoNfqio3srdxCuwuJh8tKgQKa6rf7je/xQ3TIoiEaEtpf2/qFFLAGt/xB4MjuUZqRw==", + "version": "1.3.476", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.476.tgz", + "integrity": "sha512-oJUEW++zbjB5C0BIAH0ksGH92S/yxPauJ1smD2M9DmEqB4SeU4MmJg6avyDGW+qusBDHoqy+e5Vq+fGhArP9Iw==", "dev": true }, "emoji-regex": { @@ -3672,22 +3672,22 @@ } }, "es-abstract": { - "version": "1.17.5", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz", - "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==", + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz", + "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==", "dev": true, "requires": { "es-to-primitive": "^1.2.1", "function-bind": "^1.1.1", "has": "^1.0.3", "has-symbols": "^1.0.1", - "is-callable": "^1.1.5", - "is-regex": "^1.0.5", + "is-callable": "^1.2.0", + "is-regex": "^1.1.0", "object-inspect": "^1.7.0", "object-keys": "^1.1.1", "object.assign": "^4.1.0", - "string.prototype.trimleft": "^2.1.1", - "string.prototype.trimright": "^2.1.1" + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" } }, "es-to-primitive": { @@ -3889,9 +3889,9 @@ } }, "eslint-import-resolver-node": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz", - "integrity": "sha512-b8crLDo0M5RSe5YG8Pu2DYBj71tSB6OvXkfzwbJU2w7y8P4/yo0MyF8jU26IEuEuHF2K5/gcAJE3LhQGqBBbVg==", + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz", + "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==", "dev": true, "requires": { "debug": "^2.6.9", @@ -4022,9 +4022,9 @@ } }, "eslint-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz", - "integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz", + "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==", "dev": true, "requires": { "eslint-visitor-keys": "^1.1.0" @@ -4374,9 +4374,9 @@ "dev": true }, "fast-glob": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.2.tgz", - "integrity": "sha512-UDV82o4uQyljznxwMxyVRJgZZt3O5wENYojjzbaGEGZgeOxkLFf+V4cnUD+krzb2F72E18RhamkMZ7AdeggF7A==", + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz", + "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==", "dev": true, "requires": { "@nodelib/fs.stat": "^2.0.2", @@ -5594,9 +5594,9 @@ "dev": true }, "inquirer": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz", - "integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.2.0.tgz", + "integrity": "sha512-E0c4rPwr9ByePfNlTIB8z51kK1s2n6jrHuJeEHENl/sbq2G/S1auvibgEwNR4uSyiU+PiYHqSwsgGiXjG8p5ZQ==", "dev": true, "requires": { "ansi-escapes": "^4.2.1", @@ -9824,9 +9824,9 @@ } }, "rollup": { - "version": "2.16.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.16.1.tgz", - "integrity": "sha512-UYupMcbFtoWLB6ZtL4hPZNUTlkXjJfGT33Mmhz3hYLNmRj/cOvX2B26ZxDQuEpwtLdcyyyraBGQ7EfzmMJnXXg==", + "version": "2.17.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.17.0.tgz", + "integrity": "sha512-4Um68vKyyTLzT+EWClgc+nyxSlunlmx8wgCO16RDicwxvccnyBHguoNqxPaJL/YPAdvuAJkqaFPf/BfDojzEZA==", "dev": true, "requires": { "fsevents": "~2.1.2" @@ -10345,9 +10345,9 @@ } }, "sirv": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.0.tgz", - "integrity": "sha512-NYxkb52SaeZWHH4cKwmY5N+Qv/oAVZHOUNuV+N7ohuJrlEYyQ0NdnR9s6+Ki2UFfYE4hjThzDCG9oU/qSNRdYA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.1.tgz", + "integrity": "sha512-5prQxJFybxXkI6fGffgiJgnbMmcdGWd2K5NH+yw4zF5GIZCb2PdCb9+1qr1Y+ntNJsIRvJ6hnR+NlI9vdrRL2Q==", "dev": true, "requires": { "@polka/url": "^1.0.0-next.9", @@ -10356,9 +10356,9 @@ } }, "sirv-cli": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.0.tgz", - "integrity": "sha512-84PvgoXKbUmyO3i4kHFSrXuerD2iGIcewBgdmghwjeK1nRACJ8gG/vOH1qZdBDJMZGBC8miHs7erNFwv0mXE1A==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.1.tgz", + "integrity": "sha512-Hu/9NlWea8tBCyvNoABIsvUEOUhaH5gCMw1dz58sxDwr9vuc+KsBZ+aNMvxqUyewXopsLeqHXqJ4521i/FjAtg==", "dev": true, "requires": { "console-clear": "^1.1.0", @@ -10367,7 +10367,7 @@ "local-access": "^1.0.1", "sade": "^1.6.0", "semiver": "^1.0.0", - "sirv": "^1.0.0", + "sirv": "^1.0.1", "tinydate": "^1.0.0" } }, @@ -10924,28 +10924,6 @@ "es-abstract": "^1.17.5" } }, - "string.prototype.trimleft": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz", - "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.5", - "string.prototype.trimstart": "^1.0.0" - } - }, - "string.prototype.trimright": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz", - "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.5", - "string.prototype.trimend": "^1.0.0" - } - }, "string.prototype.trimstart": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz", @@ -11039,16 +11017,16 @@ "dev": true }, "stylelint": { - "version": "13.6.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.6.0.tgz", - "integrity": "sha512-55gG2pNjVr183JJM/tlr3KAua6vTVX7Ho/lgKKuCIWszTZ1gmrXjX4Wok53SI8wRYFPbwKAcJGULQ77OJxTcNw==", + "version": "13.6.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.6.1.tgz", + "integrity": "sha512-XyvKyNE7eyrqkuZ85Citd/Uv3ljGiuYHC6UiztTR6sWS9rza8j3UeQv/eGcQS9NZz/imiC4GKdk1EVL3wst5vw==", "dev": true, "requires": { "@stylelint/postcss-css-in-js": "^0.37.1", "@stylelint/postcss-markdown": "^0.36.1", "autoprefixer": "^9.8.0", "balanced-match": "^1.0.0", - "chalk": "^4.0.0", + "chalk": "^4.1.0", "cosmiconfig": "^6.0.0", "debug": "^4.1.1", "execall": "^2.0.0", diff --git a/package.json b/package.json index 465475209397..3575eb540528 100644 --- a/package.json +++ b/package.json @@ -129,11 +129,11 @@ "npm-run-all": "^4.1.5", "popper.js": "^1.16.0", "postcss-cli": "^7.1.1", - "rollup": "^2.16.1", + "rollup": "^2.17.0", "rollup-plugin-istanbul": "^2.0.1", "shelljs": "^0.8.4", - "sirv-cli": "^1.0.0", - "stylelint": "^13.6.0", + "sirv-cli": "^1.0.1", + "stylelint": "^13.6.1", "stylelint-config-twbs-bootstrap": "^2.0.3", "terser": "^4.8.0", "vnu-jar": "20.5.29" From b1560e2d18d6301529f575785cfc23f5c59d3a69 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 18 Jun 2020 09:24:23 +0100 Subject: [PATCH 09/19] =?UTF-8?q?Docs:=20add=20Ga=C3=ABl=20Poupard=20to=20?= =?UTF-8?q?the=20core=20team=20page=20(#31081)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Docs: add Gaël Poupard to the core team page --- site/data/core-team.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/data/core-team.yml b/site/data/core-team.yml index 5fbae850699e..f59b4285c6b0 100644 --- a/site/data/core-team.yml +++ b/site/data/core-team.yml @@ -27,3 +27,6 @@ - name: Shohei Yoshida user: ysds + +- name: Gaël Poupard + user: ffoodd From 3a61e1ae2f0232149cf1e06d041f8789305355a2 Mon Sep 17 00:00:00 2001 From: Christian Studer Date: Thu, 18 Jun 2020 11:56:57 +0200 Subject: [PATCH 10/19] Fix Stack Overflow tag (#31062) --- .github/CONTRIBUTING.md | 2 +- .github/SUPPORT.md | 2 +- README.md | 2 +- site/content/docs/5.0/getting-started/introduction.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 9b9b2edadc52..75841c222ea0 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -19,7 +19,7 @@ and [submitting pull requests](#pull-requests), but please respect the following restrictions: * Please **do not** use the issue tracker for personal support requests. Stack - Overflow ([`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4) tag), + Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](README.md#community) are better places to get help. * Please **do not** derail or troll issues. Keep the discussion on topic and diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md index de3c4b552e9a..c30bed3b4511 100644 --- a/.github/SUPPORT.md +++ b/.github/SUPPORT.md @@ -8,4 +8,4 @@ For general troubleshooting or help getting started: - Join [the official Slack room](https://bootstrap-slack.herokuapp.com/). - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel. -- Ask and explore Stack Overflow with the [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4) tag. +- Ask and explore Stack Overflow with the [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag. diff --git a/README.md b/README.md index ddbc6a1c3523..ea47a79f9a13 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and - Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/). - Join [the official Slack room](https://bootstrap-slack.herokuapp.com/). - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel. -- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)). +- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability. diff --git a/site/content/docs/5.0/getting-started/introduction.md b/site/content/docs/5.0/getting-started/introduction.md index 096f4244f0ac..3945cb265ed7 100644 --- a/site/content/docs/5.0/getting-started/introduction.md +++ b/site/content/docs/5.0/getting-started/introduction.md @@ -122,7 +122,7 @@ Stay up to date on the development of Bootstrap and reach out to the community w - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}). - Join [the official Slack room]({{< param slack >}}). - Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel. -- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)). +- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability. You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos. From d6a9e785b5fe9e0f4843418762d17303de8979d6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 18 Jun 2020 10:27:42 -0700 Subject: [PATCH 11/19] Add new toasts examples (#30572) * Add two new toasts examples - Adds a new custom content example that removes the toast header and adds a custom close icon - Adds docs for how to create your own color schemes - Adds example of additional buttons * Update toasts examples - Remove span and place aria on SVG element - Add .border-0 to color scheme example for crisper edges * Update toasts.md Co-authored-by: XhmikosR --- site/content/docs/5.0/components/toasts.md | 50 ++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 1fd3f9971e7e..33b2cba19915 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -98,6 +98,56 @@ When you have multiple toasts, we default to vertically stacking them in a reada {{< /example >}} +### Custom content + +Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons](https://icons.getbootstrap.com), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout. + +{{< example class="bg-light" >}} + +{{< /example >}} + +Alternatively, you can also add additional controls and components to toasts. + +{{< example class="bg-light" >}} + +{{< /example >}} + +### Color schemes + +Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.text-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. + +{{< example class="bg-light" >}} + +{{< /example >}} + ## Placement Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`. From b84c9ed4894c7ff7824dca0c0e97c6e353eb8590 Mon Sep 17 00:00:00 2001 From: Nic Johnson <233067+nicjohnson@users.noreply.github.com> Date: Thu, 18 Jun 2020 12:46:03 -0600 Subject: [PATCH 12/19] Fix typo (#31102) --- site/content/docs/5.0/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index ec8c35ce8171..fa25e52d5b37 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -38,7 +38,7 @@ Breaking it down, here's how the grid system comes together: - **Our grid supports [six responsive breakpoints]({{< docsref "/layout/breakpoints" >}}).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint. -- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) fir combination of fluid and pixel widths. +- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths. - **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes]({{< docsref "/layout/gutters" >}}) to change the spacing of your content. From 7acf586d3efa9b2bad6a93d81c7cdc3560de6cdf Mon Sep 17 00:00:00 2001 From: Hiws Date: Fri, 19 Jun 2020 07:10:28 +0200 Subject: [PATCH 13/19] Docs: fix typo (#31106) * Fixes a typo so it displays the correct px's. * Update gutters.md Co-authored-by: XhmikosR --- site/content/docs/5.0/layout/gutters.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/layout/gutters.md b/site/content/docs/5.0/layout/gutters.md index 18cbefeeea69..87d2731a4743 100644 --- a/site/content/docs/5.0/layout/gutters.md +++ b/site/content/docs/5.0/layout/gutters.md @@ -10,7 +10,7 @@ toc: true - **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content. -- **Gutters start are `1.5rem` (`20px`) wide.** This allows us to match our grid to the [padding and margin spacers]({{< docsref "/utilities/spacing" >}}) scale. +- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers]({{< docsref "/utilities/spacing" >}}) scale. - **Gutters can be responsively adjusted.** Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters. From edbcc401c28e539ecdcf3c49c7ef2a74d0c28ebd Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 19 Jun 2020 09:31:37 +0100 Subject: [PATCH 14/19] Change whitelist to allowlist (#31066) Co-authored-by: XhmikosR Co-authored-by: Mark Otto --- build/change-version.js | 2 +- js/src/tooltip.js | 12 ++++++------ js/src/util/sanitizer.js | 12 ++++++------ js/tests/unit/util/sanitizer.spec.js | 14 +++++++------- site/content/docs/5.0/components/popovers.md | 6 +++--- site/content/docs/5.0/components/tooltips.md | 4 ++-- .../content/docs/5.0/getting-started/javascript.md | 14 +++++++------- site/content/docs/5.0/migration.md | 2 ++ 8 files changed, 34 insertions(+), 32 deletions(-) diff --git a/build/change-version.js b/build/change-version.js index ba6e46a47184..b8a640fa8ee3 100644 --- a/build/change-version.js +++ b/build/change-version.js @@ -95,7 +95,7 @@ function main(args) { 'vendor' ]) const INCLUDED_EXTENSIONS = new Set([ - // This extension whitelist is how we avoid modifying binary files + // This extension allowlist is how we avoid modifying binary files '', '.css', '.html', diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 64011796de39..33c0f6eec224 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -17,7 +17,7 @@ import { typeCheckConfig } from './util/index' import { - DefaultWhitelist, + DefaultAllowlist, sanitizeHtml } from './util/sanitizer' import Data from './dom/data' @@ -38,7 +38,7 @@ const DATA_KEY = 'bs.tooltip' const EVENT_KEY = `.${DATA_KEY}` const CLASS_PREFIX = 'bs-tooltip' const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') -const DISALLOWED_ATTRIBUTES = ['sanitize', 'whiteList', 'sanitizeFn'] +const DISALLOWED_ATTRIBUTES = ['sanitize', 'allowList', 'sanitizeFn'] const DefaultType = { animation: 'boolean', @@ -55,7 +55,7 @@ const DefaultType = { boundary: '(string|element)', sanitize: 'boolean', sanitizeFn: '(null|function)', - whiteList: 'object', + allowList: 'object', popperConfig: '(null|object)' } @@ -84,7 +84,7 @@ const Default = { boundary: 'scrollParent', sanitize: true, sanitizeFn: null, - whiteList: DefaultWhitelist, + allowList: DefaultAllowlist, popperConfig: null } @@ -428,7 +428,7 @@ class Tooltip { if (this.config.html) { if (this.config.sanitize) { - content = sanitizeHtml(content, this.config.whiteList, this.config.sanitizeFn) + content = sanitizeHtml(content, this.config.allowList, this.config.sanitizeFn) } element.innerHTML = content @@ -711,7 +711,7 @@ class Tooltip { typeCheckConfig(NAME, config, this.constructor.DefaultType) if (config.sanitize) { - config.template = sanitizeHtml(config.template, config.whiteList, config.sanitizeFn) + config.template = sanitizeHtml(config.template, config.allowList, config.sanitizeFn) } return config diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js index e1ec36a40051..27bdf6cb1ffd 100644 --- a/js/src/util/sanitizer.js +++ b/js/src/util/sanitizer.js @@ -55,7 +55,7 @@ const allowedAttribute = (attr, allowedAttributeList) => { return false } -export const DefaultWhitelist = { +export const DefaultAllowlist = { // Global attributes allowed on any supplied element below. '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], a: ['target', 'href', 'title', 'rel'], @@ -89,7 +89,7 @@ export const DefaultWhitelist = { ul: [] } -export function sanitizeHtml(unsafeHtml, whiteList, sanitizeFn) { +export function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) { if (!unsafeHtml.length) { return unsafeHtml } @@ -100,24 +100,24 @@ export function sanitizeHtml(unsafeHtml, whiteList, sanitizeFn) { const domParser = new window.DOMParser() const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html') - const whitelistKeys = Object.keys(whiteList) + const allowlistKeys = Object.keys(allowList) const elements = [].concat(...createdDocument.body.querySelectorAll('*')) for (let i = 0, len = elements.length; i < len; i++) { const el = elements[i] const elName = el.nodeName.toLowerCase() - if (whitelistKeys.indexOf(elName) === -1) { + if (allowlistKeys.indexOf(elName) === -1) { el.parentNode.removeChild(el) continue } const attributeList = [].concat(...el.attributes) - const whitelistedAttributes = [].concat(whiteList['*'] || [], whiteList[elName] || []) + const allowedAttributes = [].concat(allowList['*'] || [], allowList[elName] || []) attributeList.forEach(attr => { - if (!allowedAttribute(attr, whitelistedAttributes)) { + if (!allowedAttribute(attr, allowedAttributes)) { el.removeAttribute(attr.nodeName) } }) diff --git a/js/tests/unit/util/sanitizer.spec.js b/js/tests/unit/util/sanitizer.spec.js index c4259e7fd66c..dcfad8436f8f 100644 --- a/js/tests/unit/util/sanitizer.spec.js +++ b/js/tests/unit/util/sanitizer.spec.js @@ -1,11 +1,11 @@ -import { DefaultWhitelist, sanitizeHtml } from '../../../src/util/sanitizer' +import { DefaultAllowlist, sanitizeHtml } from '../../../src/util/sanitizer' describe('Sanitizer', () => { describe('sanitizeHtml', () => { it('should return the same on empty string', () => { const empty = '' - const result = sanitizeHtml(empty, DefaultWhitelist, null) + const result = sanitizeHtml(empty, DefaultAllowlist, null) expect(result).toEqual(empty) }) @@ -18,7 +18,7 @@ describe('Sanitizer', () => { '' ].join('') - const result = sanitizeHtml(template, DefaultWhitelist, null) + const result = sanitizeHtml(template, DefaultAllowlist, null) expect(result.indexOf('script') === -1).toEqual(true) }) @@ -30,20 +30,20 @@ describe('Sanitizer', () => { '' ].join('') - const result = sanitizeHtml(template, DefaultWhitelist, null) + const result = sanitizeHtml(template, DefaultAllowlist, null) expect(result.indexOf('aria-pressed') !== -1).toEqual(true) expect(result.indexOf('class="test"') !== -1).toEqual(true) }) - it('should remove not whitelist tags', () => { + it('should remove tags not in allowlist', () => { const template = [ '
', ' ', '
' ].join('') - const result = sanitizeHtml(template, DefaultWhitelist, null) + const result = sanitizeHtml(template, DefaultAllowlist, null) expect(result.indexOf('