Skip to content

Commit f06a544

Browse files
castastrophecastastrophe
committed
feat(base): remove dir polyfill [CSS-222]
1 parent 142fe7f commit f06a544

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+162
-377
lines changed

‎packages/accordion/src/spectrum-accordion-item.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,7 @@
4545
inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
4646
}
4747

48-
.iconContainer:dir(rtl),
49-
:host([dir="rtl"]) .iconContainer {
48+
.iconContainer:dir(rtl) {
5049
transform: scaleX(-1);
5150
}
5251

‎packages/accordion/src/spectrum-accordion.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@
5151
);
5252
}
5353

54-
:host:dir(rtl),
55-
:host([dir="rtl"]) {
54+
:host:dir(rtl) {
5655
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
5756
}
5857

‎packages/action-button/src/spectrum-action-button.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,7 @@
101101
--spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color)));
102102
}
103103

104-
:host:dir(rtl),
105-
:host([dir="rtl"]) {
104+
:host:dir(rtl) {
106105
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
107106
}
108107

‎packages/action-group/src/action-group.css

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
--spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
1919
}
2020

21-
:host([dir][compact][vertical]) ::slotted(:nth-child(n)) {
21+
:host([compact][vertical]) ::slotted(:nth-child(n)) {
2222
margin-right: 0;
2323
margin-left: 0;
2424
}
@@ -41,32 +41,26 @@
4141
}
4242

4343
:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child) {
44-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
4544
--overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0;
4645
}
4746

4847
:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child) {
49-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
5048
--overriden-border-radius: 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
5149
}
5250

53-
:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
54-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
51+
:host([compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
5552
--overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
5653
}
5754

58-
:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
59-
/* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
55+
:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:not([role]):first-child) {
6056
--overriden-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
6157
}
6258

63-
:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
64-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
59+
:host([compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
6560
--overriden-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
6661
}
6762

68-
:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
69-
/* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
63+
:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:not([role]):last-child) {
7064
--overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
7165
}
7266

@@ -75,32 +69,26 @@
7569
}
7670

7771
:host([compact][vertical]:not([quiet])) ::slotted(:first-child) {
78-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
7972
--mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0;
8073
}
8174

8275
:host([compact][vertical]:not([quiet])) ::slotted(:last-child) {
83-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
8476
--mod-actionbutton-focus-ring-border-radius: 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
8577
}
8678

87-
:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
88-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
79+
:host([compact]:not([quiet], [vertical])) ::slotted(:first-child) {
8980
--mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
9081
}
9182

92-
:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
93-
/* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
83+
:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:first-child) {
9484
--mod-actionbutton-focus-ring-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
9585
}
9686

97-
:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
98-
/* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
87+
:host([compact]:not([quiet], [vertical])) ::slotted(:last-child) {
9988
--mod-actionbutton-focus-ring-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
10089
}
10190

102-
:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
103-
/* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
91+
:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:last-child) {
10492
--mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
10593
}
10694

‎packages/action-group/test/action-group.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1491,7 +1491,7 @@ describe('ActionGroup', () => {
14911491
`);
14921492
await acceptKeyboardInput(el);
14931493
});
1494-
it('accepts keybord input when [dir="ltr"]', async () => {
1494+
it('accepts keybord input when in left-to-right direction', async () => {
14951495
const el = await fixture<ActionGroup>(html`
14961496
<sp-action-group
14971497
label="Selects Single Group"

‎packages/action-menu/src/action-menu.css

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,19 @@
3838
max-width: none;
3939
}
4040

41-
:host([dir="ltr"]) ::slotted([slot="icon"]),
42-
:host([dir="ltr"]) .icon {
43-
/* [dir=ltr] .spectrum-ActionButton .spectrum-Icon */
41+
::slotted([slot="icon"]),
42+
.icon {
4443
margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
4544
}
4645

47-
:host([dir="rtl"]) ::slotted([slot="icon"]),
48-
:host([dir="rtl"]) .icon {
49-
/* [dir=rtl] .spectrum-ActionButton .spectrum-Icon */
46+
::slotted([slot="icon"]:dir(rtl)),
47+
.icon:dir(rtl) {
5048
margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
5149
}
5250

53-
:host([dir]) slot[icon-only]::slotted([slot="icon"]),
54-
:host([dir]) slot[icon-only] .icon {
55-
margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1); /* .spectrum-ActionButton-hold+.spectrum-ActionButton-icon,
56-
* .spectrum-ActionButton-icon:only-child */
51+
slot[icon-only]::slotted([slot="icon"]),
52+
slot[icon-only] .icon {
53+
margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1);
5754
}
5855

5956
sp-overlay:not(:defined) {

‎packages/breadcrumbs/src/breadcrumbs.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
--mod-breadcrumbs-action-button-spacing-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact));
2525
}
2626

27-
:host([dir]) slot[slot="icon"]::slotted([slot="icon"]),
28-
:host([dir]) slot[slot="icon"] .icon {
27+
slot[slot="icon"]::slotted([slot="icon"]:dir(rtl)),
28+
slot[slot="icon"] .icon:dir(rtl) {
2929
margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1);
3030
}

‎packages/breadcrumbs/src/spectrum-breadcrumbs-item.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
position: relative;
1919
}
2020

21-
#separator:dir(rtl),
22-
:host([dir="rtl"]) #separator {
21+
#separator:dir(rtl) {
2322
transform: scaleX(-1);
2423
}
2524

‎packages/button-group/src/button-group.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,9 @@
1515

1616
:host([vertical]) ::slotted(sp-action-button) {
1717
--spectrum-actionbutton-label-flex-grow: 1;
18-
}
19-
20-
:host([dir="ltr"][vertical]) ::slotted(sp-action-button) {
2118
--spectrum-actionbutton-label-text-align: left;
2219
}
2320

24-
:host([dir="rtl"][vertical]) ::slotted(sp-action-button) {
21+
:host([vertical]:dir(rtl)) ::slotted(sp-action-button):dir(rtl) {
2522
--spectrum-actionbutton-label-text-align: right;
2623
}

‎packages/button/src/button-base.css

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,16 @@
1313
@import url("./spectrum-button-base.css");
1414

1515
:host {
16-
display: inline-flex;
17-
vertical-align: top;
18-
1916
--spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-100);
2017
--spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
21-
}
2218

23-
:host([dir]) {
2419
/* spectrum-button.css uses "-webkit-appearance: button" to workaround an
25-
* iOS and Safari issue. However, it results in incorrect styling
26-
* when applied in :host
27-
*/
20+
* iOS and Safari issue. However, it results in incorrect styling
21+
* when applied in :host
22+
*/
2823
-webkit-appearance: none; /* stylelint-disable-line */
24+
display: inline-flex;
25+
vertical-align: top;
2926
}
3027

3128
:host([disabled]) {

‎packages/card/src/card.css

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,10 @@
2525

2626
.action-button {
2727
flex-grow: 0;
28-
}
29-
30-
:host([dir="ltr"]) .action-button {
3128
margin-left: auto;
3229
}
3330

34-
:host([dir="rtl"]) .action-button {
31+
.action-button:dir(rtl) {
3532
margin-right: auto;
3633
}
3734

‎packages/color-area/src/ColorArea.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -245,10 +245,10 @@ export class ColorArea extends SpectrumElement {
245245
deltaY = step * -1;
246246
break;
247247
case 'ArrowLeft':
248-
deltaX = this.step * (this.isLTR ? -1 : 1);
248+
deltaX = this.step * (this.dir === 'ltr' ? -1 : 1);
249249
break;
250250
case 'ArrowRight':
251-
deltaX = this.step * (this.isLTR ? 1 : -1);
251+
deltaX = this.step * (this.dir === 'ltr' ? 1 : -1);
252252
break;
253253
case 'PageUp':
254254
deltaY = step * 10;
@@ -257,10 +257,10 @@ export class ColorArea extends SpectrumElement {
257257
deltaY = step * -10;
258258
break;
259259
case 'Home':
260-
deltaX = step * (this.isLTR ? -10 : 10);
260+
deltaX = step * (this.dir === 'ltr' ? -10 : 10);
261261
break;
262262
case 'End':
263-
deltaX = step * (this.isLTR ? 10 : -10);
263+
deltaX = step * (this.dir === 'ltr' ? 10 : -10);
264264
break;
265265
/* c8 ignore next 2 */
266266
default:
@@ -404,7 +404,7 @@ export class ColorArea extends SpectrumElement {
404404
Math.min(1, (offsetY - minOffsetY) / height)
405405
);
406406

407-
return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];
407+
return [this.dir === 'ltr' ? percentX : 1 - percentX, 1 - percentY];
408408
}
409409

410410
private handleAreaPointerdown(event: PointerEvent): void {
@@ -465,7 +465,7 @@ export class ColorArea extends SpectrumElement {
465465
color=${this.colorController.getHslString()}
466466
?disabled=${this.disabled}
467467
style=${`transform: translate(${
468-
(this.isLTR ? this.x : 1 - this.x) * width
468+
(this.dir === 'ltr' ? this.x : 1 - this.x) * width
469469
}px, ${height - this.y * height}px);`}
470470
${streamingListener({
471471
start: ['pointerdown', this.handlePointerdown],

‎packages/color-area/src/color-area.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
height: 100%;
3535
}
3636

37-
:host([dir="rtl"]) .gradient {
37+
.gradient:dir(rtl) {
3838
transform: scaleX(-1);
3939
}
4040

‎packages/color-area/src/spectrum-color-area.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@
5858
inset-block-start: 0;
5959
}
6060

61-
.handle:dir(rtl),
62-
:host([dir="rtl"]) .handle {
61+
.handle:dir(rtl) {
6362
inset-inline-end: 0;
6463
}
6564

‎packages/color-loupe/src/spectrum-color-loupe.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@
2727
inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2);
2828
}
2929

30-
:host:dir(rtl),
31-
:host([dir="rtl"]) {
30+
:host:dir(rtl) {
3231
inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2 - 1px);
3332
}
3433

‎packages/color-slider/src/ColorSlider.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,10 +129,10 @@ export class ColorSlider extends Focusable {
129129
delta = -this.step;
130130
break;
131131
case 'ArrowLeft':
132-
delta = this.step * (this.isLTR ? -1 : 1);
132+
delta = this.step * (this.dir === 'ltr' ? -1 : 1);
133133
break;
134134
case 'ArrowRight':
135-
delta = this.step * (this.isLTR ? 1 : -1);
135+
delta = this.step * (this.dir === 'ltr' ? 1 : -1);
136136
break;
137137
default:
138138
return;
@@ -269,7 +269,9 @@ export class ColorSlider extends Focusable {
269269

270270
const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
271271
const sliderHandlePosition =
272-
this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;
272+
this.vertical || this.dir === 'rtl'
273+
? 100 - 100 * percent
274+
: 100 * percent;
273275

274276
return sliderHandlePosition;
275277
}

‎packages/color-slider/src/spectrum-color-slider.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,7 @@
8787
border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
8888
}
8989

90-
.gradient:dir(rtl),
91-
:host([dir="rtl"]) .gradient {
90+
.gradient:dir(rtl) {
9291
transform: scaleX(-1);
9392
}
9493

‎packages/color-wheel/src/ColorWheel.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,10 @@ export class ColorWheel extends Focusable {
118118
delta = -this.step;
119119
break;
120120
case 'ArrowLeft':
121-
delta = this.step * (this.isLTR ? -1 : 1);
121+
delta = this.step * (this.dir === 'ltr' ? -1 : 1);
122122
break;
123123
case 'ArrowRight':
124-
delta = this.step * (this.isLTR ? 1 : -1);
124+
delta = this.step * (this.dir === 'ltr' ? 1 : -1);
125125
break;
126126
default:
127127
return;
@@ -253,7 +253,7 @@ export class ColorWheel extends Focusable {
253253
const pointY = event.clientY - centerY;
254254
const value = (Math.atan2(pointY, pointX) * 180) / Math.PI;
255255

256-
return (360 + (360 + (this.isLTR ? value : 180 - value))) % 360;
256+
return (360 + (360 + (this.dir === 'ltr' ? value : 180 - value))) % 360;
257257
}
258258

259259
private handleGradientPointerdown(event: PointerEvent): void {
@@ -305,7 +305,7 @@ export class ColorWheel extends Focusable {
305305

306306
// Calculate handle position on the wheel.
307307
const translateX =
308-
(this.isLTR ? 1 : -1) *
308+
(this.dir === 'ltr' ? 1 : -1) *
309309
(radius - trackWidth / 2) *
310310
Math.cos((this.value * Math.PI) / 180);
311311
const translateY =

‎packages/color-wheel/src/color-wheel.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
z-index: 0;
3434
}
3535

36-
:host([dir="rtl"]) .wheel,
37-
:host([dir="rtl"]) ::slotted([slot="gradient"]) {
36+
.wheel:dir(rtl),
37+
::slotted([slot="gradient"]:dir(rtl)) {
3838
transform: scaleX(-1);
3939
}

‎packages/combobox/src/spectrum-combobox.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,8 +220,7 @@
220220
inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
221221
}
222222

223-
.progress-circle:dir(rtl),
224-
:host([dir="rtl"]) .progress-circle {
223+
.progress-circle:dir(rtl) {
225224
inset-inline-start: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
226225
inset-inline-end: inherit;
227226
}

0 commit comments

Comments
 (0)