From e4be0640eed2c98a8f0e1db3baa8c35a3de957ab Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Fri, 2 Oct 2020 17:28:59 +0530 Subject: [PATCH 01/93] Explain the "dispose" method appropriately (#30838) --- site/content/docs/5.0/components/alerts.md | 2 +- site/content/docs/5.0/components/buttons.md | 2 +- site/content/docs/5.0/components/carousel.md | 2 +- site/content/docs/5.0/components/collapse.md | 2 +- site/content/docs/5.0/components/dropdowns.md | 2 +- site/content/docs/5.0/components/modal.md | 2 +- site/content/docs/5.0/components/popovers.md | 2 +- site/content/docs/5.0/components/scrollspy.md | 2 +- site/content/docs/5.0/components/tooltips.md | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index a2f701267..994c5b1a6 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -127,7 +127,7 @@ This makes an alert listen for click events on descendant elements which have th dispose - Destroys an element's alert. + Destroys an element's alert. (Removes stored data on the DOM element) diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index eaede8f4e..4b4522ab7 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -155,7 +155,7 @@ var bsButton = new bootstrap.Button(button) dispose - Destroys an element's button. + Destroys an element's button. (Removes stored data on the DOM element) diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 3222e06b9..1ef205549 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -368,7 +368,7 @@ var carousel = new bootstrap.Carousel(myCarousel, { dispose - Destroys an element's carousel. + Destroys an element's carousel. (Removes stored data on the DOM element) getInstance diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index 349d26da5..a6109e7f3 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -224,7 +224,7 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, { dispose - Destroys an element's collapse. + Destroys an element's collapse. (Removes stored data on the DOM element) getInstance diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index ca5064b50..fb200f267 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -949,7 +949,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style dispose - Destroys an element's dropdown. + Destroys an element's dropdown. (Removes stored data on the DOM element) diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index d1815e170..8064999ec 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -928,7 +928,7 @@ Manually readjust the modal's position if the height of a modal changes while it #### dispose -Destroys an element's modal. +Destroys an element's modal. (Removes stored data on the DOM element) {{< highlight js >}}myModal.dispose(){{< /highlight >}} diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index 4af07a223..ed7dfb1b2 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -323,7 +323,7 @@ Toggles an element's popover. **Returns to the caller before the popover has act #### dispose -Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. +Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. {{< highlight js >}}myPopover.dispose(){{< /highlight >}} diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index 245ac7aab..2e2a51334 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -290,7 +290,7 @@ dataSpyList.forEach(function (dataSpyEl) { #### dispose -Destroys an element's scrollspy. +Destroys an element's scrollspy. (Removes stored data on the DOM element) #### getInstance diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 21c952d46..a0a6f2a18 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -330,7 +330,7 @@ Toggles an element's tooltip. **Returns to the caller before the tooltip has act #### dispose -Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. +Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. {{< highlight js >}}tooltip.dispose(){{< /highlight >}} From ce1db01af07588be7c04b967459249df69d02464 Mon Sep 17 00:00:00 2001 From: Ankit Mishra Date: Mon, 5 Oct 2020 18:19:02 +0530 Subject: [PATCH 02/93] carousel: add missing `to` description and fix `nextwhenvisible` description (#31809) --- site/content/docs/5.0/components/carousel.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 1ef205549..c478cbfad 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -364,6 +364,10 @@ var carousel = new bootstrap.Carousel(myCarousel, { nextWhenVisible + Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. Returns to the caller before the target item has been shown + + + to Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs). From 00dd55269af534fd1c37da51573ec122e36313d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 5 Oct 2020 15:47:46 +0200 Subject: [PATCH 03/93] docs: fix contrast color against `.bg-info` (#31839) * docs(badge): ensure info badge's contrast * docs(colors): fix contrasts in example using .bg-info * Update card.md Co-authored-by: XhmikosR --- site/content/docs/5.0/components/badge.md | 4 ++-- site/content/docs/5.0/components/card.md | 2 +- site/content/docs/5.0/customize/color.md | 2 +- site/content/docs/5.0/utilities/colors.md | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 475eb75f0..78bc89f5b 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -45,7 +45,7 @@ Use our background utility classes to quickly change the appearance of a badge. {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -{{ .name | title }}{{- end -}} +{{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}} @@ -60,6 +60,6 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -{{ .name | title }}{{- end -}} +{{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}} diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index 015b5d936..baa645be7 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -422,7 +422,7 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan {{< example >}} {{< card.inline >}} {{- range (index $.Site.Data "theme-colors") }} -
+
Header
{{ .name | title }} card title
diff --git a/site/content/docs/5.0/customize/color.md b/site/content/docs/5.0/customize/color.md index 350aab699..7c51664b7 100644 --- a/site/content/docs/5.0/customize/color.md +++ b/site/content/docs/5.0/customize/color.md @@ -14,7 +14,7 @@ We use a subset of all colors to create a smaller color palette for generating c {{< theme-colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}
-
{{ .name | title }}
+
{{ .name | title }}
{{ end -}} {{< /theme-colors.inline >}} diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index 6ca7a7d12..65cddd75c 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -40,7 +40,7 @@ Similar to the contextual text color classes, easily set the background of an el {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -
.bg-{{ .name }}
+
.bg-{{ .name }}
{{- end -}} {{< /colors.inline >}}
.bg-white
@@ -56,7 +56,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs- {{< markdown >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -
.bg-{{ .name }}.bg-gradient
+
.bg-{{ .name }}.bg-gradient
{{- end -}} {{< /colors.inline >}} {{< /markdown >}} From 0c1651ee9dfb9d57655c974a73884d3b777ebafd Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 5 Oct 2020 18:07:49 +0300 Subject: [PATCH 04/93] Remove `Manipulator.toggleClass` (#31842) It's only used in one place so it makes more sense to remove it for the time being. --- js/src/dom/manipulator.js | 12 ------------ js/src/dropdown.js | 8 ++++---- js/tests/unit/dom/manipulator.spec.js | 26 -------------------------- 3 files changed, 4 insertions(+), 42 deletions(-) diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index a81354e78..750ee115e 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -72,18 +72,6 @@ const Manipulator = { top: element.offsetTop, left: element.offsetLeft } - }, - - toggleClass(element, className) { - if (!element) { - return - } - - if (element.classList.contains(className)) { - element.classList.remove(className) - } else { - element.classList.add(className) - } } } diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 37bdd1f24..28d8b7299 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -197,8 +197,8 @@ class Dropdown { this._element.focus() this._element.setAttribute('aria-expanded', true) - Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW) - Manipulator.toggleClass(this._element, CLASS_NAME_SHOW) + this._menu.classList.toggle(CLASS_NAME_SHOW) + this._element.classList.toggle(CLASS_NAME_SHOW) EventHandler.trigger(parent, EVENT_SHOWN, relatedTarget) } @@ -222,8 +222,8 @@ class Dropdown { this._popper.destroy() } - Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW) - Manipulator.toggleClass(this._element, CLASS_NAME_SHOW) + this._menu.classList.toggle(CLASS_NAME_SHOW) + this._element.classList.toggle(CLASS_NAME_SHOW) EventHandler.trigger(parent, EVENT_HIDDEN, relatedTarget) } diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js index eec3ced52..16750fd74 100644 --- a/js/tests/unit/dom/manipulator.spec.js +++ b/js/tests/unit/dom/manipulator.spec.js @@ -129,30 +129,4 @@ describe('Manipulator', () => { expect(position.left).toEqual(jasmine.any(Number)) }) }) - - describe('toggleClass', () => { - it('should not error out if element is null or undefined', () => { - Manipulator.toggleClass(null, 'test') - Manipulator.toggleClass(undefined, 'test') - expect().nothing() - }) - - it('should add class if it is missing', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - - Manipulator.toggleClass(div, 'test') - expect(div.classList.contains('test')).toEqual(true) - }) - - it('should remove class if it is set', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - - Manipulator.toggleClass(div, 'test') - expect(div.classList.contains('test')).toEqual(false) - }) - }) }) From d6bf56250158e5b1de91e5efd6ba65894f9ee450 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 6 Oct 2020 15:12:43 +0300 Subject: [PATCH 05/93] Bump linkinator from 2.1.2 to 2.1.3 (#31843) Bumps [linkinator](https://github.com/JustinBeckwith/linkinator) from 2.1.2 to 2.1.3. - [Release notes](https://github.com/JustinBeckwith/linkinator/releases) - [Commits](https://github.com/JustinBeckwith/linkinator/compare/v2.1.2...v2.1.3) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 69 ++++++++++++++++++++++++++++++++++++----------- package.json | 2 +- 2 files changed, 55 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7fe046891..773e60e81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5044,9 +5044,9 @@ } }, "gaxios": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-3.1.0.tgz", - "integrity": "sha512-DDTn3KXVJJigtz+g0J3vhcfbDbKtAroSTxauWsdnP57sM5KZ3d2c/3D9RKFJ86s43hfw6WULg6TXYw/AYiBlpA==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-3.2.0.tgz", + "integrity": "sha512-+6WPeVzPvOshftpxJwRi2Ozez80tn/hdtOUag7+gajDHRJvAblKxTFSSMPtr2hmnLy7p0mvYz0rMXLBl8pSO7Q==", "dev": true, "requires": { "abort-controller": "^3.0.0", @@ -5066,12 +5066,12 @@ } }, "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz", + "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==", "dev": true, "requires": { - "ms": "^2.1.1" + "ms": "2.1.2" } }, "https-proxy-agent": { @@ -6886,9 +6886,9 @@ "dev": true }, "linkinator": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/linkinator/-/linkinator-2.1.2.tgz", - "integrity": "sha512-DwebChCP1WqJUfMfpV5IHGzueGeLkQGXbv5UYTOWElq6l0yxPV+S5ODBXYf4fDpg2Go5zA18kJuFOfF0bYZnfQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/linkinator/-/linkinator-2.1.3.tgz", + "integrity": "sha512-MBjaTkMiBuoUq0+e8CtWhlSo6AR+TojNQ7USNCoIiaClI/71o6mF3wrPEizSCwMTjFviHbm/M7JD1M8/0vIFnw==", "dev": true, "requires": { "chalk": "^4.0.0", @@ -6900,16 +6900,15 @@ "p-queue": "^6.2.1", "serve-static": "^1.14.1", "server-destroy": "^1.0.1", - "update-notifier": "^4.0.0" + "update-notifier": "^5.0.0" }, "dependencies": { "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "requires": { - "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" } }, @@ -6944,6 +6943,24 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, + "import-lazy": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", + "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=", + "dev": true + }, + "is-npm": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-5.0.0.tgz", + "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==", + "dev": true + }, + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", + "dev": true + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -6952,6 +6969,28 @@ "requires": { "has-flag": "^4.0.0" } + }, + "update-notifier": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.0.0.tgz", + "integrity": "sha512-8tqsiVrMv7aZsKNSjqA6DdBLKJpZG1hRpkj1RbOJu1PgyP69OX+EInAnP1EK/ShX5YdPFgwWdk19oquZ0HTM8g==", + "dev": true, + "requires": { + "boxen": "^4.2.0", + "chalk": "^4.1.0", + "configstore": "^5.0.1", + "has-yarn": "^2.1.0", + "import-lazy": "^2.1.0", + "is-ci": "^2.0.0", + "is-installed-globally": "^0.3.1", + "is-npm": "^5.0.0", + "is-yarn-global": "^0.3.0", + "latest-version": "^5.0.0", + "pupa": "^2.0.1", + "semver": "^7.3.2", + "semver-diff": "^3.1.1", + "xdg-basedir": "^4.0.0" + } } } }, diff --git a/package.json b/package.json index b1b760121..e5dcc975d 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.5.4", "karma-rollup-preprocessor": "^7.0.5", - "linkinator": "^2.1.2", + "linkinator": "^2.1.3", "lockfile-lint": "^4.3.7", "node-sass": "^4.14.1", "nodemon": "^2.0.4", From c8523d71e7fa361ca478a27b3d0b55c1b7bf4212 Mon Sep 17 00:00:00 2001 From: Ankit Mishra Date: Wed, 7 Oct 2020 19:33:53 +0530 Subject: [PATCH 06/93] Alert : Added z-index for close button (#31826) Co-authored-by: Ankit Mishra Co-authored-by: Martijn Cuppens --- scss/_alert.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/_alert.scss b/scss/_alert.scss index d0536f339..dd08a55c6 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -34,6 +34,7 @@ position: absolute; top: 0; right: 0; + z-index: $stretched-link-z-index + 1; padding: $alert-padding-y * 1.25 $alert-padding-x; } } From 5c6925385ee926a749ead6a4f2ebbfc64e701f36 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 12 Oct 2020 09:06:06 +0300 Subject: [PATCH 07/93] Improve callout shortcode. (#31802) Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown. This allows for stuff like: {{% callout info %}} ##### I'm an info callout! ```css .foo { color: #fff; } ``` {{< example >}} {{< /example >}} {{% /callout %}} --- site/content/docs/5.0/components/alerts.md | 8 +++---- site/content/docs/5.0/components/badge.md | 4 ++-- .../docs/5.0/components/button-group.md | 4 ++-- site/content/docs/5.0/components/buttons.md | 12 +++++----- site/content/docs/5.0/components/card.md | 8 +++---- site/content/docs/5.0/components/carousel.md | 8 +++---- site/content/docs/5.0/components/collapse.md | 8 +++---- site/content/docs/5.0/components/dropdowns.md | 12 +++++----- .../content/docs/5.0/components/list-group.md | 4 ++-- site/content/docs/5.0/components/modal.md | 8 +++---- site/content/docs/5.0/components/navbar.md | 4 ++-- site/content/docs/5.0/components/navs.md | 8 +++---- site/content/docs/5.0/components/popovers.md | 24 +++++++++---------- site/content/docs/5.0/components/scrollspy.md | 12 +++++----- site/content/docs/5.0/components/spinners.md | 4 ++-- site/content/docs/5.0/components/toasts.md | 8 +++---- site/content/docs/5.0/components/tooltips.md | 24 +++++++++---------- site/content/docs/5.0/content/reboot.md | 8 +++---- site/content/docs/5.0/content/tables.md | 8 +++---- site/content/docs/5.0/customize/components.md | 12 +++++----- site/content/docs/5.0/forms/checks-radios.md | 4 ++-- site/content/docs/5.0/forms/file.md | 4 ++-- site/content/docs/5.0/forms/overview.md | 4 ++-- site/content/docs/5.0/forms/validation.md | 4 ++-- .../5.0/getting-started/best-practices.md | 4 ++-- .../docs/5.0/getting-started/javascript.md | 16 ++++++------- site/content/docs/5.0/helpers/ratio.md | 4 ++-- site/content/docs/5.0/layout/breakpoints.md | 4 ++-- site/content/docs/5.0/layout/columns.md | 4 ++-- site/content/docs/5.0/layout/grid.md | 4 ++-- site/content/docs/5.0/utilities/colors.md | 8 +++---- .../docs/5.0/utilities/interactions.md | 4 ++-- site/content/docs/5.0/utilities/text.md | 4 ++-- site/content/docs/5.0/utilities/visibility.md | 4 ++-- site/layouts/shortcodes/callout.html | 2 +- 35 files changed, 131 insertions(+), 131 deletions(-) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 994c5b1a6..76ac6f4fb 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -22,9 +22,9 @@ Alerts are available for any length of text, as well as an optional close button {{< /alerts.inline >}} {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ### Link color @@ -70,9 +70,9 @@ You can see this in action with a live demo:
{{< /example >}} -{{< callout warning >}} +{{% callout warning %}} When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. -{{< /callout >}} +{{% /callout %}} ## JavaScript behavior diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 78bc89f5b..d47588f33 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -49,9 +49,9 @@ Use our background utility classes to quickly change the appearance of a badge. {{< /badge.inline >}} {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## Pill badges diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.0/components/button-group.md index 730faf2db..fb0b7bce5 100644 --- a/site/content/docs/5.0/components/button-group.md +++ b/site/content/docs/5.0/components/button-group.md @@ -18,13 +18,13 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
{{< /example >}} -{{< callout warning >}} +{{% callout warning %}} ##### Ensure correct `role` and provide a label In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. -{{< /callout >}} +{{% /callout %}} These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs" >}}). diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index 4b4522ab7..e5f967a28 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -20,9 +20,9 @@ Bootstrap includes several predefined button styles, each serving its own semant {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## Disable text wrapping @@ -95,19 +95,19 @@ Disabled buttons using the `` element behave a bit different: Link {{< /example >}} -{{< callout warning >}} +{{% callout warning %}} ##### Link functionality caveat The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether. -{{< /callout >}} +{{% /callout %}} ## Button plugin The button plugin allows you to create simple on/off toggle buttons. -{{< callout info >}} +{{% callout info %}} Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button. -{{< /callout >}} +{{% /callout %}} ### Toggle states diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index baa645be7..ee25958ec 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -386,9 +386,9 @@ Turn an image into a card background and overlay your card's text. Depending on
{{< /example >}} -{{< callout info >}} +{{% callout info %}} Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image. -{{< /callout >}} +{{% /callout %}} ## Horizontal @@ -433,9 +433,9 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan {{< /card.inline >}} {{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ### Border diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index c478cbfad..bbbef9a10 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -12,9 +12,9 @@ The carousel is a slideshow for cycling through a series of content, built with In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards. @@ -324,9 +324,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items: diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index a6109e7f3..cbfa774f9 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -10,9 +10,9 @@ toc: true The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element. -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} ## Example @@ -187,9 +187,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} Activates your content as a collapsible element. Accepts an optional options `object`. diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index fb200f267..a65b653a1 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -632,9 +632,9 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. -{{< callout info >}} +{{% callout info %}} **Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar). -{{< /callout >}} +{{% /callout %}} {{< example >}}
@@ -817,9 +817,9 @@ Use `data-offset` or `data-reference` to change the location of the dropdown. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. -{{< callout info >}} +{{% callout info %}} On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed. -{{< /callout >}} +{{% /callout %}} ### Via data attributes @@ -847,11 +847,11 @@ var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { }) {{< /highlight >}} -{{< callout info >}} +{{% callout info %}} ##### `data-toggle="dropdown"` still required Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{{< /callout >}} +{{% /callout %}} ### Options diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index a82bdddf7..371f546ef 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -140,9 +140,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
{{< /example >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} +{{% /callout %}} ## With badges diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 8064999ec..29f125fa8 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -26,9 +26,9 @@ myModal.addEventListener('shown.bs.modal', function () { }) {{< /highlight >}} -{{< callout info >}} +{{% callout info %}} {{< partial "callout-info-prefersreducedmotion.md" >}} -{{< /callout >}} +{{% /callout %}} Keep reading for demos and usage guidelines. @@ -888,9 +888,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Methods -{{< callout danger >}} +{{% callout danger %}} {{< partial "callout-danger-async-methods.md" >}} -{{< /callout >}} +{{% /callout %}} #### Passing options diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index b6c44dbbf..88564cab1 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -17,9 +17,9 @@ Here's what you need to know before getting started with the navbar: - Ensure accessibility by using a ` -{{< highlight html >}} +```html @@ -415,7 +415,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl -{{< /highlight >}} +``` ## Containers diff --git a/site/content/docs/5.0/components/navs.md b/site/content/docs/5.0/components/navs.md index ac733e64c..0e74443f7 100644 --- a/site/content/docs/5.0/components/navs.md +++ b/site/content/docs/5.0/components/navs.md @@ -336,7 +336,7 @@ Note that dynamic tabbed interfaces should not contain dropdown menus, -{{< highlight html >}} +```html