diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index a8117b64b742..64043866707a 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -8,6 +8,7 @@ /src/lib/chips/** @tinayuangao /src/lib/datepicker/** @mmalerba /src/lib/dialog/** @jelbourn @crisbeto +/src/lib/divider/** @jelbourn @crisbeto /src/lib/expansion/** @josephperrott @jelbourn /src/lib/form-field/** @mmalerba /src/lib/grid-list/** @kara @jelbourn diff --git a/src/demo-app/card/card-demo.html b/src/demo-app/card/card-demo.html index 221c295e0d77..bde2eee3829b 100644 --- a/src/demo-app/card/card-demo.html +++ b/src/demo-app/card/card-demo.html @@ -27,6 +27,23 @@ + + Subtitle + Card with title, footer, and inset-divider + +

This is supporting text.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ + + + + + + + + + + Content Title diff --git a/src/demo-app/demo-material-module.ts b/src/demo-app/demo-material-module.ts index e649fe88457e..33ff49f3c389 100644 --- a/src/demo-app/demo-material-module.ts +++ b/src/demo-app/demo-material-module.ts @@ -16,6 +16,7 @@ import { MatChipsModule, MatDatepickerModule, MatDialogModule, + MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, @@ -63,6 +64,7 @@ import {PortalModule} from '@angular/cdk/portal'; MatTableModule, MatDatepickerModule, MatDialogModule, + MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html index d3f3a87f100b..96aea4632f04 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -24,13 +24,14 @@

{{contact.name}}

Today

- + Image of {{message.from}}

{{message.from}}

{{message.subject}} -- {{message.message}}

+ diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html index 2117fa4bc653..8ce48c1c392c 100644 --- a/src/demo-app/menu/menu-demo.html +++ b/src/demo-app/menu/menu-demo.html @@ -14,6 +14,24 @@ +
+

Menu with divider

+ + + + + + + + + + + +

Nested menu

diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts index 5d1b09b57a74..fa0a07207038 100644 --- a/src/demo-app/system-config.ts +++ b/src/demo-app/system-config.ts @@ -67,6 +67,7 @@ System.config({ '@angular/material/core': 'dist/packages/material/core/index.js', '@angular/material/datepicker': 'dist/packages/material/datepicker/index.js', '@angular/material/dialog': 'dist/packages/material/dialog/index.js', + '@angular/material/divider': 'dist/packages/material/divider/index.js', '@angular/material/expansion': 'dist/packages/material/expansion/index.js', '@angular/material/form-field': 'dist/packages/material/form-field/index.js', '@angular/material/grid-list': 'dist/packages/material/grid-list/index.js', diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts index c1e98b503981..ecb85b2763da 100644 --- a/src/e2e-app/e2e-app-module.ts +++ b/src/e2e-app/e2e-app-module.ts @@ -23,6 +23,7 @@ import { MatButtonModule, MatCheckboxModule, MatDialogModule, + MatDividerModule, MatFormFieldModule, MatGridListModule, MatIconModule, @@ -50,6 +51,7 @@ import {ReactiveFormsModule} from '@angular/forms'; MatButtonModule, MatCheckboxModule, MatDialogModule, + MatDividerModule, MatFormFieldModule, MatGridListModule, MatIconModule, diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts index 003fb31696ba..20ddfba9d6ec 100644 --- a/src/e2e-app/system-config.ts +++ b/src/e2e-app/system-config.ts @@ -59,6 +59,7 @@ System.config({ '@angular/material/core': 'dist/bundles/material-core.umd.js', '@angular/material/datepicker': 'dist/bundles/material-datepicker.umd.js', '@angular/material/dialog': 'dist/bundles/material-dialog.umd.js', + '@angular/material/divider': 'dist/bundles/material-divider.umd.js', '@angular/material/expansion': 'dist/bundles/material-expansion.umd.js', '@angular/material/form-field': 'dist/bundles/material-form-field.umd.js', '@angular/material/grid-list': 'dist/bundles/material-grid-list.umd.js', diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss index cb627b841a9e..e176d274f051 100644 --- a/src/lib/card/card.scss +++ b/src/lib/card/card.scss @@ -16,6 +16,22 @@ $mat-card-header-size: 40px !default; padding: $mat-card-default-padding; border-radius: $mat-card-border-radius; + .mat-divider { + position: absolute; + left: 0; + width: 100%; + + [dir='rtl'] & { + left: auto; + right: 0; + } + + &.mat-divider-inset { + position: static; + margin: 0; + } + } + @include cdk-high-contrast { outline: solid 1px; } diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss index a2ed3f9459ba..630c537068b5 100644 --- a/src/lib/core/theming/_all-theme.scss +++ b/src/lib/core/theming/_all-theme.scss @@ -9,6 +9,7 @@ @import '../../table/table-theme'; @import '../../datepicker/datepicker-theme'; @import '../../dialog/dialog-theme'; +@import '../../divider/divider-theme'; @import '../../expansion/expansion-theme'; @import '../../grid-list/grid-list-theme'; @import '../../icon/icon-theme'; @@ -43,6 +44,7 @@ @include mat-table-theme($theme); @include mat-datepicker-theme($theme); @include mat-dialog-theme($theme); + @include mat-divider-theme($theme); @include mat-expansion-panel-theme($theme); @include mat-form-field-theme($theme); @include mat-grid-list-theme($theme); diff --git a/src/lib/divider/README.md b/src/lib/divider/README.md new file mode 100644 index 000000000000..0ccb4d491be6 --- /dev/null +++ b/src/lib/divider/README.md @@ -0,0 +1 @@ +Please see the official documentation at https://material.angular.io/components/component/divider \ No newline at end of file diff --git a/src/lib/divider/_divider-theme.scss b/src/lib/divider/_divider-theme.scss new file mode 100644 index 000000000000..1f73f26d85ec --- /dev/null +++ b/src/lib/divider/_divider-theme.scss @@ -0,0 +1,15 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin mat-divider-theme($theme) { + $foreground: map-get($theme, foreground); + + .mat-divider { + border-top-color: mat-color($foreground, divider); + } + + .mat-divider-vertical { + border-right-color: mat-color($foreground, divider); + } +} diff --git a/src/lib/divider/divider-module.ts b/src/lib/divider/divider-module.ts new file mode 100644 index 000000000000..b94889f5d0d6 --- /dev/null +++ b/src/lib/divider/divider-module.ts @@ -0,0 +1,25 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {MatCommonModule} from '@angular/material/core'; +import {MatDivider} from './divider'; + + +@NgModule({ + imports: [MatCommonModule, CommonModule], + exports: [ + MatDivider, + MatCommonModule, + ], + declarations: [ + MatDivider, + ], +}) +export class MatDividerModule {} diff --git a/src/lib/divider/divider.md b/src/lib/divider/divider.md new file mode 100644 index 000000000000..8f48af98cf53 --- /dev/null +++ b/src/lib/divider/divider.md @@ -0,0 +1,55 @@ +`` is a component that allows for Material styling of a line separator with various orientation options. + + + + +### Simple divider + +A `` element can be used on its own to create a horizontal or vertical line styled with a Material theme + +```html + +``` + +### Inset divider + +Add the `inset` attribute in order to set whether or not the divider is an inset divider. + +```html + +``` + +### Vertical divider + +Add the `vertical` attribute in order to set whether or not the divider is vertically-oriented. + +```html + +``` + + +### Lists with inset dividers + +Dividers can be added to lists as a means of separating content into distinct sections. +Inset dividers can also be added to provide the appearance of distinct elements in a list without cluttering content +like avatar images or icons. Make sure to avoid adding an inset divider to the last element +in a list, because it will overlap with the section divider. + +```html + +

Folders

+ + folder +

{{folder.name}}

+

{{folder.updated}}

+ + + +

Notes

+ + note +

{{note.name}}

+

{{note.updated}}

+ + +``` diff --git a/src/lib/divider/divider.scss b/src/lib/divider/divider.scss new file mode 100644 index 000000000000..da8e5c620b87 --- /dev/null +++ b/src/lib/divider/divider.scss @@ -0,0 +1,23 @@ +$mat-divider-width: 1px; +$mat-divider-inset-margin: 80px; + +.mat-divider { + display: block; + margin: 0; + border-top-width: $mat-divider-width; + border-top-style: solid; + + &.mat-divider-vertical { + border-top: 0; + border-right-width: $mat-divider-width; + border-right-style: solid; + } + + &.mat-divider-inset { + margin-left: $mat-divider-inset-margin; + [dir='rtl'] & { + margin-left: auto; + margin-right: $mat-divider-inset-margin; + } + } +} diff --git a/src/lib/divider/divider.spec.ts b/src/lib/divider/divider.spec.ts new file mode 100644 index 000000000000..9637ea39750f --- /dev/null +++ b/src/lib/divider/divider.spec.ts @@ -0,0 +1,66 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {Component} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {MatDividerModule} from './divider-module'; + + +describe('MatDivider', () => { + + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MatDividerModule], + declarations: [ + MatDividerTestComponent + ], + }); + + TestBed.compileComponents(); + fixture = TestBed.createComponent(MatDividerTestComponent); + })); + + it('should apply vertical class to vertical divider', () => { + fixture.componentInstance.vertical = true; + fixture.detectChanges(); + + const divider = fixture.debugElement.query(By.css('mat-divider')); + expect(divider.nativeElement.className).toContain('mat-divider'); + expect(divider.nativeElement.className).toContain('mat-divider-vertical'); + }); + + it('should apply inset class to inset divider', () => { + fixture.componentInstance.inset = true; + fixture.detectChanges(); + + const divider = fixture.debugElement.query(By.css('mat-divider')); + expect(divider.nativeElement.className).toContain('mat-divider'); + expect(divider.nativeElement.className).toContain('mat-divider-inset'); + }); + + it('should apply inset and vertical classes to vertical inset divider', () => { + fixture.componentInstance.vertical = true; + fixture.componentInstance.inset = true; + fixture.detectChanges(); + + const divider = fixture.debugElement.query(By.css('mat-divider')); + expect(divider.nativeElement.className).toContain('mat-divider'); + expect(divider.nativeElement.className).toContain('mat-divider-inset'); + expect(divider.nativeElement.className).toContain('mat-divider-vertical'); + }); + + it('should add aria roles properly', () => { + fixture.detectChanges(); + + const divider = fixture.debugElement.query(By.css('mat-divider')); + expect(divider.nativeElement.getAttribute('role')).toBe('separator'); + }); +}); + +@Component({ + template: `` +}) +class MatDividerTestComponent { + vertical: boolean; + inset: boolean; +} diff --git a/src/lib/divider/divider.ts b/src/lib/divider/divider.ts new file mode 100644 index 000000000000..5b7b16224ce3 --- /dev/null +++ b/src/lib/divider/divider.ts @@ -0,0 +1,38 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core'; +import {coerceBooleanProperty} from '@angular/cdk/coercion'; + +@Component({ + moduleId: module.id, + selector: 'mat-divider', + host: { + 'role': 'separator', + '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"', + '[class.mat-divider-vertical]': 'vertical', + '[class.mat-divider-inset]': 'inset', + 'class': 'mat-divider' + }, + template: '', + styleUrls: ['divider.css'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + preserveWhitespaces: false, +}) +export class MatDivider { + /** Whether the divider is vertically aligned. */ + @Input() get vertical(): boolean { return this._vertical; } + set vertical(value: boolean) { this._vertical = coerceBooleanProperty(value); } + private _vertical: boolean = false; + + /** Whether the divider is an inset divider. */ + @Input() get inset(): boolean { return this._inset; } + set inset(value: boolean) { this._inset = coerceBooleanProperty(value); } + private _inset: boolean = false; +} diff --git a/src/lib/divider/index.ts b/src/lib/divider/index.ts new file mode 100644 index 000000000000..676ca90f1ffa --- /dev/null +++ b/src/lib/divider/index.ts @@ -0,0 +1,9 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +export * from './public-api'; diff --git a/src/lib/divider/public-api.ts b/src/lib/divider/public-api.ts new file mode 100644 index 000000000000..01cec65659c6 --- /dev/null +++ b/src/lib/divider/public-api.ts @@ -0,0 +1,10 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +export * from './divider'; +export * from './divider-module'; diff --git a/src/lib/divider/tsconfig-build.json b/src/lib/divider/tsconfig-build.json new file mode 100644 index 000000000000..40d0cb044f45 --- /dev/null +++ b/src/lib/divider/tsconfig-build.json @@ -0,0 +1,14 @@ +{ + "extends": "../tsconfig-build", + "files": [ + "public-api.ts", + "../typings.d.ts" + ], + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "strictMetadataEmit": true, + "flatModuleOutFile": "index.js", + "flatModuleId": "@angular/material/divider", + "skipTemplateCodegen": true + } +} diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss index 9ff7714ddc03..1319da507d42 100644 --- a/src/lib/list/_list-theme.scss +++ b/src/lib/list/_list-theme.scss @@ -26,10 +26,6 @@ background-color: mat-color($background, disabled-list-option); } - .mat-divider { - border-top-color: mat-color($foreground, divider); - } - .mat-nav-list .mat-list-item { outline: none; diff --git a/src/lib/list/list-module.ts b/src/lib/list/list-module.ts index d29e01c1b0e7..d3cfc0122021 100644 --- a/src/lib/list/list-module.ts +++ b/src/lib/list/list-module.ts @@ -15,16 +15,15 @@ import { MatRippleModule, } from '@angular/material/core'; import { - MatDividerCssMatStyler, MatList, MatNavList, MatListAvatarCssMatStyler, - MatListDivider, MatListIconCssMatStyler, MatListItem, MatListSubheaderCssMatStyler, } from './list'; import {MatListOption, MatSelectionList} from './selection-list'; +import {MatDividerModule} from '@angular/material/divider'; @NgModule({ @@ -33,25 +32,22 @@ import {MatListOption, MatSelectionList} from './selection-list'; MatList, MatNavList, MatListItem, - MatListDivider, MatListAvatarCssMatStyler, MatLineModule, MatCommonModule, MatListIconCssMatStyler, - MatDividerCssMatStyler, MatListSubheaderCssMatStyler, MatPseudoCheckboxModule, MatSelectionList, - MatListOption + MatListOption, + MatDividerModule ], declarations: [ MatList, MatNavList, MatListItem, - MatListDivider, MatListAvatarCssMatStyler, MatListIconCssMatStyler, - MatDividerCssMatStyler, MatListSubheaderCssMatStyler, MatSelectionList, MatListOption diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss index 9dd42f8e72e6..66fe8b1c052b 100644 --- a/src/lib/list/list.scss +++ b/src/lib/list/list.scss @@ -27,6 +27,8 @@ $mat-dense-three-line-height: 76px; $mat-dense-multi-line-padding: 16px; $mat-dense-list-icon-size: 20px; +$mat-list-item-inset-divider-offset: 72px; + // This mixin provides all list-item styles, changing font size and height // based on whether the list is in dense mode. @mixin mat-list-item-base($base-height, $avatar-height, $two-line-height, @@ -116,6 +118,29 @@ $mat-dense-list-icon-size: 20px; border-radius: 50%; padding: 4px; } + + .mat-divider { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + + [dir='rtl'] & { + left: auto; + right: 0; + } + + &.mat-divider-inset { + left: $mat-list-item-inset-divider-offset; + width: calc(100% - #{$mat-list-item-inset-divider-offset}); + margin: 0; + + [dir='rtl'] & { + left: auto; + right: $mat-list-item-inset-divider-offset; + } + } + } } .mat-subheader { @@ -185,12 +210,6 @@ $mat-dense-list-icon-size: 20px; } } -.mat-divider { - display: block; - border-top-style: solid; - border-top-width: 1px; - margin: 0; -} .mat-nav-list { a { diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 621ab78cced6..5bbbb110abe8 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -30,18 +30,6 @@ export const _MatListMixinBase = mixinDisableRipple(MatListBase); export class MatListItemBase {} export const _MatListItemMixinBase = mixinDisableRipple(MatListItemBase); - -/** Divider between items within a list. */ -@Directive({ - selector: 'mat-divider', - host: { - 'role': 'separator', - 'aria-orientation': 'horizontal' - } -}) -export class MatListDivider {} - -/** A Material Design list component. */ @Component({ moduleId: module.id, selector: 'mat-nav-list', @@ -73,16 +61,6 @@ export class MatNavList extends _MatListMixinBase implements CanDisableRipple {} }) export class MatList extends _MatListMixinBase implements CanDisableRipple {} -/** - * Directive whose purpose is to add the mat- CSS styling to this selector. - * @docs-private - */ -@Directive({ - selector: 'mat-divider', - host: {'class': 'mat-divider'} -}) -export class MatDividerCssMatStyler {} - /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private diff --git a/src/lib/public-api.ts b/src/lib/public-api.ts index c29802fbed02..e802108c32a4 100644 --- a/src/lib/public-api.ts +++ b/src/lib/public-api.ts @@ -16,6 +16,7 @@ export * from '@angular/material/chips'; export * from '@angular/material/core'; export * from '@angular/material/datepicker'; export * from '@angular/material/dialog'; +export * from '@angular/material/divider'; export * from '@angular/material/expansion'; export * from '@angular/material/form-field'; export * from '@angular/material/grid-list'; diff --git a/src/material-examples/divider-overview/divider-overview-example.css b/src/material-examples/divider-overview/divider-overview-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/material-examples/divider-overview/divider-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/material-examples/divider-overview/divider-overview-example.html b/src/material-examples/divider-overview/divider-overview-example.html new file mode 100644 index 000000000000..c0e121f02412 --- /dev/null +++ b/src/material-examples/divider-overview/divider-overview-example.html @@ -0,0 +1,7 @@ + + Item 1 + + Item 2 + + Item 3 + diff --git a/src/material-examples/divider-overview/divider-overview-example.ts b/src/material-examples/divider-overview/divider-overview-example.ts new file mode 100644 index 000000000000..afc107f5ddf8 --- /dev/null +++ b/src/material-examples/divider-overview/divider-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic divider + */ +@Component({ + selector: 'divider-overview-example', + templateUrl: 'divider-overview-example.html', +}) +export class DividerOverviewExample {} diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index baac4677f6a2..7d37bfcf0a5d 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -127,6 +127,7 @@ import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-exampl import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example'; import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example'; import {TooltipPositionExample} from './tooltip-position/tooltip-position-example'; +import {DividerOverviewExample} from './divider-overview/divider-overview-example'; export const EXAMPLE_COMPONENTS = { 'autocomplete-display': { @@ -321,6 +322,12 @@ export const EXAMPLE_COMPONENTS = { additionalFiles: ["dialog-overview-example-dialog.html"], selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog' }, + 'divider-overview': { + title: 'Divider Overview', + component: DividerOverviewExample, + additionalFiles: null, + selectorName: null + }, 'elevation-overview': { title: 'Elevation CSS classes', component: ElevationOverviewExample, @@ -848,6 +855,7 @@ export const EXAMPLE_LIST = [ DialogDataExampleDialog,DialogDataExample, DialogElementsExampleDialog,DialogElementsExample, DialogOverviewExampleDialog,DialogOverviewExample, + DividerOverviewExample, ElevationOverviewExample, ExpansionOverviewExample, ExpansionStepsExample, diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts index e399634d801f..a10465278135 100644 --- a/src/material-examples/material-module.ts +++ b/src/material-examples/material-module.ts @@ -4,7 +4,7 @@ import {CdkTableModule} from '@angular/cdk/table'; import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatPaginatorModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, - MatDialogModule, MatGridListModule, MatIconModule, MatInputModule, + MatDialogModule, MatDividerModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSortModule, MatSlideToggleModule, MatSnackBarModule, MatTableModule, MatTabsModule, MatToolbarModule, @@ -22,6 +22,7 @@ import { MatChipsModule, MatDatepickerModule, MatDialogModule, + MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index c04d46e12bf2..c2af94664406 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -9,6 +9,7 @@ import { MatCheckboxModule, MatChipsModule, MatDatepickerModule, + MatDividerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, @@ -78,6 +79,7 @@ export class KitchenSink { MatChipsModule, MatDatepickerModule, MatDialogModule, + MatDividerModule, MatFormFieldModule, MatGridListModule, MatIconModule, diff --git a/test/karma-test-shim.js b/test/karma-test-shim.js index 6eafa15ec1a1..0bb2ecd4aa3f 100644 --- a/test/karma-test-shim.js +++ b/test/karma-test-shim.js @@ -79,6 +79,7 @@ System.config({ '@angular/material/core': 'dist/packages/material/core/index.js', '@angular/material/datepicker': 'dist/packages/material/datepicker/index.js', '@angular/material/dialog': 'dist/packages/material/dialog/index.js', + '@angular/material/divider': 'dist/packages/material/divider/index.js', '@angular/material/expansion': 'dist/packages/material/expansion/index.js', '@angular/material/form-field': 'dist/packages/material/form-field/index.js', '@angular/material/grid-list': 'dist/packages/material/grid-list/index.js',