From 215f0322327b189fee0956b7394c8abdf7ad5ed7 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 19 Mar 2019 15:56:20 -0700 Subject: [PATCH 1/2] feat(form-field): add feature targeting for styles part of #4227 --- packages/mdc-form-field/_mixins.scss | 95 +++++++++++++++++++++ packages/mdc-form-field/_variables.scss | 23 +++++ packages/mdc-form-field/mdc-form-field.scss | 54 +----------- test/scss/feature-targeting.scss | 4 + 4 files changed, 124 insertions(+), 52 deletions(-) create mode 100644 packages/mdc-form-field/_mixins.scss create mode 100644 packages/mdc-form-field/_variables.scss diff --git a/packages/mdc-form-field/_mixins.scss b/packages/mdc-form-field/_mixins.scss new file mode 100644 index 00000000000..b6c41ce6d0c --- /dev/null +++ b/packages/mdc-form-field/_mixins.scss @@ -0,0 +1,95 @@ +// +// 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. +// + +@import "@material/feature-targeting/functions"; +@import "@material/feature-targeting/mixins"; +@import "@material/rtl/mixins"; +@import "@material/theme/mixins"; +@import "@material/typography/mixins"; +@import "./variables"; + +@mixin mdc-form-field-core-styles($query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + $feat-structure: mdc-feature-create-target($query, structure); + + .mdc-form-field { + @include mdc-typography(body2, $query); + + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(color, text-primary-on-background); + } + + @include mdc-feature-targets($feat-structure) { + display: inline-flex; + align-items: center; + vertical-align: middle; + } + + // 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 { + // 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; + } + } + } + } + + .mdc-form-field--align-end { + // 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 { + // 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; + } + } + } + } +} diff --git a/packages/mdc-form-field/_variables.scss b/packages/mdc-form-field/_variables.scss new file mode 100644 index 00000000000..3cff2ddb67c --- /dev/null +++ b/packages/mdc-form-field/_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-form-field-item-spacing: 4px; diff --git a/packages/mdc-form-field/mdc-form-field.scss b/packages/mdc-form-field/mdc-form-field.scss index 2576aedbd60..f29f5b8befc 100644 --- a/packages/mdc-form-field/mdc-form-field.scss +++ b/packages/mdc-form-field/mdc-form-field.scss @@ -20,55 +20,5 @@ // THE SOFTWARE. // -@import "@material/rtl/mixins"; -@import "@material/theme/mixins"; -@import "@material/typography/mixins"; - -$mdc-form-field-item-spacing: 4px; - -// stylelint-disable selector-max-type -.mdc-form-field { - @include mdc-typography(body2); - @include mdc-theme-prop(color, text-primary-on-background); - - display: inline-flex; - align-items: center; - vertical-align: middle; - - > label { - order: 0; - /* @noflip */ - margin-right: auto; - /* @noflip */ - padding-left: $mdc-form-field-item-spacing; - } - - @include mdc-rtl { - > label { - /* @noflip */ - margin-left: auto; - /* @noflip */ - padding-right: $mdc-form-field-item-spacing; - } - } -} - -.mdc-form-field--align-end { - > label { - order: -1; - /* @noflip */ - margin-left: auto; - /* @noflip */ - padding-right: $mdc-form-field-item-spacing; - } - - @include mdc-rtl { - > label { - /* @noflip */ - margin-right: auto; - /* @noflip */ - padding-left: $mdc-form-field-item-spacing; - } - } -} -// stylelint-enable selector-max-type +@import "./mixins"; +@include mdc-form-field-core-styles; diff --git a/test/scss/feature-targeting.scss b/test/scss/feature-targeting.scss index b9630369e81..eace7af2233 100644 --- a/test/scss/feature-targeting.scss +++ b/test/scss/feature-targeting.scss @@ -3,6 +3,7 @@ @import "@material/checkbox/mixins"; @import "@material/elevation/mixins"; @import "@material/feature-targeting/functions"; +@import "@material/form-field/mixins"; @import "@material/list/mixins"; @import "@material/menu-surface/mixins"; @import "@material/menu/mixins"; @@ -48,6 +49,9 @@ @include mdc-elevation-core-styles($query: mdc-feature-any()); @include mdc-elevation(0, $query: mdc-feature-any()); + // Form Field + @include mdc-form-field-core-styles($query: mdc-feature-any()); + // List @include mdc-list-core-styles($query: mdc-feature-any()); @include mdc-list-item-primary-text-ink-color(red, $query: mdc-feature-any()); From 74018f52b254f21d136ac82f9c992250e59cdb3a Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Wed, 20 Mar 2019 11:00:48 -0400 Subject: [PATCH 2/2] WIP Add !default to variable for consistency with rest of repo --- packages/mdc-form-field/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdc-form-field/_variables.scss b/packages/mdc-form-field/_variables.scss index 3cff2ddb67c..18f853a1b17 100644 --- a/packages/mdc-form-field/_variables.scss +++ b/packages/mdc-form-field/_variables.scss @@ -20,4 +20,4 @@ // THE SOFTWARE. // -$mdc-form-field-item-spacing: 4px; +$mdc-form-field-item-spacing: 4px !default;