Skip to content

Commit 1339357

Browse files
andrewseguinandrewseguin
committed
prototype(button): create prototype button based on MDC Web
1 parent 388baa2 commit 1339357

22 files changed

+712
-55
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/theme.scss

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import '../lib/core/theming/all-theme';
22
@import '../material-experimental/mdc-button/mdc-button';
3+
@import '../material-experimental/mdc-button/mdc-icon-button';
4+
@import '../material-experimental/mdc-button/mdc-fab';
35
@import '../material-experimental/mdc-card/mdc-card';
46
@import '../material-experimental/mdc-checkbox/mdc-checkbox';
57
@import '../material-experimental/mdc-helpers/mdc-helpers';
@@ -14,6 +16,8 @@
1416
// **Be sure that you only ever include this mixin once!**
1517
@include mat-core();
1618
@include mat-button-typography-mdc(mat-typography-config());
19+
@include mat-icon-button-typography-mdc(mat-typography-config());
20+
@include mat-fab-typography-mdc(mat-typography-config());
1721
@include mat-card-typography-mdc(mat-typography-config());
1822
@include mat-checkbox-typography-mdc(mat-typography-config());
1923
@include mat-menu-typography-mdc(mat-typography-config());
@@ -22,24 +26,25 @@
2226

2327
// Define the default theme (same as the example above).
2428
$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);
29+
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
30+
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
2731

2832
// Include the default theme styles.
2933
@include angular-material-theme($candy-app-theme);
3034
@include mat-button-theme-mdc($candy-app-theme);
35+
@include mat-icon-button-theme-mdc($candy-app-theme);
36+
@include mat-fab-theme-mdc($candy-app-theme);
3137
@include mat-card-theme-mdc($candy-app-theme);
3238
@include mat-checkbox-theme-mdc($candy-app-theme);
3339
@include mat-menu-theme-mdc($candy-app-theme);
3440
@include mat-radio-theme-mdc($candy-app-theme);
3541
@include mat-slide-toggle-theme-mdc($candy-app-theme);
3642

37-
3843
// Define an alternate dark theme.
3944
$dark-primary: mat-palette($mat-blue-grey);
40-
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
41-
$dark-warn: mat-palette($mat-deep-orange);
42-
$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);
4348

4449
// Include the alternative theme styles inside of a block with a CSS class. You can make this
4550
// CSS class whatever you want. In this example, any component inside of an element with
@@ -48,6 +53,8 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
4853
.demo-unicorn-dark-theme {
4954
@include angular-material-theme($dark-theme);
5055
@include mat-button-theme-mdc($dark-theme);
56+
@include mat-icon-button-theme-mdc($dark-theme);
57+
@include mat-fab-theme-mdc($dark-theme);
5158
@include mat-card-theme-mdc($dark-theme);
5259
@include mat-checkbox-theme-mdc($dark-theme);
5360
@include mat-menu-theme-mdc($dark-theme);

‎src/e2e-app/theme.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import '../lib/core/theming/all-theme';
22
@import '../material-experimental/mdc-button/mdc-button';
3+
@import '../material-experimental/mdc-button/mdc-icon-button';
4+
@import '../material-experimental/mdc-button/mdc-fab';
35
@import '../material-experimental/mdc-card/mdc-card';
46
@import '../material-experimental/mdc-checkbox/mdc-checkbox';
57
@import '../material-experimental/mdc-helpers/mdc-helpers';
@@ -14,6 +16,8 @@
1416
// **Be sure that you only ever include this mixin once!**
1517
@include mat-core();
1618
@include mat-button-typography-mdc(mat-typography-config());
19+
@include mat-icon-button-typography-mdc(mat-typography-config());
20+
@include mat-fab-typography-mdc(mat-typography-config());
1721
@include mat-card-typography-mdc(mat-typography-config());
1822
@include mat-checkbox-typography-mdc(mat-typography-config());
1923
@include mat-menu-typography-mdc(mat-typography-config());
@@ -22,12 +26,14 @@
2226

2327
// Define the default theme (same as the example above).
2428
$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);
29+
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
30+
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
2731

2832
// Include the default theme styles.
2933
@include angular-material-theme($candy-app-theme);
3034
@include mat-button-theme-mdc($candy-app-theme);
35+
@include mat-icon-button-theme-mdc($candy-app-theme);
36+
@include mat-fab-theme-mdc($candy-app-theme);
3137
@include mat-card-theme-mdc($candy-app-theme);
3238
@include mat-checkbox-theme-mdc($candy-app-theme);
3339
@include mat-menu-theme-mdc($candy-app-theme);

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
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"] + glob(["**/*.html"]),
12+
deps = [
13+
"@npm//material-components-web",
14+
] + CDK_TARGETS + MATERIAL_TARGETS,
1515
)
1616

1717
sass_library(
18-
name = "button_scss_lib",
19-
srcs = glob(["**/_*.scss"]),
20-
deps = [
21-
"//src/lib/core:core_scss_lib",
22-
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
23-
],
18+
name = "button_scss_lib",
19+
srcs = glob(["**/_*.scss"]),
20+
deps = [
21+
"//src/lib/core:core_scss_lib",
22+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
23+
],
2424
)
2525

2626
sass_binary(
27-
name = "button_scss",
28-
src = "button.scss",
27+
name = "button_scss",
28+
src = "button.scss",
2929
)

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
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
11+
- JSDoc comments on all classes, consts
12+
- Consider supporting button[mat-outlined-button]

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
1+
@import '@material/button/mixins';
12
@import '../mdc-helpers/mdc-helpers';
23

4+
$_mat-button-ripple-opacity: 0.1;
5+
36
@mixin mat-button-theme-mdc($theme) {
7+
$primary: mat-color(map-get($theme, primary));
8+
$accent: mat-color(map-get($theme, accent));
9+
$warn: mat-color(map-get($theme, warn));
10+
411
@include mat-using-mdc-theme($theme) {
5-
// TODO: MDC theme styles here.
12+
@include mdc-button-without-ripple($query: $mat-theme-styles-query);
13+
}
14+
15+
.mat-mdc-button {
16+
.mat-ripple-element {
17+
opacity: $_mat-button-ripple-opacity;
18+
background-color: currentColor;
19+
}
620
}
721
}
822

923
@mixin mat-button-typography-mdc($config) {
1024
@if config {
1125
@include mat-using-mdc-typography($config) {
12-
// TODO: MDC typography styles here.
26+
@include mdc-button-without-ripple($query: $mat-typography-styles-query);
1327
}
1428
}
1529
@else {
16-
// TODO: MDC typography styles here.
30+
@include mdc-button-without-ripple($query: $mat-typography-styles-query);
1731
}
1832
}

0 commit comments

Comments
 (0)