Skip to content

Commit 5c304ae

Browse files
devversiondevversion
committed
refactor: test changes
1 parent d8ff80a commit 5c304ae

File tree

9 files changed

+69
-25
lines changed

9 files changed

+69
-25
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export class DialogDemo {
2121
dialogRef: MatDialogRef<JazzDialog> | null;
2222
lastAfterClosedResult: string;
2323
lastBeforeCloseResult: string;
24-
actionsAlignment: string;
24+
actionsAlignment: 'start' | 'center' | 'end';
2525
config = {
2626
disableClose: false,
2727
panelClass: 'custom-overlay-pane-class',
@@ -156,7 +156,7 @@ export class JazzDialog {
156156
</p>
157157
</mat-dialog-content>
158158
159-
<mat-dialog-actions [attr.align]="actionsAlignment">
159+
<mat-dialog-actions [align]="actionsAlignment">
160160
<button
161161
mat-raised-button
162162
color="primary"
@@ -177,7 +177,7 @@ export class JazzDialog {
177177
`,
178178
})
179179
export class ContentElementDialog {
180-
actionsAlignment: string;
180+
actionsAlignment: 'start' | 'center' | 'end';
181181

182182
constructor(public dialog: MatDialog) {}
183183

‎src/dev-app/mdc-dialog/mdc-dialog-demo.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class DialogDemo {
2929
dialogRef: MatDialogRef<JazzDialog> | null;
3030
lastAfterClosedResult: string;
3131
lastBeforeCloseResult: string;
32-
actionsAlignment: string;
32+
actionsAlignment: 'start' | 'center' | 'end';
3333
config = {
3434
disableClose: false,
3535
panelClass: 'custom-overlay-pane-class',
@@ -173,7 +173,7 @@ export class JazzDialog {
173173
</p>
174174
</mat-dialog-content>
175175
176-
<mat-dialog-actions [attr.align]="actionsAlignment">
176+
<mat-dialog-actions [align]="actionsAlignment">
177177
<button
178178
mat-raised-button
179179
color="primary"
@@ -194,7 +194,7 @@ export class JazzDialog {
194194
`,
195195
})
196196
export class ContentElementDialog {
197-
actionsAlignment: string;
197+
actionsAlignment: 'start' | 'center' | 'end';
198198

199199
constructor(public dialog: MatDialog) {}
200200

‎src/material-experimental/mdc-dialog/dialog-content-directives.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,9 +141,18 @@ export class MatDialogContent {}
141141
*/
142142
@Directive({
143143
selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
144-
host: {'class': 'mat-mdc-dialog-actions mdc-dialog__actions'},
144+
host: {
145+
'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
146+
'[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
147+
'[class.mat-mdc-dialog-actions-align-end]': 'align === "end"',
148+
},
145149
})
146-
export class MatDialogActions {}
150+
export class MatDialogActions {
151+
/**
152+
* Horizontal alignment of action buttons.
153+
*/
154+
@Input() align?: 'start' | 'center' | 'end' = 'start';
155+
}
147156

148157
/**
149158
* Finds the closest MatDialogRef to an element by looking at the DOM.

‎src/material-experimental/mdc-dialog/dialog.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,14 @@ $mat-dialog-button-horizontal-margin: 8px !default;
2929
// aligns actions at the end of the container.
3030
justify-content: start;
3131

32-
&[align='end'] {
33-
justify-content: flex-end;
34-
}
35-
36-
&[align='center'] {
32+
// .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
33+
// [align='center'] and [align='right'] are kept for backwards compability
34+
&.mat-mdc-dialog-actions-align-center, &[align='center'] {
3735
justify-content: center;
3836
}
37+
&.mat-mdc-dialog-actions-align-end, &[align='end'] {
38+
justify-content: flex-end;
39+
}
3940

4041
// MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
4142
// class applied. We can't set this class for projected buttons that consumers of the

‎src/material-experimental/mdc-dialog/dialog.spec.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1670,6 +1670,17 @@ describe('MDC-based MatDialog', () => {
16701670
.withContext('Expected the aria-labelledby to match the title id.')
16711671
.toBe(title.id);
16721672
}));
1673+
1674+
it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
1675+
let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
1676+
1677+
expect(actions)
1678+
.withContext('Expected action buttons to not have class align-center')
1679+
.not.toHaveClass('mat-mdc-dialog-actions-align-center');
1680+
expect(actions)
1681+
.withContext('Expected action buttons to have class align-end')
1682+
.toHaveClass('mat-mdc-dialog-actions-align-end');
1683+
});
16731684
}
16741685
});
16751686

@@ -2072,7 +2083,7 @@ class PizzaMsg {
20722083
template: `
20732084
<h1 mat-dialog-title>This is the title</h1>
20742085
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
2075-
<mat-dialog-actions>
2086+
<mat-dialog-actions align="end">
20762087
<button mat-dialog-close>Close</button>
20772088
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
20782089
<button
@@ -2091,7 +2102,7 @@ class ContentElementDialog {}
20912102
<ng-template>
20922103
<h1 mat-dialog-title>This is the title</h1>
20932104
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
2094-
<mat-dialog-actions>
2105+
<mat-dialog-actions align="end">
20952106
<button mat-dialog-close>Close</button>
20962107
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
20972108
<button

‎src/material/dialog/dialog-content-directives.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,18 @@ export class MatDialogContent {}
145145
*/
146146
@Directive({
147147
selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
148-
host: {'class': 'mat-dialog-actions'},
148+
host: {
149+
'class': 'mat-dialog-actions',
150+
'[class.mat-dialog-actions-align-center]': 'align === "center"',
151+
'[class.mat-dialog-actions-align-end]': 'align === "end"',
152+
},
149153
})
150-
export class MatDialogActions {}
154+
export class MatDialogActions {
155+
/**
156+
* Horizontal alignment of action buttons.
157+
*/
158+
@Input() align?: 'start' | 'center' | 'end' = 'start';
159+
}
151160

152161
/**
153162
* Finds the closest MatDialogRef to an element by looking at the DOM.

‎src/material/dialog/dialog.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,14 @@ $button-margin: 8px !default;
5656
// Pull the actions down to avoid their padding stacking with the dialog's padding.
5757
margin-bottom: -$padding;
5858

59-
&[align='end'] {
60-
justify-content: flex-end;
61-
}
62-
63-
&[align='center'] {
59+
// .mat-dialog-actions-align-{center|end} are set by directive input "align"
60+
// [align='center'] and [align='right'] are kept for backwards compability
61+
&.mat-dialog-actions-align-center, &[align='center'] {
6462
justify-content: center;
6563
}
64+
&.mat-dialog-actions-align-end, &[align='end'] {
65+
justify-content: flex-end;
66+
}
6667

6768
.mat-button-base + .mat-button-base,
6869
.mat-mdc-button-base + .mat-mdc-button-base {

‎src/material/dialog/dialog.spec.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1733,6 +1733,18 @@ describe('MatDialog', () => {
17331733
.withContext('Expected the aria-labelledby to match the title id.')
17341734
.toBe(title.id);
17351735
}));
1736+
1737+
it('should add correct css class according to given [align] input in [mat-dialog-actions]', () => {
1738+
let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;
1739+
1740+
expect(actions)
1741+
.withContext('Expected action buttons to not have class mat-dialog-actions-align-center')
1742+
.not.toHaveClass('mat-dialog-actions-align-center');
1743+
1744+
expect(actions)
1745+
.withContext('Expected action buttons to have class mat-dialog-actions-align-end')
1746+
.toHaveClass('mat-dialog-actions-align-end');
1747+
});
17361748
}
17371749
});
17381750

@@ -2116,7 +2128,7 @@ class PizzaMsg {
21162128
template: `
21172129
<h1 mat-dialog-title>This is the title</h1>
21182130
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
2119-
<mat-dialog-actions>
2131+
<mat-dialog-actions align="end">
21202132
<button mat-dialog-close>Close</button>
21212133
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
21222134
<button
@@ -2135,7 +2147,7 @@ class ContentElementDialog {}
21352147
<ng-template>
21362148
<h1 mat-dialog-title>This is the title</h1>
21372149
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
2138-
<mat-dialog-actions>
2150+
<mat-dialog-actions align="end">
21392151
<button mat-dialog-close>Close</button>
21402152
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
21412153
<button

‎tools/public_api_guard/material/dialog.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,9 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {
9696

9797
// @public
9898
export class MatDialogActions {
99+
align?: 'start' | 'center' | 'end';
99100
// (undocumented)
100-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
101+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
101102
// (undocumented)
102103
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
103104
}

0 commit comments

Comments
 (0)