From b2ef98f154ab4e7b9c43406a0d272f98b854a060 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 24 Jun 2020 23:22:58 -0700 Subject: [PATCH 1/7] Remove backdrop-filter from toasts --- scss/_toasts.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 1d9ec13578c4..5967a7a88414 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -10,7 +10,6 @@ background-clip: padding-box; border: $toast-border-width solid $toast-border-color; box-shadow: $toast-box-shadow; - backdrop-filter: blur(10px); opacity: 0; @include border-radius($toast-border-radius); From c49b08415837996a1365be533403d83e07cb3a93 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 25 Jun 2020 15:31:59 +0300 Subject: [PATCH 2/7] BrowserStack: test on Edge 15 --- js/tests/browsers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/tests/browsers.js b/js/tests/browsers.js index da36e497b9ee..183084fefced 100644 --- a/js/tests/browsers.js +++ b/js/tests/browsers.js @@ -28,7 +28,7 @@ const browsers = { os: 'Windows', os_version: '10', browser: 'Edge', - browser_version: 'latest' + browser_version: '15' }, ie11Win10: { base: 'BrowserStack', From 234dd96abf602da776c89b6ee42618b50e67c168 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 25 Jun 2020 15:34:03 +0300 Subject: [PATCH 3/7] Backport #31135 * Move color utility callouts to start of page Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes. * Change heading level otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading --- site/docs/4.5/utilities/colors.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/site/docs/4.5/utilities/colors.md b/site/docs/4.5/utilities/colors.md index 55699adb8c72..bbe22d10bafa 100644 --- a/site/docs/4.5/utilities/colors.md +++ b/site/docs/4.5/utilities/colors.md @@ -6,6 +6,15 @@ group: utilities toc: true --- +{% capture callout %} +#### Dealing with specificity + +Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. +{% endcapture %} +{% include callout.html content=callout type="info" %} + +{% include callout-warning-color-assistive-technologies.md %} + ## Color {% capture example %} @@ -47,12 +56,3 @@ When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg {% for color in site.data.theme-colors %} - `.bg-gradient-{{ color.name }}`{% endfor %} - -{% capture callout %} -#### Dealing with specificity - -Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class. -{% endcapture %} -{% include callout.html content=callout type="info" %} - -{% include callout-warning-color-assistive-technologies.md %} From ea01c29294f3c70d74783f19c5f7406bd5ddbe9a Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 25 Jun 2020 15:40:30 +0300 Subject: [PATCH 4/7] Backport #30326 Prevent overflowing static backdrop modal animation TODO: backport the test too --- js/src/modal.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/js/src/modal.js b/js/src/modal.js index 0a2d99a0322c..ec44929f07db 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -238,12 +238,25 @@ class Modal { return } + const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight + + if (!isModalOverflowing) { + this._element.style.overflowY = 'hidden' + } + this._element.classList.add(CLASS_NAME_STATIC) - const modalTransitionDuration = Util.getTransitionDurationFromElement(this._element) + const modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog) + $(this._element).off(Util.TRANSITION_END) $(this._element).one(Util.TRANSITION_END, () => { this._element.classList.remove(CLASS_NAME_STATIC) + if (!isModalOverflowing) { + $(this._element).one(Util.TRANSITION_END, () => { + this._element.style.overflowY = '' + }) + .emulateTransitionEnd(this._element, modalTransitionDuration) + } }) .emulateTransitionEnd(modalTransitionDuration) this._element.focus() From 9a6cfeb36e57f73d21b33926039f9ffb2fb5c465 Mon Sep 17 00:00:00 2001 From: ysds Date: Fri, 26 Jun 2020 00:56:10 +0900 Subject: [PATCH 5/7] Backport #30326 (Unit test) --- js/tests/unit/modal.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 5434987d8bfe..3920fe387f6d 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -959,4 +959,21 @@ $(function () { keyboard: false }) }) + + QUnit.test('should not overflow when clicking outside of modal-content if backdrop = static', function (assert) { + assert.expect(1) + var done = assert.async() + var $modal = $('