fix: deprecate logical transform plugin

adobe · Jan 22, 2024 · a7181f1 · a7181f1
1 parent b4f9142
commit a7181f1
Show file tree

Hide file tree

Showing 15 changed files with 116 additions and 302 deletions.
diff --git a/components/accordion/index.css b/components/accordion/index.css
@@ -45,6 +45,7 @@ governing permissions and limitations under the License.
  --spectrum-accordion-component-edge-to-text: var(
  --spectrum-component-edge-to-text-75
  );
+
  /* Text header */
  --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
  --spectrum-accordion-item-header-font-weight: var(
@@ -55,13 +56,7 @@ governing permissions and limitations under the License.
  );
  --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
  --spectrum-accordion-item-header-line-height: 1.25;
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-accordion-item-header-line-height: var(
- --spectrum-cjk-line-height-100
- );
- }
+
  /* Text body */
  --spectrum-accordion-item-content-font: var(
  --spectrum-sans-font-family-stack
@@ -76,13 +71,7 @@ governing permissions and limitations under the License.
  --spectrum-accordion-item-content-line-height: var(
  --spectrum-line-height-100
  );
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-accordion-item-content-line-height: var(
- --spectrum-cjk-line-height-100
- );
- }
+
  /* Colors */
  --spectrum-accordion-background-color-default: rgba(
  var(--spectrum-gray-900-rgb),
@@ -100,6 +89,7 @@ governing permissions and limitations under the License.
  var(--spectrum-gray-900-rgb),
  var(--spectrum-background-opacity-key-focus)
  );
+
  /* Label */
  --spectrum-accordion-item-header-color-default: var(
  --spectrum-neutral-content-color-default
@@ -120,12 +110,15 @@ governing permissions and limitations under the License.
  --spectrum-accordion-item-content-disabled-color: var(
  --spectrum-disabled-content-color
  );
+
  /* Body */
  --spectrum-accordion-item-content-color: var(--spectrum-body-color);
+
  /* Focus indicator */
  --spectrum-accordion-focus-indicator-color: var(
  --spectrum-focus-indicator-color
  );
+
  /* Divider */
  --spectrum-accordion-divider-color: var(--spectrum-gray-300);
  --spectrum-accordion-min-block-size: max(
@@ -151,6 +144,22 @@ governing permissions and limitations under the License.
  )
  )
  );
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ --spectrum-accordion-item-header-line-height: var(
+ --spectrum-cjk-line-height-100
+ );
+ --spectrum-accordion-item-content-line-height: var(
+ --spectrum-cjk-line-height-100
+ );
+ }
 }
 
 .spectrum-Accordion--compact {
@@ -621,19 +630,9 @@ governing permissions and limitations under the License.
 
 .spectrum-Accordion-item {
  &.is-open {
- > .spectrum-Accordion-itemHeading
- > .spectrum-Accordion-itemIconContainer
- > .spectrum-Accordion-itemIndicator {
- /* stylelint-disable declaration-property-value-no-unknown */
- transform: logical rotate(90deg);
- /* stylelint-enable declaration-property-value-no-unknown */
- }
-
- > .spectrum-Accordion-itemIconContainer
- > .spectrum-Accordion-itemIndicator {
- /* stylelint-disable declaration-property-value-no-unknown */
- transform: logical rotate(90deg);
- /* stylelint-enable declaration-property-value-no-unknown */
+ > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
+ > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
+ transform: var(--spectrum-logical-rotation,) rotate(90deg);
  }
 
  > .spectrum-Accordion-itemContent {

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
@@ -27,6 +27,11 @@ governing permissions and limitations under the License.
  --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
  --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
 
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
+
  &.is-selected {
  --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
  --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 {
 
  color: inherit;
 
- transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
+ transform: var(--spectrum-logical-rotation);
 }
 
 /* special cases for focus-ring */

diff --git a/components/assetlist/index.css b/components/assetlist/index.css
@@ -34,6 +34,11 @@ governing permissions and limitations under the License.
  /* label */
  --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
  --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 .spectrum-AssetList {
@@ -152,8 +157,7 @@ governing permissions and limitations under the License.
 .spectrum-AssetList-itemChildIndicator {
  display: none;
  transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
-
- transform: logical rotate(0deg);
+ transform: var(--spectrum-logical-rotation);
 }
 
 .spectrum-AssetList-itemLabel {
@@ -182,4 +186,3 @@ governing permissions and limitations under the License.
  }
  }
 }
-
diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css
@@ -153,12 +153,11 @@ governing permissions and limitations under the License.
  margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block));
  margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline));
 
- transform: logical scale(1) rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
-
  opacity: 1;
  color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color)));
 
- [dir="rtl"] & {
+ [dir="rtl"] &,
+ &:dir(rtl) {
  transform: scaleX(-1);
  }
 

diff --git a/components/calendar/index.css b/components/calendar/index.css
@@ -49,8 +49,11 @@ governing permissions and limitations under the License.
  --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900);
 
  --spectrum-calendar-button-icon-color: var(--spectrum-gray-700);
- --spectrum-calendar-button-icon-color-disabled: var(--spectrum-disabled-content-color);
 
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 .spectrum-Calendar {
@@ -86,7 +89,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Calendar-prevMonth,
 .spectrum-Calendar-nextMonth {
- transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
+ transform: var(--spectrum-logical-rotation);
 
  &:not([disabled]) {
  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.
 
  inline-size: calc(
  var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) +
-  calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2)
+ calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2)
  );
 
  &.is-range-start,

diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js
@@ -1,8 +1,8 @@
 // Import the component markup template
 import { Template } from "./template";
 
-import isChromatic from "chromatic/isChromatic";
 import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
+import isChromatic from "chromatic/isChromatic";
 
 const months = [...Array(12).keys()].map((key) =>
  new Date(0, key).toLocaleString("en", { month: "long" })
@@ -113,10 +113,6 @@ Default.args = {
  year: 2023,
 };
 
-export const DefaultRTL = Template.bind({});
-DefaultRTL.args = {...Default.args};
-DefaultRTL.parameters = {textDirection: "rtl"}
-
 export const RangeSelection = Template.bind({});
 RangeSelection.args = {
  month: months[6],

diff --git a/components/pagination/index.css b/components/pagination/index.css
@@ -15,7 +15,12 @@ governing permissions and limitations under the License.
  --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing);
  --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default);
  --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100);
- --spectrum-pagination-counter-line-height: var(-spectrum-line-height-100);
+ --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100);
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 .spectrum-Pagination--explicit,
@@ -49,9 +54,9 @@ governing permissions and limitations under the License.
 
 /* Correct the direction of the arrows when viewing right-to-left */
 .spectrum-Pagination-prevButton .spectrum-Icon {
- transform: logical rotate(180deg);
+ transform: var(--spectrum-logical-rotation,) rotate(180deg);
 }
 
 .spectrum-Pagination-nextButton .spectrum-Icon {
- transform: logical rotate(0deg);
+  transform: var(--spectrum-logical-rotation);
 }
diff --git a/components/slider/index.css b/components/slider/index.css
@@ -24,6 +24,11 @@ governing permissions and limitations under the License.
 
  /* TODO: placeholder value for sideLabel variant value width */
  --spectrum-slider-value-inline-size: 18px;
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 
@@ -286,8 +291,7 @@ governing permissions and limitations under the License.
  block-size: 100%;
 
  /* Flip the ramp automatically for RTL */
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
- transform: logical rotate(0deg);
+ transform: var(--spectrum-logical-rotation);
  }
 }
 
@@ -623,7 +627,7 @@ governing permissions and limitations under the License.
 .spectrum-Slider--range {
  .spectrum-Slider-track {
  &:not(:first-of-type):not(:last-of-type)::before {
- background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+ background: var(--highcontrast-slider-track-fill-icolor, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
  }
  }
 }

diff --git a/components/splitbutton/index.css b/components/splitbutton/index.css
@@ -21,6 +21,11 @@ governing permissions and limitations under the License.
  --spectrum-splitbutton-border-radius-edge: var(
  --spectrum-alias-border-radius-small
  );
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 .spectrum-SplitButton-trigger {
@@ -118,6 +123,15 @@ governing permissions and limitations under the License.
  z-index: 1;
  outline: none;
  }
+
+ /* Correct the direction of the arrows when viewing right-to-left */
+ &.spectrum-Pagination-prevButton .spectrum-Icon {
+ transform: var(--spectrum-logical-rotation,) rotate(180deg);
+ }
+
+ &.spectrum-Pagination-nextButton .spectrum-Icon {
+ transform: var(--spectrum-logical-rotation);
+ }
 }
 
 .spectrum-SplitButton-action {