feat(material-experimental/mdc-form-field): Add option for dynamic su…

…bscript height based on the actual number and size of hints and errors.
angular · Jan 20, 2022 · d809575 · d809575
1 parent 9b1fd61
commit d809575
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 5 deletions.
diff --git a/src/dev-app/mdc-input/mdc-input-demo.html b/src/dev-app/mdc-input/mdc-input-demo.html
@@ -415,6 +415,81 @@ <h4>Textarea</h4>
   </mat-card-content>
 </mat-card>
 
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Dynamic Subscript Sizing</mat-toolbar>
+  <mat-card-content>
+    <p>
+      One validation
+      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
+        <mat-label>Fill appearance</mat-label>
+        <input matInput [(ngModel)]="fillAppearance" required>
+        <mat-error>This field is required</mat-error>
+      </mat-form-field>
+    </p>
+
+    <p>
+      One very long validation that wraps
+      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic"
+          style="width: 212px">
+        <mat-label>Fill appearance</mat-label>
+        <input matInput [(ngModel)]="fillAppearance" required>
+        <mat-error>This field is extremely, very much, absolutely positively required so do not forget it!</mat-error>
+      </mat-form-field>
+    </p>
+
+    <p>
+      One hint and one validation
+      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
+        <mat-label>Fill appearance</mat-label>
+        <input matInput [(ngModel)]="fillAppearance" required>
+        <mat-error>This field is required</mat-error>
+        <mat-hint>Please type something here</mat-hint>
+      </mat-form-field>
+    </p>
+
+    <p>
+      Multiple errors
+      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
+        <mat-label>Fill appearance</mat-label>
+        <input matInput [(ngModel)]="fillAppearance" required>
+        <mat-error>AAA</mat-error>
+        <mat-error>BBB</mat-error>
+        <mat-error>CCC</mat-error>
+      </mat-form-field>
+    </p>
+
+    <p>
+      Multiple hints
+      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
+        <mat-label>Fill appearance</mat-label>
+        <input matInput>
+        <mat-hint>aaa</mat-hint>
+        <mat-hint>bbb</mat-hint>
+        <mat-hint>ccc</mat-hint>
+      </mat-form-field>
+    </p>
+
+    <p>
+      Multiple hints with differing alignment
+      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
+        <mat-label>Fill appearance</mat-label>
+        <input matInput>
+        <mat-hint>aaa</mat-hint>
+        <mat-hint align="end">bbb</mat-hint>
+        <mat-hint align="end">ccc</mat-hint>
+      </mat-form-field>
+    </p>
+
+    <p>
+      No hints or errors
+      <mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
+        <mat-label>Fill appearance</mat-label>
+        <input matInput>
+      </mat-form-field>
+    </p>
+  </mat-card-content>
+</mat-card>
+
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Number Inputs</mat-toolbar>
   <mat-card-content>

diff --git a/src/material-experimental/mdc-form-field/_form-field-subscript.scss b/src/material-experimental/mdc-form-field/_form-field-subscript.scss
@@ -16,14 +16,20 @@
 
   .mat-mdc-form-field-hint-wrapper,
   .mat-mdc-form-field-error-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
     padding: 0 mdc-textfield-variables.$padding-horizontal;
   }
 
-  .mat-mdc-form-field-bottom-align::before {
+  .mat-mdc-form-field-bottom-align:not(.mat-mdc-form-field-subscript-dynamic-size) {
+    .mat-mdc-form-field-hint-wrapper,
+    .mat-mdc-form-field-error-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  .mat-mdc-form-field-bottom-align:not(.mat-mdc-form-field-subscript-dynamic-size)::before {
     content: '';
     display: inline-block;
     height: 16px;

diff --git a/src/material-experimental/mdc-form-field/form-field.html b/src/material-experimental/mdc-form-field/form-field.html
@@ -71,6 +71,7 @@
 </div>
 
 <div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+     [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
      [ngSwitch]="_getDisplayedMessages()">
   <div class="mat-mdc-form-field-error-wrapper" *ngSwitchCase="'error'"
        [@transitionMessages]="_subscriptAnimationState">

diff --git a/src/material-experimental/mdc-form-field/form-field.ts b/src/material-experimental/mdc-form-field/form-field.ts
@@ -61,6 +61,9 @@ export type FloatLabelType = 'always' | 'auto';
 /** Possible appearance styles for the form field. */
 export type MatFormFieldAppearance = 'fill' | 'outline';
 
+/** Behaviors for how the suffix height is set. */
+export type SubscriptSizingBehavior = 'fixed' | 'dynamic';
+
 /**
  * Represents the default options for the form field that can be configured
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
@@ -69,6 +72,7 @@ export interface MatFormFieldDefaultOptions {
   appearance?: MatFormFieldAppearance;
   hideRequiredMarker?: boolean;
   floatLabel?: FloatLabelType;
+  subscriptSizing?: SubscriptSizingBehavior;
 }
 
 /**
@@ -87,6 +91,9 @@ const DEFAULT_APPEARANCE: MatFormFieldAppearance = 'fill';
 /** Default appearance used by the form-field. */
 const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
 
+/** Default way that the suffix element height is set. */
+const DEFAULT_SUBSCRIPT_SIZING: SubscriptSizingBehavior = 'fixed';
+
 /**
  * Default transform for docked floating labels in a MDC text-field. This value has been
  * extracted from the MDC text-field styles because we programmatically modify the docked
@@ -206,6 +213,15 @@ export class MatFormField
   }
   private _appearance: MatFormFieldAppearance = DEFAULT_APPEARANCE;
 
+  @Input()
+  get subscriptSizing(): SubscriptSizingBehavior {
+    return this._subscriptSizing || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
+  }
+  set subscriptSizing(value: SubscriptSizingBehavior) {
+    this._subscriptSizing = value || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
+  }
+  private _subscriptSizing: SubscriptSizingBehavior = DEFAULT_SUBSCRIPT_SIZING;
+
   /** Text for the form field hint. */
   @Input()
   get hintLabel(): string {