Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 8b87d3e

Browse files
crisbetocrisbeto
committed
feat(text-field): add feature targeting for styles
Sets up feature targeting for the text field and its related styles. Relates to #4227.
1 parent 737da83 commit 8b87d3e

File tree

10 files changed

+1014
-628
lines changed

10 files changed

+1014
-628
lines changed

‎packages/mdc-textfield/_mixins.scss‎

Lines changed: 798 additions & 259 deletions
Large diffs are not rendered by default.

‎packages/mdc-textfield/character-counter/_mixins.scss‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,46 +20,78 @@
2020
// THE SOFTWARE.
2121
//
2222

23+
@import "@material/feature-targeting/functions";
24+
@import "@material/feature-targeting/mixins";
2325
@import "@material/rtl/mixins";
26+
@import "@material/typography/mixins";
2427

2528
// Public mixins
2629

30+
@mixin mdc-text-field-character-counter-core-styles($query: mdc-feature-all()) {
31+
$feat-structure: mdc-feature-create-target($query, structure);
32+
33+
// postcss-bem-linter: define text-field-character-counter
34+
35+
.mdc-text-field-character-counter {
36+
@include mdc-typography(caption, $query: $query);
37+
@include mdc-typography-baseline-top(16px, $query: $query);
38+
39+
@include mdc-feature-targets($feat-structure) {
40+
// Keep flex item align to trailing side on absence of helper text.
41+
@include mdc-rtl-reflexive-box(margin, left, auto);
42+
@include mdc-rtl-reflexive-box(padding, left, 16px);
43+
44+
white-space: nowrap;
45+
}
46+
}
47+
48+
// postcss-bem-linter: end
49+
}
50+
2751
///
2852
/// Customizes the color of the character counter associated with an enabled text field.
2953
/// @param {Color} $color - The desired character counter color.
3054
///
31-
@mixin mdc-text-field-character-counter-color($color) {
55+
@mixin mdc-text-field-character-counter-color($color, $query: mdc-feature-all()) {
3256
&:not(.mdc-text-field--disabled) {
33-
@include mdc-text-field-character-counter-color_($color);
57+
@include mdc-text-field-character-counter-color_($color, $query: $query);
3458
}
3559
}
3660

3761
///
3862
/// Customizes the color of the character counter associated with a disabled text field.
3963
/// @param {Color} $color - The desired character counter color.
4064
///
41-
@mixin mdc-text-field-disabled-character-counter-color($color) {
65+
@mixin mdc-text-field-disabled-character-counter-color($color, $query: mdc-feature-all()) {
4266
&.mdc-text-field--disabled {
43-
@include mdc-text-field-character-counter-color_($color);
67+
@include mdc-text-field-character-counter-color_($color, $query: $query);
4468
}
4569
}
4670

47-
@mixin mdc-text-field-character-counter-position($xOffset, $yOffset) {
71+
@mixin mdc-text-field-character-counter-position($xOffset, $yOffset, $query: mdc-feature-all()) {
72+
$feat-structure: mdc-feature-create-target($query, structure);
73+
4874
.mdc-text-field-character-counter {
49-
@include mdc-rtl-reflexive-position(right, $xOffset);
75+
@include mdc-feature-targets($feat-structure) {
76+
@include mdc-rtl-reflexive-position(right, $xOffset);
5077

51-
position: absolute;
52-
bottom: $yOffset;
78+
position: absolute;
79+
bottom: $yOffset;
80+
}
5381
}
5482
}
5583

5684
// Private mixins
5785

58-
@mixin mdc-text-field-character-counter-color_($color) {
59-
// Character counter is placed inside mdc-textfield element (for textarea variant ) or
86+
@mixin mdc-text-field-character-counter-color_($color, $query: mdc-feature-all()) {
87+
$feat-color: mdc-feature-create-target($query, color);
88+
89+
// Character counter is placed inside mdc-textfield element (for textarea variant) or
6090
// inside helper line which is sibling to mdc-textfield.
6191
.mdc-text-field-character-counter,
6292
+ .mdc-text-field-helper-line .mdc-text-field-character-counter {
63-
@include mdc-theme-prop(color, $color);
93+
@include mdc-feature-targets($feat-color) {
94+
@include mdc-theme-prop(color, $color);
95+
}
6496
}
6597
}

‎packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,5 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "../functions";
24-
@import "@material/rtl/mixins";
25-
@import "@material/typography/mixins";
26-
27-
// postcss-bem-linter: define text-field-character-counter
28-
29-
.mdc-text-field-character-counter {
30-
@include mdc-typography(caption);
31-
@include mdc-typography-baseline-top(16px);
32-
// Keep flex item align to trailing side on absence of helper text.
33-
@include mdc-rtl-reflexive-box(margin, left, auto);
34-
@include mdc-rtl-reflexive-box(padding, left, 16px);
35-
36-
white-space: nowrap;
37-
}
38-
39-
// postcss-bem-linter: end
23+
@import "./mixins";
24+
@include mdc-text-field-character-counter-core-styles;

‎packages/mdc-textfield/helper-text/_mixins.scss‎

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,44 +20,92 @@
2020
// THE SOFTWARE.
2121
//
2222

23+
@import "@material/theme/mixins";
24+
@import "@material/typography/mixins";
25+
@import "@material/feature-targeting/functions";
26+
@import "@material/feature-targeting/mixins";
27+
2328
// Public mixins
2429

30+
@mixin mdc-text-field-helper-text-core-styles($query: mdc-feature-all()) {
31+
$feat-structure: mdc-feature-create-target($query, structure);
32+
$feat-animation: mdc-feature-create-target($query, animation);
33+
34+
// postcss-bem-linter: define text-field-helper-text
35+
36+
.mdc-text-field-helper-text {
37+
@include mdc-typography(caption, $query: $query);
38+
@include mdc-typography-baseline-top(16px, $query: $query);
39+
40+
@include mdc-feature-targets($feat-structure) {
41+
margin: 0;
42+
opacity: 0;
43+
will-change: opacity;
44+
}
45+
46+
@include mdc-feature-targets($feat-animation) {
47+
transition: mdc-text-field-transition(opacity);
48+
}
49+
}
50+
51+
.mdc-text-field-helper-text--persistent {
52+
@include mdc-feature-targets($feat-structure) {
53+
opacity: 1;
54+
will-change: initial;
55+
}
56+
57+
@include mdc-feature-targets($feat-animation) {
58+
transition: none;
59+
}
60+
}
61+
62+
// postcss-bem-linter: end
63+
}
64+
2565
///
2666
/// Customizes the color of the helper text following an enabled text-field.
2767
/// @param {Color} $color - The desired helper text color.
2868
///
29-
@mixin mdc-text-field-helper-text-color($color) {
69+
@mixin mdc-text-field-helper-text-color($color, $query: mdc-feature-all()) {
3070
&:not(.mdc-text-field--disabled) {
31-
@include mdc-text-field-helper-text-color_($color);
71+
@include mdc-text-field-helper-text-color_($color, $query: $query);
3272
}
3373
}
3474

3575
///
3676
/// Customizes the color of the helper text following a disabled text-field.
3777
/// @param {Color} $color - The desired helper text color.
3878
///
39-
@mixin mdc-text-field-disabled-helper-text-color($color) {
79+
@mixin mdc-text-field-disabled-helper-text-color($color, $query: mdc-feature-all()) {
4080
&.mdc-text-field--disabled {
41-
@include mdc-text-field-helper-text-color_($color);
81+
@include mdc-text-field-helper-text-color_($color, $query: $query);
4282
}
4383
}
4484

45-
@mixin mdc-text-field-helper-text-validation-color($color) {
85+
@mixin mdc-text-field-helper-text-validation-color($color, $query: mdc-feature-all()) {
4686
&:not(.mdc-text-field--disabled) {
47-
@include mdc-text-field-helper-text-validation-color_($color);
87+
@include mdc-text-field-helper-text-validation-color_($color, $query);
4888
}
4989
}
5090

5191
// Private mixins
5292

53-
@mixin mdc-text-field-helper-text-color_($color) {
93+
@mixin mdc-text-field-helper-text-color_($color, $query: mdc-feature-all()) {
94+
$feat-color: mdc-feature-create-target($query, color);
95+
5496
+ .mdc-text-field-helper-line .mdc-text-field-helper-text {
55-
@include mdc-theme-prop(color, $color);
97+
@include mdc-feature-targets($feat-color) {
98+
@include mdc-theme-prop(color, $color);
99+
}
56100
}
57101
}
58102

59-
@mixin mdc-text-field-helper-text-validation-color_($color) {
103+
@mixin mdc-text-field-helper-text-validation-color_($color, $query: mdc-feature-all()) {
104+
$feat-color: mdc-feature-create-target($query, color);
105+
60106
&.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
61-
@include mdc-theme-prop(color, $color);
107+
@include mdc-feature-targets($feat-color) {
108+
@include mdc-theme-prop(color, $color);
109+
}
62110
}
63111
}

‎packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,5 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "../functions";
24-
@import "@material/theme/mixins";
25-
@import "@material/typography/mixins";
26-
27-
// postcss-bem-linter: define text-field-helper-text
28-
29-
.mdc-text-field-helper-text {
30-
@include mdc-typography(caption);
31-
@include mdc-typography-baseline-top(16px);
32-
33-
margin: 0;
34-
transition: mdc-text-field-transition(opacity);
35-
opacity: 0;
36-
will-change: opacity;
37-
}
38-
39-
.mdc-text-field-helper-text--persistent {
40-
transition: none;
41-
opacity: 1;
42-
will-change: initial;
43-
}
44-
45-
// postcss-bem-linter: end
23+
@import "./mixins";
24+
@include mdc-text-field-helper-text-core-styles;

‎packages/mdc-textfield/icon/_mixins.scss‎

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,83 +20,113 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "@material/rtl/mixins";
2423
@import "@material/theme/variables";
2524
@import "@material/theme/mixins";
25+
@import "@material/rtl/mixins";
26+
@import "@material/feature-targeting/functions";
27+
@import "@material/feature-targeting/mixins";
2628

2729
// Public mixins
2830

31+
@mixin mdc-text-field-icon-core-styles($query: mdc-feature-all()) {
32+
.mdc-text-field__icon {
33+
@include mdc-text-field-icon_($query: $query);
34+
}
35+
}
36+
2937
///
3038
/// Customizes the color for the leading icon in an enabled text-field.
3139
/// @param {Color} $color - The desired icon color.
3240
///
33-
@mixin mdc-text-field-leading-icon-color($color) {
41+
@mixin mdc-text-field-leading-icon-color($color, $query: mdc-feature-all()) {
3442
&:not(.mdc-text-field--disabled) {
35-
@include mdc-text-field-leading-icon-color_($color);
43+
@include mdc-text-field-leading-icon-color_($color, $query: $query);
3644
}
3745
}
3846

3947
///
4048
/// Customizes the color for the trailing icon in an enabled text-field.
4149
/// @param {Color} $color - The desired icon color.
4250
///
43-
@mixin mdc-text-field-trailing-icon-color($color) {
51+
@mixin mdc-text-field-trailing-icon-color($color, $query: mdc-feature-all()) {
4452
&:not(.mdc-text-field--disabled) {
45-
@include mdc-text-field-trailing-icon-color_($color);
53+
@include mdc-text-field-trailing-icon-color_($color, $query: $query);
4654
}
4755
}
4856

4957
///
5058
/// Customizes the color for the leading/trailing icons in a disabled text-field.
5159
/// @param {Color} $color - The desired icon color.
5260
///
53-
@mixin mdc-text-field-disabled-icon-color($color) {
61+
@mixin mdc-text-field-disabled-icon-color($color, $query: mdc-feature-all()) {
5462
&.mdc-text-field--disabled {
55-
@include mdc-text-field-leading-icon-color_($color);
56-
@include mdc-text-field-trailing-icon-color_($color);
63+
@include mdc-text-field-leading-icon-color_($color, $query: $query);
64+
@include mdc-text-field-trailing-icon-color_($color, $query: $query);
5765
}
5866
}
5967

6068
// Private mixins
6169

62-
@mixin mdc-text-field-leading-icon-horizontal-position_($position) {
70+
@mixin mdc-text-field-leading-icon-horizontal-position_($position, $query: mdc-feature-all()) {
71+
$feat-structure: mdc-feature-create-target($query, structure);
72+
6373
.mdc-text-field__icon--leading {
64-
@include mdc-rtl-reflexive-position(left, $position);
74+
@include mdc-feature-targets($feat-structure) {
75+
@include mdc-rtl-reflexive-position(left, $position);
76+
}
6577
}
6678
}
6779

68-
@mixin mdc-text-field-trailing-icon-horizontal-position_($position) {
80+
@mixin mdc-text-field-trailing-icon-horizontal-position_($position, $query: mdc-feature-all()) {
81+
$feat-structure: mdc-feature-create-target($query, structure);
82+
6983
.mdc-text-field__icon--trailing {
70-
@include mdc-rtl-reflexive-position(right, $position);
84+
@include mdc-feature-targets($feat-structure) {
85+
@include mdc-rtl-reflexive-position(right, $position);
86+
}
7187
}
7288
}
7389

74-
@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right) {
75-
@include mdc-text-field-leading-icon-horizontal-position_($position-left);
76-
@include mdc-text-field-trailing-icon-horizontal-position_($position-right);
90+
@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right, $query: mdc-feature-all()) {
91+
@include mdc-text-field-leading-icon-horizontal-position_($position-left, $query: $query);
92+
@include mdc-text-field-trailing-icon-horizontal-position_($position-right, $query: $query);
7793
}
7894

79-
@mixin mdc-text-field-icon_ {
80-
position: absolute;
81-
top: 50%;
82-
transform: translateY(-50%);
83-
cursor: pointer;
95+
@mixin mdc-text-field-icon_($query: mdc-feature-all()) {
96+
$feat-structure: mdc-feature-create-target($query, structure);
97+
98+
@include mdc-feature-targets($feat-structure) {
99+
position: absolute;
100+
top: 50%;
101+
transform: translateY(-50%);
102+
cursor: pointer;
103+
}
84104

85105
&:not([tabindex]),
86106
&[tabindex="-1"] {
87-
cursor: default;
88-
pointer-events: none;
107+
@include mdc-feature-targets($feat-structure) {
108+
cursor: default;
109+
pointer-events: none;
110+
}
89111
}
90112
}
91113

92-
@mixin mdc-text-field-leading-icon-color_($color) {
114+
@mixin mdc-text-field-leading-icon-color_($color, $query: mdc-feature-all()) {
115+
$feat-color: mdc-feature-create-target($query, color);
116+
93117
.mdc-text-field__icon--leading {
94-
@include mdc-theme-prop(color, $color);
118+
@include mdc-feature-targets($feat-color) {
119+
@include mdc-theme-prop(color, $color);
120+
}
95121
}
96122
}
97123

98-
@mixin mdc-text-field-trailing-icon-color_($color) {
124+
@mixin mdc-text-field-trailing-icon-color_($color, $query: mdc-feature-all()) {
125+
$feat-color: mdc-feature-create-target($query, color);
126+
99127
.mdc-text-field__icon--trailing {
100-
@include mdc-theme-prop(color, $color);
128+
@include mdc-feature-targets($feat-color) {
129+
@include mdc-theme-prop(color, $color);
130+
}
101131
}
102132
}

‎packages/mdc-textfield/icon/mdc-text-field-icon.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,4 @@
2121
//
2222

2323
@import "./mixins";
24-
25-
.mdc-text-field__icon {
26-
@include mdc-text-field-icon_;
27-
}
24+
@include mdc-text-field-icon-core-styles;

0 commit comments

Comments
 (0)