refactor(@carbon/styles): use logical properties for better RTL support

config/stylelint-config-carbon/package.json

@@ -35,7 +35,8 @@
     "stylelint-no-unsupported-browser-features": "^5.0.2",
     "stylelint-order": "^5.0.0",
     "stylelint-prettier": "^2.0.0",
-    "stylelint-scss": "^4.1.0"
+    "stylelint-scss": "^4.1.0",
+    "stylelint-use-logical": "^2.1.0"
   },
   "devDependencies": {
     "prettier": "^2.8.8",

config/stylelint-config-carbon/plugins/scss.js

@@ -10,7 +10,7 @@
 const OFF = null;
 
 module.exports = {
-  plugins: ['stylelint-scss'],
+  plugins: ['stylelint-scss', 'stylelint-use-logical'],
   rules: {
     // @-else
     // Require or disallow a newline after the closing brace of @else statements.
@@ -119,6 +119,9 @@ module.exports = {
     // Selector
     // Disallow redundant nesting selectors (&).
     'scss/selector-no-redundant-nesting-selector': true,
+
+    // CSS Logical properties
+    'csstools/use-logical': true,
   },
   overrides: [
     {

packages/grid/scss/_css-grid.scss

@@ -94,23 +94,21 @@
     --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
 
     display: grid;
-    width: 100%;
-    max-width: get-grid-width(
+    grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    inline-size: 100%;
+    margin-inline: auto;
+    max-inline-size: get-grid-width(
       $breakpoints,
       largest-breakpoint-name($breakpoints)
     );
-    padding-right: var(--cds-grid-margin);
-    padding-left: var(--cds-grid-margin);
-    margin-right: auto;
-    margin-left: auto;
-    grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    padding-inline: var(--cds-grid-margin);
   }
 
   // -----------------------------------------------------------------------------
   // Full width
   // -----------------------------------------------------------------------------
   .#{$prefix}--css-grid--full-width {
-    max-width: 100%;
+    max-inline-size: 100%;
   }
 
   // -----------------------------------------------------------------------------
@@ -127,12 +125,10 @@
     --cds-grid-mode-start: var(--cds-grid-gutter-start);
     --cds-grid-mode-end: var(--cds-grid-gutter-end);
 
-    margin-right: var(--cds-grid-gutter-end);
-    margin-left: var(--cds-grid-gutter-start);
+    margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-gutter-start);
-      margin-left: var(--cds-grid-gutter-end);
+      margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
     }
   }
 
@@ -157,13 +153,13 @@
   // -----------------------------------------------------------------------------
   .#{$prefix}--subgrid {
     display: grid;
-    margin-right: calc(var(--cds-grid-mode-end) * -1);
-    margin-left: calc(var(--cds-grid-mode-start) * -1);
     grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    margin-inline: calc(var(--cds-grid-mode-start) * -1)
+      calc(var(--cds-grid-mode-end) * -1);
 
     [dir='rtl'] & {
-      margin-right: calc(var(--cds-grid-mode-start) * -1);
-      margin-left: calc(var(--cds-grid-mode-end) * -1);
+      margin-inline: calc(var(--cds-grid-mode-end) * -1)
+        calc(var(--cds-grid-mode-start) * -1);
     }
   }
 
@@ -194,11 +190,10 @@
   // Helper class to allow for text alignment in columns where the leading
   // gutter is missing (like narrow) or is reduced (like in condensed).
   .#{$prefix}--grid-column-hang {
-    margin-left: var(--cds-grid-column-hang);
+    margin-inline-start: var(--cds-grid-column-hang);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-column-hang);
-      margin-left: initial;
+      margin-inline: initial var(--cds-grid-column-hang);
     }
   }
 

packages/grid/scss/_flex-grid.scss

@@ -35,23 +35,20 @@
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
-  width: 100%;
-  padding-right: $gutter * 0.5;
-  padding-left: $gutter * 0.5;
+  inline-size: 100%;
+  padding-inline: $gutter * 0.5;
 
   // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
   // side.
   .#{$prefix}--row--condensed &,
   .#{$prefix}--grid--condensed & {
-    padding-right: $condensed-gutter * 0.5;
-    padding-left: $condensed-gutter * 0.5;
+    padding-inline: $condensed-gutter * 0.5;
   }
 
   // For our narrow use-case, our container hangs 16px into the gutter
   .#{$prefix}--row--narrow &,
   .#{$prefix}--grid--narrow & {
-    padding-right: $gutter * 0.5;
-    padding-left: 0;
+    padding-inline: 0 $gutter * 0.5;
   }
 }
 
@@ -70,8 +67,8 @@
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
-    max-width: math.percentage(math.div($span, $columns));
     flex: 0 0 math.percentage(math.div($span, $columns));
+    max-inline-size: math.percentage(math.div($span, $columns));
   }
 }
 
@@ -84,9 +81,9 @@
   $offset: 0;
   $offset: math.div($span, $columns);
   @if $offset == 0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   } @else {
-    margin-left: math.percentage($offset);
+    margin-inline-start: math.percentage($offset);
   }
 }
 
@@ -123,17 +120,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
-        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
+        max-inline-size: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        width: auto;
-        // Reset earlier grid tiers
-        max-width: 100%;
         flex: 1 0 0%;
+        inline-size: auto;
+        // Reset earlier grid tiers
+        max-inline-size: 100%;
       }
 
       @for $i from 0 through $columns {
@@ -164,8 +161,7 @@
 @mixin -make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter * 0.5;
-  margin-left: -1 * $gutter * 0.5;
+  margin-inline: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -179,18 +175,17 @@
 @mixin -no-gutter {
   .#{$prefix}--no-gutter,
   .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline: 0;
   }
 
   .#{$prefix}--no-gutter--start,
   .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   .#{$prefix}--no-gutter--end,
   .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }
 
@@ -205,11 +200,11 @@
 /// @group @carbon/grid
 @mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: $gutter * 0.5;
+    padding-inline-start: $gutter * 0.5;
   }
 
   .#{$prefix}--hang--end {
-    padding-right: $gutter * 0.5;
+    padding-inline-end: $gutter * 0.5;
   }
 }
 
@@ -223,8 +218,7 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -make-container($breakpoints: $grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
+  margin-inline: auto;
 
   @include -set-largest-breakpoint($breakpoints);
 
@@ -236,14 +230,12 @@
       $prev-margin: map.get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
-          padding-right: #{($grid-gutter * 0.5) + $margin};
-          padding-left: #{($grid-gutter * 0.5) + $margin};
+          padding-inline: #{($grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
       @include breakpoint($name) {
-        padding-right: #{($grid-gutter * 0.5) + $margin};
-        padding-left: #{($grid-gutter * 0.5) + $margin};
+        padding-inline: #{($grid-gutter * 0.5) + $margin};
       }
     }
   }
@@ -256,7 +248,7 @@
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: -last-map-item($breakpoints);
 
-  max-width: map.get($largest-breakpoint, 'width');
+  max-inline-size: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -266,7 +258,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include breakpoint($name) {
-      max-width: map.get($value, width);
+      max-inline-size: map.get($value, width);
     }
   }
 }
@@ -309,7 +301,7 @@
 
   @include largest-breakpoint($breakpoints) {
     .#{$prefix}--grid--full-width {
-      max-width: 100%;
+      max-inline-size: 100%;
     }
   }
 
@@ -319,13 +311,11 @@
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: $grid-gutter * 0.5;
-    padding-bottom: $grid-gutter * 0.5;
+    padding-block: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: $condensed-gutter * 0.5;
-    padding-bottom: $condensed-gutter * 0.5;
+    padding-block: $condensed-gutter * 0.5;
   }
 
   @include -make-grid-columns($breakpoints, $grid-gutter);