fix(dialog): dialog design fixes

__snapshots__/Dialog.md

@@ -12,8 +12,12 @@
 >
  <div class="mdc-dialog__container">
  <div class="mdc-dialog__surface">
+ <div id="dialog_icon">
+ <slot name="icon">
+ </slot>
+ </div>
  <div
- class="mdc-dialog__content"
+ class="last mdc-dialog__content"
  id="content"
  >
  <slot id="contentSlot">

components/dialog/package.json

@@ -27,8 +27,10 @@
  },
  "dependencies": {
  "@material/mwc-dialog": "^0.20.0",
+ "@vonage/vvd-design-tokens": "^1.1.3",
  "@vonage/vvd-foundation": "^1.1.3",
  "@vonage/vvd-style-coupling": "^1.1.3",
+ "@vonage/vvd-typography": "^1.1.3",
  "lit-element": "^2.4.0",
  "tslib": "^2.0.3"
  },

components/dialog/src/vwc-dialog.scss

@@ -1,6 +1,44 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins';
+@use '@vonage/vvd-typography/scss/typography' as typography;
 
-:host {
+#title, #content, #actions, #dialog_icon {
+ padding-right: 0;
+ padding-left: 0;
+ display: flex;
+}
+
+::slotted([slot=icon]) {
+ margin-bottom: 18px;
+}
+
+:host #title {
+ @include typography.typography-cat-shorthand('subtitle-2');
+ padding-bottom: 0;
+ margin-bottom: 8px;
+}
+
+#content {
+ @include typography.typography-cat-shorthand('body-2');
+}
+
+#actions {
+ @include typography.typography-cat-shorthand('body-2-bold');
+ padding-bottom: 0;
+}
+
+.mdc-dialog__surface {
+ padding: 32px;
+}
+
+.mdc-dialog .mdc-dialog__content {
+ padding-top: 0;
+}
+
+.mdc-dialog__content.last {
+ padding-bottom: 0;
+}
 
+.mdc-dialog__title::before {
+ height: 0;
 }

components/dialog/src/vwc-dialog.ts

@@ -1,4 +1,4 @@
-import { customElement } from 'lit-element';
+import { customElement, PropertyValues } from 'lit-element';
 import { style } from './vwc-dialog.css';
 import { Dialog as MWCDialog } from '@material/mwc-dialog';
 import { style as mwcDialogStyle } from '@material/mwc-dialog/mwc-dialog-css';
@@ -10,12 +10,37 @@ declare global {
  }
 }
 
+const iconTemplate = document.createElement('template');
+iconTemplate.innerHTML = `
+ <div id="dialog_icon">
+ <slot name="icon"></slot>
+</div>
+`;
+
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
 MWCDialog.styles = [styleCoupling, mwcDialogStyle, style];
 
 @customElement('vwc-dialog')
 export class VWCDialog extends MWCDialog {
+ protected updated(_changedProperties: PropertyValues): void {
+ super.updated(_changedProperties);
+ if (!this.renderRoot.querySelector('#dialog_icon')) {
+ this.renderRoot
+ .querySelector('.mdc-dialog__surface')
+ ?.prepend(iconTemplate.content.cloneNode(true));
+ }
+
+ if (_changedProperties.has('hideActions')) {
+ const contentElement = this.renderRoot.querySelector('#content');
+ if (contentElement) {
+ _changedProperties.get('hideActions')
+ ? contentElement.classList.remove('last')
+ : contentElement.classList.add('last');
+ }
+ }
+ }
+
  connectedCallback(): void {
  super.connectedCallback();
  }

components/dialog/stories/dialog.stories.js

@@ -27,12 +27,33 @@ const Template = args => html`
  </vwc-dialog>
 `;
 
+const IconTemplate = args => html`
+ <vwc-button @click="${handleOpenDialogClick}">Open dialog</vwc-button>
+ <vwc-dialog ...=${spread(args)}>
+ <div>This is the modal's content.</div>
+ <vwc-icon slot="icon" size="large" type="home"></vwc-icon>
+ <vwc-button
+ slot="primaryAction"
+ dialogAction="discard">
+ Discard
+ </vwc-button>
+ <vwc-button
+ slot="secondaryAction"
+ dialogAction="cancel">
+ Cancel
+ </vwc-button>
+ </vwc-dialog>
+`;
+
 export const Basic = Template.bind({});
 Basic.args = { id: 'dialog-a' };
 
 export const Heading = Template.bind({});
 Heading.args = { id: 'dialog-a', heading: 'Hello Modal!'};
 
+export const Icon = IconTemplate.bind({});
+Icon.args = { id: 'dialog-a', heading: 'Homey feeling'};
+
 export const Stacked = Template.bind({});
 Stacked.args = { id: 'dialog-a', stacked: ''};