Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(form-field): prefer use of outline/fill appearance on form-field component #14884

Closed
wants to merge 10 commits into from
Closed

docs(form-field): prefer use of outline/fill appearance on form-field component #14884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
20e2940
docs(autocomplete): prefer use of outline/fill appearance style
mainawycliffe Jan 19, 2019
b1ccec2
docs(datepicker): prefer use of outline/fill appearance style
mainawycliffe Jan 19, 2019
f93b852
docs(form-field): prefer use of outline/fill appearance style
mainawycliffe Jan 19, 2019
9192c63
docs(input): prefer use of outline/fill appearance style
mainawycliffe Jan 19, 2019
e28b014
docs(select): prefer use of outline/fill appearance style
mainawycliffe Jan 19, 2019
5064eb9
docs(slider): prefer use of outline/fill appearance style
mainawycliffe Jan 19, 2019
ada61ad
docs(slider): prefer use of outline/fill appearance style
mainawycliffe Jan 20, 2019
14f6aa4
Merge branch 'update-text-field-examples' of https://github.com/Maina…
mainawycliffe Jan 20, 2019
00ccba1
doc(form-field): prefer use of outline/fill appearance on form-field …
mainawycliffe Jan 23, 2019
46db693
docs(form-field): prefer use of outline/fill appearance style
mainawycliffe Jan 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions src/dev-app/autocomplete/autocomplete-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div>Reactive value: {{ stateCtrl.value | json }}</div>
<div>Reactive dirty: {{ stateCtrl.dirty }}</div>

<mat-form-field floatLabel="never">
<mat-form-field appearance="outline" floatLabel="never">
<mat-label>State</mat-label>
<input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
<mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
Expand All @@ -33,10 +33,10 @@
<div>Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}</div>

<!-- Added an ngIf below to test that autocomplete works with ngIf -->
<mat-form-field *ngIf="true">
<mat-form-field appearance="outline" *ngIf="true">
<mat-label>State</mat-label>
<input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
(ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
<input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState" (ngModelChange)="tdStates = filterStates(currentState)"
[disabled]="tdDisabled">
<mat-autocomplete #tdAuto="matAutocomplete">
<mat-option *ngFor="let state of tdStates" [value]="state.name">
<span>{{ state.name }}</span>
Expand All @@ -57,20 +57,15 @@
<mat-card>
<div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>

<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>State</mat-label>
<input
matInput
[matAutocomplete]="groupedAuto"
[(ngModel)]="currentGroupedState"
(ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
<input matInput [matAutocomplete]="groupedAuto" [(ngModel)]="currentGroupedState" (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
</mat-form-field>
</mat-card>
</div>

<mat-autocomplete #groupedAuto="matAutocomplete">
<mat-optgroup *ngFor="let group of filteredGroupedStates"
[label]="'States starting with ' + group.letter">
<mat-optgroup *ngFor="let group of filteredGroupedStates" [label]="'States starting with ' + group.letter">
<mat-option *ngFor="let state of group.states" [value]="state.name">{{ state.name }}</mat-option>
</mat-optgroup>
</mat-autocomplete>
12 changes: 6 additions & 6 deletions src/dev-app/baseline/baseline-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@
| Text 3 |
<mat-radio-button value="option_3">Radio 3</mat-radio-button>
| Text 4 |
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Input</mat-label>
<input matInput value="Text Input">
</mat-form-field>
| Text 5 |
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>This label is really really really long</mat-label>
<mat-select>
<mat-option value="option">Option</mat-option>
<mat-option value="long">This option is really really really long</mat-option>
</mat-select>
</mat-form-field>
| Text 6 |
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Input</mat-label>
<textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
</mat-form-field>
Expand All @@ -44,20 +44,20 @@ <h1>
| Text 3 |
<mat-radio-button value="option_3">Radio 3</mat-radio-button>
| Text 4 |
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Input</mat-label>
<input matInput value="Text Input">
</mat-form-field>
| Text 5 |
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>This label is really really really long</mat-label>
<mat-select>
<mat-option value="option">Option</mat-option>
<mat-option value="long">This option is really really really long</mat-option>
</mat-select>
</mat-form-field>
| Text 6 |
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Input</mat-label>
<textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
</mat-form-field>
Expand Down
115 changes: 44 additions & 71 deletions src/dev-app/datepicker/datepicker-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ <h2>Options</h2>
<mat-checkbox [(ngModel)]="yearView">Start in year view</mat-checkbox>
<mat-checkbox [(ngModel)]="datepickerDisabled">Disable datepicker</mat-checkbox>
<mat-checkbox [(ngModel)]="inputDisabled">Disable input</mat-checkbox>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-select [(ngModel)]="color" placeholder="Color">
<mat-option value="primary">Primary</mat-option>
<mat-option value="accent">Accent</mat-option>
Expand All @@ -14,26 +14,23 @@ <h2>Options</h2>
</mat-form-field>
</p>
<p>
<mat-form-field color="accent">
<mat-form-field class="example-space-between" appearance="outline" color="accent">
<mat-label>Min date</mat-label>
<input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate"
[disabled]="inputDisabled" [max]="maxDate">
<input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate" [disabled]="inputDisabled" [max]="maxDate" />
<mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
<mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field color="accent">
<mat-form-field class="example-space-between" appearance="outline" color="accent">
<mat-label>Max date</mat-label>
<input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate"
[disabled]="inputDisabled" [min]="minDate">
<input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate" [disabled]="inputDisabled" [min]="minDate" />
<mat-datepicker-toggle matSuffix [for]="maxDatePicker"></mat-datepicker-toggle>
<mat-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
</p>
<p>
<mat-form-field color="accent">
<mat-form-field appearance="outline" color="accent">
<mat-label>Start at date</mat-label>
<input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt"
[disabled]="inputDisabled">
<input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt" [disabled]="inputDisabled" />
<mat-datepicker-toggle matSuffix [for]="startAtPicker"></mat-datepicker-toggle>
<mat-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
Expand All @@ -43,123 +40,99 @@ <h2>Result</h2>

<p>
<mat-datepicker-toggle [for]="resultPicker"></mat-datepicker-toggle>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Pick a date</mat-label>
<input matInput
#resultPickerModel="ngModel"
[matDatepicker]="resultPicker"
[(ngModel)]="date"
[min]="minDate"
[max]="maxDate"
[matDatepickerFilter]="filterOdd ? dateFilter : null"
[disabled]="inputDisabled"
(dateInput)="onDateInput($event)"
(dateChange)="onDateChange($event)">
<mat-datepicker
#resultPicker
[touchUi]="touch"
[disabled]="datepickerDisabled"
[startAt]="startAt"
[startView]="yearView ? 'year' : 'month'"
[color]="color">
<input matInput #resultPickerModel="ngModel" [matDatepicker]="resultPicker" [(ngModel)]="date" [min]="minDate"
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null" [disabled]="inputDisabled" (dateInput)="onDateInput($event)"
(dateChange)="onDateChange($event)" />
<mat-datepicker #resultPicker [touchUi]="touch" [disabled]="datepickerDisabled" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"
[color]="color">
</mat-datepicker>
<mat-error *ngIf="resultPickerModel.hasError('matDatepickerParse')">
"{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date!
"{{ resultPickerModel.getError('matDatepickerParse').text }}" is not a
valid date!
</mat-error>
<mat-error *ngIf="resultPickerModel.hasError('matDatepickerMin')">Too early!</mat-error>
<mat-error *ngIf="resultPickerModel.hasError('matDatepickerMax')">Too late!</mat-error>
<mat-error *ngIf="resultPickerModel.hasError('matDatepickerFilter')">Date unavailable!</mat-error>
</mat-form-field>
</p>
<p>Last input: {{lastDateInput}}</p>
<p>Last change: {{lastDateChange}}</p>
<br>
<p>Last input: {{ lastDateInput }}</p>
<p>Last change: {{ lastDateChange }}</p>
<br />
<p>
<input #resultPickerModel2
[matDatepicker]="resultPicker2"
[(ngModel)]="date"
[min]="minDate"
[max]="maxDate"
[disabled]="inputDisabled"
[matDatepickerFilter]="filterOdd ? dateFilter : null"
placeholder="Pick a date">
<mat-form-field appearance="outline">
<mat-label>Pick a date</mat-label>
<input matInput #resultPickerModel2 [matDatepicker]="resultPicker2" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
[disabled]="inputDisabled" [matDatepickerFilter]="filterOdd ? dateFilter : null" placeholder="Pick a date" />
<mat-datepicker #resultPicker2 [touchUi]="touch" [disabled]="datepickerDisabled" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'">
</mat-datepicker>
</mat-form-field>
<mat-datepicker-toggle [for]="resultPicker2"></mat-datepicker-toggle>
<mat-datepicker
#resultPicker2
[touchUi]="touch"
[disabled]="datepickerDisabled"
[startAt]="startAt"
[startView]="yearView ? 'year' : 'month'">
</mat-datepicker>
</p>

<h2>Input disabled datepicker</h2>
<p>
<mat-datepicker-toggle [for]="datePicker1"></mat-datepicker-toggle>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Input disabled</mat-label>
<input matInput [matDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
[matDatepickerFilter]="filterOdd ? dateFilter : null" disabled>
<mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
[matDatepickerFilter]="filterOdd ? dateFilter : null" disabled />
<mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
</mat-form-field>
</p>

<h2>Input disabled via FormControl</h2>
<p>
<mat-datepicker-toggle [for]="datePicker2"></mat-datepicker-toggle>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>FormControl disabled</mat-label>
<input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
<mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
<input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate" [max]="maxDate"
[matDatepickerFilter]="filterOdd ? dateFilter : null" />
<mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
</mat-form-field>

<button mat-button (click)="dateCtrl.disabled ? dateCtrl.enable() : dateCtrl.disable()">
{{dateCtrl.disabled ? 'Enable' : 'Disable'}} FormControl
{{ dateCtrl.disabled ? 'Enable' : 'Disable' }} FormControl
</button>
</p>

<h2>Input disabled, datepicker popup enabled</h2>
<p>
<mat-datepicker-toggle [for]="datePicker3"></mat-datepicker-toggle>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Input disabled, datepicker enabled</mat-label>
<input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
<mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
<input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
[matDatepickerFilter]="filterOdd ? dateFilter : null" />
<mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
</mat-form-field>
</p>

<h2>Datepicker with value property binding</h2>
<p>
<mat-datepicker-toggle [for]="datePicker4"></mat-datepicker-toggle>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Value binding</mat-label>
<input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
[max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
<mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt"
[startView]="yearView ? 'year' : 'month'"></mat-datepicker>
<input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate" [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null" />
<mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
</mat-form-field>
</p>

<h2>Datepicker with custom header</h2>
<p>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Custom calendar header</mat-label>
<input matInput [matDatepicker]="customHeaderPicker">
<input matInput [matDatepicker]="customHeaderPicker" />
<mat-datepicker-toggle matSuffix [for]="customHeaderPicker"></mat-datepicker-toggle>
<mat-datepicker #customHeaderPicker [calendarHeaderComponent]="customHeader"></mat-datepicker>
</mat-form-field>
</p>

<h2>Datepicker with custom header extending the default header</h2>
<p>
<mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Custom calendar header extending default</mat-label>
<input matInput [matDatepicker]="customHeaderNgContentPicker">
<input matInput [matDatepicker]="customHeaderNgContentPicker" />
<mat-datepicker-toggle matSuffix [for]="customHeaderNgContentPicker"></mat-datepicker-toggle>
<mat-datepicker #customHeaderNgContentPicker [calendarHeaderComponent]="customHeaderNgContent"></mat-datepicker>
</mat-form-field>
Expand Down
3 changes: 3 additions & 0 deletions src/dev-app/datepicker/datepicker-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@ mat-calendar {
width: 300px;
}

.example-space-between {
margin: 5px;
}
Loading