Skip to content

Commit b4b7a75

Browse files
josephperrottjosephperrott
committed
create extendable fab
1 parent 541a95e commit b4b7a75

26 files changed

+773
-221
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
/src/lib/datepicker/** @mmalerba
1010
/src/lib/dialog/** @jelbourn @crisbeto
1111
/src/lib/expansion/** @josephperrott @jelbourn
12+
/src/lib/fab/** @josephperrott
1213
/src/lib/form-field/** @mmalerba
1314
/src/lib/grid-list/** @kara @jelbourn
1415
/src/lib/icon/** @jelbourn

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

Lines changed: 75 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,98 @@
11
<div class="demo-button">
2-
<section>
3-
<button mat-button>flat</button>
4-
<button mat-raised-button>raised</button>
5-
<button mat-fab>
6-
<mat-icon>check</mat-icon>
7-
</button>
8-
<button mat-fab>Btn</button>
9-
<a mat-fab routerLink=".">Link</a>
10-
<a mat-fab routerLink="."><mat-icon>check</mat-icon></a>
11-
<button mat-mini-fab>
12-
<mat-icon>check</mat-icon>
13-
</button>
14-
<button mat-mini-fab>Btn</button>
15-
<a mat-mini-fab routerLink=".">Link</a>
16-
</section>
17-
18-
<section>
19-
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
20-
<a href="http://www.google.com" mat-raised-button>SEARCH</a>
21-
<a href="http://www.google.com" mat-fab>
22-
<mat-icon>check</mat-icon>
23-
</a>
24-
<a href="http://www.google.com" mat-mini-fab>
25-
<mat-icon>check</mat-icon>
26-
</a>
27-
</section>
28-
29-
<section>
2+
<section class="outlined">
3+
<label>Flat</label>
4+
<button mat-button>default</button>
305
<button mat-button color="primary">primary</button>
316
<button mat-button color="accent">accent</button>
327
<button mat-button color="warn">warn</button>
338
</section>
349

35-
<section>
10+
<section class="outlined">
11+
<label>Raised</label>
12+
<button mat-raised-button>default</button>
3613
<button mat-raised-button color="primary">primary</button>
3714
<button mat-raised-button color="accent">accent</button>
3815
<button mat-raised-button color="warn">warn</button>
3916
</section>
4017

41-
<section>
42-
<button mat-fab color="primary">
43-
<mat-icon>home</mat-icon>
44-
</button>
45-
<button mat-fab color="accent">
46-
<mat-icon>favorite</mat-icon>
47-
</button>
48-
<button mat-fab color="warn">
49-
<mat-icon>feedback</mat-icon>
50-
</button>
18+
<section class="outlined">
19+
<label>Icon</label>
20+
<button mat-icon-button><mat-icon>home</mat-icon></button>
21+
<button mat-icon-button color="primary"><mat-icon>home</mat-icon></button>
22+
<button mat-icon-button color="accent"><mat-icon>favorite</mat-icon></button>
23+
<button mat-icon-button color="warn"><mat-icon>feedback</mat-icon></button>
5124
</section>
5225

53-
<section>
54-
<button mat-icon-button color="primary">
55-
<mat-icon>menu</mat-icon>
56-
</button>
26+
<section class="outlined">
27+
<label>FABs</label>
28+
<section>
29+
<mat-slide-toggle [(ngModel)]="extendOnHover">Extend On Hover</mat-slide-toggle>
30+
<mat-slide-toggle [(ngModel)]="extendOnFocus">Extend On Focus</mat-slide-toggle>
31+
<mat-slide-toggle [(ngModel)]="hasLabel">Has Label</mat-slide-toggle>
32+
<mat-form-field [style.display]="hasLabel ? 'inline-block' : 'none'" floatPlaceholder="never">
33+
<input matInput type="text" [(ngModel)]="labelText">
34+
</mat-form-field>
35+
</section>
36+
<section>
37+
<button mat-fab color="primary"
38+
[extendOnHover]="extendOnHover" [extendOnFocus]="extendOnFocus">
39+
<mat-icon>check</mat-icon>
40+
<ng-template #label *ngIf="hasLabel">{{labelText}}</ng-template>
41+
</button>
42+
<button mat-fab color="accent"
43+
[extendOnHover]="extendOnHover" [extendOnFocus]="extendOnFocus">
44+
<mat-icon>check</mat-icon>
45+
<ng-template #label *ngIf="hasLabel">{{labelText}}</ng-template>
46+
</button>
47+
<button mat-fab color="warn"
48+
[extendOnHover]="extendOnHover" [extendOnFocus]="extendOnFocus">
49+
<mat-icon>check</mat-icon>
50+
<ng-template #label *ngIf="hasLabel">{{labelText}}</ng-template>
51+
</button>
52+
<button mat-mini-fab color="primary"
53+
[extendOnHover]="extendOnHover" [extendOnFocus]="extendOnFocus">
54+
<mat-icon>check</mat-icon>
55+
<ng-template #label *ngIf="hasLabel">{{labelText}}</ng-template>
56+
</button>
57+
<button mat-mini-fab color="accent"
58+
[extendOnHover]="extendOnHover" [extendOnFocus]="extendOnFocus">
59+
<mat-icon>check</mat-icon>
60+
<ng-template #label *ngIf="hasLabel">{{labelText}}</ng-template>
61+
</button>
62+
<button mat-mini-fab color="warn"
63+
[extendOnHover]="extendOnHover" [extendOnFocus]="extendOnFocus">
64+
<mat-icon>check</mat-icon>
65+
<ng-template #label *ngIf="hasLabel">{{labelText}}</ng-template>
66+
</button>
67+
</section>
68+
</section>
5769

58-
<button mat-icon-button color="accent">
59-
<mat-icon>favorite</mat-icon>
60-
</button>
6170

62-
<button mat-icon-button>
63-
<mat-icon>more_vert</mat-icon>
64-
</button>
71+
<section class="outlined">
72+
<label>Anchors</label>
73+
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
74+
<a href="http://www.google.com" mat-raised-button>SEARCH</a>
75+
<a href="http://www.google.com" mat-fab><mat-icon>check</mat-icon></a>
76+
<a href="http://www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
77+
<a href="http://www.google.com" mat-icon-button><mat-icon>check</mat-icon></a>
6578
</section>
6679

67-
<section>
68-
<div>
69-
<p>isDisabled: {{isDisabled}}, clickCounter: <span>{{clickCounter}}</span></p>
70-
<button mat-raised-button (click)="isDisabled=!isDisabled">
71-
Disable buttons
72-
</button>
80+
<section class="outlined">
81+
<label>Disable and Focus</label>
82+
<section>
83+
<button mat-raised-button (click)="isDisabled=!isDisabled">Disable all</button>
7384
<button mat-raised-button (click)="button1.focus()">Focus 1</button>
7485
<button mat-raised-button (click)="button2.focus()">Focus 2</button>
7586
<button mat-raised-button (click)="button3.focus()">Focus 3</button>
7687
<button mat-raised-button (click)="button4.focus()">Focus 4</button>
77-
</div>
78-
<button mat-button #button1 [disabled]="isDisabled" (click)="clickCounter=clickCounter+1">off</button>
79-
<button mat-button #button2 color="primary" [disabled]="isDisabled">off</button>
80-
<a href="http://www.google.com" #button3 mat-button color="accent" [disabled]="isDisabled">off</a>
81-
<button mat-raised-button #button4 color="primary" [disabled]="isDisabled">off</button>
82-
<button mat-mini-fab [disabled]="isDisabled">
83-
<mat-icon>check</mat-icon>
84-
</button>
85-
86-
<button mat-icon-button color="accent" [disabled]="isDisabled">
87-
<mat-icon>favorite</mat-icon>
88-
</button>
89-
</section>
90-
<section>
91-
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
92-
<button mat-button>DANCE</button>
93-
</section>
94-
<section>
95-
<a href="http://www.google.com" mat-raised-button color="primary">SEARCH</a>
96-
<button mat-raised-button>DANCE</button>
97-
</section>
98-
<section>
99-
<button mat-raised-button>More<mat-icon>more_vert</mat-icon></button>
100-
<button mat-raised-button>Check<mat-icon>check</mat-icon></button>
101-
<button mat-raised-button>Check<mat-icon>favorite</mat-icon></button>
102-
<button mat-raised-button>Last<mat-icon>navigate_before</mat-icon></button>
103-
</section>
104-
<section>
105-
<button mat-button>More<mat-icon>more_vert</mat-icon></button>
106-
<button mat-button>Check<mat-icon>check</mat-icon></button>
107-
<button mat-button>Check<mat-icon>favorite</mat-icon></button>
108-
<button mat-button>Last<mat-icon>navigate_before</mat-icon></button>
109-
</section>
110-
<section>
111-
<button mat-raised-button [disabled]="toggleDisable" (click)="toggleDisable = true">Disable</button>
112-
<button mat-button [disabled]="!toggleDisable" (click)="toggleDisable = false">Disable</button>
88+
<button mat-raised-button (click)="button5.focus()">Focus 5</button>
89+
</section>
90+
<section>
91+
<button #button1 mat-button color="primary" [disabled]="isDisabled">1</button>
92+
<button #button2 mat-raised-button color="accent" [disabled]="isDisabled">2</button>
93+
<button #button3 mat-fab color="warn" [disabled]="isDisabled">3</button>
94+
<button #button4 mat-mini-fab color="primary" [disabled]="isDisabled">4</button>
95+
<button #button5 mat-icon-button color="accent" [disabled]="isDisabled">5</button>
96+
</section>
11397
</section>
11498
</div>

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,25 @@
66
}
77

88
section {
9-
display: flex;
109
align-items: center;
11-
margin: 8px;
10+
position: relative;
11+
12+
&.outlined {
13+
border: 2px solid lightgray;
14+
border-radius: 10px;
15+
margin-top: 20px;
16+
padding: 15px 5px 5px;
17+
}
18+
19+
& > label {
20+
position: absolute;
21+
top: calc(-0.5em + -2px);
22+
left: 1.5em;
23+
border: 2px solid lightgray;
24+
border-radius: 6px;
25+
padding: 0 4px;
26+
background: #fafafa;
27+
}
1228
}
1329

1430
p {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,9 @@ export class ButtonDemo {
1919
isDisabled: boolean = false;
2020
clickCounter: number = 0;
2121
toggleDisable: boolean = false;
22+
23+
extendOnHover = true;
24+
extendOnFocus = false;
25+
hasLabel = true;
26+
labelText = 'Check this off!';
2227
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ System.config({
6565
'@angular/material/datepicker': 'dist/packages/material/datepicker/index.js',
6666
'@angular/material/dialog': 'dist/packages/material/dialog/index.js',
6767
'@angular/material/expansion': 'dist/packages/material/expansion/index.js',
68+
'@angular/material/fab': 'dist/packages/material/fab/index.js',
6869
'@angular/material/form-field': 'dist/packages/material/form-field/index.js',
6970
'@angular/material/grid-list': 'dist/packages/material/grid-list/index.js',
7071
'@angular/material/icon': 'dist/packages/material/icon/index.js',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ System.config({
5757
'@angular/material/datepicker': 'dist/bundles/material-datepicker.umd.js',
5858
'@angular/material/dialog': 'dist/bundles/material-dialog.umd.js',
5959
'@angular/material/expansion': 'dist/bundles/material-expansion.umd.js',
60+
'@angular/material/fab': 'dist/packages/material/fab/index.js',
6061
'@angular/material/form-field': 'dist/bundles/material-form-field.umd.js',
6162
'@angular/material/grid-list': 'dist/bundles/material-grid-list.umd.js',
6263
'@angular/material/icon': 'dist/bundles/material-icon.umd.js',

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

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,6 @@ $mat-icon-button-size: 40px !default;
1717
$mat-icon-button-border-radius: 50% !default;
1818
$mat-icon-button-line-height: 24px !default;
1919

20-
// Fab standards
21-
$mat-fab-border-radius: 50% !default;
22-
$mat-fab-size: 56px !default;
23-
$mat-fab-padding: 16px !default;
24-
25-
$mat-mini-fab-size: 40px !default;
26-
$mat-mini-fab-padding: 8px !default;
27-
2820
// Applies base styles to all button types.
2921
%mat-button-base {
3022
box-sizing: border-box;
@@ -62,7 +54,7 @@ $mat-mini-fab-padding: 8px !default;
6254
}
6355
}
6456

65-
// Applies styles to buttons with backgrounds: raised, fab, and mini-fab
57+
// Applies styles to buttons with raised backgrounds.
6658
%mat-raised-button {
6759
@extend %mat-button-base;
6860

@@ -83,30 +75,3 @@ $mat-mini-fab-padding: 8px !default;
8375
box-shadow: none;
8476
}
8577
}
86-
87-
// Applies styles to fab and mini-fab button types only
88-
@mixin mat-fab($size, $padding) {
89-
@extend %mat-raised-button;
90-
91-
@include mat-overridable-elevation(6);
92-
93-
// Reset the min-width from the button base.
94-
min-width: 0;
95-
96-
border-radius: $mat-fab-border-radius;
97-
width: $size;
98-
height: $size;
99-
padding: 0;
100-
101-
flex-shrink: 0;
102-
103-
&:not([disabled]):active {
104-
@include mat-overridable-elevation(12);
105-
}
106-
107-
.mat-button-wrapper {
108-
padding: $padding 0;
109-
display: inline-block;
110-
line-height: $mat-icon-button-line-height;
111-
}
112-
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
@include _mat-button-theme-color($theme, 'color');
8383
}
8484

85-
.mat-raised-button, .mat-fab, .mat-mini-fab {
85+
.mat-raised-button {
8686
// Default properties when not using any [color] value.
8787
color: mat-color($foreground, text);
8888
background-color: mat-color($background, raised-button);
@@ -107,7 +107,7 @@
107107
}
108108

109109
@mixin mat-button-typography($config) {
110-
.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
110+
.mat-button, .mat-raised-button, .mat-icon-button {
111111
font: {
112112
family: mat-font-family($config, button);
113113
size: mat-font-size($config, button);

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@ import {NgModule} from '@angular/core';
1010
import {CommonModule} from '@angular/common';
1111
import {MatCommonModule, MatRippleModule} from '@angular/material/core';
1212
import {A11yModule} from '@angular/cdk/a11y';
13+
import {MatFabModule} from '@angular/material/fab';
1314
import {
1415
MatAnchor,
1516
MatButton,
16-
MatMiniFab,
1717
MatButtonCssMatStyler,
18-
MatFab,
1918
MatIconButtonCssMatStyler,
2019
MatRaisedButtonCssMatStyler
2120
} from './button';
@@ -26,23 +25,21 @@ import {
2625
CommonModule,
2726
MatRippleModule,
2827
MatCommonModule,
28+
MatFabModule,
2929
A11yModule,
3030
],
3131
exports: [
3232
MatButton,
3333
MatAnchor,
34-
MatMiniFab,
35-
MatFab,
3634
MatCommonModule,
35+
MatFabModule,
3736
MatButtonCssMatStyler,
3837
MatRaisedButtonCssMatStyler,
3938
MatIconButtonCssMatStyler,
4039
],
4140
declarations: [
4241
MatButton,
4342
MatAnchor,
44-
MatMiniFab,
45-
MatFab,
4643
MatButtonCssMatStyler,
4744
MatRaisedButtonCssMatStyler,
4845
MatIconButtonCssMatStyler,

‎src/lib/button/button.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<span class="mat-button-wrapper"><ng-content></ng-content></span>
22
<div matRipple class="mat-button-ripple"
3-
[class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
3+
[class.mat-button-ripple-round]="_isIconButton"
44
[matRippleDisabled]="_isRippleDisabled()"
55
[matRippleCentered]="_isIconButton"
66
[matRippleTrigger]="_getHostElement()"></div>

0 commit comments

Comments
 (0)