diff --git a/libs/barista-components/context-dialog/README.md b/libs/barista-components/context-dialog/README.md index dbb0ad1611..653a23c0a3 100644 --- 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 | { [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 | { [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 index 7f44acfc82..a61d784e24 100644 --- 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 index 807a9b3687..1c1fc34838 100644 --- 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( '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