Skip to content

Commit b652683

Browse files
josephperrotttinayuangao
josephperrott
authored and
tinayuangao
committed
feat(button): create stroked and flat button variants (#9365)
1 parent 834aecc commit b652683

File tree

7 files changed

+154
-150
lines changed

7 files changed

+154
-150
lines changed

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

Lines changed: 78 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,115 @@
11
<div class="demo-button">
2+
<h4 class="section-header">Buttons</h4>
23
<section>
34
<button mat-button>flat</button>
45
<button mat-raised-button>raised</button>
5-
6+
<button mat-stroked-button>stroked</button>
7+
<button mat-flat-button>flat</button>
68
<button mat-fab><mat-icon>check</mat-icon></button>
7-
<button mat-fab color="primary">Btn</button>
8-
<a mat-fab color="warn" routerLink=".">Link</a>
9-
<a mat-fab routerLink="."><mat-icon>check</mat-icon></a>
10-
119
<button mat-mini-fab><mat-icon>check</mat-icon></button>
12-
<button mat-mini-fab color="primary">Btn</button>
13-
<a mat-mini-fab color="warn" routerLink=".">Link</a>
14-
<a mat-mini-fab routerLink="."><mat-icon>check</mat-icon></a>
1510
</section>
1611

12+
<h4 class="section-header">Anchors</h4>
1713
<section>
18-
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
19-
<a href="http://www.google.com" mat-raised-button>SEARCH</a>
20-
<a href="http://www.google.com" mat-fab>
21-
<mat-icon>check</mat-icon>
22-
</a>
23-
<a href="http://www.google.com" mat-mini-fab>
24-
<mat-icon>check</mat-icon>
25-
</a>
14+
<a href="//www.google.com" mat-button color="primary">SEARCH</a>
15+
<a href="//www.google.com" mat-raised-button>SEARCH</a>
16+
<a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
17+
<a href="//www.google.com" mat-flat-button>SEARCH</a>
18+
<a href="//www.google.com" mat-fab><mat-icon>check</mat-icon></a>
19+
<a href="//www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
2620
</section>
2721

22+
<h4 class="section-header">Text Buttons [mat-button]</h4>
2823
<section>
2924
<button mat-button color="primary">primary</button>
3025
<button mat-button color="accent">accent</button>
3126
<button mat-button color="warn">warn</button>
27+
<button mat-button disabled>disabled</button>
3228
</section>
3329

30+
<h4 class="section-header">Raised Buttons [mat-raised-button]</h4>
3431
<section>
3532
<button mat-raised-button color="primary">primary</button>
3633
<button mat-raised-button color="accent">accent</button>
3734
<button mat-raised-button color="warn">warn</button>
35+
<button mat-raised-button disabled>disabled</button>
3836
</section>
3937

38+
<h4 class="section-header">Stroked Buttons [mat-stroked-button]</h4>
4039
<section>
41-
<button mat-fab color="primary">
42-
<mat-icon>home</mat-icon>
43-
</button>
44-
<button mat-fab color="accent">
45-
<mat-icon>favorite</mat-icon>
46-
</button>
47-
<button mat-fab color="warn">
48-
<mat-icon>feedback</mat-icon>
49-
</button>
40+
<button mat-stroked-button color="primary">primary</button>
41+
<button mat-stroked-button color="accent">accent</button>
42+
<button mat-stroked-button color="warn">warn</button>
43+
<button mat-stroked-button disabled>disabled</button>
5044
</section>
5145

46+
<h4 class="section-header">Flat Buttons [mat-flat-button]</h4>
5247
<section>
53-
<button mat-icon-button color="primary">
54-
<mat-icon>menu</mat-icon>
55-
</button>
56-
57-
<button mat-icon-button color="accent">
58-
<mat-icon>favorite</mat-icon>
59-
</button>
60-
61-
<button mat-icon-button>
62-
<mat-icon>more_vert</mat-icon>
63-
</button>
48+
<button mat-flat-button color="primary">primary</button>
49+
<button mat-flat-button color="accent">accent</button>
50+
<button mat-flat-button color="warn">warn</button>
51+
<button mat-flat-button disabled>disabled</button>
6452
</section>
6553

54+
<h4 class="section-header"> Icon Buttons [mat-icon-button]</h4>
6655
<section>
67-
<div>
68-
<p>isDisabled: {{isDisabled}}, clickCounter: <span>{{clickCounter}}</span></p>
69-
<button mat-raised-button (click)="isDisabled=!isDisabled">
70-
Disable buttons
71-
</button>
72-
<button mat-raised-button (click)="button1.focus()">Focus 1</button>
73-
<button mat-raised-button (click)="button2.focus()">Focus 2</button>
74-
<button mat-raised-button (click)="button3.focus()">Focus 3</button>
75-
<button mat-raised-button (click)="button4.focus()">Focus 4</button>
76-
</div>
77-
<button mat-button #button1 [disabled]="isDisabled" (click)="clickCounter=clickCounter+1">off</button>
78-
<button mat-button #button2 color="primary" [disabled]="isDisabled">off</button>
79-
<a href="http://www.google.com" #button3 mat-button color="accent" [disabled]="isDisabled">off</a>
80-
<button mat-raised-button #button4 color="primary" [disabled]="isDisabled">off</button>
81-
<button mat-mini-fab [disabled]="isDisabled">
82-
<mat-icon>check</mat-icon>
83-
</button>
84-
85-
<button mat-icon-button color="accent" [disabled]="isDisabled">
86-
<mat-icon>favorite</mat-icon>
87-
</button>
88-
</section>
89-
<section>
90-
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
91-
<button mat-button>DANCE</button>
92-
</section>
93-
<section>
94-
<a href="http://www.google.com" mat-raised-button color="primary">SEARCH</a>
95-
<button mat-raised-button>DANCE</button>
56+
<button mat-icon-button color="primary"><mat-icon>cached</mat-icon></button>
57+
<button mat-icon-button color="accent"><mat-icon>backup</mat-icon></button>
58+
<button mat-icon-button color="warn"><mat-icon>trending_up</mat-icon></button>
59+
<button mat-icon-button disabled><mat-icon>visibility</mat-icon></button>
9660
</section>
61+
62+
<h4 class="section-header">Fab Buttons [mat-fab]</h4>
9763
<section>
98-
<button mat-raised-button>More<mat-icon>more_vert</mat-icon></button>
99-
<button mat-raised-button>Check<mat-icon>check</mat-icon></button>
100-
<button mat-raised-button>Check<mat-icon>favorite</mat-icon></button>
101-
<button mat-raised-button>Last<mat-icon>navigate_before</mat-icon></button>
64+
<button mat-fab color="primary"><mat-icon>delete</mat-icon></button>
65+
<button mat-fab color="accent"><mat-icon>bookmark</mat-icon></button>
66+
<button mat-fab color="warn"><mat-icon>home</mat-icon></button>
67+
<button mat-fab disabled><mat-icon>favorite</mat-icon></button>
10268
</section>
69+
70+
<h4 class="section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
10371
<section>
104-
<button mat-button>More<mat-icon>more_vert</mat-icon></button>
105-
<button mat-button>Check<mat-icon>check</mat-icon></button>
106-
<button mat-button>Check<mat-icon>favorite</mat-icon></button>
107-
<button mat-button>Last<mat-icon>navigate_before</mat-icon></button>
72+
<button mat-mini-fab color="primary"><mat-icon>menu</mat-icon></button>
73+
<button mat-mini-fab color="accent"><mat-icon>plus_one</mat-icon></button>
74+
<button mat-mini-fab color="warn"><mat-icon>filter_list</mat-icon></button>
75+
<button mat-mini-fab disabled><mat-icon>home</mat-icon></button>
10876
</section>
109-
<section>
110-
<button mat-raised-button [disabled]="toggleDisable" (click)="toggleDisable = true">Disable</button>
111-
<button mat-button [disabled]="!toggleDisable" (click)="toggleDisable = false">Disable</button>
77+
78+
<h4 class="section-header">Interaction/State</h4>
79+
<section class="no-flex">
80+
<div>
81+
<p>isDisabled: {{isDisabled}}</p>
82+
<p>Button 1 as been clicked {{clickCounter}} times</p>
83+
<button mat-flat-button (click)="isDisabled=!isDisabled">
84+
{{isDisabled ? 'Enable All' : 'Disable All'}}
85+
</button>
86+
<button mat-flat-button (click)="button1.focus()">Focus 1</button>
87+
<button mat-flat-button (click)="button2.focus()">Focus 2</button>
88+
<button mat-flat-button (click)="button3.focus()">Focus 3</button>
89+
<button mat-flat-button (click)="button4.focus()">Focus 4</button>
90+
</div>
91+
<div>
92+
<button mat-button #button1 [disabled]="isDisabled"
93+
(click)="clickCounter=clickCounter+1">
94+
Button 1
95+
</button>
96+
<button mat-button #button2 color="primary" [disabled]="isDisabled">
97+
Button 2
98+
</button>
99+
<a href="//www.google.com" #button3 mat-button color="accent"
100+
[disabled]="isDisabled">
101+
Button 3
102+
</a>
103+
<button mat-raised-button #button4 color="primary"
104+
[disabled]="isDisabled">
105+
Button 4
106+
</button>
107+
<button mat-mini-fab [disabled]="isDisabled">
108+
<mat-icon>check</mat-icon>
109+
</button>
110+
<button mat-icon-button color="accent" [disabled]="isDisabled">
111+
<mat-icon>favorite</mat-icon>
112+
</button>
113+
</div>
112114
</section>
113115
</div>

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,13 @@
1414
p {
1515
padding: 5px 15px;
1616
}
17-
}
1817

18+
.section-header {
19+
font-weight: 500;
20+
margin: 0;
21+
}
22+
23+
.no-flex {
24+
display: block;
25+
}
26+
}

‎src/lib/button/_button-base.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ $mat-button-border-radius: 2px !default;
1212
$mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function,
1313
background-color 200ms $swift-ease-in-out-timing-function !default;
1414

15+
// Stroked Button standards
16+
$mat-stroked-button-line-height: $mat-button-line-height - 2;
17+
// Stroked button padding is 1px less horizontally than default/flat/raised
18+
// button's padding.
19+
$mat-stroked-button-padding: 0 15px;
20+
1521
// Icon Button standards
1622
$mat-icon-button-size: 40px !default;
1723
$mat-icon-button-border-radius: 50% !default;

‎src/lib/button/_button-theme.scss

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
$background: map-get($theme, background);
7676
$foreground: map-get($theme, foreground);
7777

78-
.mat-button, .mat-icon-button {
78+
.mat-button, .mat-icon-button, .mat-stroked-button {
7979
background: transparent;
8080

8181
@include _mat-button-focus-color($theme);
@@ -99,6 +99,18 @@
9999
@include _mat-button-ripple-color($theme, default, 0.1);
100100
}
101101

102+
.mat-flat-button {
103+
// Default properties when not using any [color] value.
104+
color: mat-color($foreground, text);
105+
106+
background-color: mat-color($background, raised-button);
107+
@include _mat-button-theme-color($theme, 'color', default-contrast);
108+
@include _mat-button-theme-color($theme, 'background-color');
109+
110+
// Add ripple effect with contrast color to buttons that don't have a focus overlay.
111+
@include _mat-button-ripple-color($theme, default-contrast);
112+
}
113+
102114
// Add ripple effect with default color to the icon button. Ripple color needs to be stronger
103115
// since the icon button doesn't have a focus overlay.
104116
.mat-icon-button {
@@ -107,7 +119,8 @@
107119
}
108120

109121
@mixin mat-button-typography($config) {
110-
.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
122+
.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button,
123+
.mat-fab, .mat-mini-fab {
111124
font: {
112125
family: mat-font-family($config, button);
113126
size: mat-font-size($config, button);

‎src/lib/button/button-module.ts

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@ import {A11yModule} from '@angular/cdk/a11y';
1313
import {
1414
MatAnchor,
1515
MatButton,
16-
MatMiniFab,
17-
MatButtonCssMatStyler,
18-
MatFab,
19-
MatIconButtonCssMatStyler,
20-
MatRaisedButtonCssMatStyler
2116
} from './button';
2217

2318

@@ -31,21 +26,11 @@ import {
3126
exports: [
3227
MatButton,
3328
MatAnchor,
34-
MatMiniFab,
35-
MatFab,
3629
MatCommonModule,
37-
MatButtonCssMatStyler,
38-
MatRaisedButtonCssMatStyler,
39-
MatIconButtonCssMatStyler,
4030
],
4131
declarations: [
4232
MatButton,
4333
MatAnchor,
44-
MatMiniFab,
45-
MatFab,
46-
MatButtonCssMatStyler,
47-
MatRaisedButtonCssMatStyler,
48-
MatIconButtonCssMatStyler,
4934
],
5035
})
5136
export class MatButtonModule {}

‎src/lib/button/button.scss

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,33 @@
1313
}
1414
}
1515

16-
// Only flat buttons (not raised, FABs or icon buttons) have a hover style.
16+
// Only flat and stroked buttons (not raised, FABs or icon buttons) have a hover style.
1717
// Use the same visual treatment for hover as for focus.
18-
.mat-button:hover .mat-button-focus-overlay {
18+
.mat-button:hover .mat-button-focus-overlay,
19+
.mat-stroked-button:hover .mat-button-focus-overlay {
1920
opacity: 1;
2021
}
2122

2223
.mat-raised-button {
2324
@extend %mat-raised-button;
2425
}
2526

27+
.mat-stroked-button {
28+
@extend %mat-button-base;
29+
30+
@include mat-overridable-elevation(0);
31+
32+
border: 1px solid currentColor;
33+
padding: $mat-stroked-button-padding;
34+
line-height: $mat-stroked-button-line-height;
35+
}
36+
37+
.mat-flat-button {
38+
@extend %mat-button-base;
39+
40+
@include mat-overridable-elevation(0);
41+
}
42+
2643
.mat-fab {
2744
@include mat-fab($mat-fab-size, $mat-fab-padding);
2845
}

0 commit comments

Comments
 (0)