From c2fe9175bf838db59206d12034c60fb66c3437e8 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 15 Jan 2019 10:43:00 -0600 Subject: [PATCH] refactor(rtl): use css logical properties for padding/margin (#16987) * refactor(rtl): use css logical properties for padding/margin * fix(item-divider): fix padding * test(rtl): add item basic rtl script * fix(rtl): update core/src/themes/ionic.mixins.scss * refactor(rtl): wrap css logical props with @supports * refactor(rtl): do not use css logical properties for hardcoded 0 values --- .../components/item-divider/item-divider.scss | 2 +- core/src/components/item/test/basic/e2e.ts | 9 +++ core/src/themes/ionic.functions.string.scss | 30 ++++++++ core/src/themes/ionic.globals.scss | 2 +- core/src/themes/ionic.mixins.scss | 68 +++++++------------ 5 files changed, 67 insertions(+), 44 deletions(-) diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 5af47b6a87..246cf1de97 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -22,7 +22,7 @@ @include margin(0); @include padding( var(--padding-top), - calc(var(--padding-end) + var(--ion-safe-area-right, 0px)) + calc(var(--padding-end) + var(--ion-safe-area-right, 0px)), var(--padding-bottom), calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) ); diff --git a/core/src/components/item/test/basic/e2e.ts b/core/src/components/item/test/basic/e2e.ts index 6ba5acc3bd..878f19df9c 100644 --- a/core/src/components/item/test/basic/e2e.ts +++ b/core/src/components/item/test/basic/e2e.ts @@ -8,3 +8,12 @@ test('item: basic', async () => { const compare = await page.compareScreenshot(); expect(compare).toMatchScreenshot(); }); + +test('item: basic-rtl', async () => { + const page = await newE2EPage({ + url: '/src/components/item/test/basic?ionic:_testing=true&rtl=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/themes/ionic.functions.string.scss b/core/src/themes/ionic.functions.string.scss index f42e96a070..cd104eeba9 100644 --- a/core/src/themes/ionic.functions.string.scss +++ b/core/src/themes/ionic.functions.string.scss @@ -71,6 +71,7 @@ @return false; } + // URL Encode Function // -------------------------------------------------- @@ -79,3 +80,32 @@ $encoded: str-replace($spaces, "#", "%23"); @return $encoded; } + + +// Add Selector +// -------------------------------------------------- +// Used to cleanly add selectors to :host and :host() + +@function add-root-selector($root, $addHostSelector, $shadowDom: false) { + $selectors: str-split($root, ","); + + $list: (); + + @each $selector in $selectors { + @if str-contains($selector, ":host(") { + $updated-host: str-replace($selector, ":host(", ":host(#{$addHostSelector}"); + $list: append($list, $updated-host, comma); + + } @else if str-contains($selector, ":host") { + $list: append($list, ":host(#{$addHostSelector}) + b", comma); + + } @else if $shadowDom == true { + $list: append($list, ":host(#{$addHostSelector}) #{$selector}", comma); + + } @else { + $list: append($list, "#{$addHostSelector} #{$selector}", comma); + } + } + + @return $list; +} diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss index ad417c02f0..0e03b1cf4f 100644 --- a/core/src/themes/ionic.globals.scss +++ b/core/src/themes/ionic.globals.scss @@ -17,7 +17,7 @@ $font-family-base: var(--ion-font-family, inherit) !default; // Global app direction -$app-direction: ltr !default; +$app-direction: null !default; // Global font path $font-path: "/dist/fonts" !default; diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss index 4108ed2daa..b1fe867aec 100644 --- a/core/src/themes/ionic.mixins.scss +++ b/core/src/themes/ionic.mixins.scss @@ -157,11 +157,11 @@ @mixin rtl() { @if $app-direction == multi or $app-direction == null { $root: #{&}; - @at-root [dir="rtl"] { - #{$root} { - @content; - } + + @at-root #{add-root-selector($root, "[dir=rtl]")} { + @content; } + } @else if $app-direction == rtl { @content; } @@ -214,19 +214,26 @@ // @param {string} $end // ---------------------------------------------------------- @mixin property-horizontal($prop, $start, $end: $start) { - @if $start == $end { - @include multi-dir() { - #{$prop}-left: $start; - #{$prop}-right: $end; - } + @if $start == 0 and $end == 0 { + #{$prop}-left: $start; + #{$prop}-right: $end; + } @else { - @include ltr() { - #{$prop}-left: $start; - #{$prop}-right: $end; - } - @include rtl() { - #{$prop}-left: $end; - #{$prop}-right: $start; + #{$prop}-left: $start; + #{$prop}-right: $end; + + @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)) { + @if $start != null { + #{$prop}-left: unset; + } + @if $end != null { + #{$prop}-right: unset; + } + + -webkit-#{$prop}-start: $start; + #{$prop}-inline-start: $start; + -webkit-#{$prop}-end: $end; + #{$prop}-inline-end: $end; } } } @@ -240,32 +247,9 @@ // @param {boolean} $content include content or use default // ---------------------------------------------------------- @mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) { - @if $top == $end and $top == $bottom and $top == $start { - @include multi-dir() { - #{$prop}: $top; - } - } @else if $top == $bottom and $end == $start and $top != null and $end != null { - @include multi-dir() { - #{$prop}: $top $end; - } - } @else if $end == $start and $top != null and $end != null and $bottom != null { - @include multi-dir() { - #{$prop}: $top $end $bottom; - } - } @else if $top != null and $end != null and $bottom != null and $start != null { - @include ltr() { - #{$prop}: $top $end $bottom $start; - } - @include rtl() { - #{$prop}: $top $start $bottom $end; - } - } @else { - @include property-horizontal($prop, $start, $end); - @include multi-dir() { - #{$prop}-top: $top; - #{$prop}-bottom: $bottom; - } - } + @include property-horizontal($prop, $start, $end); + #{$prop}-top: $top; + #{$prop}-bottom: $bottom; } // Add padding horizontal