Skip to content

Commit d809575

Browse files
committed
feat(material-experimental/mdc-form-field): Add option for dynamic subscript height based on the actual number and size of hints and errors.
1 parent 9b1fd61 commit d809575

File tree

4 files changed

+103
-5
lines changed

4 files changed

+103
-5
lines changed

src/dev-app/mdc-input/mdc-input-demo.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,81 @@ <h4>Textarea</h4>
415415
</mat-card-content>
416416
</mat-card>
417417

418+
<mat-card class="demo-card demo-basic">
419+
<mat-toolbar color="primary">Dynamic Subscript Sizing</mat-toolbar>
420+
<mat-card-content>
421+
<p>
422+
One validation
423+
<mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
424+
<mat-label>Fill appearance</mat-label>
425+
<input matInput [(ngModel)]="fillAppearance" required>
426+
<mat-error>This field is required</mat-error>
427+
</mat-form-field>
428+
</p>
429+
430+
<p>
431+
One very long validation that wraps
432+
<mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic"
433+
style="width: 212px">
434+
<mat-label>Fill appearance</mat-label>
435+
<input matInput [(ngModel)]="fillAppearance" required>
436+
<mat-error>This field is extremely, very much, absolutely positively required so do not forget it!</mat-error>
437+
</mat-form-field>
438+
</p>
439+
440+
<p>
441+
One hint and one validation
442+
<mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
443+
<mat-label>Fill appearance</mat-label>
444+
<input matInput [(ngModel)]="fillAppearance" required>
445+
<mat-error>This field is required</mat-error>
446+
<mat-hint>Please type something here</mat-hint>
447+
</mat-form-field>
448+
</p>
449+
450+
<p>
451+
Multiple errors
452+
<mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
453+
<mat-label>Fill appearance</mat-label>
454+
<input matInput [(ngModel)]="fillAppearance" required>
455+
<mat-error>AAA</mat-error>
456+
<mat-error>BBB</mat-error>
457+
<mat-error>CCC</mat-error>
458+
</mat-form-field>
459+
</p>
460+
461+
<p>
462+
Multiple hints
463+
<mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
464+
<mat-label>Fill appearance</mat-label>
465+
<input matInput>
466+
<mat-hint>aaa</mat-hint>
467+
<mat-hint>bbb</mat-hint>
468+
<mat-hint>ccc</mat-hint>
469+
</mat-form-field>
470+
</p>
471+
472+
<p>
473+
Multiple hints with differing alignment
474+
<mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
475+
<mat-label>Fill appearance</mat-label>
476+
<input matInput>
477+
<mat-hint>aaa</mat-hint>
478+
<mat-hint align="end">bbb</mat-hint>
479+
<mat-hint align="end">ccc</mat-hint>
480+
</mat-form-field>
481+
</p>
482+
483+
<p>
484+
No hints or errors
485+
<mat-form-field appearance="fill" [color]="color" subscriptSizing="dynamic">
486+
<mat-label>Fill appearance</mat-label>
487+
<input matInput>
488+
</mat-form-field>
489+
</p>
490+
</mat-card-content>
491+
</mat-card>
492+
418493
<mat-card class="demo-card demo-basic">
419494
<mat-toolbar color="primary">Number Inputs</mat-toolbar>
420495
<mat-card-content>

src/material-experimental/mdc-form-field/_form-field-subscript.scss

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,20 @@
1616

1717
.mat-mdc-form-field-hint-wrapper,
1818
.mat-mdc-form-field-error-wrapper {
19-
position: absolute;
20-
top: 0;
21-
left: 0;
22-
right: 0;
2319
padding: 0 mdc-textfield-variables.$padding-horizontal;
2420
}
2521

26-
.mat-mdc-form-field-bottom-align::before {
22+
.mat-mdc-form-field-bottom-align:not(.mat-mdc-form-field-subscript-dynamic-size) {
23+
.mat-mdc-form-field-hint-wrapper,
24+
.mat-mdc-form-field-error-wrapper {
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
right: 0;
29+
}
30+
}
31+
32+
.mat-mdc-form-field-bottom-align:not(.mat-mdc-form-field-subscript-dynamic-size)::before {
2733
content: '';
2834
display: inline-block;
2935
height: 16px;

src/material-experimental/mdc-form-field/form-field.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
</div>
7272

7373
<div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
74+
[class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
7475
[ngSwitch]="_getDisplayedMessages()">
7576
<div class="mat-mdc-form-field-error-wrapper" *ngSwitchCase="'error'"
7677
[@transitionMessages]="_subscriptAnimationState">

src/material-experimental/mdc-form-field/form-field.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ export type FloatLabelType = 'always' | 'auto';
6161
/** Possible appearance styles for the form field. */
6262
export type MatFormFieldAppearance = 'fill' | 'outline';
6363

64+
/** Behaviors for how the suffix height is set. */
65+
export type SubscriptSizingBehavior = 'fixed' | 'dynamic';
66+
6467
/**
6568
* Represents the default options for the form field that can be configured
6669
* using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
@@ -69,6 +72,7 @@ export interface MatFormFieldDefaultOptions {
6972
appearance?: MatFormFieldAppearance;
7073
hideRequiredMarker?: boolean;
7174
floatLabel?: FloatLabelType;
75+
subscriptSizing?: SubscriptSizingBehavior;
7276
}
7377

7478
/**
@@ -87,6 +91,9 @@ const DEFAULT_APPEARANCE: MatFormFieldAppearance = 'fill';
8791
/** Default appearance used by the form-field. */
8892
const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
8993

94+
/** Default way that the suffix element height is set. */
95+
const DEFAULT_SUBSCRIPT_SIZING: SubscriptSizingBehavior = 'fixed';
96+
9097
/**
9198
* Default transform for docked floating labels in a MDC text-field. This value has been
9299
* extracted from the MDC text-field styles because we programmatically modify the docked
@@ -206,6 +213,15 @@ export class MatFormField
206213
}
207214
private _appearance: MatFormFieldAppearance = DEFAULT_APPEARANCE;
208215

216+
@Input()
217+
get subscriptSizing(): SubscriptSizingBehavior {
218+
return this._subscriptSizing || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
219+
}
220+
set subscriptSizing(value: SubscriptSizingBehavior) {
221+
this._subscriptSizing = value || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
222+
}
223+
private _subscriptSizing: SubscriptSizingBehavior = DEFAULT_SUBSCRIPT_SIZING;
224+
209225
/** Text for the form field hint. */
210226
@Input()
211227
get hintLabel(): string {

0 commit comments

Comments
 (0)