Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit 288b2b9

Browse files
trimoxtrimox
authored
feat(select): Rename floatingLabel to floatLabel (#1590)
BREAKING CHANGE: Renamed the property `floatingLabel` to `floatLabel`. Please update your code to use `floatLabel`. Closes #1589
1 parent 479b608 commit 288b2b9

File tree

3 files changed

+91
-25
lines changed

3 files changed

+91
-25
lines changed

‎demos/src/app/components/select-demo/select-demo.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h2>Design & API Documentation</h2>
5656
<td>Set the underlying tab index of the select. (Default is 0)</td>
5757
</tr>
5858
<tr>
59-
<td>floatingLabel: boolean</td>
59+
<td>floatLabel: boolean</td>
6060
<td>Whether or not to show or hide a floating placeholder.</td>
6161
</tr>
6262
<tr>
@@ -129,7 +129,7 @@ <h3 class="demo-content__headline">Select</h3>
129129
<button mdc-button (click)="native1.outlined = !native1.outlined">Outlined: {{native1.outlined ? 'On' : 'Off'}}</button>
130130
<button mdc-button (click)="native1.required = !native1.required">Required: {{native1.required ? 'On' : 'Off'}}</button>
131131
<button mdc-button (click)="native1.disabled = !native1.disabled">Disabled: {{native1.disabled ? 'On' : 'Off'}}</button>
132-
<button mdc-button (click)="native1.floatingLabel = !native1.floatingLabel">Floating Label: {{native1.floatingLabel ? 'On' : 'Off'}}</button>
132+
<button mdc-button (click)="native1.floatLabel = !native1.floatLabel">Float Label: {{native1.floatLabel ? 'On' : 'Off'}}</button>
133133
<button mdc-button (click)="native1.setSelectedIndex(2)">Set Index (2)</button>
134134
</div>
135135
<mdc-form-field>
@@ -179,7 +179,7 @@ <h3 class="demo-content__headline">Select with ngModel</h3>
179179
<button mdc-button (click)="select.outlined = !select.outlined">Outlined: {{select.outlined ? 'On' : 'Off'}}</button>
180180
<button mdc-button (click)="select.required = !select.required">Required: {{select.required ? 'On' : 'Off'}}</button>
181181
<button mdc-button (click)="select.disabled = !select.disabled">Disabled: {{select.disabled ? 'On' : 'Off'}}</button>
182-
<button mdc-button (click)="select.floatingLabel = !select.floatingLabel">Floating Label: {{select.floatingLabel ? 'On' : 'Off'}}</button>
182+
<button mdc-button (click)="select.floatLabel = !select.floatLabel">Float Label: {{select.floatLabel ? 'On' : 'Off'}}</button>
183183
<button mdc-button (click)="demoSelectModel.reset()">Clear Selection</button>
184184
<button mdc-button (click)="select.setSelectionByValue('fruit-3')">Select Fruit</button>
185185
<button mdc-button (click)="select.setSelectedIndex(4)">Set Index (4)</button>
@@ -204,7 +204,7 @@ <h3 class="demo-content__headline">Select with FormControl</h3>
204204
<button mdc-button (click)="select2.outlined = !select2.outlined">Outlined: {{select2.outlined ? 'On' : 'Off'}}</button>
205205
<button mdc-button (click)="select2.required = !select2.required">Required: {{select2.required ? 'On' : 'Off'}}</button>
206206
<button mdc-button (click)="select2.disabled = !select2.disabled">Disabled: {{select2.disabled ? 'On' : 'Off'}}</button>
207-
<button mdc-button (click)="select2.floatingLabel = !select2.floatingLabel">Floating Label: {{select2.floatingLabel ? 'On' : 'Off'}}</button>
207+
<button mdc-button (click)="select2.floatLabel = !select2.floatLabel">Float Label: {{select2.floatLabel ? 'On' : 'Off'}}</button>
208208
<button mdc-button (click)="foodControl.reset()">Reset Selection</button>
209209
<button mdc-button (click)="select2.setSelectionByValue('pizza-1')">Select Pizza</button>
210210
<button mdc-button (click)="foodControl.setValue('pizza-1')">Set Form Value</button>

‎packages/select/select.ts

Lines changed: 80 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { MdcFloatingLabel } from '@angular-mdc/web/floating-label';
2626
import { MdcMenu } from '@angular-mdc/web/menu';
2727
import { MdcLineRipple } from '@angular-mdc/web/line-ripple';
2828
import { MdcFormField, MdcFormFieldControl } from '@angular-mdc/web/form-field';
29+
import { MdcList, MdcListItem } from '@angular-mdc/web/list';
2930

3031
import { MdcSelectIcon } from './select-icon';
3132
import { MdcSelectHelperText } from './helper-text';
@@ -58,6 +59,7 @@ let nextUniqueId = 0;
5859
'[class.mdc-select--disabled]': 'disabled',
5960
'[class.mdc-select--outlined]': 'outlined',
6061
'[class.mdc-select--required]': 'required',
62+
'[class.mdc-select--invalid]': 'valid',
6163
'[class.mdc-select--with-leading-icon]': 'leadingIcon',
6264
},
6365
template: `
@@ -78,9 +80,9 @@ let nextUniqueId = 0;
7880
(focus)="onFocus()">
7981
<ng-content></ng-content>
8082
</select>
81-
<label mdcFloatingLabel [for]="id">{{_floatingLabelValue()}}</label>
83+
<label mdcFloatingLabel *ngIf="!outlined" [for]="id">{{_floatingLabelValue()}}</label>
8284
<mdc-line-ripple *ngIf="!outlined"></mdc-line-ripple>
83-
<mdc-notched-outline *ngIf="outlined"></mdc-notched-outline>
85+
<mdc-notched-outline *ngIf="outlined" [label]="_floatingLabelValue()" [for]="id"></mdc-notched-outline>
8486
`,
8587
providers: [
8688
MdcRipple,
@@ -118,15 +120,15 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
118120
private _disabled: boolean = false;
119121

120122
@Input()
121-
get floatingLabel(): boolean { return this._floatingLabel; }
122-
set floatingLabel(value: boolean) {
123-
this._floatingLabel = toBoolean(value);
123+
get floatLabel(): boolean { return this._floatLabel; }
124+
set floatLabel(value: boolean) {
125+
this._floatLabel = toBoolean(value);
124126
if (this.outlined && this.getValue()) {
125-
this._foundation.notchOutline(this._floatingLabel);
127+
this._foundation.notchOutline(this._floatLabel);
126128
}
127129
this._changeDetectorRef.markForCheck();
128130
}
129-
private _floatingLabel: boolean = true;
131+
private _floatLabel: boolean = true;
130132

131133
@Input()
132134
get outlined(): boolean { return this._outlined; }
@@ -199,14 +201,16 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
199201
@Output() readonly valueChange:
200202
EventEmitter<{ index: number, value: any }> = new EventEmitter<any>();
201203

202-
@ViewChild(MdcFloatingLabel) _selectLabel!: MdcFloatingLabel;
204+
@ViewChild(MdcFloatingLabel) _floatingLabel!: MdcFloatingLabel;
203205
@ViewChild(MdcLineRipple) _lineRipple!: MdcLineRipple;
204206
@ViewChild(MdcNotchedOutline) _notchedOutline!: MdcNotchedOutline;
205207
@ViewChild('nativeInput') _nativeInput!: ElementRef<HTMLInputElement>;
206208
@ViewChild('nativeSelect') _nativeSelect!: ElementRef<HTMLSelectElement>;
207209
@ViewChild('selectedText') _selectedText!: ElementRef<HTMLElement>;
208210
@ContentChild(MdcMenu) _selectMenu!: MdcMenu;
209211
@ContentChild(MdcSelectIcon) leadingIcon!: MdcSelectIcon;
212+
@ContentChild(MdcList) _list!: MdcList;
213+
@ContentChildren(MdcListItem, { descendants: true }) _listItems!: QueryList<MdcListItem>;
210214

211215
/** View -> model callback called when value changes */
212216
_onChange: (value: any) => void = () => { };
@@ -216,7 +220,7 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
216220

217221
private _createAdapter() {
218222
return Object.assign(
219-
this._getNativeSelectAdapterMethods(),
223+
this._list ? this._getEnhancedSelectAdapterMethods() : this._getNativeSelectAdapterMethods(),
220224
this._getCommonAdapterMethods(),
221225
this._getOutlineAdapterMethods(),
222226
this._getLabelAdapterMethods()
@@ -259,6 +263,60 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
259263
};
260264
}
261265

266+
private _getEnhancedSelectAdapterMethods() {
267+
return {
268+
// getValue: () => {
269+
// const listItem = this.menuElement_.querySelector(strings.SELECTED_ITEM_SELECTOR);
270+
// if (listItem && listItem.hasAttribute(strings.ENHANCED_VALUE_ATTR)) {
271+
// return listItem.getAttribute(strings.ENHANCED_VALUE_ATTR);
272+
// }
273+
// return '';
274+
// },
275+
// setValue: (value: any) => {
276+
// const element =
277+
// /** @type {HTMLElement} */ (this.menuElement_.querySelector(`[${strings.ENHANCED_VALUE_ATTR}="${value}"]`));
278+
// this.setEnhancedSelectedIndex_(element ? this.menu_.items.indexOf(element) : -1);
279+
// },
280+
// openMenu: () => {
281+
// if (this.menu_ && !this.menu_.open) {
282+
// this.menu_.open = true;
283+
// this.menuOpened_ = true;
284+
// this.selectedText_.setAttribute('aria-expanded', 'true');
285+
// }
286+
// },
287+
// closeMenu: () => {
288+
// if (this.menu_ && this.menu_.open) {
289+
// this.menu_.open = false;
290+
// }
291+
// },
292+
// isMenuOpen: () => this.menu_ && this.menuOpened_,
293+
// setSelectedIndex: (index) => {
294+
// this.setEnhancedSelectedIndex_(index);
295+
// },
296+
// setDisabled: (isDisabled: boolean) => {
297+
// this.selectedText_.setAttribute('tabindex', isDisabled ? '-1' : '0');
298+
// this.selectedText_.setAttribute('aria-disabled', isDisabled.toString());
299+
// if (this.hiddenInput_) {
300+
// this.hiddenInput_.disabled = isDisabled;
301+
// }
302+
// },
303+
// checkValidity: () => {
304+
// const classList = this.root_.classList;
305+
// if (classList.contains(cssClasses.REQUIRED) && !classList.contains(cssClasses.DISABLED)) {
306+
// // See notes for required attribute under https://www.w3.org/TR/html52/sec-forms.html#the-select-element
307+
// // TL;DR: Invalid if no index is selected, or if the first index is selected and has an empty value.
308+
// return this.selectedIndex !== -1 && (this.selectedIndex !== 0 || this.value);
309+
// } else {
310+
// return true;
311+
// }
312+
// },
313+
// setValid: (isValid: boolean) => {
314+
// this._selectedText.nativeElement.setAttribute('aria-invalid', (!isValid).toString());
315+
// this._valid = isValid;
316+
// }
317+
};
318+
}
319+
262320
private _getOutlineAdapterMethods() {
263321
return {
264322
hasOutline: () => !!this._notchedOutline,
@@ -269,8 +327,8 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
269327

270328
private _getLabelAdapterMethods() {
271329
return {
272-
floatLabel: (shouldFloat: boolean) => this._selectLabel.float(shouldFloat),
273-
getLabelWidth: () => this._selectLabel ? this._selectLabel.getWidth() : 0
330+
floatLabel: (shouldFloat: boolean) => this._getFloatingLabel().float(shouldFloat),
331+
getLabelWidth: () => this._hasFloatingLabel() ? this._getFloatingLabel().getWidth() : 0
274332
};
275333
}
276334

@@ -416,7 +474,7 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
416474
}
417475

418476
_floatingLabelValue(): string {
419-
return !this._floatingLabel && this.getValue() ? '' : this.placeholder;
477+
return !this._hasFloatingLabel() && this.getValue() ? '' : this.placeholder;
420478
}
421479

422480
private _initializeSelection(): void {
@@ -458,6 +516,14 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
458516
}
459517
}
460518

519+
private _hasFloatingLabel(): boolean {
520+
return this.placeholder && (this._floatingLabel || this._notchedOutline) ? true : false;
521+
}
522+
523+
private _getFloatingLabel(): MdcFloatingLabel {
524+
return this._floatingLabel || this._notchedOutline.floatingLabel;
525+
}
526+
461527
/**
462528
* Calculates where the line ripple should start based on the x coordinate within the component.
463529
*/
@@ -473,8 +539,8 @@ export class MdcSelect implements OnInit, ControlValueAccessor, OnDestroy {
473539
private _setWidth(): void {
474540
if (!this.autosize) { return; }
475541

476-
if (this._selectLabel && this._selectLabel.elementRef.nativeElement.textContent) {
477-
const labelLength = this._selectLabel.elementRef.nativeElement.textContent.length;
542+
if (this._getFloatingLabel() && this._getFloatingLabel().elementRef.nativeElement.textContent) {
543+
const labelLength = this._getFloatingLabel().elementRef.nativeElement.textContent!.length;
478544
this._getHostElement().style.setProperty('width', `${labelLength}rem`);
479545
}
480546
}

‎test/select/select.test.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@ describe('MdcSelectModule', () => {
5656
expect(testInstance.disabled).toBe(true);
5757
});
5858

59-
it('#should set floatingLabel to false', () => {
60-
testComponent.floatingLabel = false;
59+
it('#should set floatLabel to false', () => {
60+
testComponent.floatLabel = false;
6161
fixture.detectChanges();
62-
expect(testInstance.floatingLabel).toBe(false);
62+
expect(testInstance.floatLabel).toBe(false);
6363
});
6464

6565
it('#should set required to true', () => {
@@ -85,10 +85,10 @@ describe('MdcSelectModule', () => {
8585
it('#should set outlined and floating label with value', () => {
8686
testInstance.setSelectionByValue('fruit-3');
8787
testInstance.outlined = true;
88-
testInstance.floatingLabel = true;
88+
testInstance.floatLabel = true;
8989
fixture.detectChanges();
9090

91-
expect(testInstance.floatingLabel).toBe(true);
91+
expect(testInstance.floatLabel).toBe(true);
9292
});
9393

9494
it('#should generate a unique id for the select if no id is set', () => {
@@ -178,7 +178,7 @@ describe('MdcSelectModule', () => {
178178
<form #demoSelectForm="ngForm" id="demoSelectForm">
179179
<mdc-form-field>
180180
<mdc-select #select placeholder="Favorite food" ngModel #demoSelectModel="ngModel" name="food"
181-
[disabled]="disabled" [floatingLabel]="floatingLabel" [required]="required" [valid]="valid"
181+
[disabled]="disabled" [floatLabel]="floatLabel" [required]="required" [valid]="valid"
182182
[helperText]="testHelper" [value]="testValue"
183183
(valueChange)="handleValueChange($event)" (selectionChange)="handleSelectedChange($event)">
184184
<option *ngFor="let food of foods" [value]="food.value" disabled="food.disabled">
@@ -197,7 +197,7 @@ describe('MdcSelectModule', () => {
197197
class SimpleTest {
198198
myPlaceholder: string = 'Favorite food';
199199
disabled: boolean = true;
200-
floatingLabel: boolean;
200+
floatLabel: boolean;
201201
multiple: boolean;
202202
required: boolean;
203203
valid: boolean;

0 commit comments

Comments
 (0)