Skip to content
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.

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

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

Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
fix(material/dialog): Squashed commit of the following:
commit 261cb7c
Author: Jean-Philippe Green <[email protected]>
Date:   Tue Feb 1 21:26:03 2022 +0100

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

commit b060272
Author: Jean-Philippe Green <[email protected]>
Date:   Tue Feb 1 21:10:12 2022 +0100

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

commit 69491e1
Author: Jean-Philippe Green <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>
    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 <[email protected]>
    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 <[email protected]>
    Date:   Mon Jan 10 01:23:12 2022 +0100

        Use directive binding in mdc-dialog demo for align

    commit 77fca70
    Author: Jean-Philippe Green <[email protected]>
    Date:   Mon Jan 10 01:20:43 2022 +0100

        Change actionsAlignment type in dialog demo

    commit c87c4aa
    Author: Jean-Philippe Green <[email protected]>
    Date:   Mon Jan 10 00:21:57 2022 +0100

        Revert weird changes to dialog.spec.ts

    commit d6deb45
    Author: Jean-Philippe <[email protected]>
    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 <[email protected]>
    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 <[email protected]>
    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 <[email protected]>
    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 <[email protected]>
    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 <[email protected]>
    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 <[email protected]>
    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 <[email protected]>
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 <[email protected]>
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.
  • Loading branch information
PooSham committed Feb 2, 2022
commit 26fabcd4baff24a20aae93c23a36bac391e8bdd6
6 changes: 3 additions & 3 deletions WORKSPACE
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ http_archive(
# Add sass rules
http_archive(
name = "io_bazel_rules_sass",
sha256 = "903858e0fb5eda0b36d37e1ce4cbcfbe03f65a5f153d894dc8a9894a4884e564",
strip_prefix = "rules_sass-1.49.0",
sha256 = "bfb89ca97a4ad452ca5f623dfde23d2a5f3a848a97478d715881b69b4767d3bb",
strip_prefix = "rules_sass-1.49.4",
urls = [
"https://github.com/bazelbuild/rules_sass/archive/1.49.0.zip",
"https://github.com/bazelbuild/rules_sass/archive/1.49.4.zip",
],
)

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@
"requirejs": "^2.3.6",
"rollup": "^2.66.1",
"rollup-plugin-sourcemaps": "^0.6.3",
"sass": "^1.49.0",
"sass": "^1.49.4",
"selenium-webdriver": "^3.6.0",
"semver": "^7.3.5",
"send": "^0.17.2",
Expand Down
12 changes: 9 additions & 3 deletions src/cdk/overlay/position/flexible-connected-position-strategy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -360,16 +360,22 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
* allows one to re-align the panel without changing the orientation of the panel.
*/
reapplyLastPosition(): void {
if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
if (this._isDisposed || !this._platform.isBrowser) {
return;
}

const lastPosition = this._lastPosition;

if (lastPosition) {
this._originRect = this._getOriginRect();
this._overlayRect = this._pane.getBoundingClientRect();
this._viewportRect = this._getNarrowedViewportRect();
this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();

const lastPosition = this._lastPosition || this._preferredPositions[0];
const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);

this._applyPosition(lastPosition, originPoint);
} else {
this.apply();
}
}

Expand Down
26 changes: 25 additions & 1 deletion src/material-experimental/mdc-menu/menu.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import {
MockNgZone,
} from '../../cdk/testing/private';
import {Subject} from 'rxjs';
import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
import {FocusMonitor} from '@angular/cdk/a11y';
import {
MAT_MENU_SCROLL_STRATEGY,
Expand All @@ -57,6 +57,7 @@ const MENU_PANEL_TOP_PADDING = 8;
describe('MDC-based MatMenu', () => {
let overlayContainerElement: HTMLElement;
let focusMonitor: FocusMonitor;
let viewportRuler: ViewportRuler;

function createComponent<T>(
component: Type<T>,
Expand All @@ -71,6 +72,7 @@ describe('MDC-based MatMenu', () => {

overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
focusMonitor = TestBed.inject(FocusMonitor);
viewportRuler = TestBed.inject(ViewportRuler);
const fixture = TestBed.createComponent<T>(component);
window.scroll(0, 0);
return fixture;
Expand Down Expand Up @@ -1142,6 +1144,28 @@ describe('MDC-based MatMenu', () => {
expect(panel.classList).toContain('mat-menu-after');
}));

it('should keep the panel in the viewport when more items are added while open', () => {
const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
fixture.detectChanges();

const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
triggerEl.style.position = 'absolute';
triggerEl.style.left = '200px';
triggerEl.style.bottom = '300px';
triggerEl.click();
fixture.detectChanges();

const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!;
const viewportHeight = viewportRuler.getViewportSize().height;
let panelRect = panel.getBoundingClientRect();
expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight);

fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
fixture.detectChanges();
panelRect = panel.getBoundingClientRect();
expect(Math.floor(panelRect.bottom)).toBe(viewportHeight);
});

describe('lazy rendering', () => {
it('should be able to render the menu content lazily', fakeAsync(() => {
const fixture = createComponent(SimpleLazyMenu);
Expand Down
9 changes: 8 additions & 1 deletion src/material/menu/menu-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -278,8 +278,9 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy

const overlayRef = this._createOverlay();
const overlayConfig = overlayRef.getConfig();
const positionStrategy = overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy;

this._setPosition(overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy);
this._setPosition(positionStrategy);
overlayConfig.hasBackdrop =
this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop;
overlayRef.attach(this._getPortal());
Expand All @@ -293,6 +294,12 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy

if (this.menu instanceof _MatMenuBase) {
this.menu._startAnimation();
this.menu._directDescendantItems.changes.pipe(takeUntil(this.menu.close)).subscribe(() => {
// Re-adjust the position without locking when the amount of items
// changes so that the overlay is allowed to pick a new optimal position.
positionStrategy.withLockedPosition(false).reapplyLastPosition();
positionStrategy.withLockedPosition(true);
});
}
}

Expand Down
26 changes: 25 additions & 1 deletion src/material/menu/menu.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
TAB,
} from '@angular/cdk/keycodes';
import {Overlay, OverlayContainer} from '@angular/cdk/overlay';
import {ScrollDispatcher} from '@angular/cdk/scrolling';
import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
import {
createKeyboardEvent,
createMouseEvent,
Expand Down Expand Up @@ -57,6 +57,7 @@ import {MAT_MENU_SCROLL_STRATEGY, MENU_PANEL_TOP_PADDING} from './menu-trigger';
describe('MatMenu', () => {
let overlayContainerElement: HTMLElement;
let focusMonitor: FocusMonitor;
let viewportRuler: ViewportRuler;

function createComponent<T>(
component: Type<T>,
Expand All @@ -71,6 +72,7 @@ describe('MatMenu', () => {

overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
focusMonitor = TestBed.inject(FocusMonitor);
viewportRuler = TestBed.inject(ViewportRuler);
const fixture = TestBed.createComponent<T>(component);
window.scroll(0, 0);
return fixture;
Expand Down Expand Up @@ -1137,6 +1139,28 @@ describe('MatMenu', () => {
expect(panel.classList).toContain('mat-menu-after');
}));

it('should keep the panel in the viewport when more items are added while open', () => {
const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
fixture.detectChanges();

const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
triggerEl.style.position = 'absolute';
triggerEl.style.left = '200px';
triggerEl.style.bottom = '300px';
triggerEl.click();
fixture.detectChanges();

const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
const viewportHeight = viewportRuler.getViewportSize().height;
let panelRect = panel.getBoundingClientRect();
expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight);

fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
fixture.detectChanges();
panelRect = panel.getBoundingClientRect();
expect(Math.floor(panelRect.bottom)).toBe(viewportHeight);
});

describe('lazy rendering', () => {
it('should be able to render the menu content lazily', fakeAsync(() => {
const fixture = createComponent(SimpleLazyMenu);
Expand Down
2 changes: 1 addition & 1 deletion src/material/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export class _MatMenuBase
@ContentChildren(MatMenuItem, {descendants: true}) _allItems: QueryList<MatMenuItem>;

/** Only the direct descendant menu items. */
private _directDescendantItems = new QueryList<MatMenuItem>();
_directDescendantItems = new QueryList<MatMenuItem>();

/** Subscription to tab events on the menu panel */
private _tabSubscription = Subscription.EMPTY;
Expand Down
1 change: 1 addition & 0 deletions tools/public_api_guard/material/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
// @deprecated
readonly close: EventEmitter<MenuCloseReason>;
readonly closed: EventEmitter<MenuCloseReason>;
_directDescendantItems: QueryList<MatMenuItem>;
direction: Direction;
// (undocumented)
protected _elevationPrefix: string;
Expand Down
11 changes: 10 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -12954,7 +12954,7 @@ sass-lookup@^3.0.0:
dependencies:
commander "^2.16.0"

[email protected], sass@^1.49.0:
[email protected]:
version "1.49.0"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.0.tgz#65ec1b1d9a6bc1bae8d2c9d4b392c13f5d32c078"
integrity sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==
Expand All @@ -12963,6 +12963,15 @@ [email protected], sass@^1.49.0:
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"

sass@^1.49.4:
version "1.49.4"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.4.tgz#d2655e03e52b2212ab65d392bdef6d0931d8637c"
integrity sha512-xUU5ZlppOjgfEyIIcHpnmY+f+3/ieaadp25S/OqZ5+jBPeTAMJJblkhM6UD9jb4j/lzglz7VOL5kglYt+CvNdQ==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"

saucelabs@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"
Expand Down