From 860b511e0339df6c5baffa9671c84ef5f0c26abd Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 26 Mar 2020 17:49:45 +0200 Subject: [PATCH 01/55] Update eslint-plugin-unicorn to v18.0.0 (#30461) --- .eslintrc.json | 2 ++ package-lock.json | 10 +++++----- package.json | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index b3f1688768..7ccce3214c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -45,7 +45,9 @@ "unicorn/prefer-includes": "off", "unicorn/prefer-node-append": "off", "unicorn/prefer-node-remove": "off", + "unicorn/prefer-number-properties": "off", "unicorn/prefer-query-selector": "off", + "unicorn/prefer-set-has": "off", "unicorn/prefer-text-content": "off", "unicorn/prevent-abbreviations": "off" } diff --git a/package-lock.json b/package-lock.json index d8453d737f..e5381dca82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4096,9 +4096,9 @@ } }, "eslint-plugin-unicorn": { - "version": "17.2.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-17.2.0.tgz", - "integrity": "sha512-0kYjrywf0kQxevFz571KrDfYMIRZ5Kq6dDgPU1EEBFeC181r+fAaPatBScWX+/hisKJ4+eCRFebxTeVylsSYmw==", + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-18.0.0.tgz", + "integrity": "sha512-2mk3Cz6H2LCsKSEmJ7Wmqm/XbMAQ55+PjSBFM2Yh1/A7uk2gryNNhdfbFDycsjs/ylqk0m7LJ4qPpK9OlP8f9A==", "dev": true, "requires": { "ci-info": "^2.0.0", @@ -4108,10 +4108,10 @@ "import-modules": "^2.0.0", "lodash": "^4.17.15", "read-pkg-up": "^7.0.1", - "regexp-tree": "^0.1.20", + "regexp-tree": "^0.1.21", "reserved-words": "^0.1.2", "safe-regex": "^2.1.1", - "semver": "^7.1.2" + "semver": "^7.1.3" }, "dependencies": { "find-up": { diff --git a/package.json b/package.json index 001ba5e734..000d783d92 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "eslint": "^6.8.0", "eslint-config-xo": "^0.29.1", "eslint-plugin-import": "^2.20.1", - "eslint-plugin-unicorn": "^17.2.0", + "eslint-plugin-unicorn": "^18.0.0", "find-unused-sass-variables": "^1.0.5", "glob": "^7.1.6", "hammer-simulator": "0.0.1", From 7ce29d75f38f2c81f57e8a6cf14c510655e2e316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laussel=20Lo=C3=AFc?= Date: Sat, 28 Mar 2020 08:51:24 +0100 Subject: [PATCH 02/55] v5 tabs - accessibility issue when using ul/li semantic Add aria-role presentation on li element when ul element has role tablist and remove dropdown from visual tests as they've been removed from doc --- js/tests/unit/tab.spec.js | 34 +++++++------- js/tests/visual/collapse.html | 8 ++-- js/tests/visual/modal.html | 6 +-- js/tests/visual/tab.html | 60 +++++++++++------------- site/content/docs/4.3/components/navs.md | 40 ++++++++-------- 5 files changed, 72 insertions(+), 76 deletions(-) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 3e45f4d03e..70aa8eb336 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -129,8 +129,8 @@ describe('Tab', () => { it('should not fire shown when tab is already active', done => { fixtureEl.innerHTML = [ '', '
', '
', @@ -155,8 +155,8 @@ describe('Tab', () => { it('should not fire shown when tab is disabled', done => { fixtureEl.innerHTML = [ '', '
', '
', @@ -181,8 +181,8 @@ describe('Tab', () => { it('show and shown events should reference correct relatedTarget', done => { fixtureEl.innerHTML = [ '', '
', '
', @@ -275,17 +275,17 @@ describe('Tab', () => { it('should handle removed tabs', done => { fixtureEl.innerHTML = [ '
@@ -51,11 +51,11 @@
  • -
    - Action - Another action - Something else here -
    +
    • @@ -72,20 +72,20 @@ -
    - Action - Another action - Something else here -
    +
    -
    - Action - Another action - Something else here -
    +
    @@ -173,11 +173,11 @@
    -
    - Action - Another action - Something else here -
    +
    @@ -186,11 +186,11 @@ -
    - Action - Another action - Something else here -
    +
    @@ -198,11 +198,11 @@ -
    - Action - Another action - Something else here -
    +
    diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 30ce86e1fd..03e62c1f43 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -25,11 +25,11 @@
  • -
    - One - Two - Three -
    +
  • Final diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index 323b65c296..e5bc0448b5 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -165,10 +165,10 @@ Profile
    -
    - @fat - @mdo -
    +
    Disabled diff --git a/site/content/docs/4.3/examples/navbar-bottom/index.html b/site/content/docs/4.3/examples/navbar-bottom/index.html index fadf357377..68c247f859 100644 --- a/site/content/docs/4.3/examples/navbar-bottom/index.html +++ b/site/content/docs/4.3/examples/navbar-bottom/index.html @@ -29,11 +29,11 @@ title: Bottom navbar example
  • -
    - Action - Another action - Something else here -
    +
    • diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index 1016b5b9a5..6cd9ae380e 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -25,11 +25,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -82,11 +82,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -116,11 +116,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -150,11 +150,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -184,11 +184,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -218,11 +218,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -252,11 +252,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -289,11 +289,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -321,11 +321,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • @@ -354,11 +354,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index 4a8501e3a0..cc41316bce 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -31,11 +31,11 @@ body_class: "bg-light"
  • -
    - Action - Another action - Something else here -
    +
    • diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index 0a6ea6291c..d2869091e3 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -25,11 +25,11 @@ extra_css:
  • -
    - Action - Another action - Something else here -
    +
    • diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index cddf4a116e..ef0b4518a8 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -2,13 +2,13 @@ -
    - Latest (5.0.x) -
    - v4.4.1 - v3.4.1 - v2.3.2 -
    - All versions -
    + From 43d866313d5849c08f4e0f6589691ad63ee4e42a Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 31 Mar 2020 22:42:45 +0200 Subject: [PATCH 29/55] Fix active state dropdown --- site/assets/scss/_subnav.scss | 4 +--- site/layouts/partials/docs-versions.html | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index e0492edc1b..5b4d2806f9 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -11,10 +11,8 @@ box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); } - .dropdown-item.active { + .dropdown-item.current { font-weight: 600; - color: $gray-900; - background-color: transparent; background-image: escape-svg($dropdown-active-icon); background-repeat: no-repeat; background-position: .4rem .6rem; diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index ef0b4518a8..bfe3c2a559 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -3,7 +3,7 @@ Bootstrap v{{ .Site.Params.docs_version }}
      -
    • Latest (5.0.x)
      • +
    • Latest (5.0.x)
    • v4.4.1
    • v3.4.1
      • From 6663faa3e7365e2d2caf49e38643f6b9d3245359 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Fri, 6 Mar 2020 17:22:27 +0100 Subject: [PATCH 30/55] Fix date inputs heights in safari --- scss/_reboot.scss | 13 ------------- scss/forms/_form-control.scss | 1 + 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index d3d4871891..488c0676d8 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -466,19 +466,6 @@ button, border-style: none; } -// Remove the default appearance of temporal inputs to avoid a Mobile Safari -// bug where setting a custom line-height prevents text from being vertically -// centered within the input. -// See https://bugs.webkit.org/show_bug.cgi?id=139848 -// and https://github.com/twbs/bootstrap/issues/11266 - -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - -webkit-appearance: textfield; -} - // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers. textarea { diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index fb3142333e..42456e3aa6 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -15,6 +15,7 @@ background-color: $input-bg; background-clip: padding-box; border: $input-border-width solid $input-border-color; + appearance: none; // Fix appearance for date inputs in Safari // Note: This has no effect on `s in CSS. @include border-radius($input-border-radius, 0); From 053d5d5e93ba995ba6fda88679f8298e3053d868 Mon Sep 17 00:00:00 2001 From: Shohei Yoshida Date: Wed, 1 Apr 2020 15:42:33 +0900 Subject: [PATCH 31/55] transition() mixin prevent redundant 'transition: none' and pass `null` (#30391) * Prevent redundant 'none' for prefers-reduced-motion * Output warning when use 'none' or 'null' with multiple arguments * Fix for libsass(node-sass) --- scss/mixins/_transition.scss | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss index 54983d736c..54553deb9c 100644 --- a/scss/mixins/_transition.scss +++ b/scss/mixins/_transition.scss @@ -1,13 +1,23 @@ // stylelint-disable property-blacklist @mixin transition($transition...) { + @if length($transition) == 0 { + $transition: $transition-base; + } + + @if length($transition) > 1 { + @each $value in $transition { + @if $value == null or $value == none { + @warn "The keyword 'none' or 'null' must be used as a single argument."; + } + } + } + @if $enable-transitions { - @if length($transition) == 0 { - transition: $transition-base; - } @else { + @if nth($transition, 1) != null { transition: $transition; } - @if $enable-prefers-reduced-motion-media-query { + @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none { @media (prefers-reduced-motion: reduce) { transition: none; } From e138decdbb3597813c762995753db52abfbc76fb Mon Sep 17 00:00:00 2001 From: gsoti Date: Tue, 23 Apr 2019 17:03:59 +0300 Subject: [PATCH 32/55] Add Full-Screen size to Modal and Responsive variations for breakpoints (Works from breakpoint and down) --- scss/_mixins.scss | 1 + scss/_modal.scss | 16 +++ scss/mixins/_modal.scss | 14 ++ site/content/docs/4.3/components/modal.md | 156 ++++++++++++++++++++++ 4 files changed, 187 insertions(+) create mode 100644 scss/mixins/_modal.scss diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 5a04655d54..9ace99c322 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -26,6 +26,7 @@ @import "mixins/pagination"; @import "mixins/lists"; @import "mixins/list-group"; +@import "mixins/modal"; @import "mixins/forms"; @import "mixins/table-row"; diff --git a/scss/_modal.scss b/scss/_modal.scss index ed6ab4eb1f..b91848d8bf 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -85,6 +85,7 @@ flex-direction: column; width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog + height: 100%; color: $modal-content-color; pointer-events: auto; background-color: $modal-content-bg; @@ -142,6 +143,7 @@ // when there should be a fixed height on `.modal-dialog`. flex: 1 1 auto; padding: $modal-inner-padding; + overflow-y: auto; } // Footer (for actions) @@ -204,3 +206,17 @@ @include media-breakpoint-up(xl) { .modal-xl { max-width: $modal-xl; } } + +.modal-fullscreen { + @include modalFullscreen(); +} + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-down($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .modal-fullscreen#{$infix}-down { + @include modalFullscreen(); + } + } +} diff --git a/scss/mixins/_modal.scss b/scss/mixins/_modal.scss new file mode 100644 index 0000000000..061fb63206 --- /dev/null +++ b/scss/mixins/_modal.scss @@ -0,0 +1,14 @@ +// Modal + +// Maximize modal to cover viewport +@mixin modalFullscreen { + width: 100vw; + max-width: none; + height: 100vh; + margin: 0; + + .modal-content { + border: 0; + @include border-radius(0); + } +} diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index 6789ccc7c9..a5732c6a0d 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -678,6 +678,162 @@ Our default modal without modifier class constitutes the "medium" size modal. +## Fullscreen Modal + +Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      ClassAvailability
      .modal-fullscreenAlways
      .modal-fullscreen-xl-downBelow 1200px
      .modal-fullscreen-lg-downBelow 992px
      .modal-fullscreen-md-downBelow 768px
      .modal-fullscreen-sm-downBelow 576px
      + +
      + + + + + +
      + +{{< highlight html >}} + + + + +{{< /highlight >}} + + + + + + + + + + + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. From 062002d9521e2d3d77e9880f8b151bbbf05ef085 Mon Sep 17 00:00:00 2001 From: ysds Date: Thu, 27 Feb 2020 17:30:06 +0200 Subject: [PATCH 33/55] Fix CSS and improve docs --- scss/_mixins.scss | 1 - scss/_modal.scss | 33 +++-- scss/mixins/_modal.scss | 14 -- site/content/docs/4.3/components/modal.md | 152 +++++++++++----------- 4 files changed, 98 insertions(+), 102 deletions(-) delete mode 100644 scss/mixins/_modal.scss diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 9ace99c322..5a04655d54 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -26,7 +26,6 @@ @import "mixins/pagination"; @import "mixins/lists"; @import "mixins/list-group"; -@import "mixins/modal"; @import "mixins/forms"; @import "mixins/table-row"; diff --git a/scss/_modal.scss b/scss/_modal.scss index b91848d8bf..d898a6b0ba 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -62,11 +62,6 @@ overflow: hidden; } - .modal-header, - .modal-footer { - flex-shrink: 0; - } - .modal-body { overflow-y: auto; } @@ -116,6 +111,7 @@ // Top section of the modal w/ title and dismiss .modal-header { display: flex; + flex-shrink: 0; align-items: flex-start; // so the close btn always stays on the upper right corner justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends padding: $modal-header-padding; @@ -143,13 +139,13 @@ // when there should be a fixed height on `.modal-dialog`. flex: 1 1 auto; padding: $modal-inner-padding; - overflow-y: auto; } // Footer (for actions) .modal-footer { display: flex; flex-wrap: wrap; + flex-shrink: 0; align-items: center; // vertically center justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items padding: $modal-inner-padding - $modal-footer-margin-between / 2; @@ -207,16 +203,25 @@ .modal-xl { max-width: $modal-xl; } } -.modal-fullscreen { - @include modalFullscreen(); -} - @each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-down($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $next-breakpoint: breakpoint-next($breakpoint); + $postfix: if(breakpoint-max($breakpoint, $grid-breakpoints) == null, "", "-#{$next-breakpoint}-down"); - .modal-fullscreen#{$infix}-down { - @include modalFullscreen(); + @include media-breakpoint-down($breakpoint) { + .modal-fullscreen#{$postfix} { + width: 100vw; + max-width: none; + height: 100%; + margin: 0; + + .modal-content { + border: 0; + @include border-radius(0); + } + + .modal-body { + overflow-y: auto; + } } } } diff --git a/scss/mixins/_modal.scss b/scss/mixins/_modal.scss deleted file mode 100644 index 061fb63206..0000000000 --- a/scss/mixins/_modal.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Modal - -// Maximize modal to cover viewport -@mixin modalFullscreen { - width: 100vw; - max-width: none; - height: 100vh; - margin: 0; - - .modal-content { - border: 0; - @include border-radius(0); - } -} diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md index a5732c6a0d..c202aa70eb 100644 --- a/site/content/docs/4.3/components/modal.md +++ b/site/content/docs/4.3/components/modal.md @@ -695,50 +695,44 @@ Another override is the option to pop up a modal that covers the user viewport, Always - .modal-fullscreen-xl-down - Below 1200px - - - .modal-fullscreen-lg-down - Below 992px + .modal-fullscreen-sm-down + Below 576px .modal-fullscreen-md-down Below 768px - .modal-fullscreen-sm-down - Below 576px + .modal-fullscreen-lg-down + Below 992px + + + .modal-fullscreen-xl-down + Below 1200px
      - - - - - + + + + +
      {{< highlight html >}} - - -