skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add scaffolding for mdc-based tabs (#16270)

Browse Source 
Adds all of the scaffolding for the MDC-based tabs implementation.

Relates to #16250.
This commit is contained in:
Kristiyan Kostadinov
2019-06-11 23:55:29 +02:00
committed by mmalerba
parent c3eac1759c
commit cfc3373ef7
32 changed files with 244 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/CODEOWNERS
+3
View File
@@ -93,6 +93,7 @@
# Note to implementer: please repossess
/src/material-experimental/mdc-radio/** @mmalerba
/src/material-experimental/mdc-slide-toggle/** @crisbeto
/src/material-experimental/mdc-tabs/** @crisbeto
/src/material-experimental/popover-edit/** @kseamon @andrewseguin
# CDK experimental package
@@ -146,6 +147,7 @@
# Note to implementer: please repossess
/src/dev-app/mdc-radio/** @mmalerba
/src/dev-app/mdc-slide-toggle/** @crisbeto
/src/dev-app/mdc-tabs/** @crisbeto
/src/dev-app/menu/** @crisbeto
/src/dev-app/overlay/** @jelbourn @crisbeto
/src/dev-app/paginator/** @andrewseguin
@@ -196,6 +198,7 @@
# Note to implementer: please repossess
/src/e2e-app/mdc-radio/** @mmalerba
/src/e2e-app/mdc-slide-toggle/** @crisbeto
/src/e2e-app/mdc-tabs/** @crisbeto
/src/e2e-app/menu/** @crisbeto
/src/e2e-app/progress-bar/** @jelbourn @crisbeto @josephperrott
/src/e2e-app/progress-spinner/** @jelbourn @crisbeto @josephperrott
packages.bzl
+1
View File
@@ -85,6 +85,7 @@ MATERIAL_EXPERIMENTAL_PACKAGES = [
"mdc-card",
"mdc-checkbox",
"mdc-chips",
"mdc-tabs",
"mdc-helpers",
"mdc-menu",
"mdc-radio",
src/dev-app/BUILD.bazel
+1
View File
@@ -48,6 +48,7 @@ ng_module(
"//src/material-experimental/mdc-menu",
"//src/material-experimental/mdc-radio",
"//src/material-experimental/mdc-slide-toggle",
"//src/material-experimental/mdc-tabs",
"//src/material-examples:examples",
] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS,
)
src/dev-app/dev-app/dev-app-layout.ts
+1
View File
@@ -75,6 +75,7 @@ export class DevAppLayout {
{name: 'MDC Chips', route: '/mdc-chips'},
{name: 'MDC Menu', route: '/mdc-menu'},
{name: 'MDC Radio', route: '/mdc-radio'},
{name: 'MDC Tabs', route: '/mdc-tabs'},
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
];
src/dev-app/dev-app/routes.ts
+1
View File
@@ -61,6 +61,7 @@ export const DEV_APP_ROUTES: Routes = [
path: 'mdc-slide-toggle',
loadChildren: 'mdc-slide-toggle/mdc-slide-toggle-demo-module#MdcSlideToggleDemoModule'
},
{path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'},
{path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
{path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},
{path: 'platform', loadChildren: 'platform/platform-demo-module#PlatformDemoModule'},
src/dev-app/mdc-tabs/mdc-tabs-demo-module.ts
+22
View File
@@ -0,0 +1,22 @@
/**
* @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 {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
import {RouterModule} from '@angular/router';
import {MdcTabsDemo} from './mdc-tabs-demo';
@NgModule({
imports: [
MatTabsModule,
RouterModule.forChild([{path: '', component: MdcTabsDemo}]),
],
declarations: [MdcTabsDemo],
})
export class MdcTabsDemoModule {
}
src/dev-app/mdc-tabs/mdc-tabs-demo.html
+2
View File
@@ -0,0 +1,2 @@
<!-- TODO: copy in demo template from existing tabs demo. -->
Not yet implemented.
src/dev-app/mdc-tabs/mdc-tabs-demo.scss
+1
View File
@@ -0,0 +1 @@
// TODO: copy in demo styles from existing tabs demo.
src/dev-app/mdc-tabs/mdc-tabs-demo.ts
+18
View File
@@ -0,0 +1,18 @@
/**
* @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 {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'mdc-tabs-demo',
templateUrl: 'mdc-tabs-demo.html',
styleUrls: ['mdc-tabs-demo.css'],
})
export class MdcTabsDemo {
}
src/dev-app/system-config.ts
+2
View File
@@ -148,6 +148,8 @@ System.config({
'dist/packages/material-experimental/mdc-radio/index.js',
'@angular/material-experimental/mdc-slide-toggle':
'dist/packages/material-experimental/mdc-slide-toggle/index.js',
'@angular/material-experimental/mdc-tabs':
'dist/packages/material-experimental/mdc-tabs/index.js',
'@angular/material-experimental/mdc-helpers':
'dist/packages/material-experimental/mdc-helpers/index.js',
'@angular/material-experimental/popover-edit':
src/dev-app/theme.scss
+4
View File
@@ -7,6 +7,7 @@
@import '../material-experimental/mdc-menu/mdc-menu';
@import '../material-experimental/mdc-radio/mdc-radio';
@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
@import '../material-experimental/mdc-tabs/mdc-tabs';
@import '../material-experimental/popover-edit/popover-edit';
// Plus imports for other components in your app.
@@ -24,6 +25,7 @@
@include mat-menu-typography-mdc(mat-typography-config());
@include mat-radio-typography-mdc(mat-typography-config());
@include mat-slide-toggle-typography-mdc(mat-typography-config());
@include mat-tabs-typography-mdc(mat-typography-config());
// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
@@ -41,6 +43,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
@include mat-menu-theme-mdc($candy-app-theme);
@include mat-radio-theme-mdc($candy-app-theme);
@include mat-slide-toggle-theme-mdc($candy-app-theme);
@include mat-tabs-theme-mdc($candy-app-theme);
@include mat-edit-theme($candy-app-theme);
@include mat-edit-typography(mat-typography-config());
// Define an alternate dark theme.
@@ -64,5 +67,6 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
@include mat-menu-theme-mdc($dark-theme);
@include mat-radio-theme-mdc($dark-theme);
@include mat-slide-toggle-theme-mdc($dark-theme);
@include mat-tabs-theme-mdc($dark-theme);
@include mat-edit-theme($dark-theme);
}
src/e2e-app/BUILD.bazel
+2
View File
@@ -38,6 +38,7 @@ ng_module(
"//src/material-experimental/mdc-menu",
"//src/material-experimental/mdc-radio",
"//src/material-experimental/mdc-slide-toggle",
"//src/material-experimental/mdc-tabs",
"//src/material/button",
"//src/material/checkbox",
"//src/material/core",
@@ -78,6 +79,7 @@ sass_binary(
"//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
"//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
"//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
"//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
"//src/material/core:all_themes",
],
)
src/e2e-app/e2e-app/e2e-app-layout.html
+1
View File
@@ -30,6 +30,7 @@
<a mat-list-item [routerLink]="['mdc-menu']">MDC Menu</a>
<a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
<a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
<a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
</mat-nav-list>
<main>
src/e2e-app/e2e-app/routes.ts
+2
View File
@@ -18,6 +18,7 @@ import {MdcChipsE2e} from '../mdc-chips/mdc-chips-e2e';
import {MdcMenuE2e} from '../mdc-menu/mdc-menu-e2e';
import {MdcRadioE2e} from '../mdc-radio/mdc-radio-e2e';
import {MdcSlideToggleE2e} from '../mdc-slide-toggle/mdc-slide-toggle-e2e';
import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
import {MenuE2E} from '../menu/menu-e2e';
import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -51,6 +52,7 @@ export const E2E_APP_ROUTES: Routes = [
{path: 'mdc-menu', component: MdcMenuE2e},
{path: 'mdc-radio', component: MdcRadioE2e},
{path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},
{path: 'mdc-tabs', component: MdcTabsE2e},
{path: 'menu', component: MenuE2E},
{path: 'progress-bar', component: ProgressBarE2E},
{path: 'progress-spinner', component: ProgressSpinnerE2E},
src/e2e-app/main-module.ts
+2
View File
@@ -26,6 +26,7 @@ import {MdcChipsE2eModule} from './mdc-chips/mdc-chips-e2e-module';
import {MdcMenuE2eModule} from './mdc-menu/mdc-menu-e2e-module';
import {MdcRadioE2eModule} from './mdc-radio/mdc-radio-e2e-module';
import {MdcSlideToggleE2eModule} from './mdc-slide-toggle/mdc-slide-toggle-e2e-module';
import {MdcTabsE2eModule} from './mdc-tabs/mdc-tabs-e2e-module';
import {MenuE2eModule} from './menu/menu-e2e-module';
import {ProgressBarE2eModule} from './progress-bar/progress-bar-e2e-module';
import {ProgressSpinnerE2eModule} from './progress-spinner/progress-spinner-e2e-module';
@@ -64,6 +65,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
MdcMenuE2eModule,
MdcRadioE2eModule,
MdcSlideToggleE2eModule,
MdcTabsE2eModule,
MenuE2eModule,
ProgressBarE2eModule,
ProgressSpinnerE2eModule,
src/e2e-app/mdc-tabs/mdc-tabs-e2e-module.ts
+18
View File
@@ -0,0 +1,18 @@
/**
* @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 {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
import {MdcTabsE2e} from './mdc-tabs-e2e';
@NgModule({
imports: [MatTabsModule],
declarations: [MdcTabsE2e],
})
export class MdcTabsE2eModule {
}
src/e2e-app/mdc-tabs/mdc-tabs-e2e.html
+1
View File
@@ -0,0 +1 @@
<!-- TODO: copy implementation from existing tabs e2e page. -->
src/e2e-app/mdc-tabs/mdc-tabs-e2e.ts
+18
View File
@@ -0,0 +1,18 @@
/**
* @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 {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'mdc-tabs-e2e',
templateUrl: 'mdc-tabs-e2e.html',
})
export class MdcTabsE2e {
// TODO: copy implementation from existing tabs e2e page.
}
src/e2e-app/theme.scss
+3
View File
@@ -7,6 +7,7 @@
@import '../material-experimental/mdc-menu/mdc-menu';
@import '../material-experimental/mdc-radio/mdc-radio';
@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
@import '../material-experimental/mdc-tabs/mdc-tabs';
// Plus imports for other components in your app.
@@ -23,6 +24,7 @@
@include mat-menu-typography-mdc(mat-typography-config());
@include mat-radio-typography-mdc(mat-typography-config());
@include mat-slide-toggle-typography-mdc(mat-typography-config());
@include mat-tabs-typography-mdc(mat-typography-config());
// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
@@ -40,3 +42,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
@include mat-menu-theme-mdc($candy-app-theme);
@include mat-radio-theme-mdc($candy-app-theme);
@include mat-slide-toggle-theme-mdc($candy-app-theme);
@include mat-tabs-theme-mdc($candy-app-theme);
src/material-experimental/mdc-tabs/BUILD.bazel
+67
View File
@@ -0,0 +1,67 @@
package(default_visibility = ["//visibility:public"])
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
load("@npm_angular_bazel//:index.bzl", "protractor_web_test_suite")
load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module")
ng_module(
name = "mdc-tabs",
srcs = glob(
["**/*.ts"],
exclude = ["**/*.spec.ts"],
),
assets = [":tabs_scss"] + glob(["**/*.html"]),
module_name = "@angular/material-experimental/mdc-tabs",
deps = [
"//src/material/core",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//material-components-web",
],
)
sass_library(
name = "mdc_tabs_scss_lib",
srcs = glob(["**/_*.scss"]),
deps = [
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
"//src/material/core:core_scss_lib",
],
)
sass_binary(
name = "tabs_scss",
src = "tabs.scss",
include_paths = [
"external/npm/node_modules",
],
deps = [
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
"//src/material/core:all_themes",
],
)
ng_e2e_test_library(
name = "e2e_test_sources",
srcs = glob(["**/*.e2e.spec.ts"]),
deps = [
"//src/cdk/testing/e2e",
],
)
protractor_web_test_suite(
name = "e2e_tests",
configuration = "//src/e2e-app:protractor.conf.js",
data = [
"//tools/axe-protractor",
"@npm//@angular/bazel",
],
on_prepare = "//src/e2e-app:start-devserver.js",
server = "//src/e2e-app:devserver",
tags = ["e2e"],
deps = [
":e2e_test_sources",
"//src/cdk/testing/e2e",
],
)
src/material-experimental/mdc-tabs/README.md
+1
View File
@@ -0,0 +1 @@
This is a placeholder for the MDC-based implementation of tabs.
src/material-experimental/mdc-tabs/_mdc-tabs.scss
+13
View File
@@ -0,0 +1,13 @@
@import '../mdc-helpers/mdc-helpers';
@mixin mat-tabs-theme-mdc($theme) {
@include mat-using-mdc-theme($theme) {
// TODO: MDC theme styles here.
}
}
@mixin mat-tabs-typography-mdc($config) {
@include mat-using-mdc-typography($config) {
// TODO: MDC typography styles here.
}
}
src/material-experimental/mdc-tabs/index.ts
+9
View File
@@ -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';
src/material-experimental/mdc-tabs/module.ts
+18
View File
@@ -0,0 +1,18 @@
/**
* @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 {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MatCommonModule} from '@angular/material/core';
@NgModule({
imports: [MatCommonModule, CommonModule],
exports: [MatCommonModule],
})
export class MatTabsModule {
}
src/material-experimental/mdc-tabs/public-api.ts
+9
View File
@@ -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 './module';
src/material-experimental/mdc-tabs/tabs.e2e.spec.ts
+1
View File
@@ -0,0 +1 @@
// TODO: copy tests from existing tabs, update as necessary to fix.
src/material-experimental/mdc-tabs/tabs.scss
View File
src/material-experimental/mdc-tabs/tabs.spec.ts
+1
View File
@@ -0,0 +1 @@
// TODO: copy tests from existing tabs, update as necessary to fix.
src/material-experimental/mdc-tabs/tsconfig-build.json
+15
View File
@@ -0,0 +1,15 @@
{
"extends": "../tsconfig-build",
"files": [
"public-api.ts",
"../typings.d.ts"
],
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"strictMetadataEmit": true,
"flatModuleOutFile": "index.js",
"flatModuleId": "@angular/material-experimental/mdc-tabs",
"skipTemplateCodegen": true,
"fullTemplateTypeCheck": true
}
}
src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts
+2
View File
@@ -6,6 +6,7 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
import {MatRadioModule} from '@angular/material-experimental/mdc-radio';
import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
@Component({
selector: 'kitchen-sink-mdc',
@@ -23,6 +24,7 @@ export class KitchenSinkMdc {
MatMenuModule,
MatRadioModule,
MatSlideToggleModule,
MatTabsModule,
],
declarations: [KitchenSinkMdc],
exports: [KitchenSinkMdc],
src/universal-app/theme.scss
+3
View File
@@ -7,6 +7,7 @@
@import '../material-experimental/mdc-menu/mdc-menu';
@import '../material-experimental/mdc-radio/mdc-radio';
@import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
@import '../material-experimental/mdc-tabs/mdc-tabs';
// Plus imports for other components in your app.
@@ -23,6 +24,7 @@
@include mat-menu-typography-mdc(mat-typography-config());
@include mat-radio-typography-mdc(mat-typography-config());
@include mat-slide-toggle-typography-mdc(mat-typography-config());
@include mat-tabs-typography-mdc(mat-typography-config());
// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
@@ -40,3 +42,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
@include mat-menu-theme-mdc($candy-app-theme);
@include mat-radio-theme-mdc($candy-app-theme);
@include mat-slide-toggle-theme-mdc($candy-app-theme);
@include mat-tabs-theme-mdc($candy-app-theme);
test/karma-system-config.js
+2
View File
@@ -147,6 +147,8 @@ System.config({
'dist/packages/material-experimental/mdc-radio/index.js',
'@angular/material-experimental/mdc-slide-toggle':
'dist/packages/material-experimental/mdc-slide-toggle/index.js',
'@angular/material-experimental/mdc-tabs':
'dist/packages/material-experimental/mdc-tabs/index.js',
'@angular/material-experimental/popover-edit':
'dist/packages/material-experimental/popover-edit/index.js',
},