Skip to content

Commit

Permalink
fix(material/dialog): Use align as @Input() in MatDialogActions (…
Browse files Browse the repository at this point in the history 
…#24328)

* fix(material/dialog): Use align as @input() in MatDialogActions

Squashed commit of the following:

commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3
Merge: 3276432 3a98da8
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 31 19:24:24 2022 +0100

    Merge branch 'master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 3276432
Merge: 815cf8f 1f40b7d
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Mon Jan 31 18:54:42 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 815cf8f
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:23:12 2022 +0100

    Use directive binding in mdc-dialog demo for align

commit 77fca70
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:20:43 2022 +0100

    Change actionsAlignment type in dialog demo

commit c87c4aa
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 00:21:57 2022 +0100

    Revert weird changes to dialog.spec.ts

commit d6deb45
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:30:24 2022 +0100

    Use 'start' as default instead of undefined for align attribute in dialog actions

commit 8d367c1
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:05:54 2022 +0100

    Update comments in dialog.scss for more clarity

commit 9d2ac16
Merge: 54d0a60 3de4ab8
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 22:33:13 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479

commit 54d0a60
Merge: 462d407 c79e1d1
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:30:29 2022 +0100

    Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-#18479

commit c79e1d1
Merge: 462d407 03485cd
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:23:17 2022 +0100

    Merge branch 'master' of https://github.com/angular/components into angular-master

commit 462d407
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:18:08 2020 +0100

    fix(material-experimental/mdc-dialog): make align attr into an input of dialog actions directive

    Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
    bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
    sense to assume end users to know they can use the align attribute.

    Fixes #18479 for material-experimental

commit c101f7f
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:15:01 2020 +0100

    fix(material/dialog): make align attribute into an input of dialog actions directive instead of css

    Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
    bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
    sense to assume end users to know they can use the align attribute.

    Fixes #18479

* fix(material/dialog): Use align as @input() in MatDialogActions

Squashed commit of the following:

commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3
Merge: 3276432 3a98da8
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 31 19:24:24 2022 +0100

    Merge branch 'master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 3276432
Merge: 815cf8f 1f40b7d
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Mon Jan 31 18:54:42 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479-2

commit 815cf8f
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:23:12 2022 +0100

    Use directive binding in mdc-dialog demo for align

commit 77fca70
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 01:20:43 2022 +0100

    Change actionsAlignment type in dialog demo

commit c87c4aa
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 10 00:21:57 2022 +0100

    Revert weird changes to dialog.spec.ts

commit d6deb45
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:30:24 2022 +0100

    Use 'start' as default instead of undefined for align attribute in dialog actions

commit 8d367c1
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 23:05:54 2022 +0100

    Update comments in dialog.scss for more clarity

commit 9d2ac16
Merge: 54d0a60 3de4ab8
Author: Jean-Philippe <jeanphilippe.green@gmail.com>
Date:   Sun Jan 9 22:33:13 2022 +0100

    Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479

commit 54d0a60
Merge: 462d407 c79e1d1
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:30:29 2022 +0100

    Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-#18479

commit c79e1d1
Merge: 462d407 03485cd
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Wed Jan 5 21:23:17 2022 +0100

    Merge branch 'master' of https://github.com/angular/components into angular-master

commit 462d407
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:18:08 2020 +0100

    fix(material-experimental/mdc-dialog): make align attr into an input of dialog actions directive

    Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
    bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
    sense to assume end users to know they can use the align attribute.

    Fixes #18479 for material-experimental

commit c101f7f
Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
Date:   Fri Dec 25 16:15:01 2020 +0100

    fix(material/dialog): make align attribute into an input of dialog actions directive instead of css

    Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
    bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
    sense to assume end users to know they can use the align attribute.

    Fixes #18479

* fixup! fix(material/dialog): Use align as @input() in MatDialogActions

ds

* fix(material/dialog): fix mismatching test names between mdc and non-mdc

* fix(material/dialog): fix mismatching test names between mdc and non-mdc

* fix(material/dialog): update golden api for dialog

* fix(material/dialog): Fix mdc action align test

* fix(material/dialog): update golden api for dialog

* fix(material/dialog): Fix mdc action align test

* fix(material/dialog): Squashed commit of the following:

commit 261cb7c
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Tue Feb 1 21:26:03 2022 +0100

    fix(material/dialog): Fix mdc action align test

commit b060272
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Tue Feb 1 21:10:12 2022 +0100

    fix(material/dialog): update golden api for dialog

commit 69491e1
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Tue Feb 1 17:50:37 2022 +0100

    fix(material/dialog): fix mismatching test names between mdc and non-mdc

commit b4a9cb3
Author: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date:   Tue Feb 1 17:09:37 2022 +0100

    fixup! fix(material/dialog): Use align as @input() in MatDialogActions

    ds

commit d7a9cbb
Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
Date:   Mon Jan 31 19:27:13 2022 +0100

    fix(material/dialog): Use align as @input() in MatDialogActions

    Squashed commit of the following:

    commit 1d6daeadf8e06e38c64fec724d5a8d2899b502d3
    Merge: 3276432 3a98da8
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 31 19:24:24 2022 +0100

        Merge branch 'master' into align-attr-as-input-in-dialog-actions-#18479-2

    commit 3276432
    Merge: 815cf8f 1f40b7d
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Mon Jan 31 18:54:42 2022 +0100

        Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479-2

    commit 815cf8f
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 10 01:23:12 2022 +0100

        Use directive binding in mdc-dialog demo for align

    commit 77fca70
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 10 01:20:43 2022 +0100

        Change actionsAlignment type in dialog demo

    commit c87c4aa
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Mon Jan 10 00:21:57 2022 +0100

        Revert weird changes to dialog.spec.ts

    commit d6deb45
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Sun Jan 9 23:30:24 2022 +0100

        Use 'start' as default instead of undefined for align attribute in dialog actions

    commit 8d367c1
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Sun Jan 9 23:05:54 2022 +0100

        Update comments in dialog.scss for more clarity

    commit 9d2ac16
    Merge: 54d0a60 3de4ab8
    Author: Jean-Philippe <jeanphilippe.green@gmail.com>
    Date:   Sun Jan 9 22:33:13 2022 +0100

        Merge branch 'angular:master' into align-attr-as-input-in-dialog-actions-#18479

    commit 54d0a60
    Merge: 462d407 c79e1d1
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Wed Jan 5 21:30:29 2022 +0100

        Merge branch 'angular-master' into align-attr-as-input-in-dialog-actions-#18479

    commit c79e1d1
    Merge: 462d407 03485cd
    Author: Jean-Philippe Green <jeanphilippe.green@protonmail.com>
    Date:   Wed Jan 5 21:23:17 2022 +0100

        Merge branch 'master' of https://github.com/angular/components into angular-master

    commit 462d407
    Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
    Date:   Fri Dec 25 16:18:08 2020 +0100

        fix(material-experimental/mdc-dialog): make align attr into an input of dialog actions directive

        Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
        bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
        sense to assume end users to know they can use the align attribute.

        Fixes #18479 for material-experimental

    commit c101f7f
    Author: Jean-Philippe Green <jeanphilippe.green@gmail.com>
    Date:   Fri Dec 25 16:15:01 2020 +0100

        fix(material/dialog): make align attribute into an input of dialog actions directive instead of css

        Fixes multiple issues, such as self-documentation of the align attribute, type checking, better
        bindings, and IDE support. Because align is not standard for HTMLDivElement, it doesn't make much
        sense to assume end users to know they can use the align attribute.

        Fixes #18479

commit a74d92e
Author: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date:   Tue Feb 1 16:43:35 2022 +0100

    fix(material/menu): adjust overlay size when amount of items changes (#21457)

    Currently we lock the menu into a position after it is opened so that it doesn't jump
    around when the user scrolls, but this means that if the amount of items changes,
    it might not be the optimal position anymore.

    These changes add some code to re-calculate the position if the amount of items changes.

    Fixes #21456.

commit f201634
Author: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date:   Tue Feb 1 13:22:16 2022 +0100

    build: fix rules_sass error (#24331)

    Updates to the latest version of `rules_sass` in order to fix an error that is currently breaking the build.

Co-authored-by: Paul Gschwendtner <paulgschwendtner@gmail.com>
  • Loading branch information
@PooSham @devversion
PooSham and devversion authored Feb 11, 2022
1 parent ca1aaae commit 599d1b4
Show file tree
Hide file tree
Showing 9 changed files with 69 additions and 25 deletions.
6 changes: 3 additions & 3 deletions src/dev-app/dialog/dialog-demo.ts
View file
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
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
13 changes: 11 additions & 2 deletions src/material-experimental/mdc-dialog/dialog-content-directives.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,18 @@ 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 {
/**
* Horizontal alignment of action buttons.
*/
@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
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
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 correct css 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')
.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
13 changes: 11 additions & 2 deletions src/material/dialog/dialog-content-directives.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,18 @@ 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 {
/**
* Horizontal alignment of action buttons.
*/
@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
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
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 correct css 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
3 changes: 2 additions & 1 deletion tools/public_api_guard/material/dialog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,9 @@ export class MatDialog extends _MatDialogBase<MatDialogContainer> {

// @public
export class MatDialogActions {
align?: 'start' | 'center' | 'end';
// (undocumented)
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
}
Expand Down

0 comments on commit 599d1b4

Please sign in to comment.