feat(dialog): custom top position (#1226)

* feat(dialog): custom top position

* limit top position to 4 predefined sizes

* Update components/dialog/src/vwc-dialog.ts

Co-authored-by: yinon <yinon@hotmail.com>

* Update components/dialog/src/vwc-dialog.ts

Co-authored-by: yinon <yinon@hotmail.com>

* scss variable use

Co-authored-by: yinon <yinon@hotmail.com>

components/dialog/readme.md

@@ -15,18 +15,20 @@ This component is an extension of [<mwc-dialog>](https://github.com/material-com
 
 ### Properties/Attributes
 
-| Name                    | Type      | Description
-| ----------------------- | --------- |------------
-| `open`                  | `boolean` | Whether the dialog should open.
-| `hideActions`           | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.
-| `stacked`               | `boolean` | Whether to stack the action buttons.
-| `heading`               | `string`  | Heading text of the dialog.
-| `scrimClickAction`      | `string`  | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked.
-| `escapeKeyAction`       | `string`  | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed.
-| `defaultAction`         | `string`  | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `<mwc-dialog>.open` is toggled.
-| `actionAttribute`       | `string`  | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value.
-| `initialFocusAttribute` | `string`  | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.
-| `closeButton`						| `boolean`	|	_Default: 'false'_ - show/hide the dismiss button
+| Name                    | Type       | Description
+| ----------------------- |------------|------------
+| `open`                  | `boolean`  | Whether the dialog should open.
+| `hideActions`           | `boolean`  | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.
+| `stacked`               | `boolean`  | Whether to stack the action buttons.
+| `heading`               | `string`   | Heading text of the dialog.
+| `scrimClickAction`      | `string`   | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked.
+| `escapeKeyAction`       | `string`   | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed.
+| `defaultAction`         | `string`   | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `<mwc-dialog>.open` is toggled.
+| `actionAttribute`       | `string`   | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value.
+| `initialFocusAttribute` | `string`   | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.
+| `closeButton`						     | `boolean`	 |	_Default: 'false'_ - show/hide the dismiss button
+| `topPosition`	| `string`	  |	_Default: 'unset'_ - override the dialog centering to the screen and allow setting a unique top. Can get: `small`, `medium`, `large`, `xlarge`
+
 
 ### Methods
 

components/dialog/src/vwc-dialog.scss

@@ -71,3 +71,26 @@
 		width: 100%;
 	}
 }
+
+.mdc-dialog {
+	$top-position: --_top-position;
+	:host([topPosition='small']) &,
+	:host([topPosition='medium']) &,
+	:host([topPosition*='large']) & {
+		top: var(#{$top-position});
+		height: auto;
+	}
+
+	:host([topPosition='small']) & {
+		#{$top-position}: 40px;
+	}
+	:host([topPosition='medium']) & {
+		#{$top-position}: 80px;
+	}
+	:host([topPosition='large']) & {
+		#{$top-position}: 120px;
+	}
+	:host([topPosition='xlarge']) & {
+		#{$top-position}: 160px;
+	}
+}

components/dialog/src/vwc-dialog.ts

@@ -4,6 +4,7 @@ import { style } from './vwc-dialog.css.js';
 import { Dialog as MWCDialog } from '@material/mwc-dialog';
 import { styles as mwcDialogStyles } from '@material/mwc-dialog/mwc-dialog.css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css.js';
+import type { Size } from '@vonage/vvd-foundation/constants.js';
 import '@vonage/vvd-core';
 
 declare global {
@@ -12,6 +13,8 @@ declare global {
 	}
 }
 
+type Position = Extract<Size, Size.Small | Size.Medium | Size.Large | Size.x_Large>;
+
 const iconTemplate = document.createElement('template');
 iconTemplate.innerHTML = `
 	<div id="dialog_icon">
@@ -32,6 +35,9 @@ export class VWCDialog extends MWCDialog {
 	})
 		closeButton?: boolean;
 
+	@property({ type: String, reflect: true, attribute: 'topPosition' })
+		topPosition?: Position;
+
 	protected override firstUpdated() {
 		super.firstUpdated();
 		this.addDismissButton();

components/dialog/stories/arg-types.js

@@ -5,6 +5,12 @@ export const argTypes = {
 			options: ['primary', 'cta', 'success', 'error', 'info', 'announcement'],
 		}
 	},
+	topPosition: {
+		control: {
+			type: 'select',
+			options: ['small', 'medium', 'large', 'xlarge'],
+		}
+	},
 	disabled: {
 		control: {
 			type: 'inline-radio',

components/dialog/stories/dialog.stories.js

@@ -63,6 +63,9 @@ Modal.args = { heading: 'This is a modal window', scrimClickAction: '' };
 export const CloseButton = Template.bind({});
 CloseButton.args = { 'close-button': 'true', heading: 'This is a modal window with a close button' };
 
+export const topPosition = Template.bind({});
+topPosition.args = { heading: 'Hello Modal!', topPosition: 'xlarge',};
+
 function handleOpenDialogClick(e) {
 	document.querySelector('vwc-dialog').show();
 }