Skip to content

Commit f37dec6

Browse files
rubencarvalhorubencarvalho
authored
chore(base): remove dir management from SpectrumElement and sp-theme (#5936)
1 parent 330b56f commit f37dec6

File tree

83 files changed

+333
-613
lines changed

Some content is hidden

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

83 files changed

+333
-613
lines changed

‎.changeset/remove-dir-overrides.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@spectrum-web-components/base': patch
3+
'@spectrum-web-components/theme': patch
4+
'@spectrum-web-components/core': patch
5+
---
6+
7+
**Refactored**: Overhauled text direction management across the component library. Previously, `SpectrumElement` and `sp-theme` actively managed `dir` by traversing the DOM on connect, setting `dir` attributes on every component, and observing changes via `MutationObserver`. This has been replaced with a passive approach that relies on the native CSS `:dir()` pseudo-class and `getComputedStyle(this).direction` for JavaScript access, letting the browser's built-in direction inheritance do the work. Removed redundant `dir` property overrides from individual components, replaced `[dir]` attribute selectors with `:dir()` in stylesheets, and converted physical CSS properties to logical equivalents where applicable.

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ parameters:
2222
# 3. Commit this change to the PR branch where the changes exist.
2323
current_golden_images_hash:
2424
type: string
25-
default: 8092134b1c5c9652cc053d0daa2e4fdaa8572347
25+
default: c420a27826be5bc391cddeac8ba3de0872c725eb
2626

2727
wireit_cache_name:
2828
type: string

‎1st-gen/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

‎1st-gen/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

‎1st-gen/packages/action-button/src/spectrum-action-button.css‎

Lines changed: 2 additions & 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

@@ -264,6 +263,7 @@
264263
--spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width)));
265264
--spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width)));
266265
--spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)));
266+
267267
min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
268268
block-size: var(--spectrum-actionbutton-height);
269269
border-radius: var(--spectrum-actionbutton-border-radius);

‎1st-gen/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

‎1st-gen/packages/action-group/test/action-group.test.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ import {
5252
mouseClickOn,
5353
sendTabKey,
5454
testForLitDevWarnings,
55-
} from '../../../test/testing-helpers';
55+
} from '../../../test/testing-helpers.js';
5656
import { controlled } from '../stories/action-group-tooltip.stories.js';
5757
import '../stories/action-group.stories.js';
5858
import { HasActionMenuAsChild } from '../stories/action-group.stories.js';
@@ -1480,13 +1480,9 @@ describe('ActionGroup', () => {
14801480
`);
14811481
await acceptKeyboardInput(el);
14821482
});
1483-
it('accepts keybord input when [dir="ltr"]', async () => {
1483+
it('accepts keybord input when in left-to-right direction', async () => {
14841484
const el = await fixture<ActionGroup>(html`
1485-
<sp-action-group
1486-
label="Selects Single Group"
1487-
selects="single"
1488-
dir="ltr"
1489-
>
1485+
<sp-action-group label="Selects Single Group" selects="single">
14901486
<sp-action-button>First</sp-action-button>
14911487
<sp-action-button disabled>Second</sp-action-button>
14921488
<sp-action-button class="third">Third</sp-action-button>

‎1st-gen/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"]:dir(ltr)),
42+
.icon:dir(ltr) {
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) {

‎1st-gen/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"]),
28+
slot[slot="icon"] .icon {
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
}

‎1st-gen/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

0 commit comments

Comments
 (0)