refactor(themes): use logical CSS properties (#11377)

* refactor(themes): use logical CSS props and values

Co-authored-by: Marin Popov <[email protected]>
Co-authored-by: Dilyana Yarabanova <[email protected]>
Co-authored-by: Dilyana Dimova <[email protected]>
Co-authored-by: Silvia Ivanova <[email protected]>

Author: 5 people

projects/igniteui-angular/migrations/migration-collection.json

@@ -115,6 +115,11 @@
             "version": "13.1.0",
             "description": "Updates Ignite UI for Angular from v13.0.x to v13.1.0",
             "factory": "./update-13_1_0"
+        },
+        "migration-24": {
+            "version": "13.2.0",
+            "description": "Updates Ignite UI for Angular from v13.1.x to v13.2.0",
+            "factory": "./update-13_2_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-13_2_0/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "../../common/schema/theme-changes.schema.json",
+    "changes": [
+        {
+            "name": "$direction",
+            "remove": true,
+            "owner": "core",
+            "type": "property"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-13_2_0/index.spec.ts

@@ -0,0 +1,48 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '13.2.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-24';
+
+    it('should remove the $direction prop from the core mixin', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+`@include igniteui.core($direction: 'rtl');`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.scss')
+        ).toEqual(
+`@include igniteui.core();`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-13_2_0/index.ts

@@ -0,0 +1,14 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '13.2.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/src/lib/core/styles/base/_variables.scss

@@ -126,9 +126,6 @@ $theme-palette: (
     )
 ) !default;
 
-/// Determines the content direction.
-$direction: ltr !default;
-
 /// Determines whether color-blind palettes are enabled.
 $enhanced-accessibility: false !default;
 

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -881,34 +881,6 @@ $p-test: palette(#fff, #000);
     @return $color;
 }
 
-/// Returns $if param when global variable $directory
-/// is set to ltr otherwise returns $else.
-/// @param {*} $if - The value to be returned when $direction is set to ltr;
-/// @param {*} $else - The value to be returned when $direction is set to rtl;
-/// @example scss Set variable values based on $direction
-///    $left: if-ltr(left, right);
-///    $right: if-ltr(right, left);
-@function if-ltr($if, $else: null) {
-    $dir: if(meta.global-variable-exists('direction'), $direction, 'ltr');
-
-    @if $dir != rtl {
-        @return $if;
-    } @else {
-        @return $else;
-    }
-}
-
-/// Returns $if param when global variable $directory
-/// is set to rtl otherwise returns $else.
-/// @param {*} $if - The value to be returned when $direction is set to rtl;
-/// @param {*} $else - The value to be returned when $direction is set to ltr;
-/// @example scss Set variable values based on $direction
-///    $left: if-rtl(left, right);
-///    $right: if-rtl(right, left);
-@function if-rtl($if, $else: null) {
-    @return if-ltr($else, $if);
-}
-
 @function expand-shorthand($list) {
     $len: list.length($list);
 

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -12,17 +12,6 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// @access private
-@mixin icon-w-margin($margin, $left) {
-    > * {
-        margin-#{$left}: $margin;
-
-        &:first-child {
-            margin-#{$left}: 0;
-        }
-    }
-}
-
 /// Hides the element from the DOM.
 /// @access public
 /// @example scss - Sample usage
@@ -425,34 +414,6 @@
     }
 }
 
-/// Compiles the passed content to CSS only if
-/// the global $direction variable is set to 'ltr'.
-/// @example scss Include content only if $direction is set to ltr (default)
-///    @include if-ltr {
-///      margin-right: 8px;
-///    }
-@mixin if-ltr {
-    $dir: if(meta.global-variable-exists('direction'), $direction, 'ltr');
-
-    @if $dir != 'rtl' {
-        @content;
-    }
-}
-
-/// Compiles the passed content to CSS only if
-/// the global $direction variable is set to 'rtl'.
-/// @example scss Include content only if $direction is set to rtl
-///    @include if-rtl {
-///      margin-left: 8px;
-///    }
-@mixin if-rtl {
-    $dir: if(meta.global-variable-exists('direction'), $direction, 'ltr');
-
-    @if $dir == 'rtl' {
-        @content;
-    }
-}
-
 /// Truncates text at a specific number of lines
 /// @param {number|string} $lines - The number of lines to show
 /// @param {Boolean} $inline - Sets whether an element displays inline-box or box

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -2,8 +2,6 @@
 
 /// @group themes
 /// @access private
-$_right: if-ltr(right, left);
-
 %vhelper-display {
     display: block;
     overflow: auto;
@@ -13,7 +11,7 @@ $_right: if-ltr(right, left);
 %vhelper--vertical {
     position: absolute;
     top: 0;
-    #{$_right}: 0;
+    inset-inline-end: 0;
 }
 
 %vhelper--horizontal {

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -78,9 +78,6 @@
 
     $variant: map.get($theme, variant);
 
-    $left: if-ltr(left, right);
-    $right: if-ltr(right, left);
-
     %igx-action-strip-display {
         display: flex;
         align-items: center;
@@ -90,7 +87,7 @@
         height: 100%;
         pointer-events: none;
         top: 0;
-        #{$left}: 0;
+        inset-inline-start: 0;
         background: var-get($theme, 'background');
         color: inherit;
         padding: map.get($padding, 'comfortable');
@@ -139,18 +136,18 @@
         }
 
         igx-icon + [igxLabel] {
-            margin-#{$left}: rem(12px);
+            margin-inline-start: rem(12px);
         }
 
         &%igx-drop-down__item--cosy {
             igx-icon + [igxLabel] {
-                margin-#{$left}: rem(10px);
+                margin-inline-start: rem(10px);
             }
         }
 
         &%igx-drop-down__item--compact {
             igx-icon + [igxLabel] {
-                margin-#{$left}: rem(8px);
+                margin-inline-start: rem(8px);
             }
         }
     }
@@ -180,7 +177,7 @@
         max-height: 36px;
 
         &:last-child {
-            margin-#{$right}: 0;
+            margin-inline-end: 0;
         }
 
         igx-icon {
@@ -200,10 +197,10 @@
 
     %igx-action-strip__editing-actions {
         > [igxButton] {
-            margin-#{$left}: rem(4px);
+            margin-inline-start: rem(4px);
 
             &:first-of-type {
-                margin-#{$left}: 0;
+                margin-inline-start: 0;
             }
         }
     }

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -70,10 +70,6 @@
 /// @requires var-get
 @mixin banner($theme) {
     @include css-vars($theme);
-
-    $left: if-ltr(left, right);
-    $right: if-ltr(right, left);
-
     $banner-padding: (
         comfortable: rem(8),
         cosy: rem(8),
@@ -88,10 +84,10 @@
     }
 
     %igx-banner {
-        padding-#{$right}: map.get($banner-padding, 'comfortable');
-        padding-#{$left}: 0;
-        padding-top: map.get($banner-padding, 'comfortable');
-        padding-bottom: map.get($banner-padding, 'comfortable');
+        padding-inline-start: 0;
+        padding-inline-end: map.get($banner-padding, 'comfortable');
+        padding-block-start: map.get($banner-padding, 'comfortable');
+        padding-block-end: map.get($banner-padding, 'comfortable');
         background: var-get($theme, 'banner-background');
         align-items: center;
         position: relative;
@@ -104,27 +100,27 @@
         width: rem(40);
         min-width: rem(40);
         height: rem(40);
-        margin-#{$left}: rem(16);
+        margin-inline-start: rem(16);
         color: var-get($theme, 'banner-illustration-color');
     }
 
     %igx-banner__border-top {
-        border-top: 1px solid var-get($theme, 'banner-border-color');
-        top: -1px
+        border-block-start: 1px solid var-get($theme, 'banner-border-color');
+        inset-block-start: -1px
     }
 
     %igx-banner__border-bottom {
-        border-bottom: 1px solid var-get($theme, 'banner-border-color');
-        top: 0;
+        border-block-end: 1px solid var-get($theme, 'banner-border-color');
+        inset-block-start: 0;
     }
 
     %igx-banner__text {
         color: var-get($theme, 'banner-message-color');
         flex: 1 0 0%;
-        margin-#{$left}: rem(24);
+        margin-inline-start: rem(24);
 
         > * {
-            margin-top: 0 !important;
+            margin-block-start: 0 !important;
         }
     }
 
@@ -139,7 +135,7 @@
     %igx-banner__message {
         min-width: rem(220);
         flex: 1 0 0%;
-        margin-#{$right}: rem(90);
+        margin-inline-end: rem(90);
     }
 
     %igx-banner__row {
@@ -168,8 +164,8 @@
 
     %igx-banner__text {
         @include type-style($type-scale, $message) {
-            margin-top: 0;
-            margin-bottom: 0;
+            margin-block-start: 0;
+            margin-block-end: 0;
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -109,23 +109,23 @@
         position: fixed;
         justify-content: center;
         align-items: center;
-        left: 0;
-        right: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         height: $menu-height;
         background: var-get($theme, 'background');
         overflow: hidden;
         z-index: 8;
     }
 
     %igx-bottom-nav-menu--top {
-        top: 0;
-        bottom: inherit;
+        inset-block-start: 0;
+        inset-block-end: inherit;
         box-shadow: var-get($theme, 'shadow');
     }
 
     %igx-bottom-nav-menu--bottom {
-        top: inherit;
-        bottom: 0;
+        inset-block-start: inherit;
+        inset-block-end: 0;
         box-shadow: var-get($theme, 'shadow');
     }
 
@@ -161,7 +161,7 @@
 
     %igx-tab-label {
         @include ellipsis();
-        padding-top: 4px;
+        padding-block-start: rem(4px);
         max-width: 100%;
         text-align: center;
         transform: translateZ(0);