From 55f2192a398cdb4446937322f14b3e7e359a0d00 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Nov 2020 10:50:59 -0800 Subject: [PATCH 01/19] Rename scale-color() function to shift-color() to avoid collision with Sass's own color function (#32149) --- scss/_alert.scss | 6 +++--- scss/_functions.scss | 3 +-- scss/_list-group.scss | 4 ++-- scss/_variables.scss | 14 +++++++------- site/content/docs/5.0/migration.md | 8 +++++++- 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index 24fa2bd14..3d9b69bcd 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -44,9 +44,9 @@ // Generate contextual modifier classes for colorizing the alert. @each $state, $value in $theme-colors { - $background: scale-color($value, $alert-bg-scale); - $border: scale-color($value, $alert-border-scale); - $color: scale-color($value, $alert-color-scale); + $background: shift-color($value, $alert-bg-scale); + $border: shift-color($value, $alert-border-scale); + $color: shift-color($value, $alert-color-scale); @if (contrast-ratio($background, $color) < $min-contrast-ratio) { $color: mix($value, color-contrast($background), abs($alert-color-scale)); } diff --git a/scss/_functions.scss b/scss/_functions.scss index b95fbf94e..29114fc81 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -161,9 +161,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return mix(black, $color, $weight); } -// Scale a color: // Shade the color if the weight is positive, else tint it -@function scale-color($color, $weight) { +@function shift-color($color, $weight) { @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight)); } // scss-docs-end color-functions diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 2ce0c8b15..3d82f8f43 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -152,8 +152,8 @@ // Organizationally, this must come after the `:hover` states. @each $state, $value in $theme-colors { - $background: scale-color($value, $list-group-item-bg-scale); - $color: scale-color($value, $list-group-item-color-scale); + $background: shift-color($value, $list-group-item-bg-scale); + $color: shift-color($value, $list-group-item-color-scale); @if (contrast-ratio($background, $color) < $min-contrast-ratio) { $color: mix($value, color-contrast($background), abs($alert-color-scale)); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 2a8b45e14..0b64330e9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -275,7 +275,7 @@ $body-text-align: null !default; $link-color: $primary !default; $link-decoration: underline !default; $link-shade-percentage: 20% !default; -$link-hover-color: scale-color($link-color, $link-shade-percentage) !default; +$link-hover-color: shift-color($link-color, $link-shade-percentage) !default; $link-hover-decoration: null !default; $stretched-link-pseudo-element: after !default; @@ -535,12 +535,12 @@ $table-caption-color: $text-muted !default; $table-bg-scale: -80% !default; $table-variants: ( - "primary": scale-color($primary, $table-bg-scale), - "secondary": scale-color($secondary, $table-bg-scale), - "success": scale-color($success, $table-bg-scale), - "info": scale-color($info, $table-bg-scale), - "warning": scale-color($warning, $table-bg-scale), - "danger": scale-color($danger, $table-bg-scale), + "primary": shift-color($primary, $table-bg-scale), + "secondary": shift-color($secondary, $table-bg-scale), + "success": shift-color($success, $table-bg-scale), + "info": shift-color($info, $table-bg-scale), + "warning": shift-color($warning, $table-bg-scale), + "danger": shift-color($danger, $table-bg-scale), "light": $light, "dark": $dark, ) !default; diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index bc6ed103c..e0ef86ca3 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -7,6 +7,12 @@ aliases: "/migration/" toc: true --- +## Beta 1 + +### Sass + +- Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. + ## v5.0.0-alpha3 ### Browser support @@ -15,7 +21,7 @@ toc: true ### Sass -- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `scale-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details. +- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `scale-color()` (changed to `shift-color()` in Beta 1) will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details. - Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882). ### Reboot From 1fddb48affc5cbf45effe65ef0a45b56b252f6fa Mon Sep 17 00:00:00 2001 From: Nikita Mikhaylov Date: Mon, 14 Sep 2020 08:33:31 +0300 Subject: [PATCH 02/19] Add hover utilities remome several hobers refactoring hover utilities refactoring hover utilities --- scss/mixins/_utilities.scss | 11 +++++ site/content/docs/5.0/utilities/api.md | 56 ++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index cd9f93056..145839a39 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -20,6 +20,9 @@ $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); $property-class: if($property-class == null, "", $property-class); + // State params to generate pseudo-classes + $state: if(map-has-key($utility, state), map-get($utility, state), ()); + $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); // Don't prefix if value key is null (eg. with shadow class) @@ -44,6 +47,14 @@ #{$property}: $value if($enable-important-utilities, !important, null); } } + + @each $pseudo in $state { + .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { + @each $property in $properties { + #{$property}: $value if($enable-important-utilities, !important, null); + } + } + } } } } diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md index c3fa5b150..a0ba976d8 100644 --- a/site/content/docs/5.0/utilities/api.md +++ b/site/content/docs/5.0/utilities/api.md @@ -264,3 +264,59 @@ $utilities: map-merge( ) ); ``` + +## Adding pseudo-classes to utilities + +With the `state` option, pseudo-class utilities can be generated: + +```scss +$utilities: ( + "shadow": ( + property: box-shadow, + state: hover focus, + class: shadow, + values: ( + null: $box-shadow, + sm: $box-shadow-sm, + lg: $box-shadow-lg, + none: none, + ) + ) +); +``` + +Output: + +```css +.shadow-hover:hover { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +} + +.shadow-focus:focus { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +} + +.shadow-sm-hover:hover { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +} + +.shadow-sm-focus:focus { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; +} + +.shadow-lg-hover:hover { + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +} + +.shadow-lg-focus:focus { + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; +} + +.shadow-none-hover:hover { + box-shadow: none !important; +} + +.shadow-none-focus:focus { + box-shadow: none !important; +} +``` From fe961c192d951bde610cdcd4817f4d8548d33141 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Nov 2020 20:05:22 -0800 Subject: [PATCH 03/19] Move states docs and rewrite to match existing examples --- site/content/docs/5.0/utilities/api.md | 90 ++++++++++---------------- 1 file changed, 34 insertions(+), 56 deletions(-) diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md index a0ba976d8..abe2a922a 100644 --- a/site/content/docs/5.0/utilities/api.md +++ b/site/content/docs/5.0/utilities/api.md @@ -17,6 +17,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu | `property` | **Required** | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). | | `values` | **Required** | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, it isn't compiled. | | `class` | Optional | Variable for the class name if you don't want it to be the same as the property. In case you don't provide the `class` key and `property` key is an array of strings, the class name will be the first element of the `property` array. | +| `state` | Optional | List of pseudo-class variants like `:hover` or `:focus` to generate for the utility. No default value. | | `responsive` | Optional | Boolean indicating if responsive classes need to be generated. `false` by default. | | `rfs` | Optional | Boolean to enable fluid rescaling. Have a look at the [RFS]({{< docsref "/getting-started/rfs" >}}) page to find out how this works. `false` by default. | | `print` | Optional | Boolean indicating if print classes need to be generated. `false` by default. | @@ -81,6 +82,39 @@ Output: .o-100 { opacity: 1; } ``` +## States + +Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add `state: hover` and you'll get `.opacity-hover:hover` in your compiled CSS. + +Need multiple pseudo-classes? Use a space-separated list of states: `state: hover focus`. + +```scss +$utilities: ( + "opacity": ( + property: opacity, + class: opacity, + state: hover, + values: ( + 0: 0, + 25: .25, + 50: .5, + 75: .75, + 100: 1, + ) + ) +); +``` + +Output: + +```css +.opacity-0-hover:hover { opacity: 0; } +.opacity-25-hover:hover { opacity: .25; } +.opacity-50-hover:hover { opacity: .5; } +.opacity-75-hover:hover { opacity: .75; } +.opacity-100-hover:hover { opacity: 1; } +``` + ### Responsive utilities Add the `responsive` boolean to generate responsive utilities (e.g., `.opacity-md-25`) across [all breakpoints]({{< docsref "/layout/breakpoints" >}}). @@ -264,59 +298,3 @@ $utilities: map-merge( ) ); ``` - -## Adding pseudo-classes to utilities - -With the `state` option, pseudo-class utilities can be generated: - -```scss -$utilities: ( - "shadow": ( - property: box-shadow, - state: hover focus, - class: shadow, - values: ( - null: $box-shadow, - sm: $box-shadow-sm, - lg: $box-shadow-lg, - none: none, - ) - ) -); -``` - -Output: - -```css -.shadow-hover:hover { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; -} - -.shadow-focus:focus { - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; -} - -.shadow-sm-hover:hover { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; -} - -.shadow-sm-focus:focus { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; -} - -.shadow-lg-hover:hover { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; -} - -.shadow-lg-focus:focus { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; -} - -.shadow-none-hover:hover { - box-shadow: none !important; -} - -.shadow-none-focus:focus { - box-shadow: none !important; -} -``` From 418f17ee2b849dafdc39623ba2378df9229164a7 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 22 Jul 2020 22:33:11 +0300 Subject: [PATCH 04/19] Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests --- js/src/alert.js | 2 +- js/src/button.js | 2 +- js/src/carousel.js | 8 +- js/src/collapse.js | 8 +- js/src/dom/manipulator.js | 10 +- js/src/dropdown.js | 2 +- js/src/modal.js | 22 +- js/src/popover.js | 2 +- js/src/scrollspy.js | 4 +- js/src/tab.js | 2 +- js/src/toast.js | 2 +- js/src/tooltip.js | 6 +- js/src/util/index.js | 4 +- js/tests/integration/bundle-modularity.js | 2 +- js/tests/integration/bundle.js | 2 +- js/tests/integration/index.html | 14 +- js/tests/unit/alert.spec.js | 4 +- js/tests/unit/button.spec.js | 14 +- js/tests/unit/carousel.spec.js | 52 ++--- js/tests/unit/collapse.spec.js | 72 +++--- js/tests/unit/dom/manipulator.spec.js | 24 +- js/tests/unit/dropdown.spec.js | 212 +++++++++--------- js/tests/unit/jquery.spec.js | 2 +- js/tests/unit/modal.spec.js | 54 ++--- js/tests/unit/popover.spec.js | 18 +- js/tests/unit/scrollspy.spec.js | 2 +- js/tests/unit/tab.spec.js | 40 ++-- js/tests/unit/toast.spec.js | 22 +- js/tests/unit/tooltip.spec.js | 2 +- js/tests/unit/util/index.spec.js | 22 +- js/tests/visual/alert.html | 8 +- js/tests/visual/button.html | 6 +- js/tests/visual/carousel.html | 12 +- js/tests/visual/collapse.html | 18 +- js/tests/visual/dropdown.html | 32 +-- js/tests/visual/modal.html | 44 ++-- js/tests/visual/popover.html | 12 +- js/tests/visual/scrollspy.html | 6 +- js/tests/visual/tab.html | 50 ++--- js/tests/visual/toast.html | 6 +- js/tests/visual/tooltip.html | 26 +-- scss/_reboot.scss | 4 +- site/assets/js/application.js | 16 +- site/assets/js/search.js | 2 +- site/content/docs/5.0/components/alerts.md | 8 +- .../docs/5.0/components/button-group.md | 10 +- site/content/docs/5.0/components/buttons.md | 14 +- site/content/docs/5.0/components/carousel.md | 58 ++--- site/content/docs/5.0/components/collapse.md | 26 +-- site/content/docs/5.0/components/dropdowns.md | 108 ++++----- .../content/docs/5.0/components/list-group.md | 38 ++-- site/content/docs/5.0/components/modal.md | 150 ++++++------- site/content/docs/5.0/components/navbar.md | 30 +-- site/content/docs/5.0/components/navs-tabs.md | 78 +++---- site/content/docs/5.0/components/popovers.md | 32 +-- site/content/docs/5.0/components/progress.md | 2 +- site/content/docs/5.0/components/scrollspy.md | 26 +-- site/content/docs/5.0/components/toasts.md | 30 +-- site/content/docs/5.0/components/tooltips.md | 36 +-- .../docs/5.0/examples/album/index.html | 2 +- .../docs/5.0/examples/carousel/index.html | 14 +- .../docs/5.0/examples/dashboard/index.html | 2 +- .../5.0/examples/navbar-bottom/index.html | 4 +- .../docs/5.0/examples/navbar-fixed/index.html | 2 +- .../5.0/examples/navbar-static/index.html | 2 +- .../docs/5.0/examples/navbars/index.html | 46 ++-- .../docs/5.0/examples/offcanvas/index.html | 4 +- .../docs/5.0/examples/offcanvas/offcanvas.js | 2 +- .../5.0/examples/starter-template/index.html | 4 +- .../examples/sticky-footer-navbar/index.html | 2 +- site/content/docs/5.0/forms/input-group.md | 12 +- .../docs/5.0/getting-started/javascript.md | 8 +- site/layouts/partials/docs-navbar.html | 2 +- site/layouts/partials/docs-sidebar.html | 2 +- site/layouts/partials/docs-subnav.html | 4 +- site/layouts/partials/docs-versions.html | 2 +- 76 files changed, 827 insertions(+), 807 deletions(-) diff --git a/js/src/alert.js b/js/src/alert.js index 7eb53ac0b..724cda017 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -28,7 +28,7 @@ const DATA_KEY = 'bs.alert' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' -const SELECTOR_DISMISS = '[data-dismiss="alert"]' +const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]' const EVENT_CLOSE = `close${EVENT_KEY}` const EVENT_CLOSED = `closed${EVENT_KEY}` diff --git a/js/src/button.js b/js/src/button.js index dc9bd0e9d..42376943d 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -23,7 +23,7 @@ const DATA_API_KEY = '.data-api' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]' const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` diff --git a/js/src/carousel.js b/js/src/carousel.js index 84a88bb04..58844a387 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -91,8 +91,8 @@ const SELECTOR_ITEM = '.carousel-item' const SELECTOR_ITEM_IMG = '.carousel-item img' const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev' const SELECTOR_INDICATORS = '.carousel-indicators' -const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]' -const SELECTOR_DATA_RIDE = '[data-ride="carousel"]' +const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]' +const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]' const PointerType = { TOUCH: 'touch', @@ -419,7 +419,7 @@ class Carousel { return } - const elementInterval = parseInt(element.getAttribute('data-interval'), 10) + const elementInterval = parseInt(element.getAttribute('data-bs-interval'), 10) if (elementInterval) { this._config.defaultInterval = this._config.defaultInterval || this._config.interval @@ -576,7 +576,7 @@ class Carousel { ...Manipulator.getDataAttributes(target), ...Manipulator.getDataAttributes(this) } - const slideIndex = this.getAttribute('data-slide-to') + const slideIndex = this.getAttribute('data-bs-slide-to') if (slideIndex) { config.interval = false diff --git a/js/src/collapse.js b/js/src/collapse.js index 838d0f2a3..f3ca86f36 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -59,7 +59,7 @@ const WIDTH = 'width' const HEIGHT = 'height' const SELECTOR_ACTIVES = '.show, .collapsing' -const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' /** * ------------------------------------------------------------------------ @@ -74,7 +74,7 @@ class Collapse { this._config = this._getConfig(config) this._triggerArray = SelectorEngine.find( `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` + - `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]` + `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${element.id}"]` ) const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE) @@ -137,7 +137,7 @@ class Collapse { actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent) .filter(elem => { if (typeof this._config.parent === 'string') { - return elem.getAttribute('data-parent') === this._config.parent + return elem.getAttribute('data-bs-parent') === this._config.parent } return elem.classList.contains(CLASS_NAME_COLLAPSE) @@ -303,7 +303,7 @@ class Collapse { parent = SelectorEngine.findOne(parent) } - const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]` + const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]` SelectorEngine.find(selector, parent) .forEach(element => { diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index bcbd340ac..04b9543c8 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -47,9 +47,13 @@ const Manipulator = { ...element.dataset } - Object.keys(attributes).forEach(key => { - attributes[key] = normalizeData(attributes[key]) - }) + Object.keys(attributes) + .filter(key => key.startsWith('bs')) + .forEach(key => { + let pureKey = key.replace(/^bs/, '') + pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length) + attributes[pureKey] = normalizeData(attributes[key]) + }) return attributes }, diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 3a3f12c48..c262997ce 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -59,7 +59,7 @@ const CLASS_NAME_MENURIGHT = 'dropdown-menu-right' const CLASS_NAME_NAVBAR = 'navbar' const CLASS_NAME_POSITION_STATIC = 'position-static' -const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' const SELECTOR_FORM_CHILD = '.dropdown form' const SELECTOR_MENU = '.dropdown-menu' const SELECTOR_NAVBAR_NAV = '.navbar-nav' diff --git a/js/src/modal.js b/js/src/modal.js index d6d10ab93..c42dc154c 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -70,8 +70,8 @@ const CLASS_NAME_STATIC = 'modal-static' const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' -const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]' -const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]' const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top' @@ -473,7 +473,7 @@ class Modal { .forEach(element => { const actualPadding = element.style.paddingRight const calculatedPadding = window.getComputedStyle(element)['padding-right'] - Manipulator.setDataAttribute(element, 'padding-right', actualPadding) + Manipulator.setDataAttribute(element, 'bs-padding-right', actualPadding) element.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` }) @@ -482,7 +482,7 @@ class Modal { .forEach(element => { const actualMargin = element.style.marginRight const calculatedMargin = window.getComputedStyle(element)['margin-right'] - Manipulator.setDataAttribute(element, 'margin-right', actualMargin) + Manipulator.setDataAttribute(element, 'bs-margin-right', actualMargin) element.style.marginRight = `${parseFloat(calculatedMargin) - this._scrollbarWidth}px` }) @@ -490,7 +490,7 @@ class Modal { const actualPadding = document.body.style.paddingRight const calculatedPadding = window.getComputedStyle(document.body)['padding-right'] - Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding) + Manipulator.setDataAttribute(document.body, 'bs-padding-right', actualPadding) document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` } @@ -501,9 +501,9 @@ class Modal { // Restore fixed content padding SelectorEngine.find(SELECTOR_FIXED_CONTENT) .forEach(element => { - const padding = Manipulator.getDataAttribute(element, 'padding-right') + const padding = Manipulator.getDataAttribute(element, 'bs-padding-right') if (typeof padding !== 'undefined') { - Manipulator.removeDataAttribute(element, 'padding-right') + Manipulator.removeDataAttribute(element, 'bs-padding-right') element.style.paddingRight = padding } }) @@ -511,19 +511,19 @@ class Modal { // Restore sticky content and navbar-toggler margin SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`) .forEach(element => { - const margin = Manipulator.getDataAttribute(element, 'margin-right') + const margin = Manipulator.getDataAttribute(element, 'bs-margin-right') if (typeof margin !== 'undefined') { - Manipulator.removeDataAttribute(element, 'margin-right') + Manipulator.removeDataAttribute(element, 'bs-margin-right') element.style.marginRight = margin } }) // Restore body padding - const padding = Manipulator.getDataAttribute(document.body, 'padding-right') + const padding = Manipulator.getDataAttribute(document.body, 'bs-padding-right') if (typeof padding === 'undefined') { document.body.style.paddingRight = '' } else { - Manipulator.removeDataAttribute(document.body, 'padding-right') + Manipulator.removeDataAttribute(document.body, 'bs-padding-right') document.body.style.paddingRight = padding } } diff --git a/js/src/popover.js b/js/src/popover.js index 7203d9bab..46b693e69 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -123,7 +123,7 @@ class Popover extends Tooltip { } _getContent() { - return this.element.getAttribute('data-content') || + return this.element.getAttribute('data-bs-content') || this.config.content } diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 53c1700a5..de456e080 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -49,7 +49,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_SPY = '[data-spy="scroll"]' +const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_NAV_LINKS = '.nav-link' const SELECTOR_NAV_ITEMS = '.nav-item' @@ -241,7 +241,7 @@ class ScrollSpy { this._clear() const queries = this._selector.split(',') - .map(selector => `${selector}[data-target="${target}"],${selector}[href="${target}"]`) + .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`) const link = SelectorEngine.findOne(queries.join(',')) diff --git a/js/src/tab.js b/js/src/tab.js index f7ebfc9cd..56269e2fa 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -46,7 +46,7 @@ const SELECTOR_DROPDOWN = '.dropdown' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_ACTIVE = '.active' const SELECTOR_ACTIVE_UL = ':scope > li > .active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle' const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active' diff --git a/js/src/toast.js b/js/src/toast.js index bf5a386e8..1e50b0669 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -52,7 +52,7 @@ const Default = { delay: 5000 } -const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]' /** * ------------------------------------------------------------------------ diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 0b19a9601..505f8c853 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -443,7 +443,7 @@ class Tooltip { } getTitle() { - let title = this.element.getAttribute('data-original-title') + let title = this.element.getAttribute('data-bs-original-title') if (!title) { title = typeof this.config.title === 'function' ? @@ -578,11 +578,11 @@ class Tooltip { } _fixTitle() { - const titleType = typeof this.element.getAttribute('data-original-title') + const titleType = typeof this.element.getAttribute('data-bs-original-title') if (this.element.getAttribute('title') || titleType !== 'string') { this.element.setAttribute( - 'data-original-title', + 'data-bs-original-title', this.element.getAttribute('title') || '' ) diff --git a/js/src/util/index.js b/js/src/util/index.js index b7fac9c44..b8a53af96 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -33,7 +33,7 @@ const getUID = prefix => { } const getSelector = element => { - let selector = element.getAttribute('data-target') + let selector = element.getAttribute('data-bs-target') if (!selector || selector === '#') { const hrefAttr = element.getAttribute('href') @@ -173,7 +173,7 @@ const reflow = element => element.offsetHeight const getjQuery = () => { const { jQuery } = window - if (jQuery && !document.body.hasAttribute('data-no-jquery')) { + if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { return jQuery } diff --git a/js/tests/integration/bundle-modularity.js b/js/tests/integration/bundle-modularity.js index 07c6674e6..ed427cd92 100644 --- a/js/tests/integration/bundle-modularity.js +++ b/js/tests/integration/bundle-modularity.js @@ -2,6 +2,6 @@ import 'popper.js' import Tooltip from '../../dist/tooltip' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/bundle.js b/js/tests/integration/bundle.js index 69d754352..1c6e60bf5 100644 --- a/js/tests/integration/bundle.js +++ b/js/tests/integration/bundle.js @@ -2,6 +2,6 @@ import 'popper.js' import { Tooltip } from '../../../dist/js/bootstrap.esm.js' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 5606755b1..0ea0b64c3 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -14,14 +14,14 @@

Hello, world!

- -