Skip to content

Commit

Permalink
feat(select): make select work inside form-field (#6488)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmalerba @jelbourn
mmalerba authored and jelbourn committed Sep 21, 2017
1 parent f9b5ccd commit d914cc4
Show file tree
Hide file tree
Showing 29 changed files with 1,038 additions and 954 deletions.
100 changes: 59 additions & 41 deletions src/demo-app/a11y/select/select-a11y.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,89 @@
<h2>Single selection</h2>
<p>Select your favorite color</p>

<md-select placeholder="Colors" [(ngModel)]="selectedColor">
<md-option *ngFor="let color of colors" [value]="color.value">
{{ color.label }}
</md-option>
</md-select>
<md-form-field>
<md-select placeholder="Colors" [(ngModel)]="selectedColor">
<md-option *ngFor="let color of colors" [value]="color.value">
{{ color.label }}
</md-option>
</md-select>
</md-form-field>
</section>

<section>
<h2>Multiple selection</h2>
<p>Pick toppings for your pizza</p>

<md-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
<md-option *ngFor="let topping of toppings" [value]="topping.value">
{{ topping.label }}
</md-option>
</md-select>
<md-form-field>
<md-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
<md-option *ngFor="let topping of toppings" [value]="topping.value">
{{ topping.label }}
</md-option>
</md-select>
</md-form-field>
</section>

<section>
<h2>Grouped options</h2>
<p>Pick your Pokemon</p>

<md-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
<md-optgroup *ngFor="let group of pokemon" [label]="group.label">
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
{{ creature.label }}
</md-option>
</md-optgroup>
</md-select>
<md-form-field>
<md-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
<md-optgroup *ngFor="let group of pokemon" [label]="group.label">
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
{{ creature.label }}
</md-option>
</md-optgroup>
</md-select>
</md-form-field>
</section>

<section>
<h2>Colors</h2>

<div class="select-a11y-spacer">
<md-select placeholder="ZIP code" color="primary">
<md-option value="2000">2000</md-option>
<md-option value="2100">2100</md-option>
</md-select>
<md-form-field color="primary">
<md-select placeholder="ZIP code">
<md-option value="2000">2000</md-option>
<md-option value="2100">2100</md-option>
</md-select>
</md-form-field>

<md-select placeholder="State" color="accent">
<md-option value="alaska">Alaska</md-option>
<md-option value="alabama">Alabama</md-option>
</md-select>
<md-form-field color="accent">
<md-select placeholder="State">
<md-option value="alaska">Alaska</md-option>
<md-option value="alabama">Alabama</md-option>
</md-select>
</md-form-field>

<md-select placeholder="Language" color="warn">
<md-option value="english">English</md-option>
<md-option value="spanish">Spanish</md-option>
</md-select>
<md-form-field color="warn">
<md-select placeholder="Language">
<md-option value="english">English</md-option>
<md-option value="spanish">Spanish</md-option>
</md-select>
</md-form-field>
</div>

<div class="select-a11y-spacer">
<md-select placeholder="Digimon" color="primary" multiple>
<md-option value="mihiramon">Mihiramon</md-option>
<md-option value="sandiramon">Sandiramon</md-option>
</md-select>
<md-form-field color="primary">
<md-select placeholder="Digimon" multiple>
<md-option value="mihiramon">Mihiramon</md-option>
<md-option value="sandiramon">Sandiramon</md-option>
</md-select>
</md-form-field>

<md-select placeholder="Drink" color="accent" multiple>
<md-option value="water">Water</md-option>
<md-option value="coke">Coke</md-option>
</md-select>
<md-form-field color="accent">
<md-select placeholder="Drink" multiple>
<md-option value="water">Water</md-option>
<md-option value="coke">Coke</md-option>
</md-select>
</md-form-field>

<md-select placeholder="Theme" color="warn" multiple>
<md-option value="light">Light</md-option>
<md-option value="dark">Dark</md-option>
</md-select>
<md-form-field color="warn">
<md-select placeholder="Theme" multiple>
<md-option value="light">Light</md-option>
<md-option value="dark">Dark</md-option>
</md-select>
</md-form-field>
</div>
</section>
18 changes: 12 additions & 6 deletions src/demo-app/baseline/baseline-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,12 @@
<input mdInput placeholder="Input" value="Text Input">
</md-form-field>
| Text 5 |
<md-select placeholder="Select">
<md-option value="option">Option</md-option>
</md-select>
<md-form-field>
<md-select placeholder="This placeholder is really really really long">
<md-option value="option">Option</md-option>
<md-option value="long">This option is really really really long</md-option>
</md-select>
</md-form-field>
| Text 6 |
<md-form-field>
<textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
Expand All @@ -42,9 +45,12 @@ <h1>
<input mdInput placeholder="Input" value="Text Input">
</md-form-field>
| Text 5 |
<md-select placeholder="Select">
<md-option value="option">Option</md-option>
</md-select>
<md-form-field>
<md-select placeholder="This placeholder is really really really long">
<md-option value="option">Option</md-option>
<md-option value="long">This option is really really really long</md-option>
</md-select>
</md-form-field>
| Text 6 |
<md-form-field>
<textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
Expand Down
12 changes: 7 additions & 5 deletions src/demo-app/dialog/dialog-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,13 @@ <h2>Dialog backdrop</h2>
<h2>Other options</h2>

<p>
<md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
<md-option>Start</md-option>
<md-option value="end">End</md-option>
<md-option value="center">Center</md-option>
</md-select>
<md-form-field>
<md-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
<md-option>Start</md-option>
<md-option value="end">End</md-option>
<md-option value="center">Center</md-option>
</md-select>
</md-form-field>
</p>

<p>
Expand Down
105 changes: 62 additions & 43 deletions src/demo-app/select/select-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,18 @@
<md-card>
<md-card-subtitle>ngModel</md-card-subtitle>

<md-select placeholder="Drink" [color]="drinksTheme" [(ngModel)]="currentDrink" [required]="drinksRequired"
[disabled]="drinksDisabled" [floatPlaceholder]="floatPlaceholder" #drinkControl="ngModel">
<md-option>None</md-option>
<md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
{{ drink.viewValue }}
</md-option>
</md-select>
<md-form-field [floatPlaceholder]="floatPlaceholder" [color]="drinksTheme">
<md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="drinksRequired"
[disabled]="drinksDisabled" #drinkControl="ngModel">
<md-option>None</md-option>
<md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
{{ drink.viewValue }}
</md-option>
</md-select>
<md-icon mdPrefix class="demo-drink-icon">local_drink</md-icon>
<md-hint>Pick a drink!</md-hint>
<md-error>You must make a selection</md-error>
</md-form-field>
<p> Value: {{ currentDrink }} </p>
<p> Touched: {{ drinkControl.touched }} </p>
<p> Dirty: {{ drinkControl.dirty }} </p>
Expand All @@ -28,7 +33,9 @@
<p>
<label for="drinks-theme">Theme:</label>
<select [(ngModel)]="drinksTheme" id="drinks-theme">
<option *ngFor="let theme of availableThemes" [value]="theme.value">{{ theme.name }}</option>
<option *ngFor="let theme of availableThemes" [value]="theme.value">
{{theme.name}}
</option>
</select>
</p>

Expand All @@ -42,12 +49,14 @@
<md-card-subtitle>Multiple selection</md-card-subtitle>

<md-card-content>
<md-select multiple [color]="pokemonTheme" placeholder="Pokemon" [(ngModel)]="currentPokemon"
[required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
<md-option *ngFor="let creature of pokemon" [value]="creature.value">
{{ creature.viewValue }}
</md-option>
</md-select>
<md-form-field [color]="pokemonTheme">
<md-select multiple placeholder="Pokemon" [(ngModel)]="currentPokemon"
[required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
<md-option *ngFor="let creature of pokemon" [value]="creature.value">
{{ creature.viewValue }}
</md-option>
</md-select>
</md-form-field>
<p> Value: {{ currentPokemon }} </p>
<p> Touched: {{ pokemonControl.touched }} </p>
<p> Dirty: {{ pokemonControl.dirty }} </p>
Expand All @@ -68,12 +77,14 @@
<md-card>
<md-card-subtitle>Without Angular forms</md-card-subtitle>

<md-select placeholder="Digimon" [(value)]="currentDigimon">
<md-option>None</md-option>
<md-option *ngFor="let creature of digimon" [value]="creature.value">
{{ creature.viewValue }}
</md-option>
</md-select>
<md-form-field>
<md-select placeholder="Digimon" [(value)]="currentDigimon">
<md-option>None</md-option>
<md-option *ngFor="let creature of digimon" [value]="creature.value">
{{ creature.viewValue }}
</md-option>
</md-select>
</md-form-field>

<p>Value: {{ currentDigimon }}</p>

Expand All @@ -85,30 +96,34 @@
<md-card-subtitle>Option groups</md-card-subtitle>

<md-card-content>
<md-select placeholder="Pokemon" [(ngModel)]="currentPokemonFromGroup">
<md-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
{{ creature.viewValue }}
</md-option>
</md-optgroup>
</md-select>
<md-form-field>
<md-select placeholder="Pokemon" [(ngModel)]="currentPokemonFromGroup">
<md-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
<md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
{{ creature.viewValue }}
</md-option>
</md-optgroup>
</md-select>
</md-form-field>
</md-card-content>
</md-card>


<md-card>
<md-card-subtitle>compareWith</md-card-subtitle>
<md-card-content>
<md-select placeholder="Drink" [color]="drinksTheme"
[(ngModel)]="currentDrinkObject"
[required]="drinkObjectRequired"
[compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
#drinkObjectControl="ngModel">
<md-option *ngFor="let drink of drinks" [value]="drink" [disabled]="drink.disabled">
{{ drink.viewValue }}
</md-option>
</md-select>
<md-form-field [color]="drinksTheme">
<md-select placeholder="Drink"
[(ngModel)]="currentDrinkObject"
[required]="drinkObjectRequired"
[compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
#drinkObjectControl="ngModel">
<md-option *ngFor="let drink of drinks" [value]="drink" [disabled]="drink.disabled">
{{ drink.viewValue }}
</md-option>
</md-select>
</md-form-field>
<p> Value: {{ currentDrinkObject | json }} </p>
<p> Touched: {{ drinkObjectControl.touched }} </p>
<p> Dirty: {{ drinkObjectControl.dirty }} </p>
Expand All @@ -130,9 +145,11 @@
<md-card-subtitle>formControl</md-card-subtitle>

<md-card-content>
<md-select placeholder="Food i would like to eat" [formControl]="foodControl">
<md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</md-option>
</md-select>
<md-form-field>
<md-select placeholder="Food i would like to eat" [formControl]="foodControl">
<md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</md-option>
</md-select>
</md-form-field>
<p> Value: {{ foodControl.value }} </p>
<p> Touched: {{ foodControl.touched }} </p>
<p> Dirty: {{ foodControl.dirty }} </p>
Expand All @@ -149,9 +166,11 @@
<md-card-subtitle>Change event</md-card-subtitle>

<md-card-content>
<md-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
<md-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</md-option>
</md-select>
<md-form-field>
<md-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
<md-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</md-option>
</md-select>
</md-form-field>

<p> Change event value: {{ latestChangeEvent?.value }} </p>
</md-card-content>
Expand Down
4 changes: 4 additions & 0 deletions src/demo-app/select/select-demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,8 @@
margin: 24px;
}

.demo-drink-icon {
vertical-align: bottom;
padding-right: 0.25em;
}
}
26 changes: 15 additions & 11 deletions src/demo-app/snack-bar/snack-bar-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,21 @@ <h1>SnackBar demo</h1>
</div>
<div>
<div>Position in page: </div>
<md-select [(ngModel)]="horizontalPosition">
<md-option value="start">Start</md-option>
<md-option value="end">End</md-option>
<md-option value="left">Left</md-option>
<md-option value="right">Right</md-option>
<md-option value="center">Center</md-option>
</md-select>
<md-select [(ngModel)]="verticalPosition">
<md-option value="top">Top</md-option>
<md-option value="bottom">Bottom</md-option>
</md-select>
<md-form-field>
<md-select [(ngModel)]="horizontalPosition">
<md-option value="start">Start</md-option>
<md-option value="end">End</md-option>
<md-option value="left">Left</md-option>
<md-option value="right">Right</md-option>
<md-option value="center">Center</md-option>
</md-select>
</md-form-field>
<md-form-field>
<md-select [(ngModel)]="verticalPosition">
<md-option value="top">Top</md-option>
<md-option value="bottom">Bottom</md-option>
</md-select>
</md-form-field>
</div>
<div>
<md-checkbox [(ngModel)]="action">
Expand Down
Loading

0 comments on commit d914cc4

Please sign in to comment.