Skip to content

Commit ff5dda6

Browse files
castastrophecastastrophe
committed
fix: deprecate logical transform plugin (#2437)
1 parent b4f9142 commit ff5dda6

Some content is hidden

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

42 files changed

+7355
-8843
lines changed

‎components/accordion/index.css‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ governing permissions and limitations under the License.
4545
--spectrum-accordion-component-edge-to-text: var(
4646
--spectrum-component-edge-to-text-75
4747
);
48+
4849
/* Text header */
4950
--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
5051
--spectrum-accordion-item-header-font-weight: var(
@@ -55,13 +56,7 @@ governing permissions and limitations under the License.
5556
);
5657
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
5758
--spectrum-accordion-item-header-line-height: 1.25;
58-
&:lang(ja),
59-
&:lang(zh),
60-
&:lang(ko) {
61-
--spectrum-accordion-item-header-line-height: var(
62-
--spectrum-cjk-line-height-100
63-
);
64-
}
59+
6560
/* Text body */
6661
--spectrum-accordion-item-content-font: var(
6762
--spectrum-sans-font-family-stack
@@ -76,13 +71,7 @@ governing permissions and limitations under the License.
7671
--spectrum-accordion-item-content-line-height: var(
7772
--spectrum-line-height-100
7873
);
79-
&:lang(ja),
80-
&:lang(zh),
81-
&:lang(ko) {
82-
--spectrum-accordion-item-content-line-height: var(
83-
--spectrum-cjk-line-height-100
84-
);
85-
}
74+
8675
/* Colors */
8776
--spectrum-accordion-background-color-default: rgba(
8877
var(--spectrum-gray-900-rgb),
@@ -100,6 +89,7 @@ governing permissions and limitations under the License.
10089
var(--spectrum-gray-900-rgb),
10190
var(--spectrum-background-opacity-key-focus)
10291
);
92+
10393
/* Label */
10494
--spectrum-accordion-item-header-color-default: var(
10595
--spectrum-neutral-content-color-default
@@ -120,12 +110,15 @@ governing permissions and limitations under the License.
120110
--spectrum-accordion-item-content-disabled-color: var(
121111
--spectrum-disabled-content-color
122112
);
113+
123114
/* Body */
124115
--spectrum-accordion-item-content-color: var(--spectrum-body-color);
116+
125117
/* Focus indicator */
126118
--spectrum-accordion-focus-indicator-color: var(
127119
--spectrum-focus-indicator-color
128120
);
121+
129122
/* Divider */
130123
--spectrum-accordion-divider-color: var(--spectrum-gray-300);
131124
--spectrum-accordion-min-block-size: max(
@@ -151,6 +144,22 @@ governing permissions and limitations under the License.
151144
)
152145
)
153146
);
147+
148+
[dir="rtl"] &,
149+
&:dir(rtl) {
150+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
151+
}
152+
153+
&:lang(ja),
154+
&:lang(zh),
155+
&:lang(ko) {
156+
--spectrum-accordion-item-header-line-height: var(
157+
--spectrum-cjk-line-height-100
158+
);
159+
--spectrum-accordion-item-content-line-height: var(
160+
--spectrum-cjk-line-height-100
161+
);
162+
}
154163
}
155164

156165
.spectrum-Accordion--compact {
@@ -621,19 +630,9 @@ governing permissions and limitations under the License.
621630

622631
.spectrum-Accordion-item {
623632
&.is-open {
624-
> .spectrum-Accordion-itemHeading
625-
> .spectrum-Accordion-itemIconContainer
626-
> .spectrum-Accordion-itemIndicator {
627-
/* stylelint-disable declaration-property-value-no-unknown */
628-
transform: logical rotate(90deg);
629-
/* stylelint-enable declaration-property-value-no-unknown */
630-
}
631-
632-
> .spectrum-Accordion-itemIconContainer
633-
> .spectrum-Accordion-itemIndicator {
634-
/* stylelint-disable declaration-property-value-no-unknown */
635-
transform: logical rotate(90deg);
636-
/* stylelint-enable declaration-property-value-no-unknown */
633+
> .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
634+
> .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
635+
transform: var(--spectrum-logical-rotation,) rotate(90deg);
637636
}
638637

639638
> .spectrum-Accordion-itemContent {

‎components/actionbutton/index.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ governing permissions and limitations under the License.
2727
--spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
2828
--spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
2929

30+
[dir="rtl"] &,
31+
&:dir(rtl) {
32+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
33+
}
34+
3035
&.is-selected {
3136
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
3237
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
@@ -253,7 +258,7 @@ a.spectrum-ActionButton {
253258

254259
color: inherit;
255260

256-
transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
261+
transform: var(--spectrum-logical-rotation);
257262
}
258263

259264
/* special cases for focus-ring */

‎components/assetlist/index.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ governing permissions and limitations under the License.
3434
/* label */
3535
--spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
3636
--spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
37+
38+
[dir="rtl"] &,
39+
&:dir(rtl) {
40+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
41+
}
3742
}
3843

3944
.spectrum-AssetList {
@@ -152,8 +157,7 @@ governing permissions and limitations under the License.
152157
.spectrum-AssetList-itemChildIndicator {
153158
display: none;
154159
transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
155-
156-
transform: logical rotate(0deg);
160+
transform: var(--spectrum-logical-rotation);
157161
}
158162

159163
.spectrum-AssetList-itemLabel {
@@ -182,4 +186,3 @@ governing permissions and limitations under the License.
182186
}
183187
}
184188
}
185-

‎components/breadcrumb/index.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,12 +153,11 @@ governing permissions and limitations under the License.
153153
margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block));
154154
margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline));
155155

156-
transform: logical scale(1) rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
157-
158156
opacity: 1;
159157
color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color)));
160158

161-
[dir="rtl"] & {
159+
[dir="rtl"] &,
160+
&:dir(rtl) {
162161
transform: scaleX(-1);
163162
}
164163

‎components/calendar/index.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,11 @@ governing permissions and limitations under the License.
4949
--spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900);
5050

5151
--spectrum-calendar-button-icon-color: var(--spectrum-gray-700);
52-
--spectrum-calendar-button-icon-color-disabled: var(--spectrum-disabled-content-color);
5352

53+
[dir="rtl"] &,
54+
&:dir(rtl) {
55+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
56+
}
5457
}
5558

5659
.spectrum-Calendar {
@@ -86,7 +89,7 @@ governing permissions and limitations under the License.
8689

8790
.spectrum-Calendar-prevMonth,
8891
.spectrum-Calendar-nextMonth {
89-
transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
92+
transform: var(--spectrum-logical-rotation);
9093

9194
&:not([disabled]) {
9295
color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-calendar-button-icon-color)));
@@ -239,7 +242,7 @@ governing permissions and limitations under the License.
239242

240243
inline-size: calc(
241244
var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) +
242-
calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2)
245+
calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2)
243246
);
244247

245248
&.is-range-start,

‎components/calendar/stories/calendar.stories.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Import the component markup template
22
import { Template } from "./template";
33

4-
import isChromatic from "chromatic/isChromatic";
54
import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
5+
import isChromatic from "chromatic/isChromatic";
66

77
const months = [...Array(12).keys()].map((key) =>
88
new Date(0, key).toLocaleString("en", { month: "long" })
@@ -113,10 +113,6 @@ Default.args = {
113113
year: 2023,
114114
};
115115

116-
export const DefaultRTL = Template.bind({});
117-
DefaultRTL.args = {...Default.args};
118-
DefaultRTL.parameters = {textDirection: "rtl"}
119-
120116
export const RangeSelection = Template.bind({});
121117
RangeSelection.args = {
122118
month: months[6],

‎components/pagination/index.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@ governing permissions and limitations under the License.
1515
--spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing);
1616
--spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default);
1717
--spectrum-pagination-counter-font-size: var(--spectrum-font-size-100);
18-
--spectrum-pagination-counter-line-height: var(-spectrum-line-height-100);
18+
--spectrum-pagination-counter-line-height: var(--spectrum-line-height-100);
19+
20+
[dir="rtl"] &,
21+
&:dir(rtl) {
22+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
23+
}
1924
}
2025

2126
.spectrum-Pagination--explicit,
@@ -49,9 +54,9 @@ governing permissions and limitations under the License.
4954

5055
/* Correct the direction of the arrows when viewing right-to-left */
5156
.spectrum-Pagination-prevButton .spectrum-Icon {
52-
transform: logical rotate(180deg);
57+
transform: var(--spectrum-logical-rotation,) rotate(180deg);
5358
}
5459

5560
.spectrum-Pagination-nextButton .spectrum-Icon {
56-
transform: logical rotate(0deg);
61+
transform: var(--spectrum-logical-rotation);
5762
}

‎components/slider/index.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ governing permissions and limitations under the License.
2424

2525
/* TODO: placeholder value for sideLabel variant value width */
2626
--spectrum-slider-value-inline-size: 18px;
27+
28+
[dir="rtl"] &,
29+
&:dir(rtl) {
30+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
31+
}
2732
}
2833

2934

@@ -286,8 +291,7 @@ governing permissions and limitations under the License.
286291
block-size: 100%;
287292

288293
/* Flip the ramp automatically for RTL */
289-
/* stylelint-disable-next-line declaration-property-value-no-unknown */
290-
transform: logical rotate(0deg);
294+
transform: var(--spectrum-logical-rotation);
291295
}
292296
}
293297

@@ -623,7 +627,7 @@ governing permissions and limitations under the License.
623627
.spectrum-Slider--range {
624628
.spectrum-Slider-track {
625629
&:not(:first-of-type):not(:last-of-type)::before {
626-
background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
630+
background: var(--highcontrast-slider-track-fill-icolor, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
627631
}
628632
}
629633
}

‎components/splitbutton/index.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ governing permissions and limitations under the License.
2121
--spectrum-splitbutton-border-radius-edge: var(
2222
--spectrum-alias-border-radius-small
2323
);
24+
25+
[dir="rtl"] &,
26+
&:dir(rtl) {
27+
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
28+
}
2429
}
2530

2631
.spectrum-SplitButton-trigger {
@@ -118,6 +123,15 @@ governing permissions and limitations under the License.
118123
z-index: 1;
119124
outline: none;
120125
}
126+
127+
/* Correct the direction of the arrows when viewing right-to-left */
128+
&.spectrum-Pagination-prevButton .spectrum-Icon {
129+
transform: var(--spectrum-logical-rotation,) rotate(180deg);
130+
}
131+
132+
&.spectrum-Pagination-nextButton .spectrum-Icon {
133+
transform: var(--spectrum-logical-rotation);
134+
}
121135
}
122136

123137
.spectrum-SplitButton-action {

0 commit comments

Comments
 (0)