Skip to content

fix(material/dialog) Use align as @Input() in MatDialogActions #24178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 11 commits into from
Closed

fix(material/dialog) Use align as @Input() in MatDialogActions #24178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c101f7f
fix(material/dialog): make align attribute into an input of dialog ac…
PooSham Dec 25, 2020
462d407
fix(material-experimental/mdc-dialog): make align attr into an input …
PooSham Dec 25, 2020
c79e1d1
Merge branch 'master' of https://github.com/angular/components into a…
PooSham Jan 5, 2022
54d0a60
Merge branch 'angular-master' into align-attr-as-input-in-dialog-acti…
PooSham Jan 5, 2022
9d2ac16
Merge branch 'angular:master' into align-attr-as-input-in-dialog-acti…
PooSham Jan 9, 2022
8d367c1
Update comments in dialog.scss for more clarity
PooSham Jan 9, 2022
d6deb45
Use 'start' as default instead of undefined for align attribute in di…
PooSham Jan 9, 2022
c87c4aa
Revert weird changes to dialog.spec.ts
PooSham Jan 9, 2022
77fca70
Change actionsAlignment type in dialog demo
PooSham Jan 10, 2022
815cf8f
Use directive binding in mdc-dialog demo for align
PooSham Jan 10, 2022
3276432
Merge branch 'angular:master' into align-attr-as-input-in-dialog-acti…
PooSham Jan 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/dev-app/dialog/dialog-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export class DialogDemo {
dialogRef: MatDialogRef<JazzDialog> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
actionsAlignment: 'start' | 'center' | 'end';
config = {
disableClose: false,
panelClass: 'custom-overlay-pane-class',
Expand Down Expand Up @@ -156,7 +156,7 @@ export class JazzDialog {
</p>
</mat-dialog-content>

<mat-dialog-actions [attr.align]="actionsAlignment">
<mat-dialog-actions [align]="actionsAlignment">
<button
mat-raised-button
color="primary"
Expand All @@ -177,7 +177,7 @@ export class JazzDialog {
`,
})
export class ContentElementDialog {
actionsAlignment: string;
actionsAlignment: 'start' | 'center' | 'end';

constructor(public dialog: MatDialog) {}

Expand Down
6 changes: 3 additions & 3 deletions src/dev-app/mdc-dialog/mdc-dialog-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export class DialogDemo {
dialogRef: MatDialogRef<JazzDialog> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
actionsAlignment: 'start' | 'center' | 'end';
config = {
disableClose: false,
panelClass: 'custom-overlay-pane-class',
Expand Down Expand Up @@ -173,7 +173,7 @@ export class JazzDialog {
</p>
</mat-dialog-content>

<mat-dialog-actions [attr.align]="actionsAlignment">
<mat-dialog-actions [align]="actionsAlignment">
<button
mat-raised-button
color="primary"
Expand All @@ -194,7 +194,7 @@ export class JazzDialog {
`,
})
export class ContentElementDialog {
actionsAlignment: string;
actionsAlignment: 'start' | 'center' | 'end';

constructor(public dialog: MatDialog) {}

Expand Down
10 changes: 8 additions & 2 deletions src/material-experimental/mdc-dialog/dialog-content-directives.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,15 @@ export class MatDialogContent {}
*/
@Directive({
selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
host: {'class': 'mat-mdc-dialog-actions mdc-dialog__actions'},
host: {
'class': 'mat-mdc-dialog-actions mdc-dialog__actions',
'[class.mat-mdc-dialog-actions-align-center]': 'align === "center"',
'[class.mat-mdc-dialog-actions-align-end]': 'align === "end"',
},
})
export class MatDialogActions {}
export class MatDialogActions {
@Input() align?: 'start' | 'center' | 'end' = 'start';
}

/**
* Finds the closest MatDialogRef to an element by looking at the DOM.
Expand Down
11 changes: 6 additions & 5 deletions src/material-experimental/mdc-dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,14 @@ $mat-dialog-button-horizontal-margin: 8px !default;
// aligns actions at the end of the container.
justify-content: start;

&[align='end'] {
justify-content: flex-end;
}

&[align='center'] {
// .mat-mdc-dialog-actions-align-{center|end} are set by directive input "align"
// [align='center'] and [align='right'] are kept for backwards compability
&.mat-mdc-dialog-actions-align-center, &[align='center'] {
justify-content: center;
}
&.mat-mdc-dialog-actions-align-end, &[align='end'] {
justify-content: flex-end;
}

// MDC applies horizontal margin to buttons that have an explicit `mdc-dialog__button`
// class applied. We can't set this class for projected buttons that consumers of the
Expand Down
15 changes: 13 additions & 2 deletions src/material-experimental/mdc-dialog/dialog.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1670,6 +1670,17 @@ describe('MDC-based MatDialog', () => {
.withContext('Expected the aria-labelledby to match the title id.')
.toBe(title.id);
}));

it('should add mat-mdc-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;

expect(actions)
.withContext('Expected action buttons to not have class align-center')
.not.toHaveClass('mat-mdc-dialog-actions-align-center');
expect(actions)
.withContext('Expected action buttons to have class align-end')
.not.toHaveClass('mat-mdc-dialog-actions-align-end');
});
}
});

Expand Down Expand Up @@ -2072,7 +2083,7 @@ class PizzaMsg {
template: `
<h1 mat-dialog-title>This is the title</h1>
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions align="end">
<button mat-dialog-close>Close</button>
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
<button
Expand All @@ -2091,7 +2102,7 @@ class ContentElementDialog {}
<ng-template>
<h1 mat-dialog-title>This is the title</h1>
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions align="end">
<button mat-dialog-close>Close</button>
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
<button
Expand Down
10 changes: 8 additions & 2 deletions src/material/dialog/dialog-content-directives.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,15 @@ export class MatDialogContent {}
*/
@Directive({
selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
host: {'class': 'mat-dialog-actions'},
host: {
'class': 'mat-dialog-actions',
'[class.mat-dialog-actions-align-center]': 'align === "center"',
'[class.mat-dialog-actions-align-end]': 'align === "end"',
},
})
export class MatDialogActions {}
export class MatDialogActions {
@Input() align?: 'start' | 'center' | 'end' = 'start';
}

/**
* Finds the closest MatDialogRef to an element by looking at the DOM.
Expand Down
11 changes: 6 additions & 5 deletions src/material/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,14 @@ $button-margin: 8px !default;
// Pull the actions down to avoid their padding stacking with the dialog's padding.
margin-bottom: -$padding;

&[align='end'] {
justify-content: flex-end;
}

&[align='center'] {
// .mat-dialog-actions-align-{center|end} are set by directive input "align"
// [align='center'] and [align='right'] are kept for backwards compability
&.mat-dialog-actions-align-center, &[align='center'] {
justify-content: center;
}
&.mat-dialog-actions-align-end, &[align='end'] {
justify-content: flex-end;
}

.mat-button-base + .mat-button-base,
.mat-mdc-button-base + .mat-mdc-button-base {
Expand Down
16 changes: 14 additions & 2 deletions src/material/dialog/dialog.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1733,6 +1733,18 @@ describe('MatDialog', () => {
.withContext('Expected the aria-labelledby to match the title id.')
.toBe(title.id);
}));

it('should add mat-dialog-actions-align-* class according to given [align] input in [mat-dialog-actions]', () => {
let actions = overlayContainerElement.querySelector('mat-dialog-actions')!;

expect(actions)
.withContext('Expected action buttons to not have class mat-dialog-actions-align-center')
.not.toHaveClass('mat-dialog-actions-align-center');

expect(actions)
.withContext('Expected action buttons to have class mat-dialog-actions-align-end')
.toHaveClass('mat-dialog-actions-align-end');
});
}
});

Expand Down Expand Up @@ -2116,7 +2128,7 @@ class PizzaMsg {
template: `
<h1 mat-dialog-title>This is the title</h1>
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions align="end">
<button mat-dialog-close>Close</button>
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
<button
Expand All @@ -2135,7 +2147,7 @@ class ContentElementDialog {}
<ng-template>
<h1 mat-dialog-title>This is the title</h1>
<mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
<mat-dialog-actions>
<mat-dialog-actions align="end">
<button mat-dialog-close>Close</button>
<button class="close-with-true" [mat-dialog-close]="true">Close and return true</button>
<button
Expand Down