Revert "revert: revert changes to portal and dialog"

etc/lime-elements.api.md

@@ -535,11 +535,8 @@ export namespace Components {
     }
     export interface LimelPortal {
         "anchor"?: HTMLElement;
-        "containerId": string;
-        "containerStyle": object;
         "inheritParentWidth": boolean;
         "openDirection": OpenDirection;
-        "parent": HTMLElement;
         "position": 'fixed' | 'absolute';
         "visible": boolean;
     }
@@ -1493,11 +1490,8 @@ namespace JSX_2 {
     }
     interface LimelPortal {
         "anchor"?: HTMLElement;
-        "containerId"?: string;
-        "containerStyle"?: object;
         "inheritParentWidth"?: boolean;
         "openDirection"?: OpenDirection;
-        "parent"?: HTMLElement;
         "position"?: 'fixed' | 'absolute';
         "visible"?: boolean;
     }

src/components/date-picker/date-picker.scss

@@ -1,8 +1,3 @@
-// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.
-/**
- * @prop --dropdown-z-index: z-index of the dropdown menu.
- */
-
 :host(limel-date-picker) {
     position: relative;
 }

src/components/date-picker/date-picker.tsx

@@ -13,6 +13,7 @@ import { DateType, Languages } from '../date-picker/date.types';
 import { InputType } from '../input-field/input-field.types';
 import { DateFormatter } from './dateFormatter';
 import { MDCTextField } from '@material/textfield';
+import { isDescendant } from 'src/util/dom';
 
 // tslint:disable:no-duplicate-string
 const nativeTypeForConsumerType: { [key: string]: InputType } = {
@@ -210,10 +211,6 @@ export class DatePicker {
             );
         }
 
-        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(
-            '--dropdown-z-index',
-        );
-
         const formatter = this.formatter || this.formatValue;
 
         return [
@@ -227,18 +224,14 @@ export class DatePicker {
                 required={this.required}
                 value={this.value ? formatter(this.value) : ''}
                 onFocus={this.showCalendar}
-                onBlur={this.hideCalendar}
                 onClick={this.onInputClick}
                 onChange={this.handleInputElementChange}
                 ref={(el) => (this.textField = el)}
                 {...inputProps}
             />,
-            <limel-portal
-                containerId={this.portalId}
-                visible={this.showPortal}
-                containerStyle={{ 'z-index': dropdownZIndex }}
-            >
+            <limel-portal visible={this.showPortal}>
                 <limel-flatpickr-adapter
+                    id={this.portalId}
                     format={this.internalFormat}
                     language={this.language}
                     type={this.type}
@@ -331,12 +324,12 @@ export class DatePicker {
     }
 
     private documentClickListener = (event: MouseEvent) => {
-        if (event.composedPath().includes(this.textField)) {
+        const elementPath = event.composedPath() as HTMLElement[];
+        if (elementPath.includes(this.textField)) {
             return;
         }
 
-        const element = document.querySelector(`#${this.portalId}`);
-        if (!element.contains(event.target as Node)) {
+        if (!isDescendant(elementPath[0], this.host)) {
             this.hideCalendar();
         }
     };

src/components/dialog/dialog.scss

@@ -1,114 +1,102 @@
-@use '../../style/functions';
 @use '../../style/mixins';
 
-@use '../../style/internal/lime-theme';
-
-@use '@material/dialog';
-
 /**
  * @prop --dialog-width: Width of the dialog.
+ * @prop --dialog-max-width: Max width of the dialog.
  * @prop --dialog-height: Height of the dialog.
- * @prop --dialog-z-index: z-index of the dialog container, including the scrim.
+ * @prop --dialog-max-height: Max height of the dialog.
+ * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Affects the height of fade-out effects on top and bottom edges when the content is scrollable and has overflowed out of the content area. Defaults to `1.5rem`. Note that if you use this variable and set it to numbers smaller than 1rem, you will loose the fade-out effects on the edges. If you have set these paddings to `0`, losing the fade out effects should be however fine for your use case! Because in such a case your intention is to handle the `overflow` internally in the component that is displayed in the dialog's content.
+ * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  * @prop --dialog-heading-title-color: Color of the title.
  * @prop --dialog-heading-subtitle-color: Color of the subtitle.
  * @prop --dialog-heading-supporting-text-color: Color of the supporting text.
  * @prop --dialog-heading-icon-color: Color of the icon.
  * @prop --dialog-heading-icon-background-color: Background color of the icon when displayed as a badge.
- * @prop --dialog-max-width: Max width of the dialog.
- * @prop --dialog-max-height: Max height of the dialog.
- * @prop --dialog-border-radius: Border radius of the dialog corners
- * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Affects the height of fade-out effects on top and bottom edges when the content is scrollable and has overflowed out of the content area. Defaults to `1.5rem`. Note that if you use this variable and set it to numbers smaller than 1rem, you will loose the fade-out effects on the edges. If you have set these paddings to `0`, losing the fade out effects should be however fine for your use case! Because in such a case your intention is to handle the `overflow` internally in the component that is displayed in the dialog's content.
- * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  */
 
-:host {
-    --dialog-background-color: var(--lime-elevated-surface-background-color);
+:host(limel-dialog) {
+    --limel-dialog-border-radius: 0.75rem;
     --header-heading-color: var(--dialog-heading-title-color);
     --header-subheading-color: var(--dialog-heading-subtitle-color);
     --header-supporting-text-color: var(--dialog-heading-supporting-text-color);
     --header-icon-color: var(--dialog-heading-icon-color);
     --header-icon-background-color: var(--dialog-heading-icon-background-color);
 }
 
-$responsive-body-padding: 3vw; // 3% of viewport's width
-
-@include dialog.core-styles;
-
-.mdc-dialog__content {
-    // As long as this component is depended on MDC,
-    // we need to force it to be font-agnostic.
-    // When MDC-dependency is removed, this block can also be removed.
-    // However, on removal of MDC-dependency, we should also make sure to check
-    // other font-related styles that might be set by MDC,
-    // such as `letter-spacing` or `font-size`.
-    font-family: inherit;
+* {
+    box-sizing: border-box;
 }
 
-.mdc-dialog {
-    @include dialog.max-width(16000px, dialog.$margin);
+$responsive-body-padding: 3vw;
+
+dialog {
+    border: none;
+    outline: none;
 
-    z-index: var(--dialog-z-index, dialog.$z-index);
     padding: env(safe-area-inset-top) env(safe-area-inset-right)
         env(safe-area-inset-bottom) env(safe-area-inset-left);
+    border-radius: var(--limel-dialog-border-radius);
 
-    &.full-screen {
-        @include dialog.max-height(16000px, dialog.$margin);
-        .mdc-dialog__container {
-            height: 100%;
-            width: 100%;
-
-            .mdc-dialog__surface {
-                height: 100%;
-                width: 100%;
-            }
-        }
-    }
+    width: var(--dialog-width, fit-content);
+    height: var(--dialog-height, fit-content);
 
-    .mdc-dialog__scrim {
-        background-color: rgba(var(--color-black), 0.4);
-    }
+    max-width: var(--dialog-max-width, calc(100vw - 1rem));
+    max-height: var(--dialog-max-height, calc(100% - 1rem));
+
+    background-color: transparent;
+    box-shadow: var(--shadow-depth-8), var(--shadow-depth-64);
 
-    .mdc-dialog__container {
+    &.fullscreen {
+        --dialog-width: 100%;
+        --dialog-height: 100%;
+        width: 100%;
         height: 100%;
-        width: var(--dialog-width, auto);
     }
+}
 
-    .mdc-dialog__surface {
-        width: var(--dialog-width, auto);
-        height: var(--dialog-height, auto);
-        background-color: var(--dialog-background-color);
-        box-shadow: var(--shadow-depth-64);
+.surface {
+    display: flex;
+    flex-direction: column;
 
-        max-width: var(--dialog-max-width, calc(100vw - 2rem));
-        max-height: var(--dialog-max-height, calc(100% - 2rem));
-        border-radius: var(--dialog-border-radius, 0.25rem);
-    }
+    height: 100%;
+    width: 100%;
 
-    .mdc-dialog__content {
-        --limel-top-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);
-        --limel-bottom-edge-fade-height: var(
-            --dialog-padding-top-bottom,
-            1.5rem
-        );
-        @include mixins.fade-out-overflowed-content-on-edges(vertically);
-
-        color: var(--mdc-theme-on-surface);
-        padding-left: var(
-            --dialog-padding-left-right,
-            min(1.25rem, $responsive-body-padding)
-        );
-        padding-right: var(
-            --dialog-padding-left-right,
-            min(1.25rem, $responsive-body-padding)
-        );
-    }
+    border-radius: var(--limel-dialog-border-radius);
+    background-color: var(--lime-elevated-surface-background-color);
 }
 
-#initialFocusElement {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    z-index: -1;
+.content {
+    flex-grow: 1;
+    overflow-y: auto;
+
+    --limel-top-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);
+    --limel-bottom-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);
+    @include mixins.fade-out-overflowed-content-on-edges(vertically);
+
+    color: var(--mdc-theme-on-surface);
+    padding-left: var(
+        --dialog-padding-left-right,
+        min(1.25rem, $responsive-body-padding)
+    );
+    padding-right: var(
+        --dialog-padding-left-right,
+        min(1.25rem, $responsive-body-padding)
+    );
+}
+
+limel-header,
+.actions {
+    flex-shrink: 0;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 52px;
+    margin: 0px;
+    padding: 8px;
+    border-top: 1px solid transparent;
 }
 
 slot[name='header'] {
@@ -117,7 +105,7 @@ slot[name='header'] {
 
 slot[name='button'] {
     display: flex;
-    gap: 0.5rem; // Makes sure buttons get some default distance
+    gap: 0.5rem;
     width: 100%;
     justify-content: flex-end;
 }
@@ -131,3 +119,5 @@ slot[name='button'] {
         padding-top: 1rem;
     }
 }
+
+@import './partial-styles/show-hide-animations.scss';