Skip to content

Commit c0d493f

Browse files
andrewseguinmmalerba
andrewseguin
authored and
mmalerba
committed
prototype(button): create prototype button based on MDC Web (#15887)
* prototype(button): create prototype button based on MDC Web * fix BUILD * add focus method to button base * build: rename lib to material * add comments to ripple styles; remove position relative; merge mixins * put button HTML into file * fix lint * move sass rules out of theme; cleanup typography styles * build fix * build fix
1 parent a786a31 commit c0d493f

21 files changed

+722
-53
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@
88

99
import {NgModule} from '@angular/core';
1010
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
11+
import {MatIconModule} from '@angular/material/icon';
1112
import {RouterModule} from '@angular/router';
1213
import {MdcButtonDemo} from './mdc-button-demo';
1314

1415
@NgModule({
1516
imports: [
1617
MatButtonModule,
18+
MatIconModule,
1719
RouterModule.forChild([{path: '', component: MdcButtonDemo}]),
1820
],
1921
declarations: [MdcButtonDemo],

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

Lines changed: 147 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,147 @@
1-
<!-- TODO: copy in demo template from existing mat-button demo. -->
2-
Not yet implemented.
1+
<div class="demo-button">
2+
<h4 class="demo-section-header">Buttons</h4>
3+
<section>
4+
<button mat-button>normal</button>
5+
<button mat-raised-button>raised</button>
6+
<button mat-stroked-button>stroked</button>
7+
<button mat-flat-button>flat</button>
8+
<button mat-fab>
9+
<mat-icon>check</mat-icon>
10+
</button>
11+
<button mat-mini-fab>
12+
<mat-icon>check</mat-icon>
13+
</button>
14+
</section>
15+
16+
<h4 class="demo-section-header">Anchors</h4>
17+
<section>
18+
<a href="//www.google.com" mat-button color="primary">SEARCH</a>
19+
<a href="//www.google.com" mat-raised-button>SEARCH</a>
20+
<a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
21+
<a href="//www.google.com" mat-flat-button>SEARCH</a>
22+
<a href="//www.google.com" mat-fab>
23+
<mat-icon>check</mat-icon>
24+
</a>
25+
<a href="//www.google.com" mat-mini-fab>
26+
<mat-icon>check</mat-icon>
27+
</a>
28+
</section>
29+
30+
<h4 class="demo-section-header">Text Buttons [mat-button]</h4>
31+
<section>
32+
<button mat-button color="primary">primary</button>
33+
<button mat-button color="accent">accent</button>
34+
<button mat-button color="warn">warn</button>
35+
<button mat-button disabled>disabled</button>
36+
</section>
37+
38+
<h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
39+
<section>
40+
<button mat-raised-button color="primary">primary</button>
41+
<button mat-raised-button color="accent">accent</button>
42+
<button mat-raised-button color="warn">warn</button>
43+
<button mat-raised-button disabled>disabled</button>
44+
</section>
45+
46+
<h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
47+
<section>
48+
<button mat-stroked-button color="primary">primary</button>
49+
<button mat-stroked-button color="accent">accent</button>
50+
<button mat-stroked-button color="warn">warn</button>
51+
<button mat-stroked-button disabled>disabled</button>
52+
</section>
53+
54+
<h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
55+
<section>
56+
<button mat-flat-button color="primary">primary</button>
57+
<button mat-flat-button color="accent">accent</button>
58+
<button mat-flat-button color="warn">warn</button>
59+
<button mat-flat-button disabled>disabled</button>
60+
</section>
61+
62+
<h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
63+
<section>
64+
<button mat-icon-button color="primary">
65+
<mat-icon>cached</mat-icon>
66+
</button>
67+
<button mat-icon-button color="accent">
68+
<mat-icon>backup</mat-icon>
69+
</button>
70+
<button mat-icon-button color="warn">
71+
<mat-icon>trending_up</mat-icon>
72+
</button>
73+
<button mat-icon-button disabled>
74+
<mat-icon>visibility</mat-icon>
75+
</button>
76+
</section>
77+
78+
<h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
79+
<section>
80+
<button mat-fab color="primary">
81+
<mat-icon>delete</mat-icon>
82+
</button>
83+
<button mat-fab color="accent">
84+
<mat-icon>bookmark</mat-icon>
85+
</button>
86+
<button mat-fab color="warn">
87+
<mat-icon>home</mat-icon>
88+
</button>
89+
<button mat-fab disabled>
90+
<mat-icon>favorite</mat-icon>
91+
</button>
92+
</section>
93+
94+
<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
95+
<section>
96+
<button mat-mini-fab color="primary">
97+
<mat-icon>menu</mat-icon>
98+
</button>
99+
<button mat-mini-fab color="accent">
100+
<mat-icon>plus_one</mat-icon>
101+
</button>
102+
<button mat-mini-fab color="warn">
103+
<mat-icon>filter_list</mat-icon>
104+
</button>
105+
<button mat-mini-fab disabled>
106+
<mat-icon>home</mat-icon>
107+
</button>
108+
</section>
109+
110+
<h4 class="demo-section-header">Interaction/State</h4>
111+
<section class="demo-no-flex">
112+
<div>
113+
<p>isDisabled: {{isDisabled}}</p>
114+
<p>Button 1 as been clicked {{clickCounter}} times</p>
115+
<button mat-flat-button (click)="isDisabled=!isDisabled">
116+
{{isDisabled ? 'Enable All' : 'Disable All'}}
117+
</button>
118+
<button mat-flat-button (click)="button1.focus()">Focus 1</button>
119+
<button mat-flat-button (click)="button2.focus()">Focus 2</button>
120+
<button mat-flat-button (click)="button3.focus()">Focus 3</button>
121+
<button mat-flat-button (click)="button4.focus()">Focus 4</button>
122+
</div>
123+
<div>
124+
<button mat-button #button1 [disabled]="isDisabled"
125+
(click)="clickCounter=clickCounter+1">
126+
Button 1
127+
</button>
128+
<button mat-button #button2 color="primary" [disabled]="isDisabled">
129+
Button 2
130+
</button>
131+
<a href="//www.google.com" #button3 mat-button color="accent"
132+
[disabled]="isDisabled">
133+
Button 3
134+
</a>
135+
<button mat-raised-button #button4 color="primary"
136+
[disabled]="isDisabled">
137+
Button 4
138+
</button>
139+
<button mat-mini-fab [disabled]="isDisabled">
140+
<mat-icon>check</mat-icon>
141+
</button>
142+
<button mat-icon-button color="accent" [disabled]="isDisabled">
143+
<mat-icon>favorite</mat-icon>
144+
</button>
145+
</div>
146+
</section>
147+
</div>

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

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1-
// TODO: copy in demo styles from existing mat-button demo.
1+
button,
2+
a {
3+
margin: 8px;
4+
text-transform: uppercase;
5+
}
6+
7+
section {
8+
display: flex;
9+
align-items: center;
10+
margin: 8px;
11+
}
12+
13+
p {
14+
padding: 5px 15px;
15+
}
16+
17+
.demo-section-header {
18+
font-weight: 500;
19+
margin: 0;
20+
}
21+
22+
.demo-no-flex {
23+
display: block;
24+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,7 @@ import {Component} from '@angular/core';
1515
styleUrls: ['mdc-button-demo.css'],
1616
})
1717
export class MdcButtonDemo {
18+
isDisabled: boolean = false;
19+
clickCounter: number = 0;
20+
toggleDisable: boolean = false;
1821
}

‎src/dev-app/theme.scss

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
// **Be sure that you only ever include this mixin once!**
1616
@include mat-core();
1717
@include mat-button-typography-mdc(mat-typography-config());
18+
@include mat-icon-button-typography-mdc(mat-typography-config());
19+
@include mat-fab-typography-mdc(mat-typography-config());
1820
@include mat-card-typography-mdc(mat-typography-config());
1921
@include mat-checkbox-typography-mdc(mat-typography-config());
2022
@include mat-menu-typography-mdc(mat-typography-config());
@@ -23,25 +25,26 @@
2325

2426
// Define the default theme (same as the example above).
2527
$candy-app-primary: mat-palette($mat-indigo);
26-
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
27-
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
28+
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
29+
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
2830

2931
// Include the default theme styles.
3032
@include angular-material-theme($candy-app-theme);
3133
@include mat-button-theme-mdc($candy-app-theme);
34+
@include mat-icon-button-theme-mdc($candy-app-theme);
35+
@include mat-fab-theme-mdc($candy-app-theme);
3236
@include mat-card-theme-mdc($candy-app-theme);
3337
@include mat-checkbox-theme-mdc($candy-app-theme);
3438
@include mat-menu-theme-mdc($candy-app-theme);
3539
@include mat-radio-theme-mdc($candy-app-theme);
3640
@include mat-slide-toggle-theme-mdc($candy-app-theme);
3741
@include mat-edit-theme($candy-app-theme);
3842
@include mat-edit-typography(mat-typography-config());
39-
4043
// Define an alternate dark theme.
4144
$dark-primary: mat-palette($mat-blue-grey);
42-
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
43-
$dark-warn: mat-palette($mat-deep-orange);
44-
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
45+
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
46+
$dark-warn: mat-palette($mat-deep-orange);
47+
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
4548

4649
// Include the alternative theme styles inside of a block with a CSS class. You can make this
4750
// CSS class whatever you want. In this example, any component inside of an element with
@@ -50,6 +53,8 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
5053
.demo-unicorn-dark-theme {
5154
@include angular-material-theme($dark-theme);
5255
@include mat-button-theme-mdc($dark-theme);
56+
@include mat-icon-button-theme-mdc($dark-theme);
57+
@include mat-fab-theme-mdc($dark-theme);
5358
@include mat-card-theme-mdc($dark-theme);
5459
@include mat-checkbox-theme-mdc($dark-theme);
5560
@include mat-menu-theme-mdc($dark-theme);

‎src/e2e-app/theme.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
// **Be sure that you only ever include this mixin once!**
1515
@include mat-core();
1616
@include mat-button-typography-mdc(mat-typography-config());
17+
@include mat-icon-button-typography-mdc(mat-typography-config());
18+
@include mat-fab-typography-mdc(mat-typography-config());
1719
@include mat-card-typography-mdc(mat-typography-config());
1820
@include mat-checkbox-typography-mdc(mat-typography-config());
1921
@include mat-menu-typography-mdc(mat-typography-config());
@@ -22,12 +24,14 @@
2224

2325
// Define the default theme (same as the example above).
2426
$candy-app-primary: mat-palette($mat-indigo);
25-
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
26-
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
27+
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
28+
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
2729

2830
// Include the default theme styles.
2931
@include angular-material-theme($candy-app-theme);
3032
@include mat-button-theme-mdc($candy-app-theme);
33+
@include mat-icon-button-theme-mdc($candy-app-theme);
34+
@include mat-fab-theme-mdc($candy-app-theme);
3135
@include mat-card-theme-mdc($candy-app-theme);
3236
@include mat-checkbox-theme-mdc($candy-app-theme);
3337
@include mat-menu-theme-mdc($candy-app-theme);

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

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,65 @@
1-
package(default_visibility=["//visibility:public"])
1+
package(default_visibility = ["//visibility:public"])
22

3-
load("@io_bazel_rules_sass//:defs.bzl", "sass_library", "sass_binary")
3+
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
44
load("//tools:defaults.bzl", "ng_module")
55
load("//:packages.bzl", "CDK_TARGETS", "MATERIAL_TARGETS")
66

77
ng_module(
8-
name = "mdc-button",
9-
srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
10-
module_name = "@angular/material-experimental/mdc-button",
11-
assets = [":button_scss"] + glob(["**/*.html"]),
12-
deps = [
13-
"@npm//material-components-web",
14-
] + CDK_TARGETS + MATERIAL_TARGETS,
8+
name = "mdc-button",
9+
srcs = glob(["**/*.ts"], exclude = ["**/*.spec.ts"]),
10+
module_name = "@angular/material-experimental/mdc-button",
11+
assets = [":button_scss", ":fab_scss", ":icon-button_scss"] + glob(["**/*.html"]),
12+
deps = [
13+
"@npm//@angular/animations",
14+
"@npm//material-components-web",
15+
] + CDK_TARGETS + MATERIAL_TARGETS,
1516
)
1617

1718
sass_library(
18-
name = "button_scss_lib",
19-
srcs = glob(["**/_*.scss"]),
20-
deps = [
21-
"//src/material/core:core_scss_lib",
22-
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
23-
],
19+
name = "button_scss_lib",
20+
srcs = glob(["**/_*.scss"]),
21+
deps = [
22+
"//src/material/core:core_scss_lib",
23+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
24+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
25+
],
2426
)
2527

2628
sass_binary(
27-
name = "button_scss",
28-
src = "button.scss",
29+
name = "button_scss",
30+
src = "button.scss",
31+
include_paths = [
32+
"external/npm/node_modules",
33+
],
34+
deps = [
35+
"//src/material/core:all_themes",
36+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
37+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
38+
],
39+
)
40+
41+
sass_binary(
42+
name = "fab_scss",
43+
src = "fab.scss",
44+
include_paths = [
45+
"external/npm/node_modules",
46+
],
47+
deps = [
48+
"//src/material/core:all_themes",
49+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
50+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
51+
],
52+
)
53+
54+
sass_binary(
55+
name = "icon-button_scss",
56+
src = "icon-button.scss",
57+
include_paths = [
58+
"external/npm/node_modules",
59+
],
60+
deps = [
61+
"//src/material/core:all_themes",
62+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
63+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
64+
],
2965
)

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
This is a placeholder for the MDC-based implementation of button.
1+
### Open Issues
2+
3+
- Disabled FAB does not look disabled
4+
- Anchor button does not look disabled
5+
- No focused state
6+
- Icon buttons are not colored by theme
7+
8+
### TODO
9+
- Write README - looks like lot of overlap with checkbox README. Create common readme for setup
10+
- Move tests over (both unit and e2e)
11+
- JSDoc comments on all classes, consts
12+
- Consider supporting button[mat-outlined-button]
13+
- Add to universal app
14+
- Should each button type have a unique top level class? e.g. mdc-mat-icon-button
15+
- Consider if we want to add a "appearance/type" input to button, similar to form field (outline/stroked, flat, raised)

0 commit comments

Comments
 (0)