From f757c2f06996d8c67cd6645f9dccabf9c07263fa Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 13 Mar 2025 10:43:05 +0100 Subject: [PATCH 1/3] feat(material/button): allow appearance to be set dynamically Adds the following features to the button: * Allows the appearance of a button to be set dynamically using the `matButton` input. * Aligns the terminology with the M3 spec. Currently the names are derived from an old spec. * Adds the ability to set the default appearance for buttons. * Adds a `matIconButton` selector to the icon button for consistency. * Adds a `matFab` selector to the FAB for consistency. * Adds a `matMiniFab` selector to the mini FAB for consistency. All of these changes are backwards-compatible and allow us to evolve the button in the future. Fixes #15367. Fixes #29841. --- src/material/button/button-base.ts | 60 +++--------- src/material/button/button.spec.ts | 52 ++++++++-- src/material/button/button.ts | 111 ++++++++++++++++++---- src/material/button/fab.ts | 16 ++-- src/material/button/icon-button.ts | 6 +- src/material/button/public-api.ts | 2 +- tools/public_api_guard/material/button.md | 16 +++- 7 files changed, 179 insertions(+), 84 deletions(-) diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts index 3b54a1794391..85d998f7c541 100644 --- a/src/material/button/button-base.ts +++ b/src/material/button/button-base.ts @@ -24,6 +24,12 @@ import { import {_StructuralStylesLoader, MatRippleLoader, ThemePalette} from '../core'; import {_CdkPrivateStyleLoader} from '@angular/cdk/private'; +/** + * Possible appearances for a `MatButton`. + * See https://m3.material.io/components/buttons/overview + */ +export type MatButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined'; + /** Object that can be used to configure the default options for the button component. */ export interface MatButtonConfig { /** Whether disabled buttons should be interactive. */ @@ -31,6 +37,9 @@ export interface MatButtonConfig { /** Default palette color to apply to buttons. */ color?: ThemePalette; + + /** Default appearance for plain buttons (not icon buttons or FABs). */ + defaultAppearance?: MatButtonAppearance; } /** Injection token that can be used to provide the default options the button component. */ @@ -58,45 +67,14 @@ function transformTabIndex(value: unknown): number | undefined { return value == null ? undefined : numberAttribute(value); } -/** List of classes to add to buttons instances based on host attribute selector. */ -const HOST_SELECTOR_MDC_CLASS_PAIR: {attribute: string; mdcClasses: string[]}[] = [ - { - attribute: 'mat-button', - mdcClasses: ['mdc-button', 'mat-mdc-button'], - }, - { - attribute: 'mat-flat-button', - mdcClasses: ['mdc-button', 'mdc-button--unelevated', 'mat-mdc-unelevated-button'], - }, - { - attribute: 'mat-raised-button', - mdcClasses: ['mdc-button', 'mdc-button--raised', 'mat-mdc-raised-button'], - }, - { - attribute: 'mat-stroked-button', - mdcClasses: ['mdc-button', 'mdc-button--outlined', 'mat-mdc-outlined-button'], - }, - { - attribute: 'mat-fab', - mdcClasses: ['mdc-fab', 'mat-mdc-fab-base', 'mat-mdc-fab'], - }, - { - attribute: 'mat-mini-fab', - mdcClasses: ['mdc-fab', 'mat-mdc-fab-base', 'mdc-fab--mini', 'mat-mdc-mini-fab'], - }, - { - attribute: 'mat-icon-button', - mdcClasses: ['mdc-icon-button', 'mat-mdc-icon-button'], - }, -]; - /** Base class for all buttons. */ @Directive() export class MatButtonBase implements AfterViewInit, OnDestroy { - _elementRef = inject(ElementRef); + _elementRef = inject>(ElementRef); _ngZone = inject(NgZone); _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true}); + protected readonly _config = inject(MAT_BUTTON_CONFIG, {optional: true}); private readonly _focusMonitor = inject(FocusMonitor); private _cleanupClick: (() => void) | undefined; private _renderer = inject(Renderer2); @@ -179,22 +157,12 @@ export class MatButtonBase implements AfterViewInit, OnDestroy { constructor() { inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader); - const config = inject(MAT_BUTTON_CONFIG, {optional: true}); - const element: HTMLElement = this._elementRef.nativeElement; - const classList = (element as HTMLElement).classList; + const element = this._elementRef.nativeElement; this._isAnchor = element.tagName === 'A'; - this.disabledInteractive = config?.disabledInteractive ?? false; - this.color = config?.color ?? null; + this.disabledInteractive = this._config?.disabledInteractive ?? false; + this.color = this._config?.color ?? null; this._rippleLoader?.configureRipple(element, {className: 'mat-mdc-button-ripple'}); - - // For each of the variant selectors that is present in the button's host - // attributes, add the correct corresponding MDC classes. - for (const {attribute, mdcClasses} of HOST_SELECTOR_MDC_CLASS_PAIR) { - if (element.hasAttribute(attribute)) { - classList.add(...mdcClasses); - } - } } ngAfterViewInit() { diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts index 300684f6c214..f8f9d3aca99f 100644 --- a/src/material/button/button.spec.ts +++ b/src/material/button/button.spec.ts @@ -1,22 +1,18 @@ import {createMouseEvent, dispatchEvent} from '@angular/cdk/testing/private'; import {ApplicationRef, Component} from '@angular/core'; -import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; import {ThemePalette} from '../core'; import {By} from '@angular/platform-browser'; import { MAT_BUTTON_CONFIG, MAT_FAB_DEFAULT_OPTIONS, + MatButtonAppearance, + MatButtonConfig, MatButtonModule, MatFabDefaultOptions, } from './index'; describe('MatButton', () => { - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [MatButtonModule, TestApp], - }); - })); - // General button tests it('should apply class based on color attribute', () => { let fixture = TestBed.createComponent(TestApp); @@ -84,6 +80,45 @@ describe('MatButton', () => { expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true); }); + it('should be able to change the button appearance dynamically', () => { + const fixture = TestBed.createComponent(TestApp); + const button = fixture.nativeElement.querySelector('.dynamic') as HTMLElement; + fixture.detectChanges(); + + expect(button.classList).toContain('mat-mdc-button'); + expect(button.classList).not.toContain('mat-mdc-outlined-button'); + expect(button.classList).not.toContain('mat-mdc-raised-button'); + + fixture.componentInstance.appearance = 'outlined'; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + expect(button.classList).not.toContain('mat-mdc-button'); + expect(button.classList).toContain('mat-mdc-outlined-button'); + expect(button.classList).not.toContain('mat-mdc-raised-button'); + + fixture.componentInstance.appearance = 'elevated'; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + expect(button.classList).not.toContain('mat-mdc-button'); + expect(button.classList).not.toContain('mat-mdc-outlined-button'); + expect(button.classList).toContain('mat-mdc-raised-button'); + }); + + it('should be able to configure the default button appearance', () => { + const config: MatButtonConfig = { + defaultAppearance: 'outlined', + }; + + TestBed.configureTestingModule({ + providers: [{provide: MAT_BUTTON_CONFIG, useValue: config}], + }); + + const fixture = TestBed.createComponent(TestApp); + const button = fixture.nativeElement.querySelector('.default-appearance') as HTMLElement; + fixture.detectChanges(); + expect(button.classList).toContain('mat-mdc-outlined-button'); + }); + describe('button[mat-fab]', () => { it('should have accent palette by default', () => { const fixture = TestBed.createComponent(TestApp); @@ -422,6 +457,8 @@ describe('MatFabDefaultOptions', () => { + + `, imports: [MatButtonModule], }) @@ -433,6 +470,7 @@ class TestApp { tabIndex: number; extended = false; disabledInteractive = false; + appearance: MatButtonAppearance = 'text'; increment() { this.clickCount++; diff --git a/src/material/button/button.ts b/src/material/button/button.ts index 125aebfa4fd6..0fcb4661ab6d 100644 --- a/src/material/button/button.ts +++ b/src/material/button/button.ts @@ -6,23 +6,29 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; -import {MAT_BUTTON_HOST, MatButtonBase} from './button-base'; +import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core'; +import {MAT_BUTTON_HOST, MatButtonAppearance, MatButtonBase} from './button-base'; + +/** + * Classes that need to be set for each appearance of the button. + * Note that we use a `Map` here to avoid issues with property renaming. + */ +const APPEARANCE_CLASSES: Map = new Map([ + ['text', ['mat-mdc-button']], + ['filled', ['mdc-button--unelevated', 'mat-mdc-unelevated-button']], + ['elevated', ['mdc-button--raised', 'mat-mdc-raised-button']], + ['outlined', ['mdc-button--outlined', 'mat-mdc-outlined-button']], +]); /** * Material Design button component. Users interact with a button to perform an action. - * See https://material.io/components/buttons - * - * The `MatButton` class applies to native button elements and captures the appearances for - * "text button", "outlined button", and "contained button" per the Material Design - * specification. `MatButton` additionally captures an additional "flat" appearance, which matches - * "contained" but without elevation. + * See https://m3.material.io/components/buttons/overview */ @Component({ selector: ` - button[mat-button], button[mat-raised-button], button[mat-flat-button], - button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], - a[mat-stroked-button] + button[matButton], a[matButton], button[mat-button], button[mat-raised-button], + button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], + a[mat-flat-button], a[mat-stroked-button] `, templateUrl: 'button.html', styleUrls: ['button.css', 'button-high-contrast.css'], @@ -31,18 +37,87 @@ import {MAT_BUTTON_HOST, MatButtonBase} from './button-base'; encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MatButton extends MatButtonBase {} +export class MatButton extends MatButtonBase { + /** Appearance of the button. */ + @Input('matButton') + get appearance(): MatButtonAppearance | null { + return this._appearance; + } + set appearance(value: MatButtonAppearance | '') { + // Allow empty string so users can do `` + // without having to write out `="text"` every time. + this.setAppearance(value || this._config?.defaultAppearance || 'text'); + } + private _appearance: MatButtonAppearance | null = null; + + constructor(...args: unknown[]); + + constructor() { + super(); + const element = this._elementRef.nativeElement; + const inferredAppearance = _inferAppearance(element); + + // This class is common across all the appearances so we add it ahead of time. + element.classList.add('mdc-button'); + + // Only set the appearance if we managed to infer it from the static attributes, rather than + // doing something like `setAppearance(inferredAppearance || 'text')`, because doing so can + // cause the fallback appearance's classes to be set and then immediately replaced when + // the input value is assigned. + if (inferredAppearance) { + this.setAppearance(inferredAppearance); + } + } + + /** Programmatically sets the appearance of the button. */ + setAppearance(appearance: MatButtonAppearance): void { + if (appearance === this._appearance) { + return; + } + + const classList = this._elementRef.nativeElement.classList; + const previousClasses = this._appearance ? APPEARANCE_CLASSES.get(this._appearance) : null; + const newClasses = APPEARANCE_CLASSES.get(appearance)!; + + if ((typeof ngDevMode === 'undefined' || ngDevMode) && !newClasses) { + throw new Error(`Unsupported MatButton appearance "${appearance}"`); + } + + if (previousClasses) { + classList.remove(...previousClasses); + } + + classList.add(...newClasses); + this._appearance = appearance; + } +} + +/** Infers the button's appearance from its static attributes. */ +function _inferAppearance(button: HTMLElement): MatButtonAppearance | null { + if (button.hasAttribute('mat-raised-button')) { + return 'elevated'; + } + + if (button.hasAttribute('mat-stroked-button')) { + return 'outlined'; + } + + if (button.hasAttribute('mat-flat-button')) { + return 'filled'; + } + + if (button.hasAttribute('mat-button')) { + return 'text'; + } + + return null; +} // tslint:disable:variable-name /** * Material Design button 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 - * - * The `MatAnchor` class applies to native anchor elements and captures the appearances for - * "text button", "outlined button", and "contained button" per the Material Design - * specification. `MatAnchor` additionally captures an additional "flat" appearance, which matches - * "contained" but without elevation. + * See https://m3.material.io/components/buttons/overview */ export const MatAnchor = MatButton; export type MatAnchor = MatButton; diff --git a/src/material/button/fab.ts b/src/material/button/fab.ts index fa482ebe7453..ce5ab638a937 100644 --- a/src/material/button/fab.ts +++ b/src/material/button/fab.ts @@ -58,12 +58,12 @@ const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY(); /** * 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/ + * See https://m3.material.io/components/floating-action-button/overview * * The `MatFabButton` class has two appearances: normal and extended. */ @Component({ - selector: `button[mat-fab], a[mat-fab]`, + selector: `button[mat-fab], a[mat-fab], button[matFab], a[matFab]`, templateUrl: 'button.html', styleUrl: 'fab.css', host: { @@ -86,6 +86,8 @@ export class MatFabButton extends MatButtonBase { constructor() { super(); + const element = this._elementRef.nativeElement; + element.classList.add('mdc-fab', 'mat-mdc-fab-base', 'mat-mdc-fab'); this._options = this._options || defaults; this.color = this._options!.color || defaults.color; } @@ -94,10 +96,10 @@ export class MatFabButton extends MatButtonBase { /** * 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/ + * See https://m3.material.io/components/floating-action-button/overview */ @Component({ - selector: `button[mat-mini-fab], a[mat-mini-fab]`, + selector: `button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]`, templateUrl: 'button.html', styleUrl: 'fab.css', host: MAT_BUTTON_HOST, @@ -114,6 +116,8 @@ export class MatMiniFabButton extends MatButtonBase { constructor() { super(); + const element = this._elementRef.nativeElement; + element.classList.add('mdc-fab', 'mat-mdc-fab-base', 'mdc-fab--mini', 'mat-mdc-mini-fab'); this._options = this._options || defaults; this.color = this._options!.color || defaults.color; } @@ -123,7 +127,7 @@ export class MatMiniFabButton extends MatButtonBase { /** * Material Design 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/ + * See https://m3.material.io/components/floating-action-button/overview * * The `MatFabAnchor` class has two appearances: normal and extended. */ @@ -133,7 +137,7 @@ export type MatFabAnchor = MatFabButton; /** * 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/ + * See https://m3.material.io/components/floating-action-button/overview */ export const MatMiniFabAnchor = MatMiniFabButton; export type MatMiniFabAnchor = MatMiniFabButton; diff --git a/src/material/button/icon-button.ts b/src/material/button/icon-button.ts index df433677775b..90cf49864c55 100644 --- a/src/material/button/icon-button.ts +++ b/src/material/button/icon-button.ts @@ -15,7 +15,7 @@ import {MAT_BUTTON_HOST, MatButtonBase} from './button-base'; * See https://material.io/develop/web/components/buttons/icon-buttons/ */ @Component({ - selector: `button[mat-icon-button], a[mat-icon-button]`, + selector: `button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]`, templateUrl: 'icon-button.html', styleUrls: ['icon-button.css', 'button-high-contrast.css'], host: MAT_BUTTON_HOST, @@ -28,7 +28,9 @@ export class MatIconButton extends MatButtonBase { constructor() { super(); - this._rippleLoader.configureRipple(this._elementRef.nativeElement, {centered: true}); + const element = this._elementRef.nativeElement; + element.classList.add('mdc-icon-button', 'mat-mdc-icon-button'); + this._rippleLoader.configureRipple(element, {centered: true}); } } diff --git a/src/material/button/public-api.ts b/src/material/button/public-api.ts index fa631df31302..97022c38a573 100644 --- a/src/material/button/public-api.ts +++ b/src/material/button/public-api.ts @@ -10,4 +10,4 @@ export * from './button'; export * from './fab'; export * from './icon-button'; export * from './module'; -export {MAT_BUTTON_CONFIG, MatButtonConfig} from './button-base'; +export {MAT_BUTTON_CONFIG, MatButtonAppearance, MatButtonConfig} from './button-base'; diff --git a/tools/public_api_guard/material/button.md b/tools/public_api_guard/material/button.md index 779bc8c9c7bb..508b149edf41 100644 --- a/tools/public_api_guard/material/button.md +++ b/tools/public_api_guard/material/button.md @@ -33,15 +33,23 @@ export type MatAnchor = MatButton; // @public export class MatButton extends MatButtonBase { + constructor(...args: unknown[]); + get appearance(): MatButtonAppearance | null; + set appearance(value: MatButtonAppearance | ''); + setAppearance(appearance: MatButtonAppearance): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } +// @public +export type MatButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined'; + // @public export interface MatButtonConfig { color?: ThemePalette; + defaultAppearance?: MatButtonAppearance; disabledInteractive?: boolean; } @@ -71,7 +79,7 @@ export class MatFabButton extends MatButtonBase { // (undocumented) static ngAcceptInputType_extended: unknown; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -91,7 +99,7 @@ export type MatIconAnchor = MatIconButton; export class MatIconButton extends MatButtonBase { constructor(...args: unknown[]); // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -108,7 +116,7 @@ export class MatMiniFabButton extends MatButtonBase { // (undocumented) _isFab: boolean; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } From 090882812b6add410667d99bdb7e865653ee5bfd Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 13 Mar 2025 10:54:40 +0100 Subject: [PATCH 2/3] fix(material/button): align harness with new terminology Updates the button harness to align with the terminology for button appearances. BREAKING CHANGE: * `ButtonVariant` which is returned by `MatButtonHarness.getVariant` no longer includes the appearance of the button. Use `MatButtonHarness.getAppearance` instead. --- .../button/testing/button-harness-filters.ts | 8 +- .../button/testing/button-harness.spec.ts | 117 +++++++++++------- src/material/button/testing/button-harness.ts | 61 +++++++-- .../material/button-testing.md | 7 +- 4 files changed, 130 insertions(+), 63 deletions(-) diff --git a/src/material/button/testing/button-harness-filters.ts b/src/material/button/testing/button-harness-filters.ts index f6a55ae80673..3ecba00636b2 100644 --- a/src/material/button/testing/button-harness-filters.ts +++ b/src/material/button/testing/button-harness-filters.ts @@ -8,8 +8,11 @@ import {BaseHarnessFilters} from '@angular/cdk/testing'; +/** Possible button variants. */ +export type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab'; + /** Possible button appearances. */ -export type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab'; +export type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined'; /** A set of criteria that can be used to filter a list of button harness instances. */ export interface ButtonHarnessFilters extends BaseHarnessFilters { @@ -19,6 +22,9 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters { /** Only find instances with a variant. */ variant?: ButtonVariant; + /** Only find instances with a specific appearance. */ + appearance?: ButtonAppearance; + /** Only find instances which match the given disabled state. */ disabled?: boolean; } diff --git a/src/material/button/testing/button-harness.spec.ts b/src/material/button/testing/button-harness.spec.ts index 963519892949..fe13608d7a4a 100644 --- a/src/material/button/testing/button-harness.spec.ts +++ b/src/material/button/testing/button-harness.spec.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; -import {ComponentFixture, inject, TestBed} from '@angular/core/testing'; -import {Platform, PlatformModule} from '@angular/cdk/platform'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {Platform} from '@angular/cdk/platform'; import {HarnessLoader, parallel} from '@angular/cdk/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {MatButtonModule} from '../module'; @@ -14,19 +14,12 @@ describe('MatButtonHarness', () => { let platform: Platform; beforeEach(() => { - TestBed.configureTestingModule({ - imports: [MatButtonModule, MatIconModule, PlatformModule, ButtonHarnessTest], - }); - fixture = TestBed.createComponent(ButtonHarnessTest); fixture.detectChanges(); loader = TestbedHarnessEnvironment.loader(fixture); + platform = TestBed.inject(Platform); }); - beforeEach(inject([Platform], (p: Platform) => { - platform = p; - })); - it('should load all button harnesses', async () => { const buttons = await loader.getAllHarnesses(MatButtonHarness); expect(buttons.length).toBe(15); @@ -53,24 +46,24 @@ describe('MatButtonHarness', () => { }); it('should get disabled state', async () => { - // Grab each combination of [enabled, disabled] ⨯ [button, anchor] - const [disabledFlatButton, enabledFlatAnchor] = await loader.getAllHarnesses( - MatButtonHarness.with({text: /flat/i}), + // Grab each combination of [enabled, disabled] x [button, anchor] + const [disabledFilledButton, enabledFilledAnchor] = await loader.getAllHarnesses( + MatButtonHarness.with({text: /filled/i}), ); - const [enabledRaisedButton, disabledRaisedAnchor] = await loader.getAllHarnesses( - MatButtonHarness.with({text: /raised/i}), + const [enabledElevatedButton, disabledElevatedAnchor] = await loader.getAllHarnesses( + MatButtonHarness.with({text: /elevated/i}), ); - expect(await enabledFlatAnchor.isDisabled()).toBe(false); - expect(await disabledFlatButton.isDisabled()).toBe(true); - expect(await enabledRaisedButton.isDisabled()).toBe(false); - expect(await disabledRaisedAnchor.isDisabled()).toBe(true); + expect(await enabledFilledAnchor.isDisabled()).toBe(false); + expect(await disabledFilledButton.isDisabled()).toBe(true); + expect(await enabledElevatedButton.isDisabled()).toBe(false); + expect(await disabledElevatedAnchor.isDisabled()).toBe(true); }); it('should get button text', async () => { const [firstButton, secondButton] = await loader.getAllHarnesses(MatButtonHarness); expect(await firstButton.getText()).toBe('Basic button'); - expect(await secondButton.getText()).toBe('Flat button'); + expect(await secondButton.getText()).toBe('Filled button'); }); it('should focus and blur a button', async () => { @@ -99,7 +92,7 @@ describe('MatButtonHarness', () => { return; } - const button = await loader.getHarness(MatButtonHarness.with({text: 'Flat button'})); + const button = await loader.getHarness(MatButtonHarness.with({text: 'Filled button'})); await button.click(); expect(fixture.componentInstance.clicked).toBe(false); @@ -116,32 +109,60 @@ describe('MatButtonHarness', () => { expect(await favIcon.getName()).toBe('favorite'); }); - it('should load all button harnesses', async () => { + it('should be able to ge the type variant of the button', async () => { const buttons = await loader.getAllHarnesses(MatButtonHarness); const variants = await parallel(() => buttons.map(button => button.getVariant())); expect(variants).toEqual([ 'basic', - 'flat', - 'raised', - 'stroked', + 'basic', + 'basic', + 'basic', 'icon', 'icon', 'fab', 'mini-fab', 'basic', - 'flat', - 'raised', - 'stroked', + 'basic', + 'basic', + 'basic', 'icon', 'fab', 'mini-fab', ]); }); + it('should be able to get the appearance of the button', async () => { + const buttons = await loader.getAllHarnesses(MatButtonHarness); + const appearances = await parallel(() => buttons.map(button => button.getAppearance())); + + expect(appearances).toEqual([ + 'text', + 'filled', + 'elevated', + 'outlined', + null, + null, + null, + null, + 'text', + 'filled', + 'elevated', + 'outlined', + null, + null, + null, + ]); + }); + it('should be able to filter buttons based on their variant', async () => { - const button = await loader.getHarness(MatButtonHarness.with({variant: 'flat'})); - expect(await button.getText()).toBe('Flat button'); + const button = await loader.getHarness(MatButtonHarness.with({variant: 'fab'})); + expect(await button.getText()).toBe('Fab button'); + }); + + it('should be able to filter buttons based on their appearance', async () => { + const button = await loader.getHarness(MatButtonHarness.with({appearance: 'filled'})); + expect(await button.getText()).toBe('Filled button'); }); }); @@ -149,32 +170,32 @@ describe('MatButtonHarness', () => { // Include one of each type of button selector to ensure that they're all captured by // the harness's selector. template: ` - - - - - + + - - - - - Basic anchor - Flat anchor - Raised anchor - Stroked anchor - Icon anchor - Fab anchor - Mini Fab anchor + + + + Basic anchor + Filled anchor + Elevated anchor + Stroked anchor + Icon anchor + Fab anchor + Mini Fab anchor `, - imports: [MatButtonModule, MatIconModule, PlatformModule], + imports: [MatButtonModule, MatIconModule], }) class ButtonHarnessTest { disabled = true; diff --git a/src/material/button/testing/button-harness.ts b/src/material/button/testing/button-harness.ts index 23f3030da12e..b711387e7fd5 100644 --- a/src/material/button/testing/button-harness.ts +++ b/src/material/button/testing/button-harness.ts @@ -12,13 +12,14 @@ import { ContentContainerComponentHarness, HarnessPredicate, } from '@angular/cdk/testing'; -import {ButtonHarnessFilters, ButtonVariant} from './button-harness-filters'; +import {ButtonAppearance, ButtonHarnessFilters, ButtonVariant} from './button-harness-filters'; /** Harness for interacting with a mat-button in tests. */ export class MatButtonHarness extends ContentContainerComponentHarness { // TODO(jelbourn) use a single class, like `.mat-button-base` - static hostSelector = `[mat-button], [mat-raised-button], [mat-flat-button], - [mat-icon-button], [mat-stroked-button], [mat-fab], [mat-mini-fab]`; + static hostSelector = `[matButton], [mat-button], [matIconButton], [matFab], [matMiniFab], + [mat-raised-button], [mat-flat-button], [mat-icon-button], [mat-stroked-button], [mat-fab], + [mat-mini-fab]`; /** * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes. @@ -26,6 +27,7 @@ export class MatButtonHarness extends ContentContainerComponentHarness { * - `selector` finds a button whose host element matches the given selector. * - `text` finds a button with specific text content. * - `variant` finds buttons matching a specific variant. + * - `appearance` finds buttons matching a specific appearance. * @return a `HarnessPredicate` configured with the given options. */ static with( @@ -39,6 +41,9 @@ export class MatButtonHarness extends ContentContainerComponentHarness { .addOption('variant', options.variant, (harness, variant) => HarnessPredicate.stringMatches(harness.getVariant(), variant), ) + .addOption('appearance', options.appearance, (harness, appearance) => + HarnessPredicate.stringMatches(harness.getAppearance(), appearance), + ) .addOption('disabled', options.disabled, async (harness, disabled) => { return (await harness.isDisabled()) === disabled; }); @@ -91,20 +96,50 @@ export class MatButtonHarness extends ContentContainerComponentHarness { async getVariant(): Promise { const host = await this.host(); - if ((await host.getAttribute('mat-raised-button')) != null) { - return 'raised'; - } else if ((await host.getAttribute('mat-flat-button')) != null) { - return 'flat'; - } else if ((await host.getAttribute('mat-icon-button')) != null) { + // TODO(crisbeto): we're checking both classes and attributes for backwards compatibility + // with some internal apps that were applying the attribute without importing the directive. + // Really we should be only targeting the classes. + if ( + (await host.hasClass('mat-mdc-icon-button')) || + (await host.getAttribute('mat-icon-button')) != null + ) { return 'icon'; - } else if ((await host.getAttribute('mat-stroked-button')) != null) { - return 'stroked'; - } else if ((await host.getAttribute('mat-fab')) != null) { - return 'fab'; - } else if ((await host.getAttribute('mat-mini-fab')) != null) { + } + + if ( + (await host.hasClass('mat-mdc-mini-fab')) || + (await host.getAttribute('mat-mini-fab')) != null + ) { return 'mini-fab'; } + if ((await host.hasClass('mat-mdc-fab')) || (await host.getAttribute('mat-fab')) != null) { + return 'fab'; + } + return 'basic'; } + + /** Gets the appearance of the button. */ + async getAppearance(): Promise { + const host = await this.host(); + + if (await host.hasClass('mat-mdc-outlined-button')) { + return 'outlined'; + } + + if (await host.hasClass('mat-mdc-raised-button')) { + return 'elevated'; + } + + if (await host.hasClass('mat-mdc-unelevated-button')) { + return 'filled'; + } + + if (await host.hasClass('mat-mdc-button')) { + return 'text'; + } + + return null; + } } diff --git a/tools/public_api_guard/material/button-testing.md b/tools/public_api_guard/material/button-testing.md index d8709c6bc07b..7f7bf13f38db 100644 --- a/tools/public_api_guard/material/button-testing.md +++ b/tools/public_api_guard/material/button-testing.md @@ -9,15 +9,19 @@ import { ComponentHarnessConstructor } from '@angular/cdk/testing'; import { ContentContainerComponentHarness } from '@angular/cdk/testing'; import { HarnessPredicate } from '@angular/cdk/testing'; +// @public +export type ButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined'; + // @public export interface ButtonHarnessFilters extends BaseHarnessFilters { + appearance?: ButtonAppearance; disabled?: boolean; text?: string | RegExp; variant?: ButtonVariant; } // @public -export type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab'; +export type ButtonVariant = 'basic' | 'icon' | 'fab' | 'mini-fab'; // @public export class MatButtonHarness extends ContentContainerComponentHarness { @@ -26,6 +30,7 @@ export class MatButtonHarness extends ContentContainerComponentHarness { click(location: 'center'): Promise; click(): Promise; focus(): Promise; + getAppearance(): Promise; getText(): Promise; getVariant(): Promise; // (undocumented) From 2347d69ef0f0d674e16af741edc179af80b3496d Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 13 Mar 2025 11:29:45 +0100 Subject: [PATCH 3/3] refactor(multiple): switch button selectors Reworks the various places where we have buttons to use the new selectors. --- .../src/app/app.component.html | 2 +- .../ng-update/html-parsing/angular.ts | 2 +- ...text-field-autofill-directive-example.html | 2 +- .../text-field-autofill-monitor-example.html | 2 +- .../cdk-tree-complex-example.html | 2 +- .../cdk-tree-custom-key-manager-example.html | 4 +- ...k-tree-flat-children-accessor-example.html | 4 +- .../cdk-tree-flat-level-accessor-example.html | 4 +- .../cdk-tree-flat/cdk-tree-flat-example.html | 4 +- ...tree-nested-children-accessor-example.html | 4 +- ...dk-tree-nested-level-accessor-example.html | 4 +- .../cdk-tree-nested-example.html | 4 +- ...over-edit-cell-span-mat-table-example.html | 12 +- .../popover-edit-mat-table-flex-example.html | 10 +- .../popover-edit-mat-table-example.html | 22 +- .../badge-harness/badge-harness-example.html | 6 +- .../badge-overview-example.html | 4 +- .../bottom-sheet-overview-example.html | 2 +- .../button-disabled-interactive-example.html | 4 +- .../button-harness-example.html | 2 +- .../button-overview-example.html | 54 ++-- .../button-overview-example.ts | 2 +- .../card-actions/card-actions-example.html | 4 +- .../card/card-fancy/card-fancy-example.html | 4 +- .../card-harness/card-harness-example.html | 4 +- .../chips-form-control-example.html | 4 +- .../elevation-overview-example.html | 2 +- .../datepicker-actions-example.html | 8 +- .../datepicker-api-example.html | 2 +- .../datepicker-custom-header-example.ts | 8 +- .../datepicker-dialog-example-dialog.html | 4 +- .../datepicker-dialog-example.html | 2 +- .../datepicker-locale-example.html | 2 +- .../dialog-animations-example-dialog.html | 4 +- .../dialog-animations-example.html | 4 +- .../dialog-content-example-dialog.html | 4 +- .../dialog-content-example.html | 2 +- .../dialog-data/dialog-data-example.html | 2 +- .../dialog-elements-example-dialog.html | 2 +- .../dialog-elements-example.html | 2 +- .../dialog-from-menu-example-dialog.html | 2 +- .../dialog-from-menu-example.html | 2 +- .../dialog-overview-example-dialog.html | 4 +- .../dialog-overview-example.html | 2 +- ...expansion-expand-collapse-all-example.html | 4 +- .../expansion-steps-example.html | 10 +- .../form-field-prefix-suffix-example.html | 2 +- .../input-clearable-example.html | 2 +- .../menu/menu-icons/menu-icons-example.html | 2 +- .../menu/menu-nested/menu-nested-example.html | 2 +- .../menu-overview/menu-overview-example.html | 2 +- .../menu-position/menu-position-example.html | 8 +- .../sidenav-autosize-example.html | 4 +- .../sidenav-backdrop-example.html | 2 +- ...denav-configurable-focus-trap-example.html | 4 +- .../sidenav-disable-close-example.html | 4 +- .../sidenav-fixed/sidenav-fixed-example.html | 2 +- .../sidenav-mode/sidenav-mode-example.html | 4 +- .../sidenav-open-close-example.html | 2 +- .../sidenav-responsive-example.html | 2 +- .../slide-toggle-forms-example.html | 4 +- ...bar-annotated-component-example-snack.html | 2 +- ...snack-bar-annotated-component-example.html | 2 +- .../snack-bar-component-example.html | 2 +- .../snack-bar-overview-example.html | 2 +- .../snack-bar-position-example.html | 2 +- .../stepper-animations-example.html | 10 +- .../stepper-editable-example.html | 12 +- .../stepper-errors-example.html | 10 +- .../stepper-header-position-example.html | 10 +- .../stepper-intl/stepper-intl-example.html | 10 +- ...stepper-label-position-bottom-example.html | 10 +- .../stepper-lazy-content-example.html | 8 +- .../stepper-optional-example.html | 12 +- .../stepper-overview-example.html | 12 +- .../stepper-responsive-example.html | 12 +- .../stepper-states-example.html | 16 +- .../stepper-vertical-example.html | 12 +- .../table-dynamic-array-data-example.html | 4 +- .../table-dynamic-columns-example.html | 6 +- ...table-dynamic-observable-data-example.html | 4 +- .../table-expandable-rows-example.html | 2 +- .../table-sticky-complex-flex-example.html | 4 +- .../table-sticky-complex-example.html | 4 +- .../table-wrapped/table-wrapped-example.html | 4 +- .../tab-group-dynamic-example.html | 4 +- .../tab-nav-bar-basic-example.html | 2 +- .../timepicker-locale-example.html | 2 +- .../toolbar-basic/toolbar-basic-example.html | 6 +- .../toolbar-harness-example.html | 4 +- .../toolbar-overview-example.html | 6 +- .../tooltip-auto-hide-example.html | 2 +- .../tooltip-custom-class-example.html | 2 +- .../tooltip-delay/tooltip-delay-example.html | 2 +- .../tooltip-disabled-example.html | 2 +- .../tooltip-manual-example.html | 10 +- .../tooltip-message-example.html | 2 +- .../tooltip-modified-defaults-example.html | 2 +- .../tooltip-overview-example.html | 2 +- .../tooltip-position-at-origin-example.html | 2 +- .../tooltip-position-example.html | 2 +- .../tree-dynamic/tree-dynamic-example.html | 4 +- ...-flat-child-accessor-overview-example.html | 4 +- .../tree-flat-overview-example.html | 4 +- .../tree-harness/tree-harness-example.html | 4 +- ...ree-legacy-keyboard-interface-example.html | 2 +- .../tree-loadmore/tree-loadmore-example.html | 4 +- ...ested-child-accessor-overview-example.html | 6 +- .../tree-nested-overview-example.html | 6 +- .../autocomplete/autocomplete-demo.html | 14 +- src/dev-app/autocomplete/autocomplete-demo.ts | 2 +- src/dev-app/badge/badge-demo.html | 8 +- .../bottom-sheet/bottom-sheet-demo.html | 4 +- src/dev-app/button/button-demo.html | 260 ++++++------------ src/dev-app/button/button-demo.ts | 2 + src/dev-app/card/card-demo.html | 16 +- src/dev-app/chips/chips-demo.html | 8 +- .../connected-overlay-demo.html | 4 +- src/dev-app/datepicker/custom-header.html | 8 +- src/dev-app/datepicker/datepicker-demo.html | 38 +-- src/dev-app/datepicker/datepicker-demo.ts | 2 +- src/dev-app/dev-app/dev-app-404.ts | 2 +- src/dev-app/dev-app/dev-app-layout.html | 26 +- src/dev-app/dialog/dialog-demo.html | 6 +- src/dev-app/dialog/dialog-demo.ts | 8 +- src/dev-app/drawer/drawer-demo.html | 22 +- src/dev-app/expansion/expansion-demo.html | 24 +- src/dev-app/focus-trap/focus-trap-demo.html | 18 +- .../focus-trap/focus-trap-dialog-demo.html | 4 +- src/dev-app/google-map/google-map-demo.html | 2 +- src/dev-app/grid-list/grid-list-demo.html | 2 +- .../input-modality-detector-demo.html | 2 +- src/dev-app/input/input-demo.html | 20 +- src/dev-app/list/list-demo.html | 18 +- .../live-announcer/live-announcer-demo.html | 8 +- src/dev-app/menu/menu-demo.html | 18 +- src/dev-app/performance/performance-demo.html | 14 +- .../progress-bar/progress-bar-demo.html | 12 +- .../progress-spinner-demo.html | 4 +- src/dev-app/radio/radio-demo.html | 4 +- src/dev-app/ripple/ripple-demo.html | 8 +- src/dev-app/select/select-demo.html | 42 +-- src/dev-app/sidenav/sidenav-demo.html | 16 +- .../slide-toggle/slide-toggle-demo.html | 2 +- src/dev-app/slider/slider-demo.html | 8 +- src/dev-app/snack-bar/snack-bar-demo.html | 4 +- src/dev-app/stepper/stepper-demo.html | 50 ++-- .../table-scroll-container-demo.html | 4 +- src/dev-app/timepicker/timepicker-demo.html | 2 +- src/dev-app/toolbar/toolbar-demo.html | 28 +- .../virtual-scroll/virtual-scroll-demo.html | 4 +- .../youtube-player/youtube-player-demo.html | 2 +- src/material/button/button.md | 40 +-- .../card/testing/card-harness.spec.ts | 4 +- src/material/datepicker/calendar-header.html | 6 +- .../datepicker/datepicker-actions.spec.ts | 4 +- .../datepicker/datepicker-content.html | 2 +- .../datepicker/datepicker-toggle.html | 2 +- src/material/dialog/dialog.md | 6 +- src/material/list/list.md | 2 +- src/material/menu/menu.md | 8 +- src/material/paginator/paginator.html | 8 +- ...__name@dasherize__.component.html.template | 4 +- ...__name@dasherize__.component.html.template | 2 +- ...__name@dasherize__.component.html.template | 2 +- ...__name@dasherize__.component.html.template | 4 +- src/material/snack-bar/simple-snack-bar.html | 2 +- src/material/stepper/stepper.md | 6 +- src/material/stepper/stepper.spec.ts | 32 +-- .../timepicker/timepicker-toggle.html | 2 +- .../toolbar/testing/toolbar-harness.spec.ts | 4 +- .../kitchen-sink/kitchen-sink.html | 40 +-- 172 files changed, 705 insertions(+), 773 deletions(-) diff --git a/integration/yarn-pnp-compat/src/app/app.component.html b/integration/yarn-pnp-compat/src/app/app.component.html index 6e365b8fa10f..2d22d23c7b88 100644 --- a/integration/yarn-pnp-compat/src/app/app.component.html +++ b/integration/yarn-pnp-compat/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/cdk/schematics/ng-update/html-parsing/angular.ts b/src/cdk/schematics/ng-update/html-parsing/angular.ts index 6c2f059f29ce..78e385e184ef 100644 --- a/src/cdk/schematics/ng-update/html-parsing/angular.ts +++ b/src/cdk/schematics/ng-update/html-parsing/angular.ts @@ -23,7 +23,7 @@ export function findInputsOnElementWithTag(html: string, inputName: string, tagN /** Finds the specified Angular @Input in elements that have one of the specified attributes. */ export function findInputsOnElementWithAttr(html: string, inputName: string, attrs: string[]) { return [ - // Inputs can be also used without brackets (e.g. ` + diff --git a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html index 22087273e8cd..2d7cd902ba92 100644 --- a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html +++ b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html @@ -13,5 +13,5 @@ Autofilled! } - + diff --git a/src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html b/src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html index 90800833af40..4de69376ae08 100644 --- a/src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html +++ b/src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html @@ -20,7 +20,7 @@ @if (!node.areChildrenLoading() && node.isExpandable()) { + {{node.name}} @@ -17,7 +17,7 @@ (expandedChange)="node.isExpanded = $event" class="example-tree-node" tabindex="0"> - + {{node.name}} @@ -16,7 +16,7 @@ [isDisabled]="!shouldRender(node)" [isExpandable]="true" class="example-tree-node"> - + {{node.name}} @@ -16,7 +16,7 @@ [isDisabled]="!shouldRender(node)" [isExpandable]="node.expandable" class="example-tree-node"> - + {{node.name}} @@ -15,7 +15,7 @@ [isDisabled]="!shouldRender(node)" (expandedChange)="node.isExpanded = $event" class="example-tree-node"> - + {{node.name}} @@ -13,7 +13,7 @@ isExpandable class="example-tree-node"> + {{node.name}} @@ -14,7 +14,7 @@ isExpandable class="example-tree-node"> + {{node.name}} @@ -13,7 +13,7 @@ isExpandable class="example-tree-node"> - - + + + @@ -46,7 +46,7 @@ {{person.firstName}} - + @@ -61,7 +61,7 @@ {{person.middleName}} - + @@ -76,7 +76,7 @@ {{person.lastName}} - + diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html index a636acd7358d..287a9d0315b0 100644 --- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html +++ b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html @@ -47,16 +47,16 @@

Name

- - - + + +
- + @@ -69,7 +69,7 @@

Name

{{element.weight}} - + diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html index 414532d5a1c7..14041c5f71c8 100644 --- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html +++ b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html @@ -26,10 +26,10 @@ - - @@ -62,9 +62,9 @@

Name

- - - + + +
@@ -72,7 +72,7 @@

Name

@if (nameEditEnabled) { - + } @@ -109,7 +109,7 @@

Name

- + @@ -122,7 +122,7 @@

Name

{{element.weight}} - + @@ -162,15 +162,15 @@

Name

- - + +
- + diff --git a/src/components-examples/material/badge/badge-harness/badge-harness-example.html b/src/components-examples/material/badge/badge-harness/badge-harness-example.html index 9f9c8abd7b30..6a7134c8b2aa 100644 --- a/src/components-examples/material/badge/badge-harness/badge-harness-example.html +++ b/src/components-examples/material/badge/badge-harness/badge-harness-example.html @@ -1,10 +1,10 @@ - - + diff --git a/src/components-examples/material/badge/badge-overview/badge-overview-example.html b/src/components-examples/material/badge/badge-overview/badge-overview-example.html index eab17a82714a..ba35dcacfb60 100644 --- a/src/components-examples/material/badge/badge-overview/badge-overview-example.html +++ b/src/components-examples/material/badge/badge-overview/badge-overview-example.html @@ -10,7 +10,7 @@
Button with a badge on the left - @@ -19,7 +19,7 @@
Button toggles badge visibility - diff --git a/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.html b/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.html index d98052160c7b..a7a6bef8c73d 100644 --- a/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.html +++ b/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.html @@ -1,3 +1,3 @@

You have received a file called "cat-picture.jpeg".

- + diff --git a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html index 23b52d5c661f..5925e2991940 100644 --- a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html +++ b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html @@ -1,10 +1,10 @@ diff --git a/src/components-examples/material/button/button-harness/button-harness-example.html b/src/components-examples/material/button/button-harness/button-harness-example.html index 42289b6464f5..f40c06ea8d5e 100644 --- a/src/components-examples/material/button/button-harness/button-harness-example.html +++ b/src/components-examples/material/button/button-harness/button-harness-example.html @@ -1,3 +1,3 @@ - diff --git a/src/components-examples/material/button/button-overview/button-overview-example.html b/src/components-examples/material/button/button-overview/button-overview-example.html index feb62a8caf2e..a8e7332c497d 100644 --- a/src/components-examples/material/button/button-overview/button-overview-example.html +++ b/src/components-examples/material/button/button-overview/button-overview-example.html @@ -1,36 +1,36 @@
-
Basic
+
Text
- - - Link + + + Link
-
Raised
+
Elevated
- - - Link + + + Link
-
Stroked
+
Outlined
- - - Link + + + Link
-
Flat
+
Filled
- - - Link + + + Link
@@ -38,10 +38,10 @@
Icon
- -
@@ -49,16 +49,16 @@
-
FAB
+
Floating Action Button (FAB)
-
-
@@ -71,12 +71,12 @@
-
-
@@ -84,23 +84,23 @@
-
Extended Fab
+
Extended FAB
-
-
- + favorite Link diff --git a/src/components-examples/material/button/button-overview/button-overview-example.ts b/src/components-examples/material/button/button-overview/button-overview-example.ts index 21a5f382200e..c7783cb7673e 100644 --- a/src/components-examples/material/button/button-overview/button-overview-example.ts +++ b/src/components-examples/material/button/button-overview/button-overview-example.ts @@ -4,7 +4,7 @@ import {MatDividerModule} from '@angular/material/divider'; import {MatButtonModule} from '@angular/material/button'; /** - * @title Basic buttons + * @title Button overview */ @Component({ selector: 'button-overview-example', diff --git a/src/components-examples/material/card/card-actions/card-actions-example.html b/src/components-examples/material/card/card-actions/card-actions-example.html index 10db36f2ce0d..9c739dce8e2e 100644 --- a/src/components-examples/material/card/card-actions/card-actions-example.html +++ b/src/components-examples/material/card/card-actions/card-actions-example.html @@ -4,7 +4,7 @@ Herding group - +
@@ -14,6 +14,6 @@ Non-sporting group - + diff --git a/src/components-examples/material/card/card-fancy/card-fancy-example.html b/src/components-examples/material/card/card-fancy/card-fancy-example.html index f4f90b2553df..cea3420f3259 100644 --- a/src/components-examples/material/card/card-fancy/card-fancy-example.html +++ b/src/components-examples/material/card/card-fancy/card-fancy-example.html @@ -13,7 +13,7 @@

- - + + diff --git a/src/components-examples/material/card/card-harness/card-harness-example.html b/src/components-examples/material/card/card-harness/card-harness-example.html index ceffe0502773..73d7b904da2d 100644 --- a/src/components-examples/material/card/card-harness/card-harness-example.html +++ b/src/components-examples/material/card/card-harness/card-harness-example.html @@ -15,7 +15,7 @@

- - + + diff --git a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html index 1e70975572a0..f39e3a3dd152 100644 --- a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html +++ b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html @@ -1,6 +1,6 @@
- - + +

Enter video keywords diff --git a/src/components-examples/material/core/elevation-overview/elevation-overview-example.html b/src/components-examples/material/core/elevation-overview/elevation-overview-example.html index 1e38c9220e89..5292940f126e 100644 --- a/src/components-examples/material/core/elevation-overview/elevation-overview-example.html +++ b/src/components-examples/material/core/elevation-overview/elevation-overview-example.html @@ -4,4 +4,4 @@ Example

- + diff --git a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html index 29ae1ae580f0..11837bba8ee3 100644 --- a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html +++ b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html @@ -6,8 +6,8 @@ - - + + @@ -24,8 +24,8 @@ - - + + diff --git a/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.html b/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.html index 002db6923bbd..502d49e8c4e0 100644 --- a/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.html +++ b/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.html @@ -4,4 +4,4 @@ MM/DD/YYYY - + diff --git a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts index a198d8b8694a..f894673e9e2c 100644 --- a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts +++ b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts @@ -39,17 +39,17 @@ export class DatepickerCustomHeaderExample { `, template: `
- - {{periodLabel()}} - -
diff --git a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html index 375a5dc526f9..df858cc9d79e 100644 --- a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html +++ b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html @@ -8,6 +8,6 @@

Datepicker in a Dialog

- - + + diff --git a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html index 95023116f01c..2584be348a1a 100644 --- a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html +++ b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html @@ -1,2 +1,2 @@

Selected date: {{selectedDate()}}

- + diff --git a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html index aa9889acc61b..b2db58289a2a 100644 --- a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html +++ b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html @@ -5,4 +5,4 @@ - + diff --git a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example-dialog.html b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example-dialog.html index 1c983e5e89be..1edd9a9d8fe5 100644 --- a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example-dialog.html +++ b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example-dialog.html @@ -3,6 +3,6 @@

Delete file

Would you like to delete cat.jpeg? - - + + diff --git a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.html b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.html index e50b6eecdcdb..e967c4b06ee7 100644 --- a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.html +++ b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.html @@ -1,2 +1,2 @@ - - + + diff --git a/src/components-examples/material/dialog/dialog-content/dialog-content-example-dialog.html b/src/components-examples/material/dialog/dialog-content/dialog-content-example-dialog.html index a5f12bc6acfd..afe762bace25 100644 --- a/src/components-examples/material/dialog/dialog-content/dialog-content-example-dialog.html +++ b/src/components-examples/material/dialog/dialog-content/dialog-content-example-dialog.html @@ -59,6 +59,6 @@

Architecture overview

sophisticated in-browser navigational capabilities.

- - + + diff --git a/src/components-examples/material/dialog/dialog-content/dialog-content-example.html b/src/components-examples/material/dialog/dialog-content/dialog-content-example.html index cdfc2fb33b2a..6b68e35fc331 100644 --- a/src/components-examples/material/dialog/dialog-content/dialog-content-example.html +++ b/src/components-examples/material/dialog/dialog-content/dialog-content-example.html @@ -1 +1 @@ - + diff --git a/src/components-examples/material/dialog/dialog-data/dialog-data-example.html b/src/components-examples/material/dialog/dialog-data/dialog-data-example.html index cdfc2fb33b2a..6b68e35fc331 100644 --- a/src/components-examples/material/dialog/dialog-data/dialog-data-example.html +++ b/src/components-examples/material/dialog/dialog-data/dialog-data-example.html @@ -1 +1 @@ - + diff --git a/src/components-examples/material/dialog/dialog-elements/dialog-elements-example-dialog.html b/src/components-examples/material/dialog/dialog-elements/dialog-elements-example-dialog.html index 206c9a3efa60..175c60fc77d2 100644 --- a/src/components-examples/material/dialog/dialog-elements/dialog-elements-example-dialog.html +++ b/src/components-examples/material/dialog/dialog-elements/dialog-elements-example-dialog.html @@ -1,5 +1,5 @@

Dialog with elements

This dialog showcases the title, close, content and actions elements. - + diff --git a/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.html b/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.html index cf2103810fc9..9469c6f613e2 100644 --- a/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.html +++ b/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.html @@ -1 +1 @@ - + diff --git a/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example-dialog.html b/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example-dialog.html index dbac55befb12..45977231b8c3 100644 --- a/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example-dialog.html +++ b/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example-dialog.html @@ -2,5 +2,5 @@ This is a dialog - + diff --git a/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.html b/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.html index 43edf3565191..5353eb5f5c3a 100644 --- a/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.html +++ b/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.html @@ -1,4 +1,4 @@ - + diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html index 725de76c635e..c8c5b7ed99a1 100644 --- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html +++ b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html @@ -7,6 +7,6 @@

Hi {{data.name}}

- - + + diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html index 210a36c9d466..91ff60849e28 100644 --- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html +++ b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html @@ -6,7 +6,7 @@
  • - +
    • @if (animal()) {
  • diff --git a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html index e0719977acca..afe6cccefaac 100644 --- a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html +++ b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html @@ -1,6 +1,6 @@
    - - + +
    diff --git a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html index 1d69f7ec43fb..90f15618a2ab 100644 --- a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html +++ b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html @@ -19,7 +19,7 @@ - + @@ -39,8 +39,8 @@ - - + + @@ -60,8 +60,8 @@ - - + + diff --git a/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html b/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html index 3bf388ecc9b2..5d53d14c7284 100644 --- a/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html +++ b/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html @@ -3,7 +3,7 @@ Enter your password } diff --git a/src/components-examples/material/menu/menu-icons/menu-icons-example.html b/src/components-examples/material/menu/menu-icons/menu-icons-example.html index fb66054d7b74..e0c815d44d7c 100644 --- a/src/components-examples/material/menu/menu-icons/menu-icons-example.html +++ b/src/components-examples/material/menu/menu-icons/menu-icons-example.html @@ -1,4 +1,4 @@ - diff --git a/src/components-examples/material/menu/menu-nested/menu-nested-example.html b/src/components-examples/material/menu/menu-nested/menu-nested-example.html index 26e43064379b..242c56f7c032 100644 --- a/src/components-examples/material/menu/menu-nested/menu-nested-example.html +++ b/src/components-examples/material/menu/menu-nested/menu-nested-example.html @@ -1,4 +1,4 @@ - + diff --git a/src/components-examples/material/menu/menu-overview/menu-overview-example.html b/src/components-examples/material/menu/menu-overview/menu-overview-example.html index e8f939714e6d..289c28ec58a2 100644 --- a/src/components-examples/material/menu/menu-overview/menu-overview-example.html +++ b/src/components-examples/material/menu/menu-overview/menu-overview-example.html @@ -1,5 +1,5 @@ - + diff --git a/src/components-examples/material/menu/menu-position/menu-position-example.html b/src/components-examples/material/menu/menu-position/menu-position-example.html index ee70948384ad..3993840e0f07 100644 --- a/src/components-examples/material/menu/menu-position/menu-position-example.html +++ b/src/components-examples/material/menu/menu-position/menu-position-example.html @@ -1,4 +1,4 @@ - + @@ -6,20 +6,20 @@ - + - + - + diff --git a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html index 98e69a1c2c1d..be269dee82d4 100644 --- a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html +++ b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html @@ -4,13 +4,13 @@ @if (showFiller) {

    Lorem, ipsum dolor sit amet consectetur.

    } -
    -
    diff --git a/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.html b/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.html index 0fa69dee3b94..ca0c7d79aa26 100644 --- a/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.html +++ b/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.html @@ -17,6 +17,6 @@ False - + diff --git a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html index e6b0821ca811..a5ecb677a0b4 100644 --- a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html +++ b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html @@ -1,14 +1,14 @@ @if (shouldRun) { -

    +

    -

    +

    diff --git a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html index fada970cd015..911537f80de2 100644 --- a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html +++ b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html @@ -2,11 +2,11 @@ -

    +

    -

    +

    Closed due to: {{reason}}

         diff --git a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html index 9880c28eddb1..bbf27b42ae84 100644 --- a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html +++ b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html @@ -18,7 +18,7 @@ Bottom gap

    -

    +

    diff --git a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html index 04f8b534ac73..7d7501f1fe11 100644 --- a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html +++ b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html @@ -1,7 +1,7 @@ @if (shouldRun) { -

    +

    @@ -13,7 +13,7 @@ -

    +

    diff --git a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html index f82321e94337..a9f781c61e00 100644 --- a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html +++ b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html @@ -7,7 +7,7 @@

    sidenav.opened

    -

    +

    Events:

    @for (e of events; track e) { diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html index e34c05948d25..0c7cc03247ba 100644 --- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html +++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html @@ -1,7 +1,7 @@ @if (shouldRun) {
    - +

    Responsive App

     diff --git a/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.html b/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.html index 1a63b3ba0c78..c1cb6520ec57 100644 --- a/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.html +++ b/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.html @@ -9,7 +9,7 @@ Enable Wifi Accept Terms of Service - +

    Slide Toggle inside of a Reactive form

    @@ -21,5 +21,5 @@

    Form Group Status: {{formGroup.status}}

    - + diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html index 1bb8371b6c39..93aca7adb0a2 100644 --- a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html +++ b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example-snack.html @@ -2,6 +2,6 @@ Pizza party!!! - + diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html index e320fa99a099..b54de6e3b7e6 100644 --- a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html +++ b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.html @@ -3,6 +3,6 @@ - diff --git a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.html b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.html index e320fa99a099..b54de6e3b7e6 100644 --- a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.html +++ b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.html @@ -3,6 +3,6 @@ - diff --git a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.html b/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.html index bc311ebcf18a..7f4d73a6d4db 100644 --- a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.html +++ b/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.html @@ -8,4 +8,4 @@ - + diff --git a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.html b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.html index 2329a7ddd860..1b80165f1841 100644 --- a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.html +++ b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.html @@ -16,6 +16,6 @@ - diff --git a/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.html b/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.html index 641a2591160c..6db1217e8f65 100644 --- a/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.html +++ b/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.html @@ -11,7 +11,7 @@
    - +
    @@ -22,8 +22,8 @@
    - - + +
    @@ -31,8 +31,8 @@ Done You are now done.
    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html index 8074ec807df1..8dc4135bc166 100644 --- a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html +++ b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.html @@ -1,4 +1,4 @@ - @@ -15,7 +15,7 @@
    - +
    @@ -28,8 +28,8 @@ required>
    - - + +
    @@ -37,8 +37,8 @@ Done

    You are now done.

    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html index 0b015da0eece..8f24359835e3 100644 --- a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html +++ b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html @@ -8,7 +8,7 @@

    Go to a different step to see the error state

    - +
    @@ -22,8 +22,8 @@

    Go to a different step to see the error state

    - - + +
    @@ -31,8 +31,8 @@ Done

    You are now done.

    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html b/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html index 7f092843f2f7..06c357bdd644 100644 --- a/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html +++ b/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.html @@ -6,7 +6,7 @@
    - +
    @@ -17,8 +17,8 @@
    - - + +
    @@ -26,8 +26,8 @@ Done You are now done.
    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html index c108f1673094..3a63f1e68ea3 100644 --- a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html +++ b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html @@ -24,7 +24,7 @@ />
    - +
    @@ -42,8 +42,8 @@ />
    - - + +
    @@ -51,8 +51,8 @@ Done

    You are now done.

    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html index 29eb1459cb98..d2ba6100b717 100644 --- a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html +++ b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.html @@ -9,7 +9,7 @@
    - +
    @@ -23,8 +23,8 @@
    - - + +
    @@ -33,8 +33,8 @@ Done

    You are now done.

    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html b/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html index a632ac1dcf22..e5ff21d24375 100644 --- a/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html +++ b/src/components-examples/material/stepper/stepper-lazy-content/stepper-lazy-content-example.html @@ -3,20 +3,20 @@ Step 1

    This content was rendered lazily

    - +     Step 2

    This content was also rendered lazily

    - - + +     Step 3

    This content was rendered eagerly

    - +     diff --git a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html index 2200fa240961..d177ccc2db90 100644 --- a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html +++ b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.html @@ -1,4 +1,4 @@ - @@ -11,7 +11,7 @@
    - +
    @@ -26,8 +26,8 @@ required>
    - - + +
    @@ -35,8 +35,8 @@ Done

    You are now done.

    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html index 7b54eb4358a6..a7f6fd0ad978 100644 --- a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html +++ b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.html @@ -1,4 +1,4 @@ - @@ -10,7 +10,7 @@
    - +
    @@ -24,8 +24,8 @@ required>
    - - + +
    @@ -33,8 +33,8 @@ Done

    You are now done.

    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html index cba6751334d8..31429d631cc5 100644 --- a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html +++ b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html @@ -17,7 +17,7 @@
    - +
    @@ -29,8 +29,8 @@ required>
    - - + +
    @@ -41,8 +41,8 @@
    - - + +
    @@ -50,7 +50,7 @@ Done

    You are now done.

    - +
    diff --git a/src/components-examples/material/stepper/stepper-states/stepper-states-example.html b/src/components-examples/material/stepper/stepper-states/stepper-states-example.html index aa47cb1f8832..cce56f30f5c4 100644 --- a/src/components-examples/material/stepper/stepper-states/stepper-states-example.html +++ b/src/components-examples/material/stepper/stepper-states/stepper-states-example.html @@ -7,7 +7,7 @@
    - +
    @@ -20,8 +20,8 @@ required>
    - - + +
    @@ -29,8 +29,8 @@ Done

    You are now done.

    - - + +
    @@ -41,15 +41,15 @@

    Put down your phones.

    - +

    Socialize with each other.

    - - + +
    diff --git a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html index 288be64f8d2e..1f3aeadb108e 100644 --- a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html +++ b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.html @@ -1,4 +1,4 @@ - @@ -10,7 +10,7 @@
    - +
    @@ -23,8 +23,8 @@ required>
    - - + +
    @@ -32,8 +32,8 @@ Done

    You are now done.

    - - + +
    diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html index 9e0cf9a588b7..d3613b45a00c 100644 --- a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html +++ b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html @@ -1,9 +1,9 @@
    - - - + + + @for (column of displayedColumns; track column) { diff --git a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html index b3388c5cc5b0..6570b63bcb3b 100644 --- a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html +++ b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html @@ -1,9 +1,9 @@
    -
    @@ -72,29 +72,29 @@ @if (allSamples.length) { } - @if (show) { @for (_ of componentArray; track _) { - + Input - + } } diff --git a/src/dev-app/progress-bar/progress-bar-demo.html b/src/dev-app/progress-bar/progress-bar-demo.html index 0aec6d4166fc..b4e37c77aba6 100644 --- a/src/dev-app/progress-bar/progress-bar-demo.html +++ b/src/dev-app/progress-bar/progress-bar-demo.html @@ -10,8 +10,8 @@

    Determinate

    Value: {{determinateProgressValue}}
    Last animation complete value: {{determinateAnimationEndValue}} - - + +
    @@ -26,12 +26,12 @@

    Buffer

    Value: {{bufferProgressValue}}
    Last animation complete value: {{bufferAnimationEndValue}} - - + + Buffer Value: {{bufferBufferValue}} - - + +
    diff --git a/src/dev-app/progress-spinner/progress-spinner-demo.html b/src/dev-app/progress-spinner/progress-spinner-demo.html index 9d2f05fc1f53..dda53a84a43a 100644 --- a/src/dev-app/progress-spinner/progress-spinner-demo.html +++ b/src/dev-app/progress-spinner/progress-spinner-demo.html @@ -2,8 +2,8 @@

    Determinate

    diff --git a/src/dev-app/radio/radio-demo.html b/src/dev-app/radio/radio-demo.html index fb007822906b..e738c8ad3dbb 100644 --- a/src/dev-app/radio/radio-demo.html +++ b/src/dev-app/radio/radio-demo.html @@ -27,13 +27,13 @@

    Dynamic Example

    isDisabled: {{isDisabled}} -
    isRequired: {{isRequired}} -
    diff --git a/src/dev-app/ripple/ripple-demo.html b/src/dev-app/ripple/ripple-demo.html index 1d9995987876..7b8b0551252b 100644 --- a/src/dev-app/ripple/ripple-demo.html +++ b/src/dev-app/ripple/ripple-demo.html @@ -1,12 +1,12 @@
    Disable button ripples - - - + + -
    diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html index 190d3ed68ff7..8742db08db36 100644 --- a/src/dev-app/select/select-demo.html +++ b/src/dev-app/select/select-demo.html @@ -1,5 +1,5 @@ Space above cards: - +
    @@ -60,10 +60,10 @@

    - - - - + + + + @@ -94,11 +94,11 @@ }

    - - - - - + + + + + @@ -118,8 +118,8 @@

    Value: {{ currentDigimon }}

    - - + + @@ -163,13 +163,13 @@

    Status: {{ drinkObjectControl.status }}

    Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }}

    - - - - + + + @@ -200,7 +200,7 @@

    - + @@ -222,9 +222,9 @@

    Touched: {{ foodControl.touched }}

    Dirty: {{ foodControl.dirty }}

    Status: {{ foodControl.status }}

    - - - + + +
    @@ -376,7 +376,7 @@

    Error message with errorStateMatcher

    } You can pick up your favorite car here - + diff --git a/src/dev-app/sidenav/sidenav-demo.html b/src/dev-app/sidenav/sidenav-demo.html index f7d461e9b827..3cd8caf9bff7 100644 --- a/src/dev-app/sidenav/sidenav-demo.html +++ b/src/dev-app/sidenav/sidenav-demo.html @@ -8,11 +8,11 @@ [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom"> Start Side Sidenav
    - +
    - +
    - +
    Mode: {{start.mode}}

    @@ -25,7 +25,7 @@ [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom"> End Side Sidenav
    - + @for (c of fillerContent; track c) {
    Filler Content
    } @@ -37,15 +37,15 @@ }
    -

    Sidenav

    - - + + Has backdrop Fixed mode Sidenav covers header/footer @@ -71,7 +71,7 @@

    Header / Footer

    }
    } @else { - } diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.html b/src/dev-app/slide-toggle/slide-toggle-demo.html index b9e67a0bae61..59b711ac3e9f 100644 --- a/src/dev-app/slide-toggle/slide-toggle-demo.html +++ b/src/dev-app/slide-toggle/slide-toggle-demo.html @@ -17,7 +17,7 @@
    Slide Toggle

    - +

    diff --git a/src/dev-app/slider/slider-demo.html b/src/dev-app/slider/slider-demo.html index 96369f760f49..8fbaa3ddc8cd 100644 --- a/src/dev-app/slider/slider-demo.html +++ b/src/dev-app/slider/slider-demo.html @@ -33,7 +33,7 @@
      - + +
    diff --git a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html index 3a52339e40b7..abe0614ab890 100644 --- a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html +++ b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html @@ -1,6 +1,6 @@
    - - + +
    diff --git a/src/components-examples/material/table/table-wrapped/table-wrapped-example.html b/src/components-examples/material/table/table-wrapped/table-wrapped-example.html index 540d3fcba236..6acf9d54f720 100644 --- a/src/components-examples/material/table/table-wrapped/table-wrapped-example.html +++ b/src/components-examples/material/table/table-wrapped/table-wrapped-example.html @@ -1,6 +1,6 @@
    - - + +
    - diff --git a/src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.html b/src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.html index fae0e9b34de8..f3e26023e93b 100644 --- a/src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.html +++ b/src/components-examples/material/timepicker/timepicker-locale/timepicker-locale-example.html @@ -5,4 +5,4 @@ - + diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html index 5499e0bd14e9..cdb8dc7fa575 100644 --- a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html +++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html @@ -1,13 +1,13 @@ - My App - - diff --git a/src/components-examples/material/toolbar/toolbar-harness/toolbar-harness-example.html b/src/components-examples/material/toolbar/toolbar-harness/toolbar-harness-example.html index 5bf3323eba0a..b01a29807fa0 100644 --- a/src/components-examples/material/toolbar/toolbar-harness/toolbar-harness-example.html +++ b/src/components-examples/material/toolbar/toolbar-harness/toolbar-harness-example.html @@ -2,10 +2,10 @@ Row 1 Row 2 - - diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html index 5499e0bd14e9..cdb8dc7fa575 100644 --- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html +++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html @@ -1,13 +1,13 @@ - My App - - diff --git a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html index 193542e1326c..11d3e3c6e28c 100644 --- a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html +++ b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html @@ -8,7 +8,7 @@
    - - -
    - \ No newline at end of file + diff --git a/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.html b/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.html index a62e9cf92967..86e39f3f468e 100644 --- a/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.html +++ b/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.html @@ -3,7 +3,7 @@ - + {{node.item}} - + {{node.name}} - + {{node.name}} - + {{node.name}} - + {{node.name}} diff --git a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html index 28ed67278f8f..88bf949e1737 100644 --- a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html +++ b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.html @@ -1,14 +1,14 @@ - + {{node.name}} -
    + This padding value depends on the matIconButton width. -->
    diff --git a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html index 93b8b82f2335..bd6eed8f9fa8 100644 --- a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html +++ b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html @@ -1,7 +1,7 @@ + This padding value depends on the matIconButton width. --> {{node.name}} @@ -10,7 +10,7 @@ *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle [cdkTreeNodeTypeaheadLabel]="node.name">
    -
    + This padding value depends on the matIconButton width. -->
    diff --git a/src/dev-app/autocomplete/autocomplete-demo.html b/src/dev-app/autocomplete/autocomplete-demo.html index 32c8ceed3653..401f1180e4ae 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.html +++ b/src/dev-app/autocomplete/autocomplete-demo.html @@ -30,9 +30,9 @@

    - - - + +

    @@ -88,9 +88,9 @@ }

    - - - + + - @@ -46,7 +46,7 @@ Tabindex > 0 -

    Shadow DOMs @if (_supportsShadowDom) { -
    iframes -
    Dynamic page content -
    -
    @@ -132,7 +132,7 @@ Dialog-on-dialog - +
    diff --git a/src/dev-app/focus-trap/focus-trap-dialog-demo.html b/src/dev-app/focus-trap/focus-trap-dialog-demo.html index bc242c3ffa44..68950a1686e6 100644 --- a/src/dev-app/focus-trap/focus-trap-dialog-demo.html +++ b/src/dev-app/focus-trap/focus-trap-dialog-demo.html @@ -6,11 +6,11 @@

    Dialog {{id}}

    - - diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html index 45a2d0787c7c..9d4b75dd5a20 100644 --- a/src/dev-app/google-map/google-map-demo.html +++ b/src/dev-app/google-map/google-map-demo.html @@ -221,7 +221,7 @@
    -
    diff --git a/src/dev-app/grid-list/grid-list-demo.html b/src/dev-app/grid-list/grid-list-demo.html index f467ea7f6a01..b5058f9bb387 100644 --- a/src/dev-app/grid-list/grid-list-demo.html +++ b/src/dev-app/grid-list/grid-list-demo.html @@ -66,7 +66,7 @@

    Change list cols:

    Change row height:

    - +     diff --git a/src/dev-app/input-modality/input-modality-detector-demo.html b/src/dev-app/input-modality/input-modality-detector-demo.html index ee016f1bf226..1b211d83191b 100644 --- a/src/dev-app/input-modality/input-modality-detector-demo.html +++ b/src/dev-app/input-modality/input-modality-detector-demo.html @@ -12,7 +12,7 @@

    Input Modality

    {{_modality || '(unknown)'}}

    - +

    diff --git a/src/dev-app/input/input-demo.html b/src/dev-app/input/input-demo.html index 3061892ebad0..257ba448fd80 100644 --- a/src/dev-app/input/input-demo.html +++ b/src/dev-app/input/input-demo.html @@ -114,7 +114,7 @@

    Inside a form

    This field is required     - +

    With a custom error function

    @@ -166,11 +166,11 @@

    Icon buttons

    Amount @if (showPrefix) { - } - @@ -182,11 +182,11 @@

    Text & Icons

    $ .00 @if (showPrefix) { - } - @@ -544,11 +544,11 @@

    Textarea

    Template - -
    @@ -596,12 +596,12 @@

    Textarea

     @@ -705,7 +705,7 @@

    <textarea> with bindable autosize

    - + is autofilled? {{isAutofilled ? 'yes' : 'no'}} diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html index 5f70c299410d..af13321d0551 100644 --- a/src/dev-app/list/list-demo.html +++ b/src/dev-app/list/list-demo.html @@ -1,8 +1,8 @@

    mat-list demo

    - - + +
    @@ -57,7 +57,7 @@

    Normal lists

    @for (link of links; track link) { {{ link.name }} - @@ -99,7 +99,7 @@

    Dense lists

    @for (link of links; track link) { {{ link.name }} - @@ -191,8 +191,8 @@

    Selection list

    - - + +

    @@ -223,7 +223,7 @@

    Single Selection List with Reactive Forms

    }

    - Option selected: {{shoesControl.value ? shoesControl.value[0] : 'None'}} + Option selected: {{shoesControl.value ? shoesControl.value[0] : 'None'}}

    @@ -281,7 +281,7 @@

    Line scenarios

    - +
    @@ -327,7 +327,7 @@

    Icon alignment in selection list

    -
    diff --git a/src/dev-app/live-announcer/live-announcer-demo.html b/src/dev-app/live-announcer/live-announcer-demo.html index ce4533f59420..4db3eeb14c74 100644 --- a/src/dev-app/live-announcer/live-announcer-demo.html +++ b/src/dev-app/live-announcer/live-announcer-demo.html @@ -1,12 +1,12 @@

    @@ -16,12 +16,12 @@

    Live Announcer Test Dialog

    Test LiveAnnouncer inside an aria modal.

    diff --git a/src/dev-app/menu/menu-demo.html b/src/dev-app/menu/menu-demo.html index 69338bb190e8..d04c3a8f5a4f 100644 --- a/src/dev-app/menu/menu-demo.html +++ b/src/dev-app/menu/menu-demo.html @@ -3,7 +3,7 @@

    You clicked on: {{ selected }}

    - @@ -20,7 +20,7 @@

    Menu with divider

    - @@ -38,7 +38,7 @@

    Nested menu

    - @@ -91,7 +91,7 @@

    Clicking these will navigate:

    - @@ -109,7 +109,7 @@ Position x: before

    - @@ -128,7 +128,7 @@ Position y: above

    - @@ -146,7 +146,7 @@

    overlapTrigger: true

    - @@ -162,7 +162,7 @@ Position x: before, overlapTrigger: true

    - @@ -181,7 +181,7 @@ Position y: above, overlapTrigger: true

    - diff --git a/src/dev-app/performance/performance-demo.html b/src/dev-app/performance/performance-demo.html index 2cfd68c5f975..ab544b9c9058 100644 --- a/src/dev-app/performance/performance-demo.html +++ b/src/dev-app/performance/performance-demo.html @@ -39,10 +39,10 @@ @if (allSamples.length) { Average render time - + } @if (!allSamples.length) { - No data yet + No data yet }
    		{{ngStartThumb1.disabled}} : {{ngEndThumb1.disabled}}
    - + @@ -89,7 +89,7 @@ {{ngStartThumb2.disabled}} : {{ngEndThumb2.disabled}} - + @@ -171,7 +171,7 @@ {{ngStartThumb4.value}} : {{ngEndThumb4.value}} - + @@ -183,7 +183,7 @@
    - +
    diff --git a/src/dev-app/snack-bar/snack-bar-demo.html b/src/dev-app/snack-bar/snack-bar-demo.html index 26d54831feb0..3182d7a93bc8 100644 --- a/src/dev-app/snack-bar/snack-bar-demo.html +++ b/src/dev-app/snack-bar/snack-bar-demo.html @@ -57,10 +57,10 @@

    SnackBar demo

    - +

    - + Template snack bar: {{message}} diff --git a/src/dev-app/stepper/stepper-demo.html b/src/dev-app/stepper/stepper-demo.html index 1dd2a5e94cda..0e476433d30a 100644 --- a/src/dev-app/stepper/stepper-demo.html +++ b/src/dev-app/stepper/stepper-demo.html @@ -8,7 +8,7 @@ Vertical

    -

    @@ -46,7 +46,7 @@

    Linear Stepper Demo using a single form

    This field is required
    - +
    @@ -61,8 +61,8 @@

    Linear Stepper Demo using a single form

    The input is invalid.
    - - + +
    @@ -70,8 +70,8 @@

    Linear Stepper Demo using a single form

    Confirm your information Everything seems correct.
    - - + +
    @@ -96,7 +96,7 @@

    Linear Horizontal Stepper Demo using a different form for each step

    This field is required
    - +
    @@ -110,8 +110,8 @@

    Linear Horizontal Stepper Demo using a different form for each step

    The input is invalid
    - - + +
    @@ -121,8 +121,8 @@

    Linear Horizontal Stepper Demo using a different form for each step

    Confirm your information Everything seems correct.
    - - + +
    @@ -143,7 +143,7 @@

    Vertical Stepper Demo

    - +
    @@ -156,8 +156,8 @@

    Vertical Stepper Demo

    - - + +
    @@ -170,8 +170,8 @@

    Vertical Stepper Demo

    - - + +
    @@ -179,7 +179,7 @@

    Vertical Stepper Demo

    Confirm your information Everything seems correct.
    - +
    @@ -197,7 +197,7 @@

    Horizontal Stepper Demo with Text Label

    - +
    @@ -207,8 +207,8 @@

    Horizontal Stepper Demo with Text Label

    - - + +
    @@ -218,15 +218,15 @@

    Horizontal Stepper Demo with Text Label

    - - + +
    Everything seems correct.
    - +
    @@ -241,8 +241,8 @@

    Horizontal Stepper Demo with Templated Label

    - - + +
    } diff --git a/src/dev-app/table-scroll-container/table-scroll-container-demo.html b/src/dev-app/table-scroll-container/table-scroll-container-demo.html index 69229922693e..793c0ac074d8 100644 --- a/src/dev-app/table-scroll-container/table-scroll-container-demo.html +++ b/src/dev-app/table-scroll-container/table-scroll-container-demo.html @@ -1,6 +1,6 @@
    - - + +
    diff --git a/src/dev-app/timepicker/timepicker-demo.html b/src/dev-app/timepicker/timepicker-demo.html index 52abf423e2d6..c53b657f650d 100644 --- a/src/dev-app/timepicker/timepicker-demo.html +++ b/src/dev-app/timepicker/timepicker-demo.html @@ -18,7 +18,7 @@

    Basic timepicker

    Dirty: {{control.dirty}}

    Touched: {{control.touched}}

    Errors: {{control.errors | json}}

    - +
    diff --git a/src/dev-app/toolbar/toolbar-demo.html b/src/dev-app/toolbar/toolbar-demo.html index e665bd38f656..7969e7a1c6dd 100644 --- a/src/dev-app/toolbar/toolbar-demo.html +++ b/src/dev-app/toolbar/toolbar-demo.html @@ -9,20 +9,20 @@

    - Default Toolbar - - - + + - @@ -30,34 +30,34 @@

    - Primary Toolbar - - - + + +

    - Accent Toolbar - - - + + - diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo.html b/src/dev-app/virtual-scroll/virtual-scroll-demo.html index 76c17f993488..950ecaabb0bf 100644 --- a/src/dev-app/virtual-scroll/virtual-scroll-demo.html +++ b/src/dev-app/virtual-scroll/virtual-scroll-demo.html @@ -46,7 +46,7 @@

    Fixed size

    Offset - @@ -54,7 +54,7 @@

    Fixed size

    Index - diff --git a/src/dev-app/youtube-player/youtube-player-demo.html b/src/dev-app/youtube-player/youtube-player-demo.html index 209eb6ec08e6..d5986bf2d4db 100644 --- a/src/dev-app/youtube-player/youtube-player-demo.html +++ b/src/dev-app/youtube-player/youtube-player-demo.html @@ -16,7 +16,7 @@

    Basic Example

    Start at 30s
    - +
    ` or `` elements enhanced with Material Design -styling and ink ripples. +styling. @@ -9,26 +9,34 @@ is performed. An `` element should be used whenever the user will _navigate_ There are several button variants, each applied as an attribute: - | Attribute | Description | |----------------------|--------------------------------------------------------------------------| -| `mat-button` | Rectangular text button w/ no elevation and rounded corners | -| `mat-raised-button` | Rectangular contained button w/ elevation and rounded corners | -| `mat-flat-button` | Rectangular contained button w/ no elevation and rounded corners | -| `mat-stroked-button` | Rectangular outlined button w/ no elevation and rounded corners | -| `mat-icon-button` | Circular button with a transparent background, meant to contain an icon | -| `mat-fab` | Square button w/ elevation and rounded corners, meant to contain an icon. Can be [extended](https://material.angular.io/components/button/overview#extended-fab-buttons) to a rectangle to also fit a label | -| `mat-mini-fab` | Same as `mat-fab` but smaller | +| `matButton` | Rectangular button that can contain text and icons | +| `matIconButton` | Smaller, circular button, meant to contain an icon and no text | +| `matFab` | Rectangular button w/ elevation and rounded corners, meant to contain an icon. Can be [extended](https://material.angular.io/components/button/overview#extended-fab-buttons) to a rectangle to also fit a label | +| `matMiniFab` | Smaller variant of `matFab` | + + +Additionally, the `matButton` has several appearances that can be set using the `matButton` +attribute, for example `matButton="outlined"`: + + +| Appearance | Description | +|--------------|----------------------------------------------------------------------------------| +| `text` | Default appearance. Does not have a background until the user interacts with it. | +| `elevated` | Has a background color, elevation and rounded corners. | +| `filled` | Has a flat appearance with rounded corners and no elevation. | +| `outlined` | Has an outline, rounded corners and a transparent background. | -### Extended fab buttons -Traditional fab buttons are circular and only have space for a single icon. However, you can add the -`extended` attribute to allow the fab to expand into a rounded rectangle shape with space for a text -label in addition to the icon. Only full sized fabs support the `extended` attribute, mini fabs do -not. +### Extended FAB buttons +Traditional floating action buttons (FAB) buttons are circular and only have space for a single +icon. However, you can add the `extended` attribute to allow the fab to expand into a rounded +rectangle shape with space for a text label in addition to the icon. Only full sized fabs support +the `extended` attribute, mini FABs do not. ```html - @@ -65,7 +73,7 @@ We recommend not changing the default capitalization for the button text. with any assistive technology your application supports. #### Buttons with icons -Buttons or links containing only icons (such as `mat-fab`, `mat-mini-fab`, and `mat-icon-button`) +Buttons or links containing only icons (such as `matFab`, `matMiniFab`, and `matIconButton`) should be given a meaningful label via `aria-label` or `aria-labelledby`. [See the documentation for `MatIcon`](https://material.angular.io/components/icon) for more information on using icons in buttons. Additionally, to be fully accessible the icon should have a minimum touch-target of 48x48 to ensure that the icon is easily clickable particularly on mobile devices and small screens. diff --git a/src/material/card/testing/card-harness.spec.ts b/src/material/card/testing/card-harness.spec.ts index 559b4b46e73c..f9d0e22ea3df 100644 --- a/src/material/card/testing/card-harness.spec.ts +++ b/src/material/card/testing/card-harness.spec.ts @@ -115,8 +115,8 @@ describe('MatCardHarness', () => {

    - - + +
    Woof woof!
    diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html index 2e539ed68c97..2ffe6c6d1dd6 100644 --- a/src/material/datepicker/calendar-header.html +++ b/src/material/datepicker/calendar-header.html @@ -4,7 +4,7 @@ Relocated label next to related button and made visually hidden via cdk-visually-hidden to enable label to appear in a11y tree for SR when using Firefox --> {{periodButtonDescription}} - -
    @if (showFirstLastButtons) { - } - - @if (showFirstLastButtons) { - } @@ -93,7 +93,7 @@
    - + diff --git a/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template b/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template index 11de5c082500..659971205047 100644 --- a/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +++ b/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template @@ -7,7 +7,7 @@ {{card.title}} - diff --git a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template index d5c2e6e8dba0..a8841650ade9 100644 --- a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +++ b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template @@ -16,7 +16,7 @@ diff --git a/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template b/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template index c5e4fa217969..d037316833f6 100644 --- a/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template +++ b/src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template @@ -1,6 +1,6 @@ - + {{ node.type === 'file' ? 'description' : 'folder' }} @@ -8,7 +8,7 @@ -
    • diff --git a/src/material/stepper/stepper.md b/src/material/stepper/stepper.md index 69b1743e2269..b8c9f1602175 100644 --- a/src/material/stepper/stepper.md +++ b/src/material/stepper/stepper.md @@ -71,14 +71,14 @@ are completed. ...
    - +
    ...
    - - + +
    ... diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts index a750bb709b3a..287f9dcb2327 100644 --- a/src/material/stepper/stepper.spec.ts +++ b/src/material/stepper/stepper.spec.ts @@ -1855,16 +1855,16 @@ function createComponent( This field is required
    - - + +
    Step 2 Content 2
    - - + +
    @@ -1891,23 +1891,23 @@ class MatHorizontalStepperWithErrorsApp { Step 1 Content 1
    - - + +
    Step 2 Content 2
    - - + +
    Content 3
    - - + +
    @@ -1929,8 +1929,8 @@ class SimpleMatHorizontalStepperApp { Step 1 Content 1
    - - + +
    @if (showStepTwo()) { @@ -1938,16 +1938,16 @@ class SimpleMatHorizontalStepperApp { Step 2 Content 2
    - - + +
    } Content 3
    - - + +
    diff --git a/src/material/timepicker/timepicker-toggle.html b/src/material/timepicker/timepicker-toggle.html index d023f065f91f..c8edc8a33a3b 100644 --- a/src/material/timepicker/timepicker-toggle.html +++ b/src/material/timepicker/timepicker-toggle.html @@ -1,5 +1,5 @@ - diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index 52cfff367412..05ede44bd546 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -12,21 +12,21 @@

    Autocomplete

    Bottom sheet

    - +

    Button

    - - - - - + + + + + -    Google -search -Google -home -favorite +Google +search +Google +home +favorite

    Button toggle

    @@ -59,8 +59,8 @@

    Card

    And more stuff

    - - + + Hurray @@ -111,7 +111,7 @@

    Disabled datepicker

    Dialog

    - +

    Grid list

    @@ -211,7 +211,7 @@

    Groceries

    Menu

    - + @@ -299,7 +299,7 @@

    Slider

    Snack bar

    - +

    Tabs

    @@ -325,7 +325,7 @@

    The overview

    atque iste doloremque dolor? Ullam, aspernatur? Alias, fuga! At dolorum odio molestiae laudantium nihil alias inventore veritatis voluptatum.

    - + API docs @@ -340,7 +340,7 @@

    The API docs

    officiis molestias, excepturi odio, autem magni dignissimos perspiciatis, amet qui! Dolorem molestiae similique necessitatibus cupiditate ipsa aspernatur?

    - +     @@ -351,7 +351,7 @@

    The examples

    accusantium, eos perspiciatis reprehenderit, nobis exercitationem sunt ducimus molestiae laborum inventore itaque incidunt. Neque dolorum adipisci quidem.

    - +     @@ -553,7 +553,7 @@

    Focus trap

    Badge

    - +

    Drag and Drop