fix(context-dialog): Fixes an issue that the default behavior of the …

…context dialog changed to not have a maxWidth assigned anymore. Fixes APM-294683
dynatrace-oss · Apr 7, 2021 · ad40a85 · ad40a85
1 parent 52bd8d3
commit ad40a85
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 4 deletions.
diff --git a/libs/barista-components/context-dialog/README.md b/libs/barista-components/context-dialog/README.md
@@ -57,6 +57,16 @@ your own maxWidth, it can be configured using the `DT_CONTEXT_DIALOG_CONFIG`
 injection token. Only the settings you provide will be overwritten, the others
 will fall back to the default configuration.
 
+In order to have a context-dialog that has no max-width set please provide a the
+`DT_CONTEXT_DIALOG_CONFIG` with the maxWidth property specifically set to
+`undefined`. This is necessary to have a defaultValue but still be able to
+override it in cases where the user does not want to have a maxWidth assigned to
+the overlay.
+
+```js
+[{ provide: DT_CONTEXT_DIALOG_CONFIG, useValue: { maxWidth: undefined } }];
+```
+
 ## Accessibility
 
 Context dialogs should be given a meaningful label via `aria-label` for the open

diff --git a/libs/barista-components/context-dialog/src/context-dialog.spec.ts b/libs/barista-components/context-dialog/src/context-dialog.spec.ts
@@ -47,7 +47,10 @@ import {
   DT_UI_TEST_CONFIG,
   DtUiTestConfiguration,
 } from '@dynatrace/barista-components/core';
-import { DT_CONTEXT_DIALOG_CONFIG } from './context-dialog';
+import {
+  DT_CONTEXT_DIALOG_CONFIG,
+  _DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH,
+} from './context-dialog';
 
 describe('DtContextDialog', () => {
   let overlayContainer: OverlayContainer;
@@ -64,7 +67,10 @@ describe('DtContextDialog', () => {
   };
 
   // tslint:disable-next-line:no-any
-  function configureDtContextDialogTestingModule(declarations: any[]): void {
+  function configureDtContextDialogTestingModule(
+    declarations: any[],
+    providers: any[] = [],
+  ): void {
     TestBed.configureTestingModule({
       imports: [
         DtContextDialogModule,
@@ -75,6 +81,7 @@ describe('DtContextDialog', () => {
       providers: [
         { provide: DT_UI_TEST_CONFIG, useValue: overlayConfig },
         { provide: DT_CONTEXT_DIALOG_CONFIG, useValue: overlayCustomConfig },
+        ...providers,
       ],
     }).compileComponents();
 
@@ -396,6 +403,50 @@ describe('DtContextDialog', () => {
       }));
     });
   });
+
+  describe('config', () => {
+    it(
+      'should have no maxWidth set if it is explicitly removed from the config',
+      waitForAsync(() => {
+        configureDtContextDialogTestingModule(
+          [BasicContextDialog],
+          [
+            {
+              provide: DT_CONTEXT_DIALOG_CONFIG,
+              useValue: { maxWidth: undefined },
+            },
+          ],
+        );
+
+        const fixture = createComponent(BasicContextDialog);
+        fixture.componentInstance.contextDialog.open();
+        fixture.detectChanges();
+        const cdkOverlayPane = overlayContainer
+          .getContainerElement()
+          .querySelector('.cdk-overlay-pane');
+        expect(cdkOverlayPane?.getAttribute('style')).not.toContain(
+          `max-width: ${_DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH}px`,
+        );
+      }),
+    );
+
+    it(
+      'should have no maxWidth set if it is explicitly removed from the config',
+      waitForAsync(() => {
+        configureDtContextDialogTestingModule([BasicContextDialog]);
+
+        const fixture = createComponent(BasicContextDialog);
+        fixture.componentInstance.contextDialog.open();
+        fixture.detectChanges();
+        const cdkOverlayPane = overlayContainer
+          .getContainerElement()
+          .querySelector('.cdk-overlay-pane');
+        expect(cdkOverlayPane?.getAttribute('style')).toContain(
+          `max-width: ${_DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH}px`,
+        );
+      }),
+    );
+  });
 });
 
 // ###################################

diff --git a/libs/barista-components/context-dialog/src/context-dialog.ts b/libs/barista-components/context-dialog/src/context-dialog.ts
@@ -111,6 +111,9 @@ export const DT_CONTEXT_DIALOG_CONFIG = new InjectionToken<OverlayConfig>(
   'dt-context-dialog-config',
 );
 
+/** The default max-width for the context dialogs overlay */
+export const _DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH = 328;
+
 @Component({
   selector: 'dt-context-dialog',
   templateUrl: 'context-dialog.html',
@@ -308,15 +311,16 @@ export class DtContextDialog
       scrollStrategy: this._overlay.scrollStrategies.block(),
       backdropClass: 'cdk-overlay-transparent-backdrop',
       hasBackdrop: true,
+      maxWidth: _DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH,
     };
 
     const overlayConfig = this._userConfig
       ? { ...defaultConfig, ...this._userConfig }
       : defaultConfig;
 
     const hasFlexibleDimensions =
-      this._userConfig?.maxWidth === undefined &&
-      this._userConfig?.maxHeight === undefined;
+      overlayConfig?.maxWidth === undefined &&
+      overlayConfig?.maxHeight === undefined;
 
     const positionStrategy = this._overlay
       .position()