Skip to content

Commit 7f08922

Browse files
authored
feat(material-experimental/mdc-select): implement MDC-based mat-select (#20502)
Implements `mat-select` on top of MDC Web's styles. The new select is functionally identical to the current one since both are implemented on top of the same base class, but they have the following differences: * The logic that tries to position the selected option on top of the trigger has been removed from the MDC version. Now we only position the panel above or below, depending on the available space. * Since we don't have to deal with the panel positioning logic anymore, we can now allow the text of `mat-option` to wrap to multiple lines inside the MDC version. * The animations of the MDC version are simplified to mimic the ones from `mat-menu`, because the previous animations where tightly coupled to the old overlay positioning logic. Aside from the new select, this PR includes the following fixes: * The `MatOptionSelectionChange.source` is now typed to the generic `_MatOptionBase` rather than the non-MDC implementation. This was an oversight when the base class was first implemented. * Uses `min-height` instead of `height` for the MDC `mat-option` in order to handle multi-line text better. * Adds the `mat-form-field-hide-placeholder`, `mat-form-field-appearance-outline` and `mat-form-field-appearance-fill` classes which were missing from the MDC form field. They're necessary so that the select can be styled to look correctly across all supported use cases. * The dev app for the select has been reorganized to emphasize `mat-select`, instead of `mat-form-field` with a native `select`. I've also cleaned up the styles so everything aligns better and nicer to look at.
1 parent 70ead0c commit 7f08922

36 files changed

+6542
-498
lines changed

.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@
186186
/src/dev-app/mdc-progress-bar/** @crisbeto
187187
/src/dev-app/mdc-progress-spinner/** @annieyw @mmalerba
188188
/src/dev-app/mdc-radio/** @mmalerba
189+
/src/dev-app/mdc-select/** @crisbeto
189190
/src/dev-app/mdc-snack-bar/** @andrewseguin
190191
/src/dev-app/mdc-sidenav/** @crisbeto
191192
/src/dev-app/mdc-snack-bar/** @andrewseguin

src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ ng_module(
5959
"//src/dev-app/mdc-progress-bar",
6060
"//src/dev-app/mdc-progress-spinner",
6161
"//src/dev-app/mdc-radio",
62+
"//src/dev-app/mdc-select",
6263
"//src/dev-app/mdc-sidenav",
6364
"//src/dev-app/mdc-slide-toggle",
6465
"//src/dev-app/mdc-slider",

src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export class DevAppLayout {
9494
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
9595
{name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
9696
{name: 'MDC Tabs', route: '/mdc-tabs'},
97+
{name: 'MDC Select', route: '/mdc-select'},
9798
{name: 'MDC Sidenav', route: '/mdc-sidenav'},
9899
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
99100
{name: 'MDC Slider', route: '/mdc-slider'},

src/dev-app/dev-app/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export const DEV_APP_ROUTES: Routes = [
9595
'mdc-progress-spinner/mdc-progress-spinner-demo-module#MdcProgressSpinnerDemoModule'
9696
},
9797
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
98+
{path: 'mdc-select', loadChildren: 'mdc-select/mdc-select-demo-module#MdcSelectDemoModule'},
9899
{path: 'mdc-sidenav', loadChildren: 'mdc-sidenav/mdc-sidenav-demo-module#MdcSidenavDemoModule'},
99100
{
100101
path: 'mdc-snack-bar',

src/dev-app/mdc-select/BUILD.bazel

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
2+
load("//tools:defaults.bzl", "ng_module")
3+
4+
package(default_visibility = ["//visibility:public"])
5+
6+
ng_module(
7+
name = "mdc-select",
8+
srcs = glob(["**/*.ts"]),
9+
assets = [
10+
"mdc-select-demo.html",
11+
":mdc_select_demo_scss",
12+
],
13+
deps = [
14+
"//src/material-experimental/mdc-button",
15+
"//src/material-experimental/mdc-card",
16+
"//src/material-experimental/mdc-form-field",
17+
"//src/material-experimental/mdc-input",
18+
"//src/material-experimental/mdc-select",
19+
"//src/material/icon",
20+
"@npm//@angular/forms",
21+
"@npm//@angular/router",
22+
],
23+
)
24+
25+
sass_binary(
26+
name = "mdc_select_demo_scss",
27+
src = "mdc-select-demo.scss",
28+
)
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
11+
import {MatSelectModule} from '@angular/material-experimental/mdc-select';
12+
import {RouterModule} from '@angular/router';
13+
import {CommonModule} from '@angular/common';
14+
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
15+
import {MatCardModule} from '@angular/material-experimental/mdc-card';
16+
import {MatIconModule} from '@angular/material/icon';
17+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
18+
import {MatInputModule} from '@angular/material-experimental/mdc-input';
19+
import {MdcSelectDemo} from './mdc-select-demo';
20+
21+
@NgModule({
22+
imports: [
23+
CommonModule,
24+
FormsModule,
25+
MatButtonModule,
26+
MatCardModule,
27+
MatFormFieldModule,
28+
MatIconModule,
29+
MatInputModule,
30+
MatSelectModule,
31+
ReactiveFormsModule,
32+
RouterModule.forChild([{path: '', component: MdcSelectDemo}]),
33+
],
34+
declarations: [MdcSelectDemo],
35+
})
36+
export class MdcSelectDemoModule {
37+
}

0 commit comments

Comments
 (0)