Skip to content

Commit

Permalink
feat(css): deprecate $boosted-prefix in favor of $prefix (#2129)
Browse files Browse the repository at this point in the history 
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
  • Loading branch information
@louismaximepiton @julien-deramond
louismaximepiton and julien-deramond authored Jul 11, 2023
1 parent 841b0d5 commit c0b4c44
Show file tree
Hide file tree
Showing 15 changed files with 96 additions and 56 deletions.
2 changes: 1 addition & 1 deletion js/src/carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const SELECTOR_CAROUSEL_PAUSE_TEXT = 'data-bs-pause-text' // Boosted mod
const SELECTOR_CAROUSEL_DEFAULT_PLAY_TEXT = 'Play Carousel' // Boosted mod
const SELECTOR_CAROUSEL_DEFAULT_PAUSE_TEXT = 'Pause Carousel' // Boosted mod

const PREFIX_CUSTOM_PROPS = 'o-' // Boosted mod: should match `$boosted-prefix` in scss/_variables.scss
const PREFIX_CUSTOM_PROPS = 'bs-' // Boosted mod: should match `$prefix` in scss/_variables.scss

const KEY_TO_DIRECTION = {
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
Expand Down
6 changes: 3 additions & 3 deletions js/tests/unit/carousel.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1619,7 +1619,7 @@ describe('Carousel', () => {
})

// Boosted mod
it('should set --o-carousel-interval custom property on indicator if data-bs-interval is provided', () => {
it('should set --bs-carousel-interval custom property on indicator if data-bs-interval is provided', () => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <ol class="carousel-indicators">',
Expand All @@ -1642,12 +1642,12 @@ describe('Carousel', () => {
const carousel = new Carousel(carouselEl)
carousel.cycle()

expect(firstIndicator.style.getPropertyValue('--o-carousel-interval')).toEqual('7ms')
expect(firstIndicator.style.getPropertyValue('--bs-carousel-interval')).toEqual('7ms')

carousel._activeElement = secondItemEl
carousel.cycle()

expect(secondIndicator.style.getPropertyValue('--o-carousel-interval')).toEqual('9385ms')
expect(secondIndicator.style.getPropertyValue('--bs-carousel-interval')).toEqual('9385ms')
})
// End mod
})
Expand Down
2 changes: 1 addition & 1 deletion scss/_alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@
--#{$prefix}alert-icon-size: #{$alert-icon-size-sm};
--#{$prefix}alert-btn-close-offset: #{$alert-btn-close-offset-sm};
// scss-docs-end alert-sm-css-vars
--#{$boosted-prefix}icon-spacing: #{$btn-close-padding-sm};
--#{$prefix}icon-spacing: #{$btn-close-padding-sm};

.alert-icon {
margin: var(--#{$prefix}alert-icon-margin-y) 0;
Expand Down
14 changes: 7 additions & 7 deletions scss/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} var(--#{$prefix}btn-focus-shadow-rgb); // Boosted mod
--#{$boosted-prefix}icon-spacing: #{$btn-icon-padding-x}; // Boosted mod
--#{$prefix}icon-spacing: #{$btn-icon-padding-x}; // Boosted mod
// scss-docs-end btn-css-vars

display: inline-flex; // Boosted mod
Expand Down Expand Up @@ -222,23 +222,23 @@

// Boosted mod: icon button
.btn-icon {
padding: var(--#{$boosted-prefix}icon-spacing);
padding: var(--#{$prefix}icon-spacing);
}
// End mod

// Boosted mod: social button
.btn-social {
--#{$prefix}btn-border-color: currentcolor;
--#{$prefix}btn-hover-color: #{$white};
--#{$prefix}btn-hover-bg: var(--#{$boosted-prefix}network-color, #{$black});
--#{$prefix}btn-hover-border-color: var(--#{$boosted-prefix}network-color, #{$black});
--#{$prefix}btn-hover-bg: var(--#{$prefix}network-color, #{$black});
--#{$prefix}btn-hover-border-color: var(--#{$prefix}network-color, #{$black});
--#{$prefix}btn-active-color: #{$white};
--#{$prefix}btn-active-bg: #{$black};
--#{$prefix}btn-active-border-color: #{$black};
--#{$prefix}btn-disabled-color: #{$gray-500};
--#{$prefix}btn-disabled-bg: transparent;
@include border-radius(50%, 50%);
@include button-icon(var(--#{$boosted-prefix}network-logo));
@include button-icon(var(--#{$prefix}network-logo));

&.btn-inverse {
--#{$prefix}btn-color: #{$white};
Expand All @@ -253,8 +253,8 @@
$network: map-get($btn-social-networks, $name);

.btn-#{$name} {
--#{$boosted-prefix}network-color: #{map-get($network, "color")};
--#{$boosted-prefix}network-logo: #{escape-svg(url("data:image/svg+xml,#{map-get($network, "icon")}"))};
--#{$prefix}network-color: #{map-get($network, "color")};
--#{$prefix}network-logo: #{escape-svg(url("data:image/svg+xml,#{map-get($network, "icon")}"))};

&::before {
mask-size: if(map-has-key($network, "size"), map-get($network, "size"), null);
Expand Down
8 changes: 4 additions & 4 deletions scss/_carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@

.carousel-control-prev,
.carousel-control-next {
--#{$boosted-prefix}control-bg: #{rgba($carousel-indicator-active-bg, .5)}; // Boosted mod
--#{$prefix}control-bg: #{rgba($carousel-indicator-active-bg, .5)}; // Boosted mod
position: absolute;
top: 0;
bottom: 0;
Expand All @@ -108,7 +108,7 @@

// Hover state - Boosted mod: no focus state
&:hover {
--#{$boosted-prefix}control-bg: #{color-contrast($carousel-indicator-active-bg)}; // Boosted mod
--#{$prefix}control-bg: #{color-contrast($carousel-indicator-active-bg)}; // Boosted mod
color: color-contrast($carousel-control-color);
text-decoration: none;
opacity: $carousel-control-hover-opacity;
Expand All @@ -122,7 +122,7 @@
}

&:active {
--#{$boosted-prefix}control-bg: #{$carousel-control-icon-active-bg};
--#{$prefix}control-bg: #{$carousel-control-icon-active-bg};
color: $carousel-control-color;
}

Expand Down Expand Up @@ -151,7 +151,7 @@
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
background-color: var(--#{$boosted-prefix}control-bg); // Boosted mod
background-color: var(--#{$prefix}control-bg); // Boosted mod
@include button-icon($carousel-control-icon-bg, $carousel-control-icon-width, $size: $carousel-control-icon-size, $position: subtract(50%, $spacer * .1) 50%); // Boosted mod
@include border-radius(50%, 50%);
}
Expand Down
18 changes: 9 additions & 9 deletions scss/_root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

// Boosted mod
@each $icon, $svg in $svg-as-custom-props {
--#{$boosted-prefix}#{$icon}-icon: #{escape-svg($svg)};
--#{$prefix}#{$icon}-icon: #{escape-svg($svg)};
}
// End mod

Expand Down Expand Up @@ -151,13 +151,13 @@
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-inverted)};
--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-inverted};
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-inverted};
--#{$boosted-prefix}caption-color: #{$table-caption-color-inverted};
--#{$prefix}caption-color: #{$table-caption-color-inverted};
--#{$prefix}code-color: #{$code-color-inverted};
--#{$prefix}highlight-color: #{$mark-color-inverted};
--#{$prefix}highlight-bg: #{$mark-bg-inverted};
--#{$boosted-prefix}kbd-color: #{$kbd-color-inverted};
--#{$boosted-prefix}kbd-bg: #{$kbd-bg-inverted};
--#{$boosted-prefix}pre-color: #{$pre-color-inverted};
--#{$prefix}kbd-color: #{$kbd-color-inverted};
--#{$prefix}kbd-bg: #{$kbd-bg-inverted};
--#{$prefix}pre-color: #{$pre-color-inverted};

// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
[class*="bg-"]:not(&):not(.bg-transparent) {
Expand All @@ -168,13 +168,13 @@
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
--#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color};
--#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color};
--#{$boosted-prefix}caption-color: #{$table-caption-color};
--#{$prefix}caption-color: #{$table-caption-color};
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};
--#{$boosted-prefix}kbd-color: #{$kbd-color};
--#{$boosted-prefix}kbd-bg: #{$kbd-bg};
--#{$boosted-prefix}pre-color: #{$pre-color};
--#{$prefix}kbd-color: #{$kbd-color};
--#{$prefix}kbd-bg: #{$kbd-bg};
--#{$prefix}pre-color: #{$pre-color};
}
}
// End mod
Expand Down
3 changes: 1 addition & 2 deletions scss/_tags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,7 @@
min-height: subtract(var(--#{$prefix}tag-close-size), .625rem);
content: "";
background-color: currentcolor;
-webkit-mask: escape-svg(var(--#{$boosted-prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem); // stylelint-disable-line property-no-vendor-prefix
mask: escape-svg(var(--#{$boosted-prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem);
mask: escape-svg(var(--#{$prefix}close-icon)) no-repeat 50% / subtract(var(--#{$prefix}tag-close-size), .625rem);
}

&:hover,
Expand Down
2 changes: 1 addition & 1 deletion scss/_toasts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));

.btn-close {
--#{$boosted-prefix}icon-spacing: #{$btn-close-padding-sm}; // Boosted mod
--#{$prefix}icon-spacing: #{$btn-close-padding-sm}; // Boosted mod
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x);
}
Expand Down
36 changes: 19 additions & 17 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,8 +447,10 @@ $color-mode-type: data !default; // `data` or `media-query`

$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;
$boosted-variable-prefix: o- !default; // Deprecated in v5.2.0 for the shorter `$boosted-prefix`
$boosted-prefix: $boosted-variable-prefix !default;
// fusv-disable
$boosted-variable-prefix: o- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$boosted-prefix: $boosted-variable-prefix !default; // Deprecated in v5.3.0 for the shorter `$prefix`
// fusv-enable

// Gradient
//
Expand Down Expand Up @@ -911,7 +913,7 @@ $table-striped-columns-order: even !default;

$table-group-separator-color: currentcolor !default;

$table-caption-color: var(--#{$boosted-prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$table-caption-color: var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$table-caption-color-inverted: var(--#{$prefix}body-bg) !default; // Boosted mod
$table-caption-padding-y: .75rem !default; // Boosted mod

Expand Down Expand Up @@ -1158,7 +1160,7 @@ $form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: var(--#{$boosted-prefix}check-icon) !default;
$form-check-input-checked-bg-image: var(--#{$prefix}check-icon) !default;
$form-check-input-disabled-color: $gray-900 !default; // Boosted mod
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

Expand Down Expand Up @@ -1192,7 +1194,7 @@ $form-star-focus-box-shadow: $input-btn-focus-box-shadow !default; // Depre
// Boosted mod: no $form-switch-color
$form-switch-width: $spacer * 3 !default; // Boosted mod
$form-switch-padding-start: $form-switch-width + .625rem !default; // Boosted mod
$form-switch-bg-image: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
$form-switch-bg-image: var(--#{$prefix}close-icon) !default; // Boosted mod
$form-switch-bg-position: right .5rem top 50% !default; // Boosted mod
$form-switch-bg-size: .75rem !default; // Boosted mod
$form-switch-bg-square-size: add(1rem, $spacer * .5) !default; // Boosted mod
Expand Down Expand Up @@ -1305,8 +1307,8 @@ $form-feedback-valid-color: $success !default; // Boosted mod: deprecate
$form-feedback-invalid-color: $danger !default; // Boosted mod: deprecated in v5.3.0
// fusv-enable

$form-feedback-icon-valid: var(--#{$boosted-prefix}success-icon) !default;
$form-feedback-icon-invalid: var(--#{$boosted-prefix}error-icon) !default;
$form-feedback-icon-valid: var(--#{$prefix}success-icon) !default;
$form-feedback-icon-invalid: var(--#{$prefix}error-icon) !default;
$form-feedback-icon-size: add($spacer * .25, $spacer * .5) !default; // Boosted mod
$form-feedback-line-height: $line-height-sm !default; // Boosted mod
// scss-docs-end form-feedback-variables
Expand Down Expand Up @@ -1608,7 +1610,7 @@ $pagination-transition: $transition-focus !default;

// Boosted mod
$pagination-padding-end: 1.125rem !default;
$pagination-icon: var(--#{$boosted-prefix}chevron-icon) !default;
$pagination-icon: var(--#{$prefix}chevron-icon) !default;
$pagination-icon-size: subtract($spacer * 2, calc(var(--#{$prefix}border-width) * 2)) !default; // stylelint-disable-line function-disallowed-list
$pagination-icon-width: add(.5rem, 1px) !default;
$pagination-icon-height: subtract(1rem, 1px) !default;
Expand Down Expand Up @@ -1927,10 +1929,10 @@ $alert-border-width: var(--#{$prefix}border-width) !default;
// Boosted mod
$alert-padding-sm: $spacer * .5 !default;
$alert-icons: (
"success": var(--#{$boosted-prefix}success-icon),
"success": var(--#{$prefix}success-icon),
"info": escape-svg($info-icon),
"warning": escape-svg($warning-icon),
"danger": var(--#{$boosted-prefix}error-icon)
"danger": var(--#{$prefix}error-icon)
) !default;
$alert-logo-size: add($spacer * .5, 1rem) !default;
$alert-logo-size-sm: add(1rem, 1px) !default;
Expand Down Expand Up @@ -2112,7 +2114,7 @@ $carousel-caption-spacer: $spacer * 3 !default;
$carousel-control-icon-width: 2.5rem !default;
// Boosted mod
$carousel-control-icon-size: 1rem 1.5rem !default;
$carousel-control-icon-bg: var(--#{$boosted-prefix}chevron-icon) !default;
$carousel-control-icon-bg: var(--#{$prefix}chevron-icon) !default;
$carousel-control-icon-active-bg: $component-active-bg !default;

$carousel-control-pause-indicators-spacing: 10px !default;
Expand Down Expand Up @@ -2156,11 +2158,11 @@ $spinner-border-width-lg: calc(var(--#{$prefix}border-width) * 4) !default; // B
// scss-docs-start close-variables
$btn-close-width: $spacer !default; // Boosted mod
$btn-close-height: $btn-close-width !default;
$btn-close-padding: var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x}) !default; // Boosted mod
$btn-close-padding: var(--#{$prefix}icon-spacing, #{$btn-icon-padding-x}) !default; // Boosted mod
$btn-close-border-width: var(--#{$prefix}border-width) !default; // Boosted mod
$btn-close-border-color: transparent !default; // Boosted mod
$btn-close-color: var(--#{$prefix}emphasis-color) !default;
$btn-close-bg: var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
$btn-close-bg: var(--#{$prefix}close-icon) !default; // Boosted mod
// Boosted mod
// fusv-disable
$btn-close-focus-shadow: $btn-focus-box-shadow !default; // Deprecated in v5.3.0
Expand Down Expand Up @@ -2217,13 +2219,13 @@ $code-color-inverted: $gray-600 !default;
$kbd-padding-y: $spacer * .05 !default;
$kbd-padding-x: $spacer * .05 !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: var(--#{$boosted-prefix}kbd-color, $black) !default;
$kbd-color: var(--#{$prefix}kbd-color, $black) !default;
$kbd-color-inverted: $white !default;
$kbd-bg: var(--#{$boosted-prefix}kbd-bg, $gray-300) !default;
$kbd-bg: var(--#{$prefix}kbd-bg, $gray-300) !default;
$kbd-bg-inverted: $gray-900 !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6

$pre-color: var(--#{$boosted-prefix}pre-color, $gray-900) !default;
$pre-color: var(--#{$prefix}pre-color, $gray-900) !default;
$pre-color-inverted: $gray-300 !default;
$pre-line-height: 1.25 !default;
// End mod
Expand All @@ -2248,7 +2250,7 @@ $back-to-top-link-offset-top-xl: subtract(100vh, $spacer * 5) !default;
$back-to-top-title-offset-right: add(100%, var(--#{$prefix}border-width)) !default;
$back-to-top-title-padding: subtract($btn-padding-y, 1px) $btn-padding-x add($btn-padding-y, 1px) !default;
$back-to-top-title-bg-color: $white !default;
$back-to-top-icon: var(--#{$boosted-prefix}chevron-icon) !default;
$back-to-top-icon: var(--#{$prefix}chevron-icon) !default;
$back-to-top-icon-width: add(.5rem, 1px) !default;
$back-to-top-icon-height: subtract(1rem, 1px) !default;
// scss-docs-end back-to-top
Expand Down
6 changes: 3 additions & 3 deletions scss/forms/_form-check.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@

.form-switch {
// Boosted mod
--#{$boosted-prefix}switch-gradient: #{linear-gradient(to right, $black $form-switch-bg-square-size, transparent)};
--#{$prefix}switch-gradient: #{linear-gradient(to right, $black $form-switch-bg-square-size, transparent)};

min-height: $form-switch-width * .5;
padding-left: $form-switch-padding-start;
Expand All @@ -166,7 +166,7 @@
height: $form-switch-width * .5;
margin-left: $form-switch-padding-start * -1;
background-color: $white; // Boosted mod
background-image: var(--#{$prefix}form-switch-bg), var(--#{$boosted-prefix}switch-gradient); // Boosted mod: extra param `var(--#{$boosted-prefix}switch-gradient)`
background-image: var(--#{$prefix}form-switch-bg), var(--#{$prefix}switch-gradient); // Boosted mod: extra param `var(--#{$prefix}switch-gradient)`
filter: $invert-filter; // Boosted mod
background-position: $form-switch-bg-position, 0 0;
background-size: $form-switch-bg-size, $form-switch-bg-square-size 100%; // Get a 1px separation
Expand Down Expand Up @@ -202,7 +202,7 @@
}

&:not(:disabled) {
--#{$boosted-prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)};
--#{$prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)};
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/helpers/_chevron-link.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
margin-left: $linked-chevron-margin-left;
vertical-align: middle;
content: "";
background-image: var(--#{$boosted-prefix}chevron-icon);
background-image: var(--#{$prefix}chevron-icon);
background-repeat: no-repeat;
transform: $linked-chevron-transform;
}
Expand Down
3 changes: 1 addition & 2 deletions scss/mixins/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null, $icon-spacing: $btn-icon-padding-x, $letter-spacing: $letter-spacing-base) {
--#{$boosted-prefix}icon-spacing: #{$icon-spacing}; // Boosted mod: used for icons
--#{$prefix}icon-spacing: #{$icon-spacing}; // Boosted mod: used for icons
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
Expand Down Expand Up @@ -73,7 +73,6 @@
min-height: inherit;
content: "";
background-color: currentcolor;
-webkit-mask: #{$icon} no-repeat #{$position} / #{$size}; // stylelint-disable-line property-no-vendor-prefix
mask: #{$icon} no-repeat #{$position} / #{$size};
}
}
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/carousel.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ You can add indicators to the carousel, alongside the previous/next controls. Th

<!-- Boosted mod -->

Indicators are animated to show the active slide progress, based on its interval. It adapts to [any interval you set](#individual-carousel-item-interval) thanks to the `--o-carousel-interval` CSS custom property.
Indicators are animated to show the active slide progress, based on its interval. It adapts to [any interval you set](#individual-carousel-item-interval) thanks to the `--bs-carousel-interval` CSS custom property.
Carousel progress indicator is paused under multiple conditions:

* when the `prefers-reduced-motion` media query equals `reduce` [to improve accessibility]({{< docsref "/getting-started/accessibility#reduced-motion" >}}).
Expand Down
Loading

0 comments on commit c0b4c44

Please sign in to comment.