From 1d10f72212cd85dea27ed9ad1153191209c85d1b Mon Sep 17 00:00:00 2001 From: Kharazian Date: Tue, 19 Sep 2023 20:59:46 -0400 Subject: [PATCH] fix(material/form-field): Correct label position problem with outline appearance inside material tabs This change helps with an issue when you have a form field with an outline appearance placed inside a material tab. When the form field has an outline, the label does not show up properly. By adding some space at the top when the form field has an outline, we can make sure the label is not cut off. Fixes #27764 --- src/material/form-field/form-field.scss | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss index 0dcbe41561c1..294c59d2bd99 100644 --- a/src/material/form-field/form-field.scss +++ b/src/material/form-field/form-field.scss @@ -45,8 +45,14 @@ $_icon-prefix-infix-padding: 4px; // To avoid problems with text-align. text-align: left; - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { + &.mat-form-field-appearance-outline { + margin-top: form-field-sizing.$mat-form-field-outline-top-spacing / 2; + } + + @include token-utils.use-tokens( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.get-token-slots() + ) { @include vendor-prefixes.smooth-font(); @include token-utils.create-token-slot(font-family, container-text-font); @include token-utils.create-token-slot(line-height, container-text-line-height); @@ -115,8 +121,10 @@ $_icon-prefix-infix-padding: 4px; } .mat-mdc-form-field-icon-prefix { - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { + @include token-utils.use-tokens( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.get-token-slots() + ) { @include token-utils.create-token-slot(color, leading-icon-color); .mat-form-field-disabled & { @@ -126,8 +134,10 @@ $_icon-prefix-infix-padding: 4px; } .mat-mdc-form-field-icon-suffix { - @include token-utils.use-tokens(tokens-mat-form-field.$prefix, - tokens-mat-form-field.get-token-slots()) { + @include token-utils.use-tokens( + tokens-mat-form-field.$prefix, + tokens-mat-form-field.get-token-slots() + ) { @include token-utils.create-token-slot(color, trailing-icon-color); .mat-form-field-disabled & { @@ -139,7 +149,8 @@ $_icon-prefix-infix-padding: 4px; } .mat-form-field-invalid:not(.mat-focused):not(.mat-form-field-disabled) - .mat-mdc-text-field-wrapper:hover & { + .mat-mdc-text-field-wrapper:hover + & { @include token-utils.create-token-slot(color, error-hover-trailing-icon-color); }