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

Commit 4d94b22

Browse files
abhiomkarabhiomkar
authored
feat(text-field): Center align inner elements for dynamic height (#4990)
BREAKING CHANGE: Removed sass variable in notched outline - `$mdc-notched-outline-transition-duration`.
1 parent d0e6cd1 commit 4d94b22

15 files changed

Lines changed: 574 additions & 222 deletions

File tree

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,9 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
$mdc-floating-label-position-y: 50% !default;
23+
///
24+
/// Y-axis position of label when it is afloat.
25+
/// 100% of the length of label and additional 6% for scaledown.
26+
///
27+
$mdc-floating-label-position-y: 106% !default;
2428
$mdc-floating-label-transition-duration: 150ms !default;

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,17 @@
4242
}
4343
}
4444

45+
///
46+
/// Adds top offset to compensate for border width box size when it is notched.
47+
/// Use this when floating label is aligned to center to prevent label jump on focus.
48+
/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.
49+
///
50+
@mixin mdc-notched-outline-notch-offset($stroke-width) {
51+
.mdc-notched-outline--notched .mdc-notched-outline__notch {
52+
padding-top: $stroke-width - $mdc-notched-outline-border-width;
53+
}
54+
}
55+
4556
@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
4657
$radius: mdc-shape-prop-value($radius);
4758

@@ -89,3 +100,33 @@
89100
}
90101
}
91102
}
103+
104+
///
105+
/// Sets floating label position in notched outline when label is afloat.
106+
///
107+
/// @param {Number} $positionY Absolute Y-axis position in `px`.
108+
/// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`.
109+
/// @param {Number} $scale Defaults to `.75`.
110+
///
111+
/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is
112+
/// center aligned in all the places.
113+
///
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);
116+
117+
.mdc-floating-label--float-above {
118+
font-size: ($scale * 1rem);
119+
}
120+
121+
// Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
122+
&.mdc-notched-outline--upgraded,
123+
.mdc-notched-outline--upgraded {
124+
@include mdc-floating-label-float-position(
125+
$positionY, $positionX, $scale);
126+
127+
// stylelint-disable-next-line no-descending-specificity
128+
.mdc-floating-label--float-above {
129+
font-size: 1rem;
130+
}
131+
}
132+
}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,21 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
$mdc-notched-outline-transition-duration: 150ms !default;
2423
// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION
2524
$mdc-notched-outline-min-leading-stroke-edge-position: 12px !default;
2625
// The gap between the stroke end and floating label
2726
// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE
2827
$mdc-notched-outline-notch-gutter-size: 4px !default;
28+
$mdc-notched-outline-border-width: 1px !default;
2929
$mdc-notched-outline-leading-width: 12px !default;
3030
$mdc-notched-outline-padding: 4px !default;
3131
// This variable keeps the before/after JS label centered in the notch when the font-size is changed.
3232
$mdc-notched-outline-label-adjust: 14% !default;
33+
34+
/// Label box height when it is floating above for notched upgraded. This value is used to put the label vertically in
35+
/// the middle when it is notched.
36+
$mdc-notched-outline-label-box-height: 13.5px !default;
37+
38+
/// Label adjust offset applied to floating label when it is notched. Since notch without upgraded has different font
39+
/// size we add additional offset value.
40+
$mdc-notched-outline-label-adjust-absolute: 2.5px !default;

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "@material/animation/variables";
2423
@import "@material/base/mixins";
2524
@import "@material/rtl/mixins";
2625
@import "./mixins";
@@ -51,20 +50,19 @@
5150
&__trailing {
5251
box-sizing: border-box;
5352
height: 100%;
54-
transition: border $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
55-
border-top: 1px solid;
56-
border-bottom: 1px solid;
53+
border-top: $mdc-notched-outline-border-width solid;
54+
border-bottom: $mdc-notched-outline-border-width solid;
5755
pointer-events: none;
5856
}
5957

6058
&__leading {
61-
@include mdc-rtl-reflexive-property(border, 1px solid, none);
59+
@include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none);
6260

6361
width: $mdc-notched-outline-leading-width;
6462
}
6563

6664
&__trailing {
67-
@include mdc-rtl-reflexive-property(border, none, 1px solid);
65+
@include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid);
6866

6967
flex-grow: 1;
7068
}
@@ -78,8 +76,6 @@
7876
.mdc-floating-label {
7977
display: inline-block;
8078
position: relative;
81-
top: 17px;
82-
bottom: auto;
8379
max-width: 100%;
8480
}
8581

‎packages/mdc-notched-outline/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
"access": "public"
2323
},
2424
"dependencies": {
25-
"@material/animation": "^3.1.0",
2625
"@material/base": "^3.1.0",
2726
"@material/floating-label": "^3.1.0",
2827
"@material/rtl": "^3.1.0",

‎packages/mdc-textfield/_mixins.scss‎

Lines changed: 68 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,49 @@
3434
@import "./variables";
3535
@import "./functions";
3636

37-
@mixin mdc-text-field-shape-radius($radius, $rtl-reflexive: false) {
37+
///
38+
/// Sets height of default text field variant.
39+
///
40+
/// @param {Number} $height
41+
/// @access public
42+
///
43+
@mixin mdc-text-field-height($height) {
44+
height: $height;
45+
}
46+
47+
///
48+
/// Sets height of outlined text field variant.
49+
///
50+
/// @param {Number} $height
51+
/// @access public
52+
///
53+
@mixin mdc-text-field-outlined-height($height) {
54+
$keyframe-name: text-field-outlined-#{$height};
55+
$positionY: mdc-text-field-get-outlined-label-position-y($height);
56+
57+
@include mdc-notched-outline-floating-label-float-position-absolute($positionY);
58+
@include mdc-floating-label-shake-keyframes($keyframe-name, $positionY);
59+
@include mdc-floating-label-shake-animation($keyframe-name);
60+
@include mdc-text-field-height($height);
61+
}
62+
63+
///
64+
/// Sets shape radius of default text field variant.
65+
///
66+
/// @param {Number} $radius Shape radius value in `px` or in percentage.
67+
/// @param {Number} $text-field-height Height of default text field variant. Required only when `$radius` is in
68+
/// percentage unit and if text field has custom height. Defaults to `$mdc-text-field-height`.
69+
/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.
70+
///
71+
@mixin mdc-text-field-shape-radius($radius, $text-field-height: $mdc-text-field-height, $rtl-reflexive: false) {
3872
@if length($radius) > 2 {
3973
@error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
4074
}
4175

4276
$masked-radius: mdc-shape-mask-radius($radius, 1 1 0 0);
4377

4478
@include mdc-shape-radius(
45-
mdc-shape-resolve-percentage-radius($mdc-text-field-height, $masked-radius),
79+
mdc-shape-resolve-percentage-radius($text-field-height, $masked-radius),
4680
$rtl-reflexive
4781
);
4882
}
@@ -222,8 +256,16 @@
222256
}
223257
}
224258

225-
@mixin mdc-text-field-outline-shape-radius($radius, $rtl-reflexive: false) {
226-
$resolved-radius: nth(mdc-shape-resolve-percentage-radius($mdc-text-field-height, mdc-shape-prop-value($radius)), 1);
259+
///
260+
/// Sets shape radius of outlined text field variant.
261+
///
262+
/// @param {Number} $radius Shape radius value in `px` or in percentage.
263+
/// @param {Number} $text-field-height Height of outlined text field variant. Required only when `$radius` is in
264+
/// percentage unit and if text field has custom height. Defaults to `$mdc-text-field-height`.
265+
/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.
266+
///
267+
@mixin mdc-text-field-outline-shape-radius($radius, $text-field-height: $mdc-text-field-height, $rtl-reflexive: false) {
268+
$resolved-radius: nth(mdc-shape-resolve-percentage-radius($text-field-height, mdc-shape-prop-value($radius)), 1);
227269

228270
@if (length(mdc-shape-prop-value($radius)) > 1) {
229271
// stylelint-disable-next-line max-line-length
@@ -249,10 +291,15 @@
249291
.mdc-floating-label {
250292
@include mdc-rtl-reflexive-position(left, $mdc-text-field-label-offset);
251293

252-
top: 18px;
294+
top: 50%;
295+
transform: translateY(-50%);
253296
pointer-events: none;
254297
}
255298

299+
// Include these mixins to override above `transform` property.
300+
//TODO: Remove these from here when floating label is center aligned in all position - this lowers specificity.
301+
@include mdc-floating-label-float-position($mdc-text-field-label-position-y);
302+
256303
&--textarea {
257304
.mdc-floating-label {
258305
@include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
@@ -262,8 +309,6 @@
262309
&--outlined {
263310
.mdc-floating-label {
264311
@include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
265-
266-
top: 17px;
267312
}
268313

269314
&--with-leading-icon {
@@ -299,7 +344,7 @@
299344
}
300345

301346
@mixin mdc-text-field-outlined-focused_ {
302-
@include mdc-notched-outline-stroke-width(2px);
347+
@include mdc-notched-outline-stroke-width($mdc-text-field-outlined-stroke-width);
303348
}
304349

305350
@mixin mdc-text-field-outlined-dense_ {
@@ -331,7 +376,8 @@
331376
@include mdc-text-field-focused-outline-color(primary);
332377
@include mdc-floating-label-shake-animation(text-field-outlined);
333378
@include mdc-text-field-outline-shape-radius(small);
334-
@include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y);
379+
@include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y);
380+
@include mdc-notched-outline-notch-offset($mdc-notched-outline-border-width);
335381
@include mdc-states-base-color(transparent);
336382
@include mdc-text-field-fill-color(transparent);
337383

@@ -349,6 +395,10 @@
349395
.mdc-text-field__icon {
350396
z-index: 2;
351397
}
398+
399+
&.mdc-text-field--focused {
400+
@include mdc-notched-outline-notch-offset($mdc-text-field-outlined-stroke-width);
401+
}
352402
}
353403

354404
@mixin mdc-text-field-hover-outline-color_($color) {
@@ -404,7 +454,7 @@
404454
$mdc-text-field-icon-padding,
405455
$mdc-text-field-input-padding
406456
);
407-
@include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y, 32px);
457+
@include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y, 32px);
408458
@include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
409459

410460
@include mdc-rtl {
@@ -522,11 +572,11 @@
522572
@include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
523573
@include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
524574
@include mdc-text-field-focused-outline-color(primary);
525-
@include mdc-floating-label-shake-animation(text-field-outlined);
575+
@include mdc-floating-label-shake-animation(textarea);
526576
@include mdc-text-field-outline-shape-radius(small);
527577
@include mdc-states-base-color(transparent);
528578
@include mdc-text-field-fill-color(transparent);
529-
@include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y, 0%);
579+
@include mdc-notched-outline-floating-label-float-position($mdc-text-field-textarea-label-position-y);
530580
@include mdc-text-field-character-counter-position(16px, 13px);
531581

532582
$padding-inset: 16px;
@@ -544,6 +594,7 @@
544594
margin: $padding-inset/2 1px 1px 0;
545595
padding: 0 $padding-inset $padding-inset;
546596
border: none;
597+
line-height: 1.75rem; // 28sp
547598
}
548599

549600
.mdc-text-field-character-counter + .mdc-text-field__input {
@@ -553,9 +604,13 @@
553604

554605
.mdc-floating-label {
555606
top: 17px;
556-
bottom: auto;
557607
width: auto;
558608
pointer-events: none;
609+
610+
// Resets center aligning the floating label.
611+
&:not(.mdc-floating-label--float-above) {
612+
transform: none;
613+
}
559614
}
560615

561616
&.mdc-text-field--focused {

‎packages/mdc-textfield/_variables.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,20 @@
1919
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2020
// THE SOFTWARE.
2121
//
22+
23+
@import "@material/floating-label/variables";
24+
@import "@material/notched-outline/variables";
25+
26+
///
27+
/// Returns outlined text field floating label position for given height.
28+
///
29+
/// @todo Instead of adjusting `$positionY` with label box height that might change based on floating label font size
30+
/// wrap label in a child element to apply `transitionY(-50%)` to automatically offset based on box height.
31+
///
32+
@function mdc-text-field-get-outlined-label-position-y($text-field-height) {
33+
@return $text-field-height/2 + $mdc-notched-outline-label-box-height/2;
34+
}
35+
2236
$mdc-text-field-error: error !default;
2337
$mdc-text-field-fullwidth-bottom-line-color: rgba(mdc-theme-prop-value(on-surface), .12) !default;
2438
$mdc-text-field-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06) !default;
@@ -52,12 +66,14 @@ $mdc-textarea-disabled-border-color: rgba(mdc-theme-prop-value(on-surface), .26)
5266
// will make text unreadable
5367
$mdc-textarea-disabled-background: rgba(249, 249, 249, 1) !default;
5468

69+
$mdc-text-field-outlined-stroke-width: 2px !default;
5570
$mdc-text-field-height: 56px !default;
56-
$mdc-text-field-label-position-y: 50% !default;
71+
$mdc-text-field-label-position-y: $mdc-floating-label-position-y !default;
5772
$mdc-text-field-label-offset: 16px !default;
5873
$mdc-text-field-dense-label-position-y: 70% !default;
5974
$mdc-text-field-dense-label-scale: .8 !default;
60-
$mdc-text-field-outlined-label-position-y: 130% !default;
75+
$mdc-text-field-outlined-label-position-y:
76+
mdc-text-field-get-outlined-label-position-y($mdc-text-field-height) !default;
6177
$mdc-text-field-outlined-dense-label-position-y: 120% !default;
6278
$mdc-text-field-outlined-with-leading-icon-label-position-x: 0 !default;
6379
$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px !default;

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@
4747
@include mdc-states-focus-opacity(mdc-states-opacity($mdc-text-field-ink-color, focus));
4848
@include mdc-ripple-radius-bounded;
4949

50+
// Height
51+
@include mdc-text-field-height($mdc-text-field-height);
52+
5053
// Shape
5154
@include mdc-text-field-shape-radius(small);
5255

@@ -69,14 +72,14 @@
6972
display: inline-flex;
7073
position: relative;
7174
box-sizing: border-box;
72-
height: $mdc-text-field-height;
7375
overflow: hidden;
7476
/* @alternate */
7577
will-change: opacity, transform, color;
7678
}
7779

7880
.mdc-text-field__input {
79-
@include mdc-typography(subtitle1);
81+
// Exclude setting line-height to keep caret (text cursor) same height as the input text in iOS browser.
82+
@include mdc-typography(subtitle1, $exclude-props: (line-height));
8083

8184
align-self: flex-end;
8285
box-sizing: border-box;

‎packages/mdc-typography/_mixins.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
}
4747
}
4848

49-
@mixin mdc-typography($style, $query: mdc-feature-all()) {
49+
@mixin mdc-typography($style, $query: mdc-feature-all(), $exclude-props: ()) {
5050
$feat-typography: mdc-feature-create-target($query, typography);
5151
$style-props: map-get($mdc-typography-styles, $style);
5252

@@ -56,7 +56,9 @@
5656

5757
@include mdc-feature-targets($feat-typography) {
5858
@each $key, $value in $style-props {
59-
#{$key}: $value;
59+
@if index($exclude-props, $key) == null {
60+
#{$key}: $value;
61+
}
6062
}
6163
}
6264
}

0 commit comments

Comments
 (0)