Skip to content

Commit 57168f6

Browse files
Elliott Marquezcopybara-github
authored andcommitted
fix(slider): nested dir attributes do not break on chrome 120+
fixes the case where there is a `dir=rtl` grandparent and a `dir=ltr` parent to slider. PiperOrigin-RevId: 592086653
1 parent 422f105 commit 57168f6

File tree

1 file changed

+31
-33
lines changed

1 file changed

+31
-33
lines changed

slider/internal/_slider.scss

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -199,16 +199,12 @@ $_md-sys-shape: tokens.md-sys-shape-values();
199199
}
200200

201201
// rtl for active track clipping
202-
@each $_rtl-selectors in _get-rtl-selectors('.track', '::after') {
203-
#{$_rtl-selectors} {
204-
clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
205-
}
202+
@include _get-rtl-selectors('.track', '::after') {
203+
clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
206204
}
207205

208-
@each $_rtl-selectors in _get-rtl-selectors('.tickmarks', '::after') {
209-
#{$_rtl-selectors} {
210-
clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
211-
}
206+
@include _get-rtl-selectors('.tickmarks', '::after') {
207+
clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
212208
}
213209

214210
:host([disabled]) .track::after {
@@ -442,10 +438,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
442438
}
443439

444440
// in 'rtl', clip right side of "lesser" input
445-
@each $_rtl-selector in _get-rtl-selectors('.ranged input.start') {
446-
#{$_rtl-selector} {
447-
clip-path: inset(0 0 0 $_clip-to-end);
448-
}
441+
@include _get-rtl-selectors('.ranged input.start') {
442+
clip-path: inset(0 0 0 $_clip-to-end);
449443
}
450444

451445
// clip right side of "end" input
@@ -454,10 +448,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
454448
}
455449

456450
// in 'rtl', clip left side of "greater" input
457-
@each $_rtl-selector in _get-rtl-selectors('.ranged input.end') {
458-
#{$_rtl-selector} {
459-
clip-path: inset(0 $_clip-to-start 0 0);
460-
}
451+
@include _get-rtl-selectors('.ranged input.end') {
452+
clip-path: inset(0 $_clip-to-start 0 0);
461453
}
462454

463455
.onTop {
@@ -483,19 +475,26 @@ $_md-sys-shape: tokens.md-sys-shape-values();
483475
}
484476
}
485477

486-
// Returns a list of rtl selectors to construct distinct rulesets. Seprating
487-
// rulesets ensure they are not dropped on browsers where one is not supported;
488-
// note, `:where` cannot be used to create compound selectors that contain
478+
// Creates a mixin of rtl selectors to construct distinct rulesets. If `:dir` is
479+
// supported, then it will take precedence over `:host-context` via a `@supports
480+
// not selector(:dir(rtl))` at-rule. Seprating rulesets ensure they are not
481+
// dropped on browsers where one is not supported;
482+
// Note, `:where` cannot be used to create compound selectors that contain
489483
// pseudo elements
490484
// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
491-
@function _get-rtl-selectors($selector: '', $suffix: '') {
492-
@return (
493-
// TODO(b/279152429) remove selectors other than `:dir` when browser
494-
// support improves.
495-
':host-context([dir="rtl"]) #{$selector}#{$suffix}',
496-
':host([dir="rtl"]) #{$selector}#{$suffix}',
497-
'#{$selector}:dir(rtl)#{$suffix}'
498-
);
485+
@mixin _get-rtl-selectors($selector: '', $suffix: '') {
486+
$host-context-selectors: ':host-context([dir="rtl"]) #{$selector}#{$suffix}, :host([dir="rtl"]) #{$selector}#{$suffix}';
487+
$dir-selector: '#{$selector}:dir(rtl)#{$suffix}';
488+
489+
@supports not selector(:dir(rtl)) {
490+
#{$host-context-selectors} {
491+
@content;
492+
}
493+
}
494+
495+
#{$dir-selector} {
496+
@content;
497+
}
499498
}
500499

501500
// Returns a background-image with sized circular ticks of the given color.
@@ -536,11 +535,10 @@ $_md-sys-shape: tokens.md-sys-shape-values();
536535
transform: translateX(var(--_x-translate));
537536
}
538537

539-
@each $_rtl-selectors
540-
in _get-rtl-selectors('input.#{$start-or-end}', '::-webkit-slider-thumb')
541-
{
542-
#{$_rtl-selectors} {
543-
transform: translateX(calc(-1 * var(--_x-translate)));
544-
}
538+
@include _get-rtl-selectors(
539+
'input.#{$start-or-end}',
540+
'::-webkit-slider-thumb'
541+
) {
542+
transform: translateX(calc(-1 * var(--_x-translate)));
545543
}
546544
}

0 commit comments

Comments
 (0)