From 7fc22fda223d20af6aee8ce8cfea8f3ceda3cb60 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 4 Sep 2018 22:12:57 +0200 Subject: [PATCH] feat(select): align panel appearance and animation with 2018 material design spec Aligns the `mat-select` animation, elevation and border radius with the most-recent Material Design spec. This is the first step towards aligning the component. The next step is to reduce the font size and add some padding to the select panel. The font size and padding changes weren't done in this PR, because they require changes to the positioning logic and reworking the positioning tests. --- src/demo-app/select/select-demo.scss | 4 ++++ src/lib/select/_select-theme.scss | 6 ++---- src/lib/select/select-animations.ts | 16 +++++----------- src/lib/select/select.html | 9 +-------- src/lib/select/select.scss | 3 ++- src/lib/select/select.spec.ts | 16 ---------------- src/lib/select/select.ts | 16 +--------------- .../select-panel-class-example.css | 6 +++--- 8 files changed, 18 insertions(+), 58 deletions(-) diff --git a/src/demo-app/select/select-demo.scss b/src/demo-app/select/select-demo.scss index f87b50cbe96b..996f1e1411ff 100644 --- a/src/demo-app/select/select-demo.scss +++ b/src/demo-app/select/select-demo.scss @@ -12,3 +12,7 @@ padding-right: 0.25em; } } + +.demo-card { + margin-bottom: 30px; +} diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss index 716e911ead33..d0094a2e2e71 100644 --- a/src/lib/select/_select-theme.scss +++ b/src/lib/select/_select-theme.scss @@ -11,10 +11,6 @@ $accent: map-get($theme, accent); $warn: map-get($theme, warn); - .mat-select-content, .mat-select-panel-done-animating { - background: mat-color($background, card); - } - .mat-select-value { color: mat-color($foreground, text); } @@ -32,6 +28,8 @@ } .mat-select-panel { + background: mat-color($background, card); + .mat-option.mat-selected:not(.mat-option-multiple) { background: mat-color($background, hover, 0.12); } diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts index 8cd8376a9755..46f2ea8b4ed5 100644 --- a/src/lib/select/select-animations.ts +++ b/src/lib/select/select-animations.ts @@ -13,9 +13,6 @@ import { style, transition, trigger, - query, - animateChild, - group, } from '@angular/animations'; /** @@ -39,7 +36,7 @@ export const matSelectAnimations: { */ transformPanel: trigger('transformPanel', [ state('void', style({ - transform: 'scaleY(0)', + transform: 'scaleY(0.8)', minWidth: '100%', opacity: 0 })), @@ -53,19 +50,16 @@ export const matSelectAnimations: { minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right transform: 'scaleY(1)' })), - transition('void => *', group([ - query('@fadeInContent', animateChild()), - animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)') - ])), - transition('* => void', [ - animate('250ms 100ms linear', style({opacity: 0})) - ]) + transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')), + transition('* => void', animate('100ms 25ms linear', style({opacity: 0}))) ]), /** * This animation fades in the background color and text content of the * select's options. It is time delayed to occur 100ms after the overlay * panel has transformed in. + * @deprecated Not used anymore. To be removed. + * @breaking-change 8.0.0 */ fadeInContent: trigger('fadeInContent', [ state('showing', style({opacity: 1})), diff --git a/src/lib/select/select.html b/src/lib/select/select.html index 4e9f6cf841a8..b0d9f65e3613 100644 --- a/src/lib/select/select.html +++ b/src/lib/select/select.html @@ -37,15 +37,8 @@ [@transformPanel]="multiple ? 'showing-multiple' : 'showing'" (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)" [style.transformOrigin]="_transformOrigin" - [class.mat-select-panel-done-animating]="_panelDoneAnimating" [style.font-size.px]="_triggerFontSize" (keydown)="_handleKeydown($event)"> - -
- -
+ diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 5f1898207938..64ba2d772222 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -83,11 +83,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a } .mat-select-panel { - @include mat-menu-base(8); + @include mat-menu-base(4); padding-top: 0; padding-bottom: 0; max-height: $mat-select-panel-max-height; min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11 + border-radius: 4px; @include cdk-high-contrast { outline: solid 1px; diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 2f8a152aa0b2..a9d573ad77ac 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1672,14 +1672,11 @@ describe('MatSelect', () => { describe('animations', () => { let fixture: ComponentFixture; - let trigger: HTMLElement; let formField: HTMLElement; beforeEach(fakeAsync(() => { fixture = TestBed.createComponent(BasicSelect); fixture.detectChanges(); - - trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement; formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; })); @@ -1702,19 +1699,6 @@ describe('MatSelect', () => { 'Expected placeholder to animate back down to normal position.'); })); - it('should add a class to the panel when the menu is done animating', fakeAsync(() => { - trigger.click(); - fixture.detectChanges(); - - const panel = overlayContainerElement.querySelector('.mat-select-panel')!; - - expect(panel.classList).not.toContain('mat-select-panel-done-animating'); - - flush(); - fixture.detectChanges(); - - expect(panel.classList).toContain('mat-select-panel-done-animating'); - })); }); describe('keyboard scrolling', () => { diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 6216b8a03080..d8d766a94968 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -218,8 +218,7 @@ export class MatSelectTrigger {} '(blur)': '_onBlur()', }, animations: [ - matSelectAnimations.transformPanel, - matSelectAnimations.fadeInContent + matSelectAnimations.transformPanel ], providers: [ {provide: MatFormFieldControl, useExisting: MatSelect}, @@ -280,9 +279,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, /** The value of the select panel's transform-origin property. */ _transformOrigin: string = 'top'; - /** Whether the panel's animation is done. */ - _panelDoneAnimating: boolean = false; - /** Emits when the panel element is finished transforming in. */ _panelDoneAnimatingStream = new Subject(); @@ -520,7 +516,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, this.openedChange.emit(true); } else { this.openedChange.emit(false); - this._panelDoneAnimating = false; this.overlayDir.offsetX = 0; this._changeDetectorRef.markForCheck(); } @@ -743,15 +738,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, } } - /** - * When the panel content is done fading in, the _panelDoneAnimating property is - * set so the proper class can be added to the panel. - */ - _onFadeInDone(): void { - this._panelDoneAnimating = this.panelOpen; - this._changeDetectorRef.markForCheck(); - } - _onFocus() { if (!this.disabled) { this._focused = true; diff --git a/src/material-examples/select-panel-class/select-panel-class-example.css b/src/material-examples/select-panel-class/select-panel-class-example.css index 2d18f02f1504..090739dbe915 100644 --- a/src/material-examples/select-panel-class/select-panel-class-example.css +++ b/src/material-examples/select-panel-class/select-panel-class-example.css @@ -1,11 +1,11 @@ -.example-panel-red .mat-select-content { +.example-panel-red .mat-select-panel { background: rgba(255, 0, 0, 0.5); } -.example-panel-green .mat-select-content { +.example-panel-green .mat-select-panel { background: rgba(0, 255, 0, 0.5); } -.example-panel-blue .mat-select-content { +.example-panel-blue .mat-select-panel { background: rgba(0, 0, 255, 0.5); }