Skip to content

Commit ee95a76

Browse files
amysortoamysorto
authored
docs(material/button): switch examples and demo to MDC (#25559)
1 parent 0ad5d60 commit ee95a76

File tree

16 files changed

+208
-216
lines changed

16 files changed

+208
-216
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@
197197
/src/dev-app/live-announcer/** @jelbourn
198198
/src/dev-app/mdc-autocomplete/** @crisbeto
199199
/src/dev-app/mdc-button/** @andrewseguin
200+
/src/dev-app/legacy-button/** @andrewseguin
200201
/src/dev-app/mdc-chips/** @mmalerba
201202
/src/dev-app/mdc-menu/** @crisbeto
202203
/src/dev-app/mdc-progress-bar/** @crisbeto

‎src/components-examples/material/button/BUILD.bazel

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18+
"//src/material/button",
19+
"//src/material/button/testing",
1820
"//src/material/divider",
1921
"//src/material/icon",
20-
"//src/material/legacy-button",
21-
"//src/material/legacy-button/testing",
2222
"@npm//@angular/platform-browser",
2323
"@npm//@angular/platform-browser-dynamic",
2424
"@npm//@types/jasmine",
@@ -41,8 +41,8 @@ ng_test_library(
4141
":button",
4242
"//src/cdk/testing",
4343
"//src/cdk/testing/testbed",
44-
"//src/material/legacy-button",
45-
"//src/material/legacy-button/testing",
44+
"//src/material/button",
45+
"//src/material/button/testing",
4646
"@npm//@angular/platform-browser-dynamic",
4747
],
4848
)

‎src/components-examples/material/button/button-harness/button-harness-example.spec.ts

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing';
3+
import {MatButtonHarness} from '@angular/material/button/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
5+
import {MatButtonModule} from '@angular/material/button';
66
import {ButtonHarnessExample} from './button-harness-example';
77

88
describe('ButtonHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ButtonHarnessExample', () => {
1111

1212
beforeEach(async () => {
1313
await TestBed.configureTestingModule({
14-
imports: [MatLegacyButtonModule],
14+
imports: [MatButtonModule],
1515
declarations: [ButtonHarnessExample],
1616
}).compileComponents();
1717
fixture = TestBed.createComponent(ButtonHarnessExample);
@@ -20,20 +20,18 @@ describe('ButtonHarnessExample', () => {
2020
});
2121

2222
it('should load all button harnesses', async () => {
23-
const buttons = await loader.getAllHarnesses(MatLegacyButtonHarness);
23+
const buttons = await loader.getAllHarnesses(MatButtonHarness);
2424
expect(buttons.length).toBe(1);
2525
});
2626

2727
it('should load button with exact text', async () => {
28-
const buttons = await loader.getAllHarnesses(
29-
MatLegacyButtonHarness.with({text: 'Basic button'}),
30-
);
28+
const buttons = await loader.getAllHarnesses(MatButtonHarness.with({text: 'Basic button'}));
3129
expect(buttons.length).toBe(1);
3230
expect(await buttons[0].getText()).toBe('Basic button');
3331
});
3432

3533
it('should click a button', async () => {
36-
const button = await loader.getHarness(MatLegacyButtonHarness.with({text: 'Basic button'}));
34+
const button = await loader.getHarness(MatButtonHarness.with({text: 'Basic button'}));
3735
expect(fixture.componentInstance.clicked).toBe(false);
3836
await button.click();
3937
expect(fixture.componentInstance.clicked).toBe(true);

‎src/components-examples/material/button/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {NgModule} from '@angular/core';
2-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
2+
import {MatButtonModule} from '@angular/material/button';
33
import {MatDividerModule} from '@angular/material/divider';
44
import {MatIconModule} from '@angular/material/icon';
55
import {ButtonOverviewExample} from './button-overview/button-overview-example';
@@ -11,7 +11,7 @@ export {ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample};
1111
const EXAMPLES = [ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample];
1212

1313
@NgModule({
14-
imports: [MatLegacyButtonModule, MatDividerModule, MatIconModule],
14+
imports: [MatButtonModule, MatDividerModule, MatIconModule],
1515
declarations: EXAMPLES,
1616
exports: EXAMPLES,
1717
})

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ ng_module(
4747
"//src/dev-app/input",
4848
"//src/dev-app/input-modality",
4949
"//src/dev-app/layout",
50+
"//src/dev-app/legacy-button",
5051
"//src/dev-app/legacy-card",
5152
"//src/dev-app/legacy-checkbox",
5253
"//src/dev-app/legacy-dialog",
@@ -60,7 +61,6 @@ ng_module(
6061
"//src/dev-app/list",
6162
"//src/dev-app/live-announcer",
6263
"//src/dev-app/mdc-autocomplete",
63-
"//src/dev-app/mdc-button",
6464
"//src/dev-app/mdc-chips",
6565
"//src/dev-app/mdc-menu",
6666
"//src/dev-app/mdc-progress-bar",

‎src/dev-app/button/BUILD.bazel

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ ng_module(
1010
":button_demo_scss",
1111
],
1212
deps = [
13-
"//src/components-examples/material/button",
13+
"//src/material/button",
1414
"//src/material/icon",
15-
"//src/material/legacy-button",
1615
],
1716
)
1817

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

Lines changed: 109 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,36 @@ <h4 class="demo-section-header">Buttons</h4>
55
<button mat-raised-button>raised</button>
66
<button mat-stroked-button>stroked</button>
77
<button mat-flat-button>flat</button>
8-
<button mat-fab><mat-icon>check</mat-icon></button>
9-
<button mat-mini-fab><mat-icon>check</mat-icon></button>
8+
<button mat-fab>
9+
<mat-icon>check</mat-icon>
10+
</button>
11+
<button mat-mini-fab>
12+
<mat-icon>check</mat-icon>
13+
</button>
14+
<button mat-fab extended>Search</button>
15+
<button mat-fab extended>
16+
<mat-icon>check</mat-icon>
17+
Search
18+
<mat-icon iconPositionEnd>check</mat-icon>
19+
</button>
20+
</section>
21+
<section>
22+
<button mat-button disabled>normal</button>
23+
<button mat-raised-button disabled>raised</button>
24+
<button mat-stroked-button disabled>stroked</button>
25+
<button mat-flat-button disabled>flat</button>
26+
<button mat-fab disabled>
27+
<mat-icon>check</mat-icon>
28+
</button>
29+
<button mat-mini-fab disabled>
30+
<mat-icon>check</mat-icon>
31+
</button>
32+
<button mat-fab extended disabled>Search</button>
33+
<button mat-fab extended disabled>
34+
<mat-icon>check</mat-icon>
35+
Search
36+
<mat-icon iconPositionEnd>check</mat-icon>
37+
</button>
1038
</section>
1139

1240
<h4 class="demo-section-header">Anchors</h4>
@@ -15,8 +43,36 @@ <h4 class="demo-section-header">Anchors</h4>
1543
<a href="//www.google.com" mat-raised-button>SEARCH</a>
1644
<a href="//www.google.com" mat-stroked-button>SEARCH</a>
1745
<a href="//www.google.com" mat-flat-button>SEARCH</a>
18-
<a href="//www.google.com" mat-fab><mat-icon>check</mat-icon></a>
19-
<a href="//www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
46+
<a href="//www.google.com" mat-fab>
47+
<mat-icon>check</mat-icon>
48+
</a>
49+
<a href="//www.google.com" mat-mini-fab>
50+
<mat-icon>check</mat-icon>
51+
</a>
52+
<a href="//www.google.com" mat-fab extended>Search</a>
53+
<a href="//www.google.com" mat-fab extended>
54+
<mat-icon>check</mat-icon>
55+
Search
56+
<mat-icon iconPositionEnd>check</mat-icon>
57+
</a>
58+
</section>
59+
<section>
60+
<a href="//www.google.com" disabled mat-button color="primary">SEARCH</a>
61+
<a href="//www.google.com" disabled mat-raised-button>SEARCH</a>
62+
<a href="//www.google.com" disabled mat-stroked-button color="primary">SEARCH</a>
63+
<a href="//www.google.com" disabled mat-flat-button>SEARCH</a>
64+
<a href="//www.google.com" disabled mat-fab>
65+
<mat-icon>check</mat-icon>
66+
</a>
67+
<a href="//www.google.com" disabled mat-mini-fab>
68+
<mat-icon>check</mat-icon>
69+
</a>
70+
<a href="//www.google.com" disabled mat-fab extended>Search</a>
71+
<a href="//www.google.com" disabled mat-fab extended>
72+
<mat-icon>check</mat-icon>
73+
Search
74+
<mat-icon iconPositionEnd>check</mat-icon>
75+
</a>
2076
</section>
2177

2278
<h4 class="demo-section-header">Text Buttons [mat-button]</h4>
@@ -29,7 +85,7 @@ <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
2985
<button mat-button>
3086
<mat-icon>home</mat-icon>
3187
with icons
32-
<mat-icon>favorite</mat-icon>
88+
<mat-icon iconPositionEnd>favorite</mat-icon>
3389
</button>
3490
</section>
3591

@@ -43,7 +99,7 @@ <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
4399
<button mat-raised-button>
44100
<mat-icon>home</mat-icon>
45101
with icons
46-
<mat-icon>favorite</mat-icon>
102+
<mat-icon iconPositionEnd>favorite</mat-icon>
47103
</button>
48104
</section>
49105

@@ -57,7 +113,7 @@ <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
57113
<button mat-stroked-button>
58114
<mat-icon>home</mat-icon>
59115
with icons
60-
<mat-icon>favorite</mat-icon>
116+
<mat-icon iconPositionEnd>favorite</mat-icon>
61117
</button>
62118
</section>
63119

@@ -71,35 +127,65 @@ <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
71127
<button mat-flat-button>
72128
<mat-icon>home</mat-icon>
73129
with icons
74-
<mat-icon>favorite</mat-icon>
130+
<mat-icon iconPositionEnd>favorite</mat-icon>
75131
</button>
76132
</section>
77133

78134
<h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
79135
<section>
80-
<button mat-icon-button><mat-icon>cached</mat-icon></button>
81-
<button mat-icon-button color="primary"><mat-icon>cached</mat-icon></button>
82-
<button mat-icon-button color="accent"><mat-icon>backup</mat-icon></button>
83-
<button mat-icon-button color="warn"><mat-icon>trending_up</mat-icon></button>
84-
<button mat-icon-button disabled><mat-icon>visibility</mat-icon></button>
136+
<button mat-icon-button>
137+
<mat-icon>cached</mat-icon>
138+
</button>
139+
<button mat-icon-button color="primary">
140+
<mat-icon>cached</mat-icon>
141+
</button>
142+
<button mat-icon-button color="accent">
143+
<mat-icon>backup</mat-icon>
144+
</button>
145+
<button mat-icon-button color="warn">
146+
<mat-icon>trending_up</mat-icon>
147+
</button>
148+
<button mat-icon-button disabled>
149+
<mat-icon>visibility</mat-icon>
150+
</button>
85151
</section>
86152

87153
<h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
88154
<section>
89-
<button mat-fab><mat-icon>delete</mat-icon></button>
90-
<button mat-fab color="primary"><mat-icon>delete</mat-icon></button>
91-
<button mat-fab color="accent"><mat-icon>bookmark</mat-icon></button>
92-
<button mat-fab color="warn"><mat-icon>home</mat-icon></button>
93-
<button mat-fab disabled><mat-icon>favorite</mat-icon></button>
155+
<button mat-fab>
156+
<mat-icon>delete</mat-icon>
157+
</button>
158+
<button mat-fab color="primary">
159+
<mat-icon>delete</mat-icon>
160+
</button>
161+
<button mat-fab color="accent">
162+
<mat-icon>bookmark</mat-icon>
163+
</button>
164+
<button mat-fab color="warn">
165+
<mat-icon>home</mat-icon>
166+
</button>
167+
<button mat-fab disabled>
168+
<mat-icon>favorite</mat-icon>
169+
</button>
94170
</section>
95171

96172
<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
97173
<section>
98-
<button mat-mini-fab><mat-icon>menu</mat-icon></button>
99-
<button mat-mini-fab color="primary"><mat-icon>menu</mat-icon></button>
100-
<button mat-mini-fab color="accent"><mat-icon>plus_one</mat-icon></button>
101-
<button mat-mini-fab color="warn"><mat-icon>filter_list</mat-icon></button>
102-
<button mat-mini-fab disabled><mat-icon>home</mat-icon></button>
174+
<button mat-mini-fab>
175+
<mat-icon>menu</mat-icon>
176+
</button>
177+
<button mat-mini-fab color="primary">
178+
<mat-icon>menu</mat-icon>
179+
</button>
180+
<button mat-mini-fab color="accent">
181+
<mat-icon>plus_one</mat-icon>
182+
</button>
183+
<button mat-mini-fab color="warn">
184+
<mat-icon>filter_list</mat-icon>
185+
</button>
186+
<button mat-mini-fab disabled>
187+
<mat-icon>home</mat-icon>
188+
</button>
103189
</section>
104190

105191
<h4 class="demo-section-header">Interaction/State</h4>
@@ -139,9 +225,4 @@ <h4 class="demo-section-header">Interaction/State</h4>
139225
</button>
140226
</div>
141227
</section>
142-
143-
<h4 class="demo-section-header">Overview</h4>
144-
<section>
145-
<button-overview-example></button-overview-example>
146-
</section>
147228
</div>

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

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
1-
.demo-button {
2-
button, a {
3-
margin: 8px;
4-
text-transform: uppercase;
5-
}
1+
button,
2+
a {
3+
margin: 8px;
4+
text-transform: uppercase;
5+
}
66

7-
section {
8-
display: flex;
9-
align-items: center;
10-
margin: 8px;
11-
}
7+
section {
8+
display: flex;
9+
align-items: center;
10+
margin: 8px;
11+
}
1212

13-
p {
14-
padding: 5px 15px;
15-
}
13+
p {
14+
padding: 5px 15px;
15+
}
1616

17-
.demo-section-header {
18-
font-weight: 500;
19-
margin: 0;
20-
}
17+
.demo-section-header {
18+
font-weight: 500;
19+
margin: 0;
20+
}
2121

22-
.demo-no-flex {
23-
display: block;
24-
}
22+
.demo-no-flex {
23+
display: block;
2524
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,15 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {ButtonExamplesModule} from '@angular/components-examples/material/button';
11-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
10+
import {MatButtonModule} from '@angular/material/button';
1211
import {MatIconModule} from '@angular/material/icon';
1312

1413
@Component({
1514
selector: 'button-demo',
1615
templateUrl: 'button-demo.html',
1716
styleUrls: ['button-demo.css'],
1817
standalone: true,
19-
imports: [ButtonExamplesModule, MatLegacyButtonModule, MatIconModule],
18+
imports: [MatButtonModule, MatIconModule],
2019
})
2120
export class ButtonDemo {
2221
isDisabled: boolean = false;

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,6 @@ export class DevAppLayout {
104104
{name: 'Virtual Scrolling', route: '/virtual-scroll'},
105105
{name: 'YouTube Player', route: '/youtube-player'},
106106
{name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
107-
{name: 'MDC Button', route: '/mdc-button'},
108107
{name: 'MDC Chips', route: '/mdc-chips'},
109108
{name: 'MDC Menu', route: '/mdc-menu'},
110109
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
@@ -113,6 +112,7 @@ export class DevAppLayout {
113112
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
114113
{name: 'MDC Slider', route: '/mdc-slider'},
115114
{name: 'MDC Tabs', route: '/mdc-tabs'},
115+
{name: 'Legacy Button', route: '/legacy-button'},
116116
{name: 'Legacy Card', route: '/legacy-card'},
117117
{name: 'Legacy Checkbox', route: '/legacy-checkbox'},
118118
{name: 'Legacy Dialog', route: '/legacy-dialog'},

0 commit comments

Comments
 (0)