fix(context-dialog): Fixes flexible dimensions being applied correctly.

This now handles cases where the overlay cannot fit at all into any given position correctly as well.
dynatrace-oss · Jun 7, 2021 · dc405c8 · dc405c8
1 parent 858f938
commit dc405c8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 33 deletions.
diff --git a/libs/barista-components/context-dialog/src/context-dialog.html b/libs/barista-components/context-dialog/src/context-dialog.html
@@ -13,7 +13,13 @@
   <dt-icon name="more"></dt-icon>
 </button>
 <ng-template>
-  <div class="dt-context-dialog-panel" #panel role="dialog" dtTheme=":dark">
+  <div
+    class="dt-context-dialog-panel"
+    #panel
+    role="dialog"
+    dtTheme=":dark"
+    [style]="_overlayConstraints"
+  >
     <ng-content select="dt-context-dialog-header"></ng-content>
     <div class="dt-context-dialog-content" [ngClass]="overlayPanelClass">
       <ng-content></ng-content>

diff --git a/libs/barista-components/context-dialog/src/context-dialog.scss b/libs/barista-components/context-dialog/src/context-dialog.scss
@@ -18,7 +18,6 @@ $context-dialog-top-header-padding: 8px;
   position: relative;
   transform-origin: top right;
   color: #ffffff;
-  max-height: 90vh;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;

diff --git a/libs/barista-components/context-dialog/src/context-dialog.spec.ts b/libs/barista-components/context-dialog/src/context-dialog.spec.ts
@@ -49,7 +49,7 @@ import {
 } from '@dynatrace/barista-components/core';
 import {
   DT_CONTEXT_DIALOG_CONFIG,
-  _DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH,
+  _DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS,
 } from './context-dialog';
 
 describe('DtContextDialog', () => {
@@ -425,24 +425,7 @@ describe('DtContextDialog', () => {
           .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`,
+          `max-width: ${_DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS.maxWidth}`,
         );
       }),
     );

diff --git a/libs/barista-components/context-dialog/src/context-dialog.ts b/libs/barista-components/context-dialog/src/context-dialog.ts
@@ -59,9 +59,20 @@ import {
   DT_UI_TEST_CONFIG,
   DtUiTestConfiguration,
   dtSetUiTestAttribute,
+  isDefined,
 } from '@dynatrace/barista-components/core';
-
 import { DtContextDialogTrigger } from './context-dialog-trigger';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+
+/** Controls the sizing of the overlay element within the cdk overlay */
+type DtContextDialogOverlayConstraint = {
+  maxWidth?: string;
+  minWidth?: string;
+  width?: string;
+  maxHeight?: string;
+  minHeight?: string;
+  height?: string;
+};
 
 const LOG: DtLogger = DtLoggerFactory.create('ContextDialog');
 const OVERLAY_POSITIONS: ConnectedPosition[] = [
@@ -111,8 +122,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;
+export const _DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS = {
+  maxWidth: '328px',
+};
 
 @Component({
   selector: 'dt-context-dialog',
@@ -199,6 +211,8 @@ export class DtContextDialog
     return this._trigger && this._trigger !== this._defaultTrigger;
   }
 
+  _overlayConstraints: DtContextDialogOverlayConstraint = _DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS;
+
   constructor(
     private _overlay: Overlay,
     private _viewContainerRef: ViewContainerRef,
@@ -217,6 +231,34 @@ export class DtContextDialog
   ) {
     super();
     this.tabIndex = parseInt(tabIndex, 10) || 0;
+
+    if (this._userConfig) {
+      const customConstraints: DtContextDialogOverlayConstraint = {
+        maxWidth: isDefined(this._userConfig.maxWidth)
+          ? coerceCssPixelValue(this._userConfig.maxWidth)
+          : undefined,
+        minWidth: isDefined(this._userConfig.minWidth)
+          ? coerceCssPixelValue(this._userConfig.minWidth)
+          : undefined,
+        width: isDefined(this._userConfig.width)
+          ? coerceCssPixelValue(this._userConfig.width)
+          : undefined,
+        maxHeight: isDefined(this._userConfig.maxHeight)
+          ? coerceCssPixelValue(this._userConfig.maxHeight)
+          : undefined,
+        minHeight: isDefined(this._userConfig.minHeight)
+          ? coerceCssPixelValue(this._userConfig.minHeight)
+          : undefined,
+        height: isDefined(this._userConfig.height)
+          ? coerceCssPixelValue(this._userConfig.height)
+          : undefined,
+      };
+
+      this._overlayConstraints = {
+        ..._DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS,
+        ...JSON.parse(JSON.stringify(customConstraints)),
+      };
+    }
   }
 
   ngAfterViewInit(): void {
@@ -311,32 +353,39 @@ 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 =
-      overlayConfig?.maxWidth === undefined &&
-      overlayConfig?.maxHeight === undefined;
-
     const positionStrategy = this._overlay
       .position()
       .flexibleConnectedTo(this._trigger.elementRef)
       .withPositions(OVERLAY_POSITIONS)
       .setOrigin(this._trigger.elementRef)
-      // We need to falsify the flexibleDimension here in case a maxWidth is set
-      // https://github.com/angular/components/blob/master/src/cdk/overlay/position/flexible-connected-position-strategy.ts#L914
-      .withFlexibleDimensions(hasFlexibleDimensions)
+      .withFlexibleDimensions(true)
       .withPush(false)
       .withGrowAfterOpen(false)
       .withViewportMargin(0)
       .withLockedPosition(false);
 
     overlayConfig.positionStrategy = positionStrategy;
-    this._overlayRef = this._overlay.create(overlayConfig);
+    /**
+     * Remove the constraint properties from the config passed to the overlay create
+     * method since setting one of these properties disables the flexibleDimensions and we
+     * actually want that to still be the case.
+     */
+    const {
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      ...remainingConfig
+    } = overlayConfig;
+    this._overlayRef = this._overlay.create(remainingConfig);
 
     dtSetUiTestAttribute(
       this._overlayRef.overlayElement,