Skip to content

Commit 452052c

Browse files
crisbetocrisbeto
committed
feat(notched-outline): add feature targeting for styles
Adds support for feature targeting to the `mdc-notched-outline` styles. Relates to material-components#4227.
1 parent b8bc4a2 commit 452052c

File tree

6 files changed

+192
-105
lines changed

6 files changed

+192
-105
lines changed

‎packages/mdc-floating-label/_mixins.scss

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222

2323
@import "@material/rtl/mixins";
2424
@import "@material/theme/mixins";
25+
@import "@material/feature-targeting/functions";
26+
@import "@material/feature-targeting/mixins";
2527
@import "./variables";
2628

2729
@mixin mdc-floating-label-ink-color($color) {
@@ -55,16 +57,20 @@
5557
}
5658
}
5759

58-
@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
60+
@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75, $query: mdc-feature-all()) {
61+
$feat-structure: mdc-feature-create-target($query, structure);
62+
5963
.mdc-floating-label--float-above {
60-
@if $positionX > 0 or $positionX < 0 {
61-
transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
64+
@include mdc-feature-targets($feat-structure) {
65+
@if $positionX > 0 or $positionX < 0 {
66+
transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
6267

63-
@include mdc-rtl {
64-
transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
68+
@include mdc-rtl {
69+
transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
70+
}
71+
} @else {
72+
transform: translateY(-1 * $positionY) scale($scale);
6573
}
66-
} @else {
67-
transform: translateY(-1 * $positionY) scale($scale);
6874
}
6975
}
7076
}

‎packages/mdc-floating-label/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"dependencies": {
2525
"@material/animation": "^4.0.0",
2626
"@material/base": "^4.0.0",
27+
"@material/feature-targeting": "^4.0.0",
2728
"@material/rtl": "^4.0.0",
2829
"@material/theme": "^4.0.0",
2930
"@material/typography": "^4.0.0",

‎packages/mdc-notched-outline/_mixins.scss

Lines changed: 166 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,116 @@
2222

2323
@import "@material/theme/mixins";
2424
@import "@material/shape/mixins";
25+
@import "@material/floating-label/mixins";
2526
@import "@material/shape/functions";
27+
@import "@material/feature-targeting/functions";
28+
@import "@material/feature-targeting/mixins";
2629
@import "@material/rtl/mixins";
2730
@import "./variables";
2831

29-
@mixin mdc-notched-outline-color($color) {
32+
@mixin mdc-notched-outline-core-styles($query: mdc-feature-all()) {
33+
$feat-structure: mdc-feature-create-target($query, structure);
34+
35+
.mdc-notched-outline {
36+
@include mdc-notched-outline-base_($query);
37+
38+
&__leading,
39+
&__notch,
40+
&__trailing {
41+
@include mdc-feature-targets($feat-structure) {
42+
box-sizing: border-box;
43+
height: 100%;
44+
border-top: $mdc-notched-outline-border-width solid;
45+
border-bottom: $mdc-notched-outline-border-width solid;
46+
pointer-events: none;
47+
}
48+
}
49+
50+
&__leading {
51+
@include mdc-feature-targets($feat-structure) {
52+
@include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none);
53+
54+
width: $mdc-notched-outline-leading-width;
55+
}
56+
}
57+
58+
&__trailing {
59+
@include mdc-feature-targets($feat-structure) {
60+
@include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid);
61+
62+
flex-grow: 1;
63+
}
64+
}
65+
66+
&__notch {
67+
@include mdc-feature-targets($feat-structure) {
68+
flex: 0 0 auto;
69+
width: auto;
70+
max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
71+
}
72+
}
73+
74+
.mdc-floating-label {
75+
@include mdc-feature-targets($feat-structure) {
76+
display: inline-block;
77+
position: relative;
78+
max-width: 100%;
79+
}
80+
}
81+
82+
.mdc-floating-label--float-above {
83+
@include mdc-feature-targets($feat-structure) {
84+
text-overflow: clip;
85+
}
86+
}
87+
88+
&--upgraded .mdc-floating-label--float-above {
89+
@include mdc-feature-targets($feat-structure) {
90+
max-width: calc(100% / .75);
91+
}
92+
}
93+
}
94+
95+
.mdc-notched-outline--notched {
96+
.mdc-notched-outline__notch {
97+
@include mdc-feature-targets($feat-structure) {
98+
@include mdc-rtl-reflexive-box(padding, right, 8px);
99+
100+
border-top: none;
101+
}
102+
}
103+
}
104+
105+
.mdc-notched-outline--no-label {
106+
.mdc-notched-outline__notch {
107+
@include mdc-feature-targets($feat-structure) {
108+
padding: 0;
109+
}
110+
}
111+
}
112+
}
113+
114+
@mixin mdc-notched-outline-color($color, $query: mdc-feature-all()) {
115+
$feat-color: mdc-feature-create-target($query, color);
116+
30117
.mdc-notched-outline__leading,
31118
.mdc-notched-outline__notch,
32119
.mdc-notched-outline__trailing {
33-
@include mdc-theme-prop(border-color, $color);
120+
@include mdc-feature-targets($feat-color) {
121+
@include mdc-theme-prop(border-color, $color);
122+
}
34123
}
35124
}
36125

37-
@mixin mdc-notched-outline-stroke-width($width) {
126+
@mixin mdc-notched-outline-stroke-width($width, $query: mdc-feature-all()) {
127+
$feat-structure: mdc-feature-create-target($query, structure);
128+
38129
.mdc-notched-outline__leading,
39130
.mdc-notched-outline__notch,
40131
.mdc-notched-outline__trailing {
41-
border-width: $width;
132+
@include mdc-feature-targets($feat-structure) {
133+
border-width: $width;
134+
}
42135
}
43136
}
44137

@@ -47,13 +140,18 @@
47140
/// Use this when floating label is aligned to center to prevent label jump on focus.
48141
/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.
49142
///
50-
@mixin mdc-notched-outline-notch-offset($stroke-width) {
143+
@mixin mdc-notched-outline-notch-offset($stroke-width, $query: mdc-feature-all()) {
144+
$feat-structure: mdc-feature-create-target($query, structure);
145+
51146
.mdc-notched-outline--notched .mdc-notched-outline__notch {
52-
padding-top: $stroke-width;
147+
@include mdc-feature-targets($feat-structure) {
148+
padding-top: $stroke-width;
149+
}
53150
}
54151
}
55152

56-
@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
153+
@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
154+
$feat-structure: mdc-feature-create-target($query, structure);
57155
$radius: mdc-shape-prop-value($radius);
58156

59157
@if (length($radius) > 1) {
@@ -64,39 +162,51 @@
64162
$radius: nth($radius, 1);
65163

66164
.mdc-notched-outline__leading {
67-
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true);
165+
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true, $query: $query);
68166

69-
@if ($radius > $mdc-notched-outline-leading-width) {
70-
width: $radius;
167+
@include mdc-feature-targets($feat-structure) {
168+
@if ($radius > $mdc-notched-outline-leading-width) {
169+
width: $radius;
170+
}
71171
}
72172
}
73173

74174
@if ($radius > $mdc-notched-outline-leading-width) {
75175
.mdc-notched-outline__notch {
76-
max-width: calc(100% - #{$radius} * 2);
176+
@include mdc-feature-targets($feat-structure) {
177+
max-width: calc(100% - #{$radius} * 2);
178+
}
77179
}
78180
}
79181

80182
.mdc-notched-outline__trailing {
81-
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true);
183+
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true, $query: $query);
82184
}
83185
}
84186

85-
@mixin mdc-notched-outline-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
86-
@include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust, $positionX, 1);
187+
@mixin mdc-notched-outline-floating-label-float-position(
188+
$positionY, $positionX: 0%, $scale: .75, $query: mdc-feature-all()) {
189+
$feat-structure: mdc-feature-create-target($query, structure);
190+
191+
@include mdc-floating-label-float-position(
192+
$positionY + $mdc-notched-outline-label-adjust, $positionX, 1, $query: $query);
87193

88194
.mdc-floating-label--float-above {
89-
font-size: ($scale * 1rem);
195+
@include mdc-feature-targets($feat-structure) {
196+
font-size: ($scale * 1rem);
197+
}
90198
}
91199

92200
// Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
93201
&.mdc-notched-outline--upgraded,
94202
.mdc-notched-outline--upgraded {
95-
@include mdc-floating-label-float-position($positionY, $positionX, $scale);
203+
@include mdc-floating-label-float-position($positionY, $positionX, $scale, $query: $query);
96204

97205
// stylelint-disable-next-line no-descending-specificity
98206
.mdc-floating-label--float-above {
99-
font-size: 1rem;
207+
@include mdc-feature-targets($feat-structure) {
208+
font-size: 1rem;
209+
}
100210
}
101211
}
102212
}
@@ -111,22 +221,56 @@
111221
/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is
112222
/// center aligned in all the places.
113223
///
114-
@mixin mdc-notched-outline-floating-label-float-position-absolute($positionY, $positionX: 0, $scale: .75) {
115-
@include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust-absolute, $positionX, 1);
224+
@mixin mdc-notched-outline-floating-label-float-position-absolute(
225+
$positionY, $positionX: 0, $scale: .75, $query: mdc-feature-all()) {
226+
$feat-structure: mdc-feature-create-target($query, structure);
227+
228+
@include mdc-floating-label-float-position(
229+
$positionY + $mdc-notched-outline-label-adjust-absolute, $positionX, 1, $query: $query);
116230

117231
.mdc-floating-label--float-above {
118-
font-size: ($scale * 1rem);
232+
@include mdc-feature-targets($feat-structure) {
233+
font-size: ($scale * 1rem);
234+
}
119235
}
120236

121237
// Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
122238
&.mdc-notched-outline--upgraded,
123239
.mdc-notched-outline--upgraded {
124240
@include mdc-floating-label-float-position(
125-
$positionY, $positionX, $scale);
241+
$positionY, $positionX, $scale, $query: $query);
126242

127243
// stylelint-disable-next-line no-descending-specificity
128244
.mdc-floating-label--float-above {
129-
font-size: 1rem;
245+
@include mdc-feature-targets($feat-structure) {
246+
font-size: 1rem;
247+
}
248+
}
249+
}
250+
}
251+
252+
//
253+
// Private
254+
//
255+
@mixin mdc-notched-outline-base_($query) {
256+
$feat-structure: mdc-feature-create-target($query, structure);
257+
258+
@include mdc-feature-targets($feat-structure) {
259+
display: flex;
260+
position: absolute;
261+
right: 0;
262+
left: 0;
263+
box-sizing: border-box;
264+
width: 100%;
265+
max-width: 100%;
266+
height: 100%;
267+
/* @noflip */
268+
text-align: left;
269+
pointer-events: none;
270+
271+
@include mdc-rtl {
272+
/* @noflip */
273+
text-align: right;
130274
}
131275
}
132276
}

‎packages/mdc-notched-outline/mdc-notched-outline.scss

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

2323
@import "@material/base/mixins";
24-
@import "@material/rtl/mixins";
2524
@import "./mixins";
26-
@import "./variables";
2725

2826
// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
2927
@include mdc-base-emit-once("mdc-notched-outline") {
30-
.mdc-notched-outline {
31-
display: flex;
32-
position: absolute;
33-
right: 0;
34-
left: 0;
35-
box-sizing: border-box;
36-
width: 100%;
37-
max-width: 100%;
38-
height: 100%;
39-
/* @noflip */
40-
text-align: left;
41-
pointer-events: none;
42-
43-
@include mdc-rtl {
44-
/* @noflip */
45-
text-align: right;
46-
}
47-
48-
&__leading,
49-
&__notch,
50-
&__trailing {
51-
box-sizing: border-box;
52-
height: 100%;
53-
border-top: $mdc-notched-outline-border-width solid;
54-
border-bottom: $mdc-notched-outline-border-width solid;
55-
pointer-events: none;
56-
}
57-
58-
&__leading {
59-
@include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none);
60-
61-
width: $mdc-notched-outline-leading-width;
62-
}
63-
64-
&__trailing {
65-
@include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid);
66-
67-
flex-grow: 1;
68-
}
69-
70-
&__notch {
71-
flex: 0 0 auto;
72-
width: auto;
73-
max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
74-
}
75-
76-
.mdc-floating-label {
77-
display: inline-block;
78-
position: relative;
79-
max-width: 100%;
80-
}
81-
82-
.mdc-floating-label--float-above {
83-
text-overflow: clip;
84-
}
85-
86-
&--upgraded .mdc-floating-label--float-above {
87-
max-width: calc(100% / .75);
88-
}
89-
}
90-
91-
.mdc-notched-outline--notched {
92-
.mdc-notched-outline__notch {
93-
@include mdc-rtl-reflexive-box(padding, right, 8px);
94-
95-
border-top: none;
96-
}
97-
}
98-
99-
.mdc-notched-outline--no-label {
100-
.mdc-notched-outline__notch {
101-
padding: 0;
102-
}
103-
}
28+
@include mdc-notched-outline-core-styles;
10429
}

0 commit comments

Comments
 (0)