Skip to content

feat(material-experimental/mdc-button): add extended fab #21585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 5, 2021
Merged

feat(material-experimental/mdc-button): add extended fab #21585

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f3e3f9
feat(material-experimental/mdc-button): add extended fab
annieyw Jan 14, 2021
13ccd65
fix(material-experimental/mdc-button): split up fab and mini fab
annieyw Jan 15, 2021
54df3a8
fix(material-experimental/mdc-button): fix icon styling and add example
annieyw Jan 21, 2021
ddb6038
fix(material-experimental/mdc-button): add getter/setter for extended…
annieyw Jan 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/dev-app/mdc-button/mdc-button-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ <h4 class="demo-section-header">Anchors</h4>
<a href="//www.google.com" mat-mini-fab>
<mat-icon>check</mat-icon>
</a>
<a href="//www.google.com" mat-fab [extended]="true">Search</a>
<a href="//www.google.com" mat-fab [extended]="true">
<mat-icon>check</mat-icon>
Search
</a>
</section>
<section>
<a href="//www.google.com" disabled mat-button color="primary">SEARCH</a>
Expand All @@ -49,6 +54,11 @@ <h4 class="demo-section-header">Anchors</h4>
<a href="//www.google.com" disabled mat-mini-fab>
<mat-icon>check</mat-icon>
</a>
<a href="//www.google.com" disabled mat-fab [extended]="true">Search</a>
<a href="//www.google.com" disabled mat-fab [extended]="true">
<mat-icon>check</mat-icon>
Search
</a>
</section>

<h4 class="demo-section-header">Text Buttons [mat-button]</h4>
Expand Down Expand Up @@ -145,6 +155,23 @@ <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
</button>
</section>

<h4 class="demo-section-header">Extended Fab Buttons</h4>
<section>
<button mat-fab [extended]="true">Extended</button>
<button mat-fab [extended]="true" color="primary">Extended</button>
<button mat-fab [extended]="true" color="accent">Extended</button>
<button mat-fab [extended]="true" color="warn">Extended</button>
<button mat-fab [extended]="true">
<mat-icon>home</mat-icon>
Extended
</button>
<button mat-fab [extended]="true">
<mat-icon>home</mat-icon>
Extended
<mat-icon iconPositionEnd>favorite</mat-icon>
</button>
</section>

<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
<section>
<button mat-mini-fab>
Expand Down
13 changes: 13 additions & 0 deletions src/material-experimental/mdc-button/button.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,18 @@ describe('MDC-based MatButton', () => {
});
});

describe('button[mat-fab] extended', () => {
it('should have accent palette by default', () => {
const fixture = TestBed.createComponent(TestApp);
const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.mat-mdc-extended-fab'))!;

fixture.detectChanges();

expect(extendedFabButtonDebugEl.nativeElement.classList)
.toContain('mat-accent', 'Expected extended fab buttons to use accent palette by default');
});
});

// Regular button tests
describe('button[mat-button]', () => {
it('should handle a click on the button', () => {
Expand Down Expand Up @@ -281,6 +293,7 @@ describe('MDC-based MatButton', () => {
Link
</a>
<button mat-fab>Fab Button</button>
<button mat-fab [extended]="true">Extended</button>
<button mat-mini-fab>Mini Fab Button</button>
`
})
Expand Down
25 changes: 21 additions & 4 deletions src/material-experimental/mdc-button/fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '@material/fab/mixins.import';
@import '@material/fab/variables.import';
@import '@material/button/variables.import';
@import '@material/theme/variables.import';
@import '../mdc-helpers/mdc-helpers';
Expand All @@ -22,11 +23,27 @@
// <span class="mdc-fab__icon material-icons">favorite</span>
// ```
// However, Angular Material expects a `mat-icon` instead. The following
// will extend the `mdc-fab__icon` styling to the mat icon. Note that
// the extended styles inherently only match icons that nest themselves in
// a parent `mdc-fab`.
// mixin will style the icons appropriately.
.mat-icon {
@extend .mdc-fab__icon;
@include mdc-fab-icon_();
}
}

.mat-mdc-extended-fab {
@include mdc-fab-extended_();

.mat-icon {
@include mdc-fab-extended-icon-padding($mdc-fab-extended-icon-padding, $mdc-fab-extended-label-padding);
}

// For Extended FAB with text label followed by icon.
// We are checking for the a button class because white this is a FAB it uses the same template as button.
.mdc-button__label + .mat-icon {
@include mdc-fab-extended-icon-padding(
$mdc-fab-extended-icon-padding,
$mdc-fab-extended-label-padding,
$is-icon-at-end: true
);
}
}

109 changes: 101 additions & 8 deletions src/material-experimental/mdc-button/fab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,34 @@ import {
MatButtonBase
} from './button-base';
import {ThemePalette} from '@angular/material-experimental/mdc-core';
import {BooleanInput} from '@angular/cdk/coercion';

/**
* Material Design floating action button (FAB) component. These buttons represent the primary
* or most common action for users to interact with.
* See https://material.io/components/buttons-floating-action-button/
*
* The `MatFabButton` class has two appearances: normal and mini.
* The `MatFabButton` class has two appearances: normal and extended.
*/
@Component({
selector: `button[mat-fab], button[mat-mini-fab]`,
selector: `button[mat-fab]`,
templateUrl: 'button.html',
styleUrls: ['fab.css'],
inputs: MAT_BUTTON_INPUTS,
host: MAT_BUTTON_HOST,
// TODO: change to MAT_BUTTON_INPUTS/MAT_BUTTON_HOST with spread after ViewEngine is deprecated
inputs: ['disabled', 'disableRipple', 'color', 'extended'],
host: {
'[class.mdc-fab--extended]': 'extended',
'[class.mat-mdc-extended-fab]': 'extended',
'[attr.disabled]': 'disabled || null',
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
// MDC automatically applies the primary theme color to the button, but we want to support
// an unthemed version. If color is undefined, apply a CSS class that makes it easy to
// select and style this "theme".
'[class.mat-unthemed]': '!color',
// Add a class that applies to all buttons. This makes it easier to target if somebody
// wants to target all Material buttons.
'[class.mat-mdc-button-base]': 'true',
},
exportAs: 'matButton',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
Expand All @@ -49,11 +63,41 @@ export class MatFabButton extends MatButtonBase {
// The FAB by default has its color set to accent.
color = 'accent' as ThemePalette;

extended: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is "extended" the only variation or do we expect more? If we expect more, we can turn it into a string instead, e.g. appearance: 'extended'.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it should be the only variation

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you make this a setter/getter and use coerceBooleanInput that way peopel can do <button mat-fab extended> instead of <button mat-fab [extended]="true"> (coerceBooleanInput does some non-standard type coercion, e.g. '' => true)


constructor(
elementRef: ElementRef, platform: Platform, ngZone: NgZone,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
super(elementRef, platform, ngZone, animationMode);
}

static ngAcceptInputType_extended: BooleanInput;
}

/**
* Material Design mini floating action button (FAB) component. These buttons represent the primary
* or most common action for users to interact with.
* See https://material.io/components/buttons-floating-action-button/
*/
@Component({
selector: `button[mat-mini-fab]`,
templateUrl: 'button.html',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, a thought occurred to me that having multiple components with the same template would lead to duplicate generated code. I checked with Andrew K, and he confirmed. So, rather than introducing a separate component with the same template, we should probably try to have one class with the templateUrl as the base class and then extend all the other buttons from it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe all buttons extend MatButtonBase with the same template (and anchos MatAnchorBase). Should there be another MatFabBase?

styleUrls: ['fab.css'],
inputs: MAT_BUTTON_INPUTS,
host: MAT_BUTTON_HOST,
exportAs: 'matButton',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatMiniFabButton extends MatButtonBase {
// The FAB by default has its color set to accent.
color = 'accent' as ThemePalette;

constructor(
elementRef: ElementRef, platform: Platform, ngZone: NgZone,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
super(elementRef, platform, ngZone, animationMode);
}
}


Expand All @@ -62,14 +106,33 @@ export class MatFabButton extends MatButtonBase {
* are used to provide links for the user to navigate across different routes or pages.
* See https://material.io/components/buttons-floating-action-button/
*
* The `MatFabAnchor` class has two appearances: normal and mini.
* The `MatFabAnchor` class has two appearances: normal and extended.
*/
@Component({
selector: `a[mat-fab], a[mat-mini-fab]`,
selector: `a[mat-fab]`,
templateUrl: 'button.html',
styleUrls: ['fab.css'],
inputs: MAT_ANCHOR_INPUTS,
host: MAT_ANCHOR_HOST,
// TODO: change to MAT_ANCHOR_INPUTS/MAT_ANCHOR_HOST with spread after ViewEngine is deprecated
inputs: ['disabled', 'disableRipple', 'color', 'tabIndex', 'extended'],
host: {
'[class.mdc-fab--extended]': 'extended',
'[class.mat-mdc-extended-fab]': 'extended',
'[attr.disabled]': 'disabled || null',
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',

// Note that we ignore the user-specified tabindex when it's disabled for
// consistency with the `mat-button` applied on native buttons where even
// though they have an index, they're not tabbable.
'[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
'[attr.aria-disabled]': 'disabled.toString()',
// MDC automatically applies the primary theme color to the button, but we want to support
// an unthemed version. If color is undefined, apply a CSS class that makes it easy to
// select and style this "theme".
'[class.mat-unthemed]': '!color',
// Add a class that applies to all buttons. This makes it easier to target if somebody
// wants to target all Material buttons.
'[class.mat-mdc-button-base]': 'true',
},
exportAs: 'matButton, matAnchor',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
Expand All @@ -78,9 +141,39 @@ export class MatFabAnchor extends MatAnchor {
// The FAB by default has its color set to accent.
color = 'accent' as ThemePalette;

extended: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this one too


constructor(
elementRef: ElementRef, platform: Platform, ngZone: NgZone,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
super(elementRef, platform, ngZone, animationMode);
}

static ngAcceptInputType_extended: BooleanInput;
}

/**
* Material Design mini floating action button (FAB) component for anchor elements. Anchor elements
* are used to provide links for the user to navigate across different routes or pages.
* See https://material.io/components/buttons-floating-action-button/
*/
@Component({
selector: `a[mat-mini-fab]`,
templateUrl: 'button.html',
styleUrls: ['fab.css'],
inputs: MAT_ANCHOR_INPUTS,
host: MAT_ANCHOR_HOST,
exportAs: 'matButton, matAnchor',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatMiniFabAnchor extends MatAnchor {
// The FAB by default has its color set to accent.
color = 'accent' as ThemePalette;

constructor(
elementRef: ElementRef, platform: Platform, ngZone: NgZone,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
super(elementRef, platform, ngZone, animationMode);
}
}
6 changes: 5 additions & 1 deletion src/material-experimental/mdc-button/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import {NgModule} from '@angular/core';
import {MatCommonModule, MatRippleModule} from '@angular/material-experimental/mdc-core';
import {MatAnchor, MatButton} from './button';
import {MatFabAnchor, MatFabButton} from './fab';
import {MatFabAnchor, MatFabButton, MatMiniFabAnchor, MatMiniFabButton} from './fab';
import {MatIconAnchor, MatIconButton} from './icon-button';

@NgModule({
Expand All @@ -19,6 +19,8 @@ import {MatIconAnchor, MatIconButton} from './icon-button';
MatButton,
MatIconAnchor,
MatIconButton,
MatMiniFabAnchor,
MatMiniFabButton,
MatFabAnchor,
MatFabButton,
MatCommonModule,
Expand All @@ -27,6 +29,8 @@ import {MatIconAnchor, MatIconButton} from './icon-button';
MatAnchor,
MatButton,
MatIconAnchor,
MatMiniFabAnchor,
MatMiniFabButton,
MatIconButton,
MatFabAnchor,
MatFabButton,
Expand Down