Skip to content

Commit e608df5

Browse files
mmalerbammalerba
committed
feat(material-expeirmental/mdc-form-field): separate out text and icon
prefixes/suffixes
1 parent ce7b92f commit e608df5

File tree

8 files changed

+70
-32
lines changed

8 files changed

+70
-32
lines changed

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

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -124,32 +124,50 @@ <h4>Text</h4>
124124
<mat-form-field [appearance]="prefixSuffixAppearance" class="demo-text-align-end">
125125
<mat-label>Amount</mat-label>
126126
<input matInput>
127-
<span matPrefix *ngIf="showPrefix">$&nbsp;</span>
128-
<span matSuffix>.00</span>
127+
<span matTextPrefix *ngIf="showPrefix">$</span>
128+
<span matTextSuffix>.00</span>
129129
</mat-form-field>
130130

131131
<h4>Text (always outline)</h4>
132132
<mat-form-field appearance="outline" class="demo-text-align-end">
133133
<mat-label>Amount</mat-label>
134134
<input matInput>
135-
<span matPrefix>$&nbsp;</span>
136-
<span matSuffix>.00</span>
135+
<span matTextPrefix>$</span>
136+
<span matTextSuffix>.00</span>
137137
</mat-form-field>
138138

139139
<h4>Icons</h4>
140140
<mat-form-field [appearance]="prefixSuffixAppearance">
141141
<mat-label>Amount</mat-label>
142142
<input matInput>
143-
<mat-icon matPrefix *ngIf="showPrefix">calendar_today</mat-icon>
144-
<mat-icon matSuffix>mode_edit</mat-icon>
143+
<mat-icon matIconPrefix *ngIf="showPrefix">calendar_today</mat-icon>
144+
<mat-icon matIconSuffix>mode_edit</mat-icon>
145145
</mat-form-field>
146146

147147
<h4>Icon buttons</h4>
148148
<mat-form-field [appearance]="prefixSuffixAppearance">
149149
<mat-label>Amount</mat-label>
150150
<input matInput>
151-
<button mat-icon-button matPrefix *ngIf="showPrefix"><mat-icon>calendar_today</mat-icon></button>
152-
<button mat-icon-button matSuffix><mat-icon>mode_edit</mat-icon></button>
151+
<button mat-icon-button matIconPrefix *ngIf="showPrefix">
152+
<mat-icon>calendar_today</mat-icon>
153+
</button>
154+
<button mat-icon-button matIconSuffix>
155+
<mat-icon>mode_edit</mat-icon>
156+
</button>
157+
</mat-form-field>
158+
159+
<h4>Text & Icons</h4>
160+
<mat-form-field [appearance]="prefixSuffixAppearance">
161+
<mat-label>Amount</mat-label>
162+
<input matInput>
163+
<span matTextPrefix>$</span>
164+
<span matTextSuffix>.00</span>
165+
<button mat-icon-button matIconPrefix *ngIf="showPrefix">
166+
<mat-icon>calendar_today</mat-icon>
167+
</button>
168+
<button mat-icon-button matIconSuffix>
169+
<mat-icon>mode_edit</mat-icon>
170+
</button>
153171
</mat-form-field>
154172

155173
<p>
@@ -371,20 +389,22 @@ <h4>Textarea</h4>
371389
<mat-form-field>
372390
<mat-label>Prefixed</mat-label>
373391
<input matInput value="example">
374-
<div matPrefix>Example:&nbsp;</div>
392+
<span matTextPrefix>Example:&nbsp;</span>
375393
</mat-form-field>
376394
<mat-form-field class="demo-text-align-end">
377395
<mat-label>Suffixed</mat-label>
378396
<input matInput value="123">
379-
<span matSuffix>.00 €</span>
397+
<span matTextSuffix>.00 €</span>
380398
</mat-form-field>
381399
<br/>
382400
Both:
383401
<mat-form-field class="demo-text-align-end">
384402
<mat-label>Email address</mat-label>
385403
<input matInput #email="matInput" value="angular-core">
386-
<span matPrefix><mat-icon [class.primary]="email.focused">email</mat-icon>&nbsp;</span>
387-
<span matSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
404+
<span matIconPrefix>
405+
<mat-icon [class.primary]="email.focused">email</mat-icon>&nbsp;
406+
</span>
407+
<span matTextSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
388408
</mat-form-field>
389409
</p>
390410

@@ -679,8 +699,8 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
679699
<mat-form-field appearance="outline" class="demo-text-align-end">
680700
<mat-label>Amount</mat-label>
681701
<input matInput>
682-
<span matPrefix>$&nbsp;</span>
683-
<span matSuffix>.00</span>
702+
<span matTextPrefix>$&nbsp;</span>
703+
<span matTextSuffix>.00</span>
684704
</mat-form-field>
685705
</mat-tab>
686706
<mat-tab label="Tab 2">
@@ -692,9 +712,9 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
692712
<mat-form-field appearance="outline" class="demo-text-align-end">
693713
<mat-label>Amount</mat-label>
694714
<input matInput>
695-
<span matPrefix>$&nbsp;</span>
696-
<span matPrefix *ngIf="showSecondPrefix">!&nbsp;</span>
697-
<span matSuffix>.00</span>
715+
<span matTextPrefix>$&nbsp;</span>
716+
<span matTextPrefix *ngIf="showSecondPrefix">!&nbsp;</span>
717+
<span matTextSuffix>.00</span>
698718
</mat-form-field>
699719
</mat-tab>
700720
</mat-tab-group>
@@ -724,7 +744,7 @@ <h4>Custom control</h4>
724744
<mat-form-field appearance="outline">
725745
<mat-label>Phone number</mat-label>
726746
<example-tel-input required></example-tel-input>
727-
<mat-icon matSuffix>phone</mat-icon>
747+
<mat-icon matIconSuffix>phone</mat-icon>
728748
<mat-hint>Include area code</mat-hint>
729749
</mat-form-field>
730750
</p>

‎src/material-experimental/mdc-form-field/_form-field-theme.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
// the correct level.
7373
.mat-mdc-input-element,
7474
.mat-mdc-form-field label,
75-
.mat-mdc-form-field-prefix,
76-
.mat-mdc-form-field-suffix {
75+
.mat-mdc-form-field-text-prefix,
76+
.mat-mdc-form-field-text-suffix {
7777
@include mdc-typography(body1, $query: $mat-typography-styles-query);
7878
}
7979
}

‎src/material-experimental/mdc-form-field/directives/prefix.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const MAT_PREFIX = new InjectionToken<MatPrefix>('MatPrefix');
1717

1818
/** Prefix to be placed in front of the form field. */
1919
@Directive({
20-
selector: '[matPrefix]',
20+
/** @breaking-change 13.0.0 remove [matPrefix] */
21+
selector: '[matPrefix], [matIconPrefix], [matTextPrefix]',
2122
providers: [{provide: MAT_PREFIX, useExisting: MatPrefix}],
2223
})
2324
export class MatPrefix {}

‎src/material-experimental/mdc-form-field/directives/suffix.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const MAT_SUFFIX = new InjectionToken<MatSuffix>('MatSuffix');
1717

1818
/** Suffix to be placed at the end of the form field. */
1919
@Directive({
20-
selector: '[matSuffix]',
20+
/** @breaking-change 13.0.0 remove [matSuffix] */
21+
selector: '[matSuffix], [matIconSuffix], [matTextSuffix]',
2122
providers: [{provide: MAT_SUFFIX, useExisting: MatSuffix}],
2223
})
2324
export class MatSuffix {}

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,11 @@
4444
</ng-template>
4545
</div>
4646

47-
<div class="mat-mdc-form-field-prefix" *ngIf="_prefixChildren.length" #prefixContainer>
48-
<ng-content select="[matPrefix]"></ng-content>
47+
<div class="mat-mdc-form-field-icon-prefix" *ngIf="_prefixChildren.length" #iconPrefixContainer>
48+
<ng-content select="[matPrefix], [matIconPrefix]"></ng-content>
49+
</div>
50+
<div class="mat-mdc-form-field-text-prefix" *ngIf="_prefixChildren.length" #textPrefixContainer>
51+
<ng-content select="[matTextPrefix]"></ng-content>
4952
</div>
5053

5154
<div class="mat-mdc-form-field-infix">
@@ -56,8 +59,11 @@
5659
<ng-content></ng-content>
5760
</div>
5861

59-
<div class="mat-mdc-form-field-suffix" *ngIf="_suffixChildren.length">
60-
<ng-content select="[matSuffix]"></ng-content>
62+
<div class="mat-mdc-form-field-text-suffix" *ngIf="_suffixChildren.length">
63+
<ng-content select="[matTextSuffix]"></ng-content>
64+
</div>
65+
<div class="mat-mdc-form-field-icon-suffix" *ngIf="_suffixChildren.length">
66+
<ng-content select="[matSuffix], [matIconSuffix]"></ng-content>
6167
</div>
6268
</div>
6369

‎src/material-experimental/mdc-form-field/form-field.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@
4848
width: 100%;
4949
}
5050

51+
.mat-mdc-form-field-icon-prefix,
52+
.mat-mdc-form-field-icon-suffix {
53+
align-self: center;
54+
}
55+
5156
// Infix that contains the projected content (usually an input or a textarea). We ensure
5257
// that the projected form-field control and content can stretch as needed, but we also
5358
// apply a default infix width to make the form-field's look natural.

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ const FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM = `translateY(-50%)`;
134134
export class MatFormField implements AfterViewInit, OnDestroy, AfterContentChecked,
135135
AfterContentInit {
136136
@ViewChild('textField') _textField: ElementRef<HTMLElement>;
137-
@ViewChild('prefixContainer') _prefixContainer: ElementRef<HTMLElement>;
137+
@ViewChild('iconPrefixContainer') _iconPrefixContainer: ElementRef<HTMLElement>;
138+
@ViewChild('textPrefixContainer') _textPrefixContainer: ElementRef<HTMLElement>;
138139
@ViewChild(MatFormFieldFloatingLabel) _floatingLabel: MatFormFieldFloatingLabel|undefined;
139140
@ViewChild(MatFormFieldNotchedOutline) _notchedOutline: MatFormFieldNotchedOutline|undefined;
140141
@ViewChild(MatFormFieldLineRipple) _lineRipple: MatFormFieldLineRipple|undefined;
@@ -654,7 +655,7 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
654655
const floatingLabel = this._floatingLabel.element;
655656
// If no prefix is displayed, reset the outline label offset from potential
656657
// previous label offset updates.
657-
if (!this._prefixContainer) {
658+
if (!(this._iconPrefixContainer || this._textPrefixContainer)) {
658659
floatingLabel.style.transform = '';
659660
return;
660661
}
@@ -664,11 +665,15 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
664665
this._needsOutlineLabelOffsetUpdateOnStable = true;
665666
return;
666667
}
667-
const prefixContainer = this._prefixContainer.nativeElement as HTMLElement;
668+
const iconPrefixContainer = this._iconPrefixContainer.nativeElement as HTMLElement;
669+
const textPrefixContainer = this._textPrefixContainer.nativeElement as HTMLElement;
668670
// If the directionality is RTL, the x-axis transform needs to be inverted. This
669671
// is because `transformX` does not change based on the page directionality.
670672
const labelHorizontalOffset =
671-
(this._dir.value === 'rtl' ? -1 : 1) * prefixContainer.getBoundingClientRect().width;
673+
(this._dir.value === 'rtl' ? -1 : 1) * (
674+
iconPrefixContainer.getBoundingClientRect().width +
675+
textPrefixContainer.getBoundingClientRect().width
676+
);
672677

673678
// Update the transform the floating label to account for the prefix container. Note
674679
// that we do not want to overwrite the default transform for docked floating labels.

‎src/material-experimental/mdc-form-field/testing/form-field-harness.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ export class MatFormFieldHarness extends _MatFormFieldHarnessBase<FormFieldContr
3737
async (harness, hasErrors) => await harness.hasErrors() === hasErrors);
3838
}
3939

40-
protected _prefixContainer = this.locatorForOptional('.mat-mdc-form-field-prefix');
41-
protected _suffixContainer = this.locatorForOptional('.mat-mdc-form-field-suffix');
40+
protected _prefixContainer = this.locatorForOptional('.mat-mdc-form-field-text-prefix');
41+
protected _suffixContainer = this.locatorForOptional('.mat-mdc-form-field-text-suffix');
4242
protected _label = this.locatorForOptional('.mdc-floating-label');
4343
protected _errors = this.locatorForAll('.mat-mdc-form-field-error');
4444
protected _hints = this.locatorForAll('.mat-mdc-form-field-hint');

0 commit comments

Comments
 (0)