From ef99808cba809294cb2d90903d12cdf930071f4d Mon Sep 17 00:00:00 2001 From: Joy Zhong Date: Fri, 20 Sep 2019 14:38:23 -0400 Subject: [PATCH] fix(form-field): Fix radio RTL alignment bug. (#5064) --- packages/mdc-form-field/_mixins.scss | 38 ++------- test/screenshot/golden.json | 16 ++++ .../classes/baseline-radio-rtl.html | 84 +++++++++++++++++++ .../classes/baseline-radio.html | 84 +++++++++++++++++++ .../screenshot/spec/mdc-form-field/fixture.js | 26 ++++++ 5 files changed, 216 insertions(+), 32 deletions(-) create mode 100644 test/screenshot/spec/mdc-form-field/classes/baseline-radio-rtl.html create mode 100644 test/screenshot/spec/mdc-form-field/classes/baseline-radio.html create mode 100644 test/screenshot/spec/mdc-form-field/fixture.js diff --git a/packages/mdc-form-field/_mixins.scss b/packages/mdc-form-field/_mixins.scss index b6c41ce6d0c..ae0dde2f942 100644 --- a/packages/mdc-form-field/_mixins.scss +++ b/packages/mdc-form-field/_mixins.scss @@ -47,23 +47,10 @@ // stylelint-disable-next-line selector-max-type > label { @include mdc-feature-targets($feat-structure) { - order: 0; - /* @noflip */ - margin-right: auto; - /* @noflip */ - padding-left: $mdc-form-field-item-spacing; - } - } + @include mdc-rtl-reflexive-property(margin, 0, auto); + @include mdc-rtl-reflexive-property(padding, $mdc-form-field-item-spacing, 0); - @include mdc-rtl { - // stylelint-disable-next-line selector-max-type - > label { - @include mdc-feature-targets($feat-structure) { - /* @noflip */ - margin-left: auto; - /* @noflip */ - padding-right: $mdc-form-field-item-spacing; - } + order: 0; } } } @@ -72,23 +59,10 @@ // stylelint-disable-next-line selector-max-type > label { @include mdc-feature-targets($feat-structure) { - order: -1; - /* @noflip */ - margin-left: auto; - /* @noflip */ - padding-right: $mdc-form-field-item-spacing; - } - } + @include mdc-rtl-reflexive-property(margin, auto, 0); + @include mdc-rtl-reflexive-property(padding, 0, $mdc-form-field-item-spacing); - @include mdc-rtl { - // stylelint-disable-next-line selector-max-type - > label { - @include mdc-feature-targets($feat-structure) { - /* @noflip */ - margin-right: auto; - /* @noflip */ - padding-left: $mdc-form-field-item-spacing; - } + order: -1; } } } diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 2743e91ff15..9c13a26375b 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -663,6 +663,22 @@ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/13/20_59_35_867/spec/mdc-fab/mixins/shape-radius.html.windows_ie_11.png" } }, + "spec/mdc-form-field/classes/baseline-radio-rtl.html": { + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio-rtl.html?utm_source=golden_json", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio-rtl.html.windows_chrome_76.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio-rtl.html.windows_firefox_69.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio-rtl.html.windows_ie_11.png" + } + }, + "spec/mdc-form-field/classes/baseline-radio.html": { + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio.html?utm_source=golden_json", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio.html.windows_chrome_76.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio.html.windows_firefox_69.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/10/20_51_43_383/spec/mdc-form-field/classes/baseline-radio.html.windows_ie_11.png" + } + }, "spec/mdc-icon-button/classes/baseline-icon-button-toggle.html": { "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/27/16_53_20_055/spec/mdc-icon-button/classes/baseline-icon-button-toggle.html?utm_source=golden_json", "screenshots": { diff --git a/test/screenshot/spec/mdc-form-field/classes/baseline-radio-rtl.html b/test/screenshot/spec/mdc-form-field/classes/baseline-radio-rtl.html new file mode 100644 index 00000000000..1884a24688e --- /dev/null +++ b/test/screenshot/spec/mdc-form-field/classes/baseline-radio-rtl.html @@ -0,0 +1,84 @@ + + + + + + Baseline Radio - MDC Web Screenshot Test + + + + + + + + + + + + +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+ + + + + + + + + + diff --git a/test/screenshot/spec/mdc-form-field/classes/baseline-radio.html b/test/screenshot/spec/mdc-form-field/classes/baseline-radio.html new file mode 100644 index 00000000000..aa4e299525f --- /dev/null +++ b/test/screenshot/spec/mdc-form-field/classes/baseline-radio.html @@ -0,0 +1,84 @@ + + + + + + Baseline Radio - MDC Web Screenshot Test + + + + + + + + + + + + +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+ + + + + + + + + + diff --git a/test/screenshot/spec/mdc-form-field/fixture.js b/test/screenshot/spec/mdc-form-field/fixture.js new file mode 100644 index 00000000000..dc3b4c17982 --- /dev/null +++ b/test/screenshot/spec/mdc-form-field/fixture.js @@ -0,0 +1,26 @@ +/** + * @license + * 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. + */ + +window.mdc.testFixture.fontsLoaded.then(() => { + window.mdc.testFixture.notifyDomReady(); +});