feat(context-dialog): Simplifies overriding the maxWidth of the overl…

…ay.You can now set the maxWidth as part of the DT_CONTEXT_DIALOG_CONFIG token and it will properly be reflected on the overlay.
dynatrace-oss · Nov 11, 2020 · 2c501b6 · 2c501b6
1 parent 960f078
commit 2c501b6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/libs/barista-components/context-dialog/README.md b/libs/barista-components/context-dialog/README.md
@@ -18,14 +18,14 @@ class MyModule {}
 
 ## Inputs
 
-| Name                | Type                                                       | Default     | Description                                                                                             |
-| ------------------- | ---------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- |
-| `tabIndex`          | `number`                                                   | `0`         | Gets and sets the tabIndex on the context dialog. Inherited by mixinTabIndex.                           |
-| `disabled`          | `boolean`                                                  | `false`     | Gets and sets the disabled property on the context dialog. Inherited by mixinDisabled.                  |
-| `aria-label`        | `string`                                                   | `undefined` | ARIA label of the context dialog trigger button.                                                        |
-| `aria-labelledby`   | `string`                                                   | `undefined` | ARIA reference to a label describing the context-dialog.                                                |
-| `ariaLabelClose`    | `string`                                                   |             | ARIA label of the context dialog close button.                                                          |
-| `overlayPanelClass` | `string | string[] | Set<string> | { [key: string]: any }` |             | Custom css classes to add to the overlay panel element. Can be used to scope styling within the overlay |
+| Name                | Type      | Default     | Description                                                                            |
+| ------------------- | --------- | ----------- | -------------------------------------------------------------------------------------- |
+| `tabIndex`          | `number`  | `0`         | Gets and sets the tabIndex on the context dialog. Inherited by mixinTabIndex.          |
+| `disabled`          | `boolean` | `false`     | Gets and sets the disabled property on the context dialog. Inherited by mixinDisabled. |
+| `aria-label`        | `string`  | `undefined` | ARIA label of the context dialog trigger button.                                       |
+| `aria-labelledby`   | `string`  | `undefined` | ARIA reference to a label describing the context-dialog.                               |
+| `ariaLabelClose`    | `string`  |             | ARIA label of the context dialog close button.                                         |
+| `overlayPanelClass` | `string   | string[]    | Set<string>                                                                            | { [key: string]: any }` |  | Custom css classes to add to the overlay panel element. Can be used to scope styling within the overlay |
 
 To make our components accessible it is obligatory to provide either an
 `aria-label` or `aria-labelledby`.
@@ -52,10 +52,10 @@ To make our components accessible it is obligatory to provide either an
 
 ## Configuration options
 
-If your use case requires a different configuration of the overlay, 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.
+If your use case requires a different configuration of the overlay e.g. setting
+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.
 
 ## Accessibility
 

diff --git a/libs/barista-components/context-dialog/src/context-dialog.scss b/libs/barista-components/context-dialog/src/context-dialog.scss
@@ -2,7 +2,6 @@
 @import '../../core/src/style/variables';
 
 $panel-padding: 12px;
-$dialog-max-width: 328px;
 $context-dialog-panel-padding: 12px;
 $panel-padding-btn: 38px;
 $context-dialog-top-header-padding: 8px;
@@ -19,7 +18,6 @@ $context-dialog-top-header-padding: 8px;
   position: relative;
   transform-origin: top right;
   color: #ffffff;
-  max-width: $dialog-max-width;
   max-height: 90vh;
   display: flex;
   flex-direction: column;

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,8 @@ export const DT_CONTEXT_DIALOG_CONFIG = new InjectionToken<OverlayConfig>(
   'dt-context-dialog-config',
 );
 
+const DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH = 328;
+
 @Component({
   selector: 'dt-context-dialog',
   templateUrl: 'context-dialog.html',
@@ -316,11 +318,12 @@ export class DtContextDialog
       .withViewportMargin(0)
       .withLockedPosition(false);
 
-    const defaultConfig = {
+    const defaultConfig: OverlayConfig = {
       positionStrategy,
       scrollStrategy: this._overlay.scrollStrategies.block(),
       backdropClass: 'cdk-overlay-transparent-backdrop',
       hasBackdrop: true,
+      maxWidth: DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH,
     };
 
     const overlayConfig = this._userConfig