Skip to content

Commit 7bd8843

Browse files
jexjwsjexjws
committed
feat(material/button): change extended FAB parameter from expanded to collapsed
1 parent 4c9196e commit 7bd8843

7 files changed

Lines changed: 19 additions & 26 deletions

File tree

‎goldens/material/button/index.api.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,17 @@ export type MatFabAnchor = MatFabButton;
6767
// @public
6868
export class MatFabButton extends MatButtonBase {
6969
constructor();
70-
expanded: boolean;
70+
collapsed: boolean;
7171
// (undocumented)
7272
extended: boolean;
7373
// (undocumented)
7474
_isFab: boolean;
7575
// (undocumented)
76-
static ngAcceptInputType_expanded: unknown;
76+
static ngAcceptInputType_collapsed: unknown;
7777
// (undocumented)
7878
static ngAcceptInputType_extended: unknown;
7979
// (undocumented)
80-
static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]", "[progressIndicator]"], true, never>;
80+
static ɵcmp: i0.ɵɵComponentDeclaration<MatFabButton, "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", ["matButton", "matAnchor"], { "extended": { "alias": "extended"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, {}, never, [".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd]), [matButtonIcon]:not([iconPositionEnd])", "*", ".material-icons[iconPositionEnd], mat-icon[iconPositionEnd], [matButtonIcon][iconPositionEnd]", "[progressIndicator]"], true, never>;
8181
// (undocumented)
8282
static ɵfac: i0.ɵɵFactoryDeclaration<MatFabButton, never>;
8383
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h4 class="demo-section-header">Buttons</h4>
1616
Search
1717
<mat-icon iconPositionEnd>check</mat-icon>
1818
</button>
19-
<button matFab extended [expanded]="false">
19+
<button matFab extended [collapsed]="true">
2020
<mat-icon>search</mat-icon>
2121
Collapsed
2222
</button>
@@ -139,7 +139,7 @@ <h4 class="demo-section-header">Anchors</h4>
139139
Search
140140
<mat-icon iconPositionEnd>check</mat-icon>
141141
</a>
142-
<a href="//www.google.com" matFab extended [expanded]="false">
142+
<a href="//www.google.com" matFab extended [collapsed]="true">
143143
<mat-icon>search</mat-icon>
144144
Collapsed
145145
</a>
@@ -351,13 +351,13 @@ <h4 class="demo-section-header">FABs</h4>
351351
<h4 class="demo-section-header">Extended FABs</h4>
352352
<section>
353353
<p>
354-
<mat-checkbox [(ngModel)]="extendFABExpanded">Expanded</mat-checkbox>
354+
<mat-checkbox [(ngModel)]="extendFABCollapsed">Collapsed</mat-checkbox>
355355
</p>
356-
<button matFab extended [expanded]="extendFABExpanded">
356+
<button matFab extended [collapsed]="extendFABCollapsed">
357357
<mat-icon>edit</mat-icon>
358358
Compose
359359
</button>
360-
<button matFab extended [expanded]="extendFABExpanded" color="primary">
360+
<button matFab extended [collapsed]="extendFABCollapsed" color="primary">
361361
<mat-icon>edit</mat-icon>
362362
long long long text
363363
</button>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export class ButtonDemo {
5050
showProgress = false;
5151
clickCounter = 0;
5252
toggleDisable = false;
53-
extendFABExpanded = true;
53+
extendFABCollapsed = false;
5454
tooltipText = 'This is a button tooltip!';
5555
disabledInteractive = false;
5656
appearances: MatButtonAppearance[] = ['text', 'elevated', 'outlined', 'filled', 'tonal'];

‎src/material/button/button.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ the `extended` attribute, mini FABs do not.
4343
</button>
4444
```
4545

46-
You can dynamically expand or collapse the extended FAB using the `expanded` input. When `expanded` is set to `false`, the text label is hidden and the extended FAB transitions visually to a circular shape, maintaining the current component structure but occupying less screen estate. By default, `expanded` is unconditionally `true` for all extended FABs.
46+
You can dynamically expand or collapse the extended FAB using the `collapsed` input. When `collapsed` is set to `true`, the text label is hidden and the extended FAB transitions visually to a circular shape, maintaining the current component structure but occupying less screen estate. By default, `collapsed` is unconditionally `false` for all extended FABs.
4747

4848
```html
49-
<button matFab extended [expanded]="isFabExpanded">
49+
<button matFab extended [collapsed]="isFabCollapsed">
5050
<mat-icon>edit</mat-icon>
5151
Compose
5252
</button>

‎src/material/button/button.spec.ts‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ describe('MatButton', () => {
198198
expect(extendedFabButtonDebugEl.nativeElement.classList).toContain('mat-mdc-extended-fab');
199199
});
200200

201-
it('should default expanded to true', () => {
201+
it('should default collapsed to false', () => {
202202
const fixture = TestBed.createComponent(TestApp);
203203
fixture.detectChanges();
204204
const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.extended-fab-test'))!;
@@ -207,30 +207,24 @@ describe('MatButton', () => {
207207
fixture.changeDetectorRef.markForCheck();
208208
fixture.detectChanges();
209209

210-
expect(extendedFabButtonDebugEl.nativeElement.classList).toContain(
211-
'mat-mdc-extended-fab-expanded',
212-
);
213210
expect(extendedFabButtonDebugEl.nativeElement.classList).not.toContain(
214211
'mat-mdc-extended-fab-collapsed',
215212
);
216213
});
217214

218-
it('should add mat-mdc-extended-fab-collapsed class when expanded is false', () => {
215+
it('should add mat-mdc-extended-fab-collapsed class when collapsed is true', () => {
219216
const fixture = TestBed.createComponent(TestApp);
220217
fixture.detectChanges();
221218
const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.extended-fab-test'))!;
222219

223220
fixture.componentInstance.extended = true;
224-
fixture.componentInstance.expanded = false;
221+
fixture.componentInstance.collapsed = true;
225222
fixture.changeDetectorRef.markForCheck();
226223
fixture.detectChanges();
227224

228225
expect(extendedFabButtonDebugEl.nativeElement.classList).toContain(
229226
'mat-mdc-extended-fab-collapsed',
230227
);
231-
expect(extendedFabButtonDebugEl.nativeElement.classList).not.toContain(
232-
'mat-mdc-extended-fab-expanded',
233-
);
234228
});
235229
});
236230

@@ -568,7 +562,7 @@ describe('MatFabDefaultOptions', () => {
568562
Fab Button
569563
<span progressIndicator>Progress...</span>
570564
</button>
571-
<button mat-fab [extended]="extended" [expanded]="expanded" class="extended-fab-test">Extended</button>
565+
<button mat-fab [extended]="extended" [collapsed]="collapsed" class="extended-fab-test">Extended</button>
572566
<button mat-mini-fab [showProgress]="showProgress">
573567
Mini Fab Button
574568
<span progressIndicator>Progress...</span>
@@ -586,7 +580,7 @@ class TestApp {
586580
buttonColor!: ThemePalette;
587581
tabIndex!: number;
588582
extended = false;
589-
expanded = true;
583+
collapsed = false;
590584
disabledInteractive = false;
591585
appearance: MatButtonAppearance = 'text';
592586
showProgress = false;

‎src/material/button/fab.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,6 @@ $fallbacks: m3-fab.get-tokens();
184184
font-weight: token-utils.slot(fab-extended-label-text-weight, $fallbacks);
185185
letter-spacing: token-utils.slot(fab-extended-label-text-tracking, $fallbacks);
186186

187-
// Outer container padding: expanded state (asymmetrical layout)
188187
// LTR: 16px at start (close to icon), 20px at end (close to text)
189188
padding-left: 16px;
190189
padding-right: 20px;

‎src/material/button/fab.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const defaults: MatFabDefaultOptions = {
6161
'class': 'mdc-fab mat-mdc-fab-base mat-mdc-fab',
6262
'[class.mdc-fab--extended]': 'extended',
6363
'[class.mat-mdc-extended-fab]': 'extended',
64-
'[class.mat-mdc-extended-fab-collapsed]': 'extended && !expanded',
64+
'[class.mat-mdc-extended-fab-collapsed]': 'extended && collapsed',
6565
},
6666
exportAs: 'matButton, matAnchor',
6767
encapsulation: ViewEncapsulation.None,
@@ -74,8 +74,8 @@ export class MatFabButton extends MatButtonBase {
7474

7575
@Input({transform: booleanAttribute}) extended: boolean = false;
7676

77-
/** Whether the extended-FAB is currently expanded. Has no effect on non-extended FABs. */
78-
@Input({transform: booleanAttribute}) expanded: boolean = true;
77+
/** Whether the extended-FAB is currently collapsed. Has no effect on non-extended FABs. */
78+
@Input({transform: booleanAttribute}) collapsed: boolean = false;
7979

8080
constructor() {
8181
super();

0 commit comments

Comments
 (0)