Skip to content

Commit c6cb080

Browse files
crisbetocrisbeto
committed
refactor(multiple): switch button selectors
Reworks the various places where we have buttons to use the new selectors.
1 parent b21a43c commit c6cb080

File tree

172 files changed

+705
-773
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

172 files changed

+705
-773
lines changed

‎integration/yarn-pnp-compat/src/app/app.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<button mat-button>Click here</button>
1+
<button matButton>Click here</button>

‎src/cdk/schematics/ng-update/html-parsing/angular.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function findInputsOnElementWithTag(html: string, inputName: string, tagN
2323
/** Finds the specified Angular @Input in elements that have one of the specified attributes. */
2424
export function findInputsOnElementWithAttr(html: string, inputName: string, attrs: string[]) {
2525
return [
26-
// Inputs can be also used without brackets (e.g. `<button mat-button color="primary">`)
26+
// Inputs can be also used without brackets (e.g. `<button matButton color="primary">`)
2727
...findAttributeOnElementWithAttrs(html, inputName, attrs),
2828
// Add one column to the mapped offset because the first bracket for the @Input
2929
// is part of the attribute and therefore also part of the offset. We only want to return

‎src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@
1313
<mat-hint>Autofilled!</mat-hint>
1414
}
1515
</mat-form-field>
16-
<button mat-raised-button>Submit</button>
16+
<button matButton="elevated">Submit</button>
1717
</form>

‎src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@
1313
<mat-hint>Autofilled!</mat-hint>
1414
}
1515
</mat-form-field>
16-
<button mat-raised-button>Submit</button>
16+
<button matButton="elevated">Submit</button>
1717
</form>

‎src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
@if (!node.areChildrenLoading() && node.isExpandable()) {
2222
<button
23-
mat-icon-button
23+
matIconButton
2424
cdkTreeNodeToggle
2525
[attr.aria-label]="'Toggle ' + node.raw.name">
2626
<mat-icon class="mat-icon-rtl-mirror">

‎src/components-examples/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[isDisabled]="!shouldRender(node)"
66
class="example-tree-node">
77
<!-- use a disabled button to provide padding for tree leaf -->
8-
<button mat-icon-button disabled></button>
8+
<button matIconButton disabled></button>
99
{{node.name}}
1010
</cdk-tree-node>
1111
<!-- This is the tree node template for expandable nodes -->
@@ -17,7 +17,7 @@
1717
(expandedChange)="node.isExpanded = $event"
1818
class="example-tree-node"
1919
tabindex="0">
20-
<button mat-icon-button cdkTreeNodeToggle
20+
<button matIconButton cdkTreeNodeToggle
2121
[attr.aria-label]="'Toggle ' + node.name"
2222
[style.visibility]="node.expandable ? 'visible' : 'hidden'">
2323
<mat-icon class="mat-icon-rtl-mirror">

‎src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[isDisabled]="!shouldRender(node)"
66
class="example-tree-node">
77
<!-- use a disabled button to provide padding for tree leaf -->
8-
<button mat-icon-button disabled></button>
8+
<button matIconButton disabled></button>
99
{{node.name}}
1010
</cdk-tree-node>
1111
<!-- This is the tree node template for expandable nodes -->
@@ -16,7 +16,7 @@
1616
[isDisabled]="!shouldRender(node)"
1717
[isExpandable]="true"
1818
class="example-tree-node">
19-
<button mat-icon-button cdkTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
19+
<button matIconButton cdkTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
2020
<mat-icon class="mat-icon-rtl-mirror">
2121
{{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
2222
</mat-icon>

‎src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[isDisabled]="!shouldRender(node)"
66
class="example-tree-node">
77
<!-- use a disabled button to provide padding for tree leaf -->
8-
<button mat-icon-button disabled></button>
8+
<button matIconButton disabled></button>
99
{{node.name}}
1010
</cdk-tree-node>
1111
<!-- This is the tree node template for expandable nodes -->
@@ -16,7 +16,7 @@
1616
[isDisabled]="!shouldRender(node)"
1717
[isExpandable]="node.expandable"
1818
class="example-tree-node">
19-
<button mat-icon-button cdkTreeNodeToggle
19+
<button matIconButton cdkTreeNodeToggle
2020
[attr.aria-label]="'Toggle ' + node.name"
2121
[style.visibility]="node.expandable ? 'visible' : 'hidden'">
2222
<mat-icon class="mat-icon-rtl-mirror">

‎src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[isDisabled]="!shouldRender(node)"
66
class="example-tree-node">
77
<!-- use a disabled button to provide padding for tree leaf -->
8-
<button mat-icon-button disabled></button>
8+
<button matIconButton disabled></button>
99
{{node.name}}
1010
</cdk-tree-node>
1111
<!-- This is the tree node template for expandable nodes -->
@@ -15,7 +15,7 @@
1515
[isDisabled]="!shouldRender(node)"
1616
(expandedChange)="node.isExpanded = $event"
1717
class="example-tree-node">
18-
<button mat-icon-button cdkTreeNodeToggle
18+
<button matIconButton cdkTreeNodeToggle
1919
[attr.aria-label]="'Toggle ' + node.name"
2020
[style.visibility]="node.expandable ? 'visible' : 'hidden'">
2121
<mat-icon class="mat-icon-rtl-mirror">

‎src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<cdk-nested-tree-node #treeNode="cdkNestedTreeNode" *cdkTreeNodeDef="let node"
44
class="example-tree-node">
55
<!-- use a disabled button to provide padding for tree leaf -->
6-
<button mat-icon-button disabled></button>
6+
<button matIconButton disabled></button>
77
{{node.name}}
88
</cdk-nested-tree-node>
99
<!-- This is the tree node template for expandable nodes -->
@@ -13,7 +13,7 @@
1313
isExpandable
1414
class="example-tree-node">
1515
<button
16-
mat-icon-button
16+
matIconButton
1717
class="example-toggle"
1818
[attr.aria-label]="'Toggle ' + node.name"
1919
cdkTreeNodeToggle>

‎src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<cdk-nested-tree-node #treeNode="cdkNestedTreeNode" *cdkTreeNodeDef="let node"
44
class="example-tree-node">
55
<!-- use a disabled button to provide padding for tree leaf -->
6-
<button mat-icon-button disabled></button>
6+
<button matIconButton disabled></button>
77
{{node.name}}
88
</cdk-nested-tree-node>
99
<!-- This is the tree node template for expandable nodes -->
@@ -14,7 +14,7 @@
1414
isExpandable
1515
class="example-tree-node">
1616
<button
17-
mat-icon-button
17+
matIconButton
1818
class="example-toggle"
1919
[attr.aria-label]="'Toggle ' + node.name"
2020
cdkTreeNodeToggle>

‎src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<cdk-nested-tree-node #treeNode="cdkNestedTreeNode" *cdkTreeNodeDef="let node"
44
class="example-tree-node">
55
<!-- use a disabled button to provide padding for tree leaf -->
6-
<button mat-icon-button disabled></button>
6+
<button matIconButton disabled></button>
77
{{node.name}}
88
</cdk-nested-tree-node>
99
<!-- This is the tree node template for expandable nodes -->
@@ -13,7 +13,7 @@
1313
isExpandable
1414
class="example-tree-node">
1515
<button
16-
mat-icon-button
16+
matIconButton
1717
class="example-toggle"
1818
[attr.aria-label]="'Toggle ' + node.name"
1919
cdkTreeNodeToggle>

‎src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
</div>
2323

2424
<div mat-edit-actions>
25-
<button mat-button type="submit">Confirm</button>
26-
<button mat-button cdkEditRevert>Revert</button>
27-
<button mat-button cdkEditClose>Close</button>
25+
<button matButton type="submit">Confirm</button>
26+
<button matButton cdkEditRevert>Revert</button>
27+
<button matButton cdkEditClose>Close</button>
2828
</div>
2929
</form>
3030
</div>
@@ -46,7 +46,7 @@
4646
{{person.firstName}}
4747

4848
<span *matRowHoverContent>
49-
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
49+
<button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
5050
</span>
5151
</td>
5252
</ng-container>
@@ -61,7 +61,7 @@
6161
{{person.middleName}}
6262

6363
<span *matRowHoverContent>
64-
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
64+
<button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
6565
</span>
6666
</td>
6767
</ng-container>
@@ -76,7 +76,7 @@
7676
{{person.lastName}}
7777

7878
<span *matRowHoverContent>
79-
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
79+
<button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
8080
</span>
8181
</td>
8282
</ng-container>

‎src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,16 @@ <h2 mat-edit-title>Name</h2>
4747
</mat-form-field>
4848
</div>
4949
<div mat-edit-actions>
50-
<button mat-button type="submit">Confirm</button>
51-
<button mat-button matEditRevert>Revert</button>
52-
<button mat-button matEditClose>Close</button>
50+
<button matButton type="submit">Confirm</button>
51+
<button matButton matEditRevert>Revert</button>
52+
<button matButton matEditClose>Close</button>
5353
</div>
5454
</form>
5555
</div>
5656
</ng-template>
5757

5858
<span *matRowHoverContent>
59-
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
59+
<button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
6060
</span>
6161
</mat-cell>
6262
</ng-container>
@@ -69,7 +69,7 @@ <h2 mat-edit-title>Name</h2>
6969
{{element.weight}}
7070

7171
<span *matRowHoverContent>
72-
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
72+
<button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
7373
</span>
7474
</mat-cell>
7575
</ng-container>

‎src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@
2626

2727
<!-- Row hover content in a non-edit cell. -->
2828
<span *matRowHoverContent>
29-
<button mat-icon-button (click)="goodJob(element)">
29+
<button matIconButton (click)="goodJob(element)">
3030
<mat-icon>thumb_up</mat-icon>
3131
</button>
32-
<button mat-icon-button (click)="badJob(element)">
32+
<button matIconButton (click)="badJob(element)">
3333
<mat-icon>thumb_down</mat-icon>
3434
</button>
3535
</span>
@@ -62,17 +62,17 @@ <h2 mat-edit-title>Name</h2>
6262
</mat-form-field>
6363
</div>
6464
<div mat-edit-actions>
65-
<button mat-button type="submit">Confirm</button>
66-
<button mat-button matEditRevert>Revert</button>
67-
<button mat-button matEditClose>Close</button>
65+
<button matButton type="submit">Confirm</button>
66+
<button matButton matEditRevert>Revert</button>
67+
<button matButton matEditClose>Close</button>
6868
</div>
6969
</form>
7070
</div>
7171
</ng-template>
7272

7373
@if (nameEditEnabled) {
7474
<span *matRowHoverContent>
75-
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
75+
<button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
7676
</span>
7777
}
7878
</td>
@@ -109,7 +109,7 @@ <h2 mat-edit-title>Name</h2>
109109
</ng-template>
110110

111111
<span *matRowHoverContent>
112-
<button mat-icon-button matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
112+
<button matIconButton matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
113113
</span>
114114
</td>
115115
</ng-container>
@@ -122,7 +122,7 @@ <h2 mat-edit-title>Name</h2>
122122
{{element.weight}}
123123

124124
<span *matRowHoverContent>
125-
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
125+
<button matIconButton matEditOpen><mat-icon>edit</mat-icon></button>
126126
</span>
127127
</td>
128128
</ng-container>
@@ -162,15 +162,15 @@ <h2 mat-edit-title>Name</h2>
162162
</mat-selection-list>
163163
</div>
164164
<div mat-edit-actions>
165-
<button mat-button type="submit">Confirm</button>
166-
<button mat-button matEditRevert>Revert</button>
165+
<button matButton type="submit">Confirm</button>
166+
<button matButton matEditRevert>Revert</button>
167167
</div>
168168
</form>
169169
</div>
170170
</ng-template>
171171

172172
<span *matRowHoverContent>
173-
<button mat-icon-button matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
173+
<button matIconButton matEditOpen><mat-icon>arrow_drop_down</mat-icon></button>
174174
</span>
175175
</td>
176176
</ng-container>

‎src/components-examples/material/badge/badge-harness/badge-harness-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<button mat-button id="simple" [matBadge]="simpleContent()">Simple</button>
2-
<button mat-button
1+
<button matButton id="simple" [matBadge]="simpleContent()">Simple</button>
2+
<button matButton
33
id="overlapping"
44
matBadge="O"
55
[matBadgeOverlap]="overlap()">Overlapping</button>
66
<button
7-
mat-button
7+
matButton
88
id="disabled"
99
matBadge="D"
1010
[matBadgeDisabled]="disabled()">Disabled</button>

‎src/components-examples/material/badge/badge-overview/badge-overview-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="demo-section">
1111
Button with a badge on the left
1212
<!-- #docregion mat-badge-position -->
13-
<button mat-raised-button matBadge="8" matBadgePosition="before">
13+
<button matButton="elevated" matBadge="8" matBadgePosition="before">
1414
Action
1515
</button>
1616
<!-- #enddocregion mat-badge-position -->
@@ -19,7 +19,7 @@
1919
<div class="demo-section">
2020
Button toggles badge visibility
2121
<!-- #docregion mat-badge-hide -->
22-
<button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
22+
<button matButton="elevated" matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
2323
Hide
2424
</button>
2525
<!-- #enddocregion mat-badge-hide -->

‎src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<p>You have received a file called "cat-picture.jpeg".</p>
22

3-
<button mat-raised-button (click)="openBottomSheet()">Open file</button>
3+
<button matButton="elevated" (click)="openBottomSheet()">Open file</button>

‎src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<button
2-
mat-raised-button
2+
matButton="elevated"
33
disabled
44
disabledInteractive
55
matTooltip="This is a tooltip!">Disabled button allowing interactivity</button>
66

77
<button
8-
mat-raised-button
8+
matButton="elevated"
99
disabled
1010
matTooltip="This is a tooltip!">Default disabled button</button>

‎src/components-examples/material/button/button-harness/button-harness-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<button id="basic" type="button" mat-button (click)="clicked = true">
1+
<button id="basic" type="button" matButton (click)="clicked = true">
22
Basic button
33
</button>

0 commit comments

Comments
 (0)