From 01ea79980032b1e078e4096010d22f8c3c245c64 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 11 May 2018 14:21:56 +0200 Subject: [PATCH] fix(dialog,bottom-sheet): don't provide directionality if no direction is set * Currently the dialog and bottom sheet always provide the `Directionality` in order to allow for any components placed inside of them to pick up their direction. This is problematic if the consumer didn't set a direction, because the `value` of the provided `Directionality` will be set to `undefined`. These changes switch to only providing the direction if it is defined in the config, otherwise the components will fall back to the global `Directionality`. * Flips around some logic in the drawer so an undefined direction is consider `ltr`, rather than `rtl`. Fixes #11262. --- src/cdk-experimental/dialog/dialog.spec.ts | 8 ++++++++ src/cdk-experimental/dialog/dialog.ts | 3 ++- src/lib/bottom-sheet/bottom-sheet.spec.ts | 8 ++++++++ src/lib/bottom-sheet/bottom-sheet.ts | 3 ++- src/lib/dialog/dialog.spec.ts | 8 ++++++++ src/lib/dialog/dialog.ts | 3 ++- src/lib/sidenav/drawer.ts | 8 ++++---- 7 files changed, 34 insertions(+), 7 deletions(-) diff --git a/src/cdk-experimental/dialog/dialog.spec.ts b/src/cdk-experimental/dialog/dialog.spec.ts index 6e6bb1d7b126..1b2d0b955663 100644 --- a/src/cdk-experimental/dialog/dialog.spec.ts +++ b/src/cdk-experimental/dialog/dialog.spec.ts @@ -522,6 +522,14 @@ describe('Dialog', () => { expect(dialogRef.componentInstance.directionality.value).toBe('rtl'); }); + it('should fall back to injecting the global direction if none is passed by the config', () => { + const dialogRef = dialog.openFromComponent(PizzaMsg, {}); + + viewContainerFixture.detectChanges(); + + expect(dialogRef.componentInstance.directionality.value).toBe('ltr'); + }); + it('should close all of the dialogs', fakeAsync(() => { dialog.openFromComponent(PizzaMsg); dialog.openFromComponent(PizzaMsg); diff --git a/src/cdk-experimental/dialog/dialog.ts b/src/cdk-experimental/dialog/dialog.ts index 456789e9f6c3..30ae280ccd6a 100644 --- a/src/cdk-experimental/dialog/dialog.ts +++ b/src/cdk-experimental/dialog/dialog.ts @@ -266,7 +266,8 @@ export class Dialog { .set(this.injector.get(DIALOG_CONTAINER), dialogContainer) .set(DIALOG_DATA, config.data); - if (!userInjector || !userInjector.get(Directionality, null)) { + if (config.direction && + (!userInjector || !userInjector.get(Directionality, null))) { injectionTokens.set(Directionality, { value: config.direction, change: observableOf() diff --git a/src/lib/bottom-sheet/bottom-sheet.spec.ts b/src/lib/bottom-sheet/bottom-sheet.spec.ts index a8631259869b..2e2f43ddb0e3 100644 --- a/src/lib/bottom-sheet/bottom-sheet.spec.ts +++ b/src/lib/bottom-sheet/bottom-sheet.spec.ts @@ -224,6 +224,14 @@ describe('MatBottomSheet', () => { expect(bottomSheetRef.instance.directionality.value).toBe('rtl'); }); + it('should fall back to injecting the global direction if none is passed by the config', () => { + const bottomSheetRef = bottomSheet.open(PizzaMsg, {}); + + viewContainerFixture.detectChanges(); + + expect(bottomSheetRef.instance.directionality.value).toBe('ltr'); + }); + it('should be able to set a custom panel class', () => { bottomSheet.open(PizzaMsg, { panelClass: 'custom-panel-class', diff --git a/src/lib/bottom-sheet/bottom-sheet.ts b/src/lib/bottom-sheet/bottom-sheet.ts index 6350707fc895..c05eaed3c223 100644 --- a/src/lib/bottom-sheet/bottom-sheet.ts +++ b/src/lib/bottom-sheet/bottom-sheet.ts @@ -146,7 +146,8 @@ export class MatBottomSheet { injectionTokens.set(MatBottomSheetRef, bottomSheetRef); injectionTokens.set(MAT_BOTTOM_SHEET_DATA, config.data); - if (!userInjector || !userInjector.get(Directionality, null)) { + if (config.direction && + (!userInjector || !userInjector.get(Directionality, null))) { injectionTokens.set(Directionality, { value: config.direction, change: observableOf() diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 8cf11517441f..6565218fd2c8 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -530,6 +530,14 @@ describe('MatDialog', () => { expect(dialogRef.componentInstance.directionality.value).toBe('rtl'); }); + it('should fall back to injecting the global direction if none is passed by the config', () => { + const dialogRef = dialog.open(PizzaMsg, {}); + + viewContainerFixture.detectChanges(); + + expect(dialogRef.componentInstance.directionality.value).toBe('ltr'); + }); + it('should close all of the dialogs', fakeAsync(() => { dialog.open(PizzaMsg); dialog.open(PizzaMsg); diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index d763cd9919ca..709a1f73aed1 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -289,7 +289,8 @@ export class MatDialog { .set(MAT_DIALOG_DATA, config.data) .set(MatDialogRef, dialogRef); - if (!userInjector || !userInjector.get(Directionality, null)) { + if (config.direction && + (!userInjector || !userInjector.get(Directionality, null))) { injectionTokens.set(Directionality, { value: config.direction, change: observableOf() diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index b8de207d0a7a..ef1aa22a0cdf 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -627,12 +627,12 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy this._right = this._left = null; // Detect if we're LTR or RTL. - if (!this._dir || this._dir.value == 'ltr') { - this._left = this._start; - this._right = this._end; - } else { + if (this._dir && this._dir.value === 'rtl') { this._left = this._end; this._right = this._start; + } else { + this._left = this._start; + this._right = this._end; } }