Skip to content

Commit 26fabcd

Browse files
PooShamPooSham
committed
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-angular#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-angular#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-angular#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-angular#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 angular#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 angular#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 (angular#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 angular#21456. commit f201634 Author: Kristiyan Kostadinov <[email protected]> Date: Tue Feb 1 13:22:16 2022 +0100 build: fix rules_sass error (angular#24331) Updates to the latest version of `rules_sass` in order to fix an error that is currently breaking the build.
1 parent cf01f05 commit 26fabcd

File tree

9 files changed

+83
-12
lines changed

9 files changed

+83
-12
lines changed

‎WORKSPACE‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ http_archive(
1616
# Add sass rules
1717
http_archive(
1818
name = "io_bazel_rules_sass",
19-
sha256 = "903858e0fb5eda0b36d37e1ce4cbcfbe03f65a5f153d894dc8a9894a4884e564",
20-
strip_prefix = "rules_sass-1.49.0",
19+
sha256 = "bfb89ca97a4ad452ca5f623dfde23d2a5f3a848a97478d715881b69b4767d3bb",
20+
strip_prefix = "rules_sass-1.49.4",
2121
urls = [
22-
"https://github.com/bazelbuild/rules_sass/archive/1.49.0.zip",
22+
"https://github.com/bazelbuild/rules_sass/archive/1.49.4.zip",
2323
],
2424
)
2525

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@
201201
"requirejs": "^2.3.6",
202202
"rollup": "^2.66.1",
203203
"rollup-plugin-sourcemaps": "^0.6.3",
204-
"sass": "^1.49.0",
204+
"sass": "^1.49.4",
205205
"selenium-webdriver": "^3.6.0",
206206
"semver": "^7.3.5",
207207
"send": "^0.17.2",

‎src/cdk/overlay/position/flexible-connected-position-strategy.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -360,16 +360,22 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
360360
* allows one to re-align the panel without changing the orientation of the panel.
361361
*/
362362
reapplyLastPosition(): void {
363-
if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
363+
if (this._isDisposed || !this._platform.isBrowser) {
364+
return;
365+
}
366+
367+
const lastPosition = this._lastPosition;
368+
369+
if (lastPosition) {
364370
this._originRect = this._getOriginRect();
365371
this._overlayRect = this._pane.getBoundingClientRect();
366372
this._viewportRect = this._getNarrowedViewportRect();
367373
this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
368374

369-
const lastPosition = this._lastPosition || this._preferredPositions[0];
370375
const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);
371-
372376
this._applyPosition(lastPosition, originPoint);
377+
} else {
378+
this.apply();
373379
}
374380
}
375381

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import {
4141
MockNgZone,
4242
} from '../../cdk/testing/private';
4343
import {Subject} from 'rxjs';
44-
import {ScrollDispatcher} from '@angular/cdk/scrolling';
44+
import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
4545
import {FocusMonitor} from '@angular/cdk/a11y';
4646
import {
4747
MAT_MENU_SCROLL_STRATEGY,
@@ -57,6 +57,7 @@ const MENU_PANEL_TOP_PADDING = 8;
5757
describe('MDC-based MatMenu', () => {
5858
let overlayContainerElement: HTMLElement;
5959
let focusMonitor: FocusMonitor;
60+
let viewportRuler: ViewportRuler;
6061

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

7273
overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
7374
focusMonitor = TestBed.inject(FocusMonitor);
75+
viewportRuler = TestBed.inject(ViewportRuler);
7476
const fixture = TestBed.createComponent<T>(component);
7577
window.scroll(0, 0);
7678
return fixture;
@@ -1142,6 +1144,28 @@ describe('MDC-based MatMenu', () => {
11421144
expect(panel.classList).toContain('mat-menu-after');
11431145
}));
11441146

1147+
it('should keep the panel in the viewport when more items are added while open', () => {
1148+
const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
1149+
fixture.detectChanges();
1150+
1151+
const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
1152+
triggerEl.style.position = 'absolute';
1153+
triggerEl.style.left = '200px';
1154+
triggerEl.style.bottom = '300px';
1155+
triggerEl.click();
1156+
fixture.detectChanges();
1157+
1158+
const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel')!;
1159+
const viewportHeight = viewportRuler.getViewportSize().height;
1160+
let panelRect = panel.getBoundingClientRect();
1161+
expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight);
1162+
1163+
fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
1164+
fixture.detectChanges();
1165+
panelRect = panel.getBoundingClientRect();
1166+
expect(Math.floor(panelRect.bottom)).toBe(viewportHeight);
1167+
});
1168+
11451169
describe('lazy rendering', () => {
11461170
it('should be able to render the menu content lazily', fakeAsync(() => {
11471171
const fixture = createComponent(SimpleLazyMenu);

‎src/material/menu/menu-trigger.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,8 +278,9 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
278278

279279
const overlayRef = this._createOverlay();
280280
const overlayConfig = overlayRef.getConfig();
281+
const positionStrategy = overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy;
281282

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

294295
if (this.menu instanceof _MatMenuBase) {
295296
this.menu._startAnimation();
297+
this.menu._directDescendantItems.changes.pipe(takeUntil(this.menu.close)).subscribe(() => {
298+
// Re-adjust the position without locking when the amount of items
299+
// changes so that the overlay is allowed to pick a new optimal position.
300+
positionStrategy.withLockedPosition(false).reapplyLastPosition();
301+
positionStrategy.withLockedPosition(true);
302+
});
296303
}
297304
}
298305

‎src/material/menu/menu.spec.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
TAB,
1212
} from '@angular/cdk/keycodes';
1313
import {Overlay, OverlayContainer} from '@angular/cdk/overlay';
14-
import {ScrollDispatcher} from '@angular/cdk/scrolling';
14+
import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
1515
import {
1616
createKeyboardEvent,
1717
createMouseEvent,
@@ -57,6 +57,7 @@ import {MAT_MENU_SCROLL_STRATEGY, MENU_PANEL_TOP_PADDING} from './menu-trigger';
5757
describe('MatMenu', () => {
5858
let overlayContainerElement: HTMLElement;
5959
let focusMonitor: FocusMonitor;
60+
let viewportRuler: ViewportRuler;
6061

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

7273
overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
7374
focusMonitor = TestBed.inject(FocusMonitor);
75+
viewportRuler = TestBed.inject(ViewportRuler);
7476
const fixture = TestBed.createComponent<T>(component);
7577
window.scroll(0, 0);
7678
return fixture;
@@ -1137,6 +1139,28 @@ describe('MatMenu', () => {
11371139
expect(panel.classList).toContain('mat-menu-after');
11381140
}));
11391141

1142+
it('should keep the panel in the viewport when more items are added while open', () => {
1143+
const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
1144+
fixture.detectChanges();
1145+
1146+
const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
1147+
triggerEl.style.position = 'absolute';
1148+
triggerEl.style.left = '200px';
1149+
triggerEl.style.bottom = '300px';
1150+
triggerEl.click();
1151+
fixture.detectChanges();
1152+
1153+
const panel = overlayContainerElement.querySelector('.mat-menu-panel')!;
1154+
const viewportHeight = viewportRuler.getViewportSize().height;
1155+
let panelRect = panel.getBoundingClientRect();
1156+
expect(Math.floor(panelRect.bottom)).toBeLessThan(viewportHeight);
1157+
1158+
fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
1159+
fixture.detectChanges();
1160+
panelRect = panel.getBoundingClientRect();
1161+
expect(Math.floor(panelRect.bottom)).toBe(viewportHeight);
1162+
});
1163+
11401164
describe('lazy rendering', () => {
11411165
it('should be able to render the menu content lazily', fakeAsync(() => {
11421166
const fixture = createComponent(SimpleLazyMenu);

‎src/material/menu/menu.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export class _MatMenuBase
109109
@ContentChildren(MatMenuItem, {descendants: true}) _allItems: QueryList<MatMenuItem>;
110110

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

114114
/** Subscription to tab events on the menu panel */
115115
private _tabSubscription = Subscription.EMPTY;

‎tools/public_api_guard/material/menu.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
110110
// @deprecated
111111
readonly close: EventEmitter<MenuCloseReason>;
112112
readonly closed: EventEmitter<MenuCloseReason>;
113+
_directDescendantItems: QueryList<MatMenuItem>;
113114
direction: Direction;
114115
// (undocumented)
115116
protected _elevationPrefix: string;

‎yarn.lock‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12954,7 +12954,7 @@ sass-lookup@^3.0.0:
1295412954
dependencies:
1295512955
commander "^2.16.0"
1295612956

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

12966+
sass@^1.49.4:
12967+
version "1.49.4"
12968+
resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.4.tgz#d2655e03e52b2212ab65d392bdef6d0931d8637c"
12969+
integrity sha512-xUU5ZlppOjgfEyIIcHpnmY+f+3/ieaadp25S/OqZ5+jBPeTAMJJblkhM6UD9jb4j/lzglz7VOL5kglYt+CvNdQ==
12970+
dependencies:
12971+
chokidar ">=3.0.0 <4.0.0"
12972+
immutable "^4.0.0"
12973+
source-map-js ">=0.6.2 <2.0.0"
12974+
1296612975
saucelabs@^1.5.0:
1296712976
version "1.5.0"
1296812977
resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"

0 commit comments

Comments
 (0)