From bd0ec649320998ff1be93a74dac657ace63b1e05 Mon Sep 17 00:00:00 2001 From: CaerusKaru Date: Thu, 21 Dec 2017 14:32:00 -0500 Subject: [PATCH] feat(divider): move divider out of mat-list (#5862) --- .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 a8117b64b74..64043866707 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 221c295e0d7..bde2eee3829 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 e649fe88457..33ff49f3c38 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 d3f3a87f100..96aea4632f0 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -24,13 +24,14 @@

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 2117fa4bc65..8ce48c1c392 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 5d1b09b57a7..fa0a0720703 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 c1e98b50398..ecb85b2763d 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 003fb31696b..20ddfba9d6e 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 cb627b841a9..e176d274f05 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 a2ed3f9459b..630c537068b 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 00000000000..0ccb4d491be --- /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 00000000000..1f73f26d85e --- /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 00000000000..b94889f5d0d --- /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 00000000000..8f48af98cf5 --- /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 00000000000..da8e5c620b8 --- /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 00000000000..9637ea39750 --- /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 00000000000..5b7b16224ce --- /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 00000000000..676ca90f1ff --- /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 00000000000..01cec65659c --- /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 00000000000..40d0cb044f4 --- /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 9ff7714ddc0..1319da507d4 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 d29e01c1b0e..d3cfc012202 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 9dd42f8e72e..66fe8b1c052 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 621ab78cced..5bbbb110abe 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 c29802fbed0..e802108c32a 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 00000000000..7432308753e --- /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 00000000000..c0e121f0241 --- /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 00000000000..afc107f5ddf --- /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 baac4677f6a..7d37bfcf0a5 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 e399634d801..a1046527813 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 c04d46e12bf..c2af9466440 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 6eafa15ec1a..0bb2ecd4aa3 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',