Skip to content

Commit c2ab6d7

Browse files
vanessanschmittjelbourn
vanessanschmitt
authored and
jelbourn
committed
chore: add skeleton files for MDC-based implementation of chips
1 parent 3968918 commit c2ab6d7

35 files changed

+272
-0
lines changed

‎.github/CODEOWNERS

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
/src/material-experimental/mdc-button/** @andrewseguin
8888
/src/material-experimental/mdc-card/** @mmalerba
8989
/src/material-experimental/mdc-checkbox/** @mmalerba
90+
/src/material-experimental/mdc-chips/** @mmalerba
9091
/src/material-experimental/mdc-helpers/** @mmalerba
9192
/src/material-experimental/mdc-menu/** @crisbeto
9293
# Note to implementer: please repossess
@@ -139,6 +140,7 @@
139140
# Note to implementer: please repossess
140141
/src/dev-app/mdc-card/** @mmalerba
141142
/src/dev-app/mdc-checkbox/** @mmalerba
143+
/src/dev-app/mdc-chips/** @mmalerba
142144
/src/dev-app/mdc-menu/** @crisbeto
143145
# Note to implementer: please repossess
144146
/src/dev-app/mdc-radio/** @mmalerba
@@ -185,6 +187,7 @@
185187
# Note to implementer: please repossess
186188
/e2e/components/mdc-card-e2e.spec.ts @mmalerba
187189
/e2e/components/mdc-checkbox-e2e.spec.ts @mmalerba
190+
/e2e/components/mdc-chips-e2e.spec.ts @mmalerba
188191
/e2e/components/mdc-menu-e2e.spec.ts @crisbeto
189192
# Note to implementer: please repossess
190193
/e2e/components/mdc-radio-e2e.spec.ts @mmalerba
@@ -218,6 +221,7 @@
218221
# Note to implementer: please repossess
219222
/src/e2e-app/mdc-card/** @mmalerba
220223
/src/e2e-app/mdc-checkbox/** @mmalerba
224+
/src/e2e-app/mdc-chips/** @mmalerba
221225
/src/e2e-app/mdc-menu/** @crisbeto
222226
# Note to implementer: please repossess
223227
/src/e2e-app/mdc-radio/** @mmalerba

‎e2e/components/mdc-chips-e2e.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO: copy tests from existing mat-chip-list, update as necessary to fix.

‎src/dev-app/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ ng_module(
2828
"//src/material-experimental/mdc-button",
2929
"//src/material-experimental/mdc-card",
3030
"//src/material-experimental/mdc-checkbox",
31+
"//src/material-experimental/mdc-chips",
3132
"//src/material-experimental/mdc-menu",
3233
"//src/material-experimental/mdc-radio",
3334
"//src/material-experimental/mdc-slide-toggle",
@@ -47,6 +48,7 @@ sass_binary(
4748
"//src/material-experimental/mdc-button:button_scss_lib",
4849
"//src/material-experimental/mdc-card:card_scss_lib",
4950
"//src/material-experimental/mdc-checkbox:checkbox_scss_lib",
51+
"//src/material-experimental/mdc-chips:chips_scss_lib",
5052
"//src/material-experimental/mdc-menu:menu_scss_lib",
5153
"//src/material-experimental/mdc-radio:radio_scss_lib",
5254
"//src/material-experimental/mdc-slide-toggle:slide_toggle_scss_lib",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export class DevAppLayout {
7272
{name: 'MDC Button', route: '/mdc-button'},
7373
{name: 'MDC Card', route: '/mdc-card'},
7474
{name: 'MDC Checkbox', route: '/mdc-checkbox'},
75+
{name: 'MDC Chips', route: '/mdc-chips'},
7576
{name: 'MDC Menu', route: '/mdc-menu'},
7677
{name: 'MDC Radio', route: '/mdc-radio'},
7778
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const DEV_APP_ROUTES: Routes = [
5454
path: 'mdc-checkbox',
5555
loadChildren: 'mdc-checkbox/mdc-checkbox-demo-module#MdcCheckboxDemoModule'
5656
},
57+
{path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
5758
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
5859
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
5960
{

‎src/dev-app/mdc-chips/mdc-chips-demo-module.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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 {MatChipsModule} from '@angular/material-experimental/mdc-chips';
11+
import {RouterModule} from '@angular/router';
12+
import {MdcChipsDemo} from './mdc-chips-demo';
13+
14+
@NgModule({
15+
imports: [
16+
MatChipsModule,
17+
RouterModule.forChild([{path: '', component: MdcChipsDemo}]),
18+
],
19+
declarations: [MdcChipsDemo],
20+
})
21+
export class MdcChipsDemoModule {
22+
}

‎src/dev-app/mdc-chips/mdc-chips-demo.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<!-- TODO: copy in demo template from existing mat-chip demo. -->
2+
Not yet implemented.

‎src/dev-app/mdc-chips/mdc-chips-demo.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO: copy in demo styles from existing mat-chips demo.

‎src/dev-app/mdc-chips/mdc-chips-demo.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 {Component} from '@angular/core';
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'mdc-chips-demo',
14+
templateUrl: 'mdc-chips-demo.html',
15+
styleUrls: ['mdc-chips-demo.css'],
16+
})
17+
export class MdcChipsDemo {
18+
}

‎src/dev-app/system-config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,8 @@ System.config({
140140
'dist/packages/material-experimental/mdc-card/index.js',
141141
'@angular/material-experimental/mdc-checkbox':
142142
'dist/packages/material-experimental/mdc-checkbox/index.js',
143+
'@angular/material-experimental/mdc-chips':
144+
'dist/packages/material-experimental/mdc-chips/index.js',
143145
'@angular/material-experimental/mdc-menu':
144146
'dist/packages/material-experimental/mdc-menu/index.js',
145147
'@angular/material-experimental/mdc-radio':

‎src/dev-app/theme.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '../material-experimental/mdc-button/mdc-button';
33
@import '../material-experimental/mdc-card/mdc-card';
44
@import '../material-experimental/mdc-checkbox/mdc-checkbox';
5+
@import '../material-experimental/mdc-chips/mdc-chips';
56
@import '../material-experimental/mdc-helpers/mdc-helpers';
67
@import '../material-experimental/mdc-menu/mdc-menu';
78
@import '../material-experimental/mdc-radio/mdc-radio';
@@ -19,6 +20,7 @@
1920
@include mat-fab-typography-mdc(mat-typography-config());
2021
@include mat-card-typography-mdc(mat-typography-config());
2122
@include mat-checkbox-typography-mdc(mat-typography-config());
23+
@include mat-chips-typography-mdc(mat-typography-config());
2224
@include mat-menu-typography-mdc(mat-typography-config());
2325
@include mat-radio-typography-mdc(mat-typography-config());
2426
@include mat-slide-toggle-typography-mdc(mat-typography-config());
@@ -35,6 +37,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
3537
@include mat-fab-theme-mdc($candy-app-theme);
3638
@include mat-card-theme-mdc($candy-app-theme);
3739
@include mat-checkbox-theme-mdc($candy-app-theme);
40+
@include mat-chips-theme-mdc($candy-app-theme);
3841
@include mat-menu-theme-mdc($candy-app-theme);
3942
@include mat-radio-theme-mdc($candy-app-theme);
4043
@include mat-slide-toggle-theme-mdc($candy-app-theme);
@@ -57,6 +60,7 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
5760
@include mat-fab-theme-mdc($dark-theme);
5861
@include mat-card-theme-mdc($dark-theme);
5962
@include mat-checkbox-theme-mdc($dark-theme);
63+
@include mat-chips-theme-mdc($dark-theme);
6064
@include mat-menu-theme-mdc($dark-theme);
6165
@include mat-radio-theme-mdc($dark-theme);
6266
@include mat-slide-toggle-theme-mdc($dark-theme);

‎src/e2e-app/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ ng_module(
4242
"//src/material-experimental/mdc-button",
4343
"//src/material-experimental/mdc-card",
4444
"//src/material-experimental/mdc-checkbox",
45+
"//src/material-experimental/mdc-chips",
4546
"//src/material-experimental/mdc-menu",
4647
"//src/material-experimental/mdc-radio",
4748
"//src/material-experimental/mdc-slide-toggle",
@@ -60,6 +61,7 @@ sass_binary(
6061
"//src/material-experimental/mdc-button:button_scss_lib",
6162
"//src/material-experimental/mdc-card:card_scss_lib",
6263
"//src/material-experimental/mdc-checkbox:checkbox_scss_lib",
64+
"//src/material-experimental/mdc-chips:chips_scss_lib",
6365
"//src/material-experimental/mdc-menu:menu_scss_lib",
6466
"//src/material-experimental/mdc-radio:radio_scss_lib",
6567
"//src/material-experimental/mdc-slide-toggle:slide_toggle_scss_lib",

‎src/e2e-app/e2e-app/e2e-app-layout.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
<a mat-list-item [routerLink]="['mdc-button']">MDC Button</a>
2626
<a mat-list-item [routerLink]="['mdc-card']">MDC Card</a>
2727
<a mat-list-item [routerLink]="['mdc-checkbox']">MDC Checkbox</a>
28+
<a mat-list-item [routerLink]="['mdc-chips']">MDC Chips</a>
2829
<a mat-list-item [routerLink]="['mdc-menu']">MDC Menu</a>
2930
<a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
3031
<a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>

‎src/e2e-app/e2e-app/routes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {ListE2e} from '../list/list-e2e';
1313
import {MdcButtonE2e} from '../mdc-button/mdc-button-e2e';
1414
import {MdcCardE2e} from '../mdc-card/mdc-card-e2e';
1515
import {MdcCheckboxE2e} from '../mdc-checkbox/mdc-checkbox-e2e';
16+
import {MdcChipsE2e} from '../mdc-chips/mdc-chips-e2e';
1617
import {MdcMenuE2e} from '../mdc-menu/mdc-menu-e2e';
1718
import {MdcRadioE2e} from '../mdc-radio/mdc-radio-e2e';
1819
import {MdcSlideToggleE2e} from '../mdc-slide-toggle/mdc-slide-toggle-e2e';
@@ -43,6 +44,7 @@ export const E2E_APP_ROUTES: Routes = [
4344
{path: 'mdc-button', component: MdcButtonE2e},
4445
{path: 'mdc-card', component: MdcCardE2e},
4546
{path: 'mdc-checkbox', component: MdcCheckboxE2e},
47+
{path: 'mdc-chips', component: MdcChipsE2e},
4648
{path: 'mdc-menu', component: MdcMenuE2e},
4749
{path: 'mdc-radio', component: MdcRadioE2e},
4850
{path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},

‎src/e2e-app/main-module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {ListE2eModule} from './list/list-e2e-module';
2121
import {MdcButtonE2eModule} from './mdc-button/mdc-button-e2e-module';
2222
import {MdcCardE2eModule} from './mdc-card/mdc-card-e2e-module';
2323
import {MdcCheckboxE2eModule} from './mdc-checkbox/mdc-checkbox-e2e-module';
24+
import {MdcChipsE2eModule} from './mdc-chips/mdc-chips-e2e-module';
2425
import {MdcMenuE2eModule} from './mdc-menu/mdc-menu-e2e-module';
2526
import {MdcRadioE2eModule} from './mdc-radio/mdc-radio-e2e-module';
2627
import {MdcSlideToggleE2eModule} from './mdc-slide-toggle/mdc-slide-toggle-e2e-module';
@@ -57,6 +58,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
5758
MdcButtonE2eModule,
5859
MdcCardE2eModule,
5960
MdcCheckboxE2eModule,
61+
MdcChipsE2eModule,
6062
MdcMenuE2eModule,
6163
MdcRadioE2eModule,
6264
MdcSlideToggleE2eModule,

‎src/e2e-app/mdc-chips/mdc-chips-e2e-module.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 {MatChipsModule} from '@angular/material-experimental/mdc-chips';
11+
import {MdcChipsE2e} from './mdc-chips-e2e';
12+
13+
@NgModule({
14+
imports: [MatChipsModule],
15+
declarations: [MdcChipsE2e],
16+
})
17+
export class MdcChipsE2eModule {
18+
}

‎src/e2e-app/mdc-chips/mdc-chips-e2e.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- TODO: copy implementation from existing mat-chip-list e2e page. -->

‎src/e2e-app/mdc-chips/mdc-chips-e2e.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 {Component} from '@angular/core';
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'mdc-chips-e2e',
14+
templateUrl: 'mdc-chips-e2e.html',
15+
})
16+
export class MdcChipsE2e {
17+
// TODO: copy implementation from existing mat-chip-list e2e page.
18+
}

‎src/e2e-app/theme.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '../material-experimental/mdc-button/mdc-button';
33
@import '../material-experimental/mdc-card/mdc-card';
44
@import '../material-experimental/mdc-checkbox/mdc-checkbox';
5+
@import '../material-experimental/mdc-chips/mdc-chips';
56
@import '../material-experimental/mdc-helpers/mdc-helpers';
67
@import '../material-experimental/mdc-menu/mdc-menu';
78
@import '../material-experimental/mdc-radio/mdc-radio';
@@ -18,6 +19,7 @@
1819
@include mat-fab-typography-mdc(mat-typography-config());
1920
@include mat-card-typography-mdc(mat-typography-config());
2021
@include mat-checkbox-typography-mdc(mat-typography-config());
22+
@include mat-chips-typography-mdc(mat-typography-config());
2123
@include mat-menu-typography-mdc(mat-typography-config());
2224
@include mat-radio-typography-mdc(mat-typography-config());
2325
@include mat-slide-toggle-typography-mdc(mat-typography-config());
@@ -34,6 +36,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
3436
@include mat-fab-theme-mdc($candy-app-theme);
3537
@include mat-card-theme-mdc($candy-app-theme);
3638
@include mat-checkbox-theme-mdc($candy-app-theme);
39+
@include mat-chips-theme-mdc($candy-app-theme);
3740
@include mat-menu-theme-mdc($candy-app-theme);
3841
@include mat-radio-theme-mdc($candy-app-theme);
3942
@include mat-slide-toggle-theme-mdc($candy-app-theme);

‎src/material-experimental/mdc-chips/BUILD.bazel

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
package(default_visibility=["//visibility:public"])
2+
3+
load("@io_bazel_rules_sass//:defs.bzl", "sass_library", "sass_binary")
4+
load("//tools:defaults.bzl", "ng_module")
5+
load("//:packages.bzl", "CDK_TARGETS", "MATERIAL_TARGETS")
6+
7+
ng_module(
8+
name = "mdc-chips",
9+
srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
10+
module_name = "@angular/material-experimental/mdc-chips",
11+
assets = [":chips_scss"] + glob(["**/*.html"]),
12+
deps = [
13+
"@npm//@angular/common",
14+
"@npm//@angular/core",
15+
"@npm//material-components-web",
16+
] + CDK_TARGETS + MATERIAL_TARGETS,
17+
)
18+
19+
sass_library(
20+
name = "chips_scss_lib",
21+
srcs = glob(["**/_*.scss"]),
22+
deps = [
23+
"//src/material/core:core_scss_lib",
24+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
25+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
26+
],
27+
)
28+
29+
sass_binary(
30+
name = "chips_scss",
31+
src = "chips.scss",
32+
include_paths = [
33+
"external/npm/node_modules",
34+
],
35+
deps = [
36+
"//src/material/core:all_themes",
37+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
38+
]
39+
)

‎src/material-experimental/mdc-chips/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This is a placeholder for the MDC-based implementation of chips.

‎src/material-experimental/mdc-chips/_mdc-chips.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import '../mdc-helpers/mdc-helpers';
2+
3+
@mixin mat-chips-theme-mdc($theme) {
4+
@include mat-using-mdc-theme($theme) {
5+
// TODO: MDC theme styles here.
6+
}
7+
}
8+
9+
@mixin mat-chips-typography-mdc($config) {
10+
@include mat-using-mdc-typography($config) {
11+
// TODO: MDC typography styles here.
12+
}
13+
}

‎src/material-experimental/mdc-chips/chip-cell.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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 {Directive} from '@angular/core';
10+
11+
@Directive({
12+
selector: 'mat-chip-cell',
13+
host: {
14+
'class': 'mat-mdc-chip-cell',
15+
},
16+
})
17+
export class MatChipCell {
18+
// TODO: set up MDC foundation class.
19+
}

‎src/material-experimental/mdc-chips/chip-grid.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- TODO: MDC template here. -->

‎src/material-experimental/mdc-chips/chip-grid.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'mat-chip-grid',
14+
templateUrl: 'chip-grid.html',
15+
styleUrls: ['chips.css'],
16+
host: {
17+
'class': 'mat-mdc-chip-grid',
18+
},
19+
encapsulation: ViewEncapsulation.None,
20+
changeDetection: ChangeDetectionStrategy.OnPush,
21+
})
22+
export class MatChipGrid {
23+
// TODO: set up MDC foundation class.
24+
}

‎src/material-experimental/mdc-chips/chips.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO: MDC core styles here.

‎src/material-experimental/mdc-chips/chips.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// TODO: copy tests from existing mat-chip-list, update as necessary to fix.

‎src/material-experimental/mdc-chips/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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+
export * from './public-api';

0 commit comments

Comments
 (0)