From 661dad2214854fbbcf579ff8c5674e6bc004092b Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Wed, 19 Jul 2017 00:32:27 -0400 Subject: [PATCH] feat(divider): move divider out of mat-list - Creates an independent mat-divider component - Adds inset capability with special accomodations for mat-list-item - Adds vertical option - Removed mat-divider from MatListModule with temporary import to prevent breaking changes - Added styling for dividers in cards - Add demos for use in list, card, and menu --- .github/CODEOWNERS | 1 + src/demo-app/card/card-demo.html | 17 +++++ src/demo-app/demo-material-module.ts | 2 + src/demo-app/list/list-demo.html | 3 +- src/demo-app/menu/menu-demo.html | 18 +++++ src/demo-app/system-config.ts | 1 + src/e2e-app/e2e-app-module.ts | 2 + src/e2e-app/system-config.ts | 1 + src/lib/card/card.scss | 16 +++++ src/lib/core/theming/_all-theme.scss | 2 + src/lib/divider/README.md | 1 + src/lib/divider/_divider-theme.scss | 15 +++++ src/lib/divider/divider-module.ts | 25 +++++++ src/lib/divider/divider.md | 55 ++++++++++++++++ src/lib/divider/divider.scss | 23 +++++++ src/lib/divider/divider.spec.ts | 66 +++++++++++++++++++ src/lib/divider/divider.ts | 38 +++++++++++ src/lib/divider/index.ts | 9 +++ src/lib/divider/public-api.ts | 10 +++ src/lib/divider/tsconfig-build.json | 14 ++++ src/lib/list/_list-theme.scss | 4 -- src/lib/list/list-module.ts | 10 +-- src/lib/list/list.scss | 31 +++++++-- src/lib/list/list.ts | 22 ------- src/lib/public-api.ts | 1 + .../divider-overview-example.css | 1 + .../divider-overview-example.html | 7 ++ .../divider-overview-example.ts | 10 +++ src/material-examples/example-module.ts | 8 +++ src/material-examples/material-module.ts | 3 +- .../kitchen-sink/kitchen-sink.ts | 2 + test/karma-test-shim.js | 1 + 32 files changed, 378 insertions(+), 41 deletions(-) create mode 100644 src/lib/divider/README.md create mode 100644 src/lib/divider/_divider-theme.scss create mode 100644 src/lib/divider/divider-module.ts create mode 100644 src/lib/divider/divider.md create mode 100644 src/lib/divider/divider.scss create mode 100644 src/lib/divider/divider.spec.ts create mode 100644 src/lib/divider/divider.ts create mode 100644 src/lib/divider/index.ts create mode 100644 src/lib/divider/public-api.ts create mode 100644 src/lib/divider/tsconfig-build.json create mode 100644 src/material-examples/divider-overview/divider-overview-example.css create mode 100644 src/material-examples/divider-overview/divider-overview-example.html create mode 100644 src/material-examples/divider-overview/divider-overview-example.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index d104fce58894..b7d217ec9977 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 a7d719fb66b7..e2ccc5ed245f 100644 --- a/src/demo-app/system-config.ts +++ b/src/demo-app/system-config.ts @@ -65,6 +65,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 a75b5518ea5b..4f8c96bede6d 100644 --- a/src/e2e-app/system-config.ts +++ b/src/e2e-app/system-config.ts @@ -57,6 +57,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 a89cd45ccbcb..0bb52bf0819a 100644 --- a/test/karma-test-shim.js +++ b/test/karma-test-shim.js @@ -77,6 +77,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',