From eb87f0667523d650dbee72a1f84b19eed03c0f5a Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 14 Aug 2019 16:43:28 -0400 Subject: [PATCH] feat(rtl): Added a flag to turn-off mdc-rtl CSS (#4996) --- packages/mdc-rtl/_mixins.scss | 40 +++++---- packages/mdc-rtl/_variables.scss | 23 ++++++ test/screenshot/golden.json | 8 ++ test/screenshot/spec/mdc-rtl/fixture.scss | 28 +++++++ .../spec/mdc-rtl/variables/include.html | 82 +++++++++++++++++++ 5 files changed, 164 insertions(+), 17 deletions(-) create mode 100644 packages/mdc-rtl/_variables.scss create mode 100644 test/screenshot/spec/mdc-rtl/fixture.scss create mode 100644 test/screenshot/spec/mdc-rtl/variables/include.html diff --git a/packages/mdc-rtl/_mixins.scss b/packages/mdc-rtl/_mixins.scss index 6d1af73dc39..31e97a40551 100644 --- a/packages/mdc-rtl/_mixins.scss +++ b/packages/mdc-rtl/_mixins.scss @@ -20,6 +20,8 @@ // THE SOFTWARE. // +@import "./variables"; + // Creates a rule that will be applied when an MDC Web component is within the context of an RTL layout. // // Usage Example: @@ -67,18 +69,20 @@ // // In the future, selectors such as the `:dir` pseudo-class (http://mdn.io/css/:dir) will help us mitigate this. @mixin mdc-rtl($root-selector: null) { - @if ($root-selector) { - @at-root { - #{$root-selector}[dir="rtl"] &, - [dir="rtl"] #{$root-selector} & { + @if ($mdc-rtl-include) { + @if ($root-selector) { + @at-root { + #{$root-selector}[dir="rtl"] &, + [dir="rtl"] #{$root-selector} & { + @content; + } + } + } @else { + [dir="rtl"] &, + &[dir="rtl"] { @content; } } - } @else { - [dir="rtl"] &, - &[dir="rtl"] { - @content; - } } } @@ -256,15 +260,17 @@ $right-value, $root-selector: null ) { - /* @noflip */ - #{$left-property}: $left-value; - /* @noflip */ - #{$right-property}: $right-value; - - @include mdc-rtl($root-selector) { + @if ($mdc-rtl-include) { /* @noflip */ - #{$left-property}: $right-value; + #{$left-property}: $left-value; /* @noflip */ - #{$right-property}: $left-value; + #{$right-property}: $right-value; + + @include mdc-rtl($root-selector) { + /* @noflip */ + #{$left-property}: $right-value; + /* @noflip */ + #{$right-property}: $left-value; + } } } diff --git a/packages/mdc-rtl/_variables.scss b/packages/mdc-rtl/_variables.scss new file mode 100644 index 00000000000..ba8f8882c4e --- /dev/null +++ b/packages/mdc-rtl/_variables.scss @@ -0,0 +1,23 @@ +// +// Copyright 2019 Google Inc. +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in +// all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +// THE SOFTWARE. +// + +$mdc-rtl-include: true !default; diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index b59c1f2252a..a259f556858 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -863,6 +863,14 @@ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/03/23_44_52_047/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png" } }, + "spec/mdc-rtl/variables/include.html": { + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/14/20_18_01_668/spec/mdc-rtl/variables/include.html?utm_source=golden_json", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/14/20_18_01_668/spec/mdc-rtl/variables/include.html.windows_chrome_76.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/14/20_18_01_668/spec/mdc-rtl/variables/include.html.windows_firefox_67.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/14/20_18_01_668/spec/mdc-rtl/variables/include.html.windows_ie_11.png" + } + }, "spec/mdc-select/classes/baseline-no-js.html": { "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/17_07_39_476/spec/mdc-select/classes/baseline-no-js.html?utm_source=golden_json", "screenshots": { diff --git a/test/screenshot/spec/mdc-rtl/fixture.scss b/test/screenshot/spec/mdc-rtl/fixture.scss new file mode 100644 index 00000000000..4a8c7c09b02 --- /dev/null +++ b/test/screenshot/spec/mdc-rtl/fixture.scss @@ -0,0 +1,28 @@ +// +// Copyright 2019 Google Inc. +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in +// all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +// THE SOFTWARE. +// + +// stylelint-disable scss/dollar-variable-pattern +$mdc-rtl-include: false; + +@import "../../../../packages/mdc-button/mdc-button"; +@import "../../../../packages/mdc-textfield/mdc-text-field"; +@import "../../../../packages/mdc-typography/mdc-typography"; diff --git a/test/screenshot/spec/mdc-rtl/variables/include.html b/test/screenshot/spec/mdc-rtl/variables/include.html new file mode 100644 index 00000000000..a12febadc41 --- /dev/null +++ b/test/screenshot/spec/mdc-rtl/variables/include.html @@ -0,0 +1,82 @@ + + + + + + Button without RTL code - MDC Web Screenshot Test + + + + + + + + + + +
+

NOTE: These components are expected to be broken since $mdc-rtl-include is false.

+
+ +
+
+ +
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +
+ + + + + + + + +