@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

package/dist/collection/components/modal/modal.css

@@ -83,11 +83,11 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-modal-content-text: the font-size of the modal content
-* @prop --calcite-modal-padding: the top/bottom padding around items in the modal
-* @prop --calcite-modal-padding-large: the left/right padding around items in the modal
-* @prop --calcite-modal-title-text: the font-size of the modal title
-* @prop --calcite-scrim-background: the semi-transparent background color behind modal
+* @prop --calcite-modal-content-text: The component content's font size.
+* @prop --calcite-modal-padding: The top/bottom padding around items within the component.
+* @prop --calcite-modal-padding-large: The left/right padding around items within the component.
+* @prop --calcite-modal-title-text: The component title's font size.
+* @prop --calcite-scrim-background: The component's semi-transparent background color.
 */
 :host {
   position: fixed;
@@ -146,13 +146,13 @@
   display: flex;
   width: 100%;
   flex-direction: column;
+  overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
   --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
   --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  overflow: hidden;
   z-index: 102;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
@@ -160,12 +160,14 @@
   transform: translate3d(0, 20px, 0);
 }
 
-:host([active]) {
+:host([active]), 
+:host([open]) {
   opacity: 1;
   visibility: visible !important;
   transition-delay: 0ms;
 }
-:host([active]) .modal {
+:host([active]) .modal, 
+:host([open]) .modal {
   pointer-events: auto;
   visibility: visible;
   opacity: 1;
@@ -201,13 +203,8 @@
   border-style: none;
   background-color: transparent;
   color: var(--calcite-ui-text-3);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-start-end-radius: 0.25rem;
   padding: var(--calcite-modal-padding);
   flex: 0 0 auto;
@@ -220,7 +217,7 @@
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-.close:hover, .close:focus, .close:active {
+.close:hover,  .close:focus,  .close:active {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
@@ -234,7 +231,8 @@
   padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
 }
 
-slot[name=header]::slotted(*), *::slotted([slot=header]) {
+slot[name=header]::slotted(*), 
+*::slotted([slot=header]) {
   margin: 0px;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-1);
@@ -295,7 +293,8 @@ slot[name=content]::slotted(*),
   z-index: 2;
 }
 
-.footer--hide-back .back, .footer--hide-secondary .secondary {
+.footer--hide-back .back, 
+.footer--hide-secondary .secondary {
   display: none;
 }
 
@@ -328,20 +327,10 @@ slot[name=primary] {
 @media screen and (max-width: 35rem) {
   :host([width=s]) .modal {
     margin: 0px;
-  }
-  :host([width=s]) .modal {
     height: 100%;
-  }
-  :host([width=s]) .modal {
     max-height: 100%;
-  }
-  :host([width=s]) .modal {
     width: 100%;
-  }
-  :host([width=s]) .modal {
     max-width: 100%;
-  }
-  :host([width=s]) .modal {
     border-radius: 0px;
   }
   :host([width=s]) .content {
@@ -360,20 +349,10 @@ slot[name=primary] {
 @media screen and (max-width: 51rem) {
   :host([width=m]) .modal {
     margin: 0px;
-  }
-  :host([width=m]) .modal {
     height: 100%;
-  }
-  :host([width=m]) .modal {
     max-height: 100%;
-  }
-  :host([width=m]) .modal {
     width: 100%;
-  }
-  :host([width=m]) .modal {
     max-width: 100%;
-  }
-  :host([width=m]) .modal {
     border-radius: 0px;
   }
   :host([width=m]) .content {
@@ -392,20 +371,10 @@ slot[name=primary] {
 @media screen and (max-width: 97rem) {
   :host([width=l]) .modal {
     margin: 0px;
-  }
-  :host([width=l]) .modal {
     height: 100%;
-  }
-  :host([width=l]) .modal {
     max-height: 100%;
-  }
-  :host([width=l]) .modal {
     width: 100%;
-  }
-  :host([width=l]) .modal {
     max-width: 100%;
-  }
-  :host([width=l]) .modal {
     border-radius: 0px;
   }
   :host([width=l]) .content {
@@ -436,13 +405,16 @@ slot[name=primary] {
   flex: 1 1 auto;
 }
 
-:host([active][fullscreen]) .modal {
+:host([active][fullscreen]) .modal,
+:host([open][fullscreen]) .modal {
   transform: translate3D(0, 0, 0) scale(1);
 }
-:host([active][fullscreen]) .header {
+:host([active][fullscreen]) .header,
+:host([open][fullscreen]) .header {
   border-radius: 0;
 }
-:host([active][fullscreen]) .footer {
+:host([active][fullscreen]) .footer,
+:host([open][fullscreen]) .footer {
   border-radius: 0;
 }
 
@@ -476,12 +448,14 @@ slot[name=primary] {
   border-color: var(--calcite-ui-info);
 }
 
-:host([color=red]) .modal, :host([color=blue]) .modal {
+:host([color=red]) .modal, 
+:host([color=blue]) .modal {
   border-width: 0px;
   border-top-width: 4px;
   border-style: solid;
 }
-:host([color=red]) .header, :host([color=blue]) .header {
+:host([color=red]) .header, 
+:host([color=blue]) .header {
   border-radius: 0.25rem;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -491,15 +465,13 @@ slot[name=primary] {
  * Tablet
  */
 @media screen and (max-width: 860px) {
-  slot[name=header]::slotted(*), *::slotted([slot=header]) {
+  slot[name=header]::slotted(*), 
+*::slotted([slot=header]) {
     font-size: var(--calcite-font-size-1);
   }
 
   .footer {
     position: sticky;
-  }
-
-  .footer {
     bottom: 0px;
   }
 }
@@ -511,11 +483,9 @@ slot[name=primary] {
     flex-direction: column;
   }
 
-  .back, .secondary {
+  .back, 
+.secondary {
     margin: 0px;
-  }
-
-  .back, .secondary {
     margin-bottom: 0.25rem;
   }
 }

package/dist/collection/components/modal/modal.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -17,11 +17,11 @@ const getFocusableElements = (el) => {
   return queryShadowRoot(el, isHidden, isFocusableExtended);
 };
 /**
- * @slot header - a slot for adding a modal header
- * @slot content - a slot for adding modal content
- * @slot primary - a slot for adding a primary button
- * @slot secondary - a slot for adding a secondary button
- * @slot back - a slot for adding a back button
+ * @slot header - A slot for adding header text.
+ * @slot content - A slot for adding the component's content.
+ * @slot primary - A slot for adding a primary button.
+ * @slot secondary - A slot for adding a secondary button.
+ * @slot back - A slot for adding a back button.
  */
 export class Modal {
   constructor() {
@@ -30,25 +30,31 @@ export class Modal {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Add the active attribute to open the modal */
+    /**
+     * When true, the `calcite-modal` is active.
+     *
+     * @deprecated use open instead
+     */
     this.active = false;
-    /** Optionally pass a function to run before close */
+    /** When true,`calcite-modal`  opens  */
+    this.open = false;
+    /** Passes a function to run before the `calcite-modal` closes. */
     this.beforeClose = () => Promise.resolve();
-    /** Disables the display a close button within the Modal */
+    /** When true, disables the component's close button. */
     this.disableCloseButton = false;
-    /** Disables the closing of the Modal when clicked outside. */
+    /** When true, disables the closing of the component when clicked outside. */
     this.disableOutsideClose = false;
-    /** Aria label for the close button */
+    /** Accessible name for the component's close button. */
     this.intlClose = TEXT.close;
-    /** Flag to disable the default close on escape behavior */
+    /** When true, disables the default close on escape behavior. */
     this.disableEscape = false;
-    /** specify the scale of modal, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** Set the width of the modal. Can use stock sizes or pass a number (in pixels) */
+    /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */
     this.width = "m";
-    /** Background color of modal content */
+    /** Sets the background color of the component's content. */
     this.backgroundColor = "white";
-    /** Turn off spacing around the content area slot */
+    /** When true, disables spacing to the content area slot. */
     this.noPadding = false;
     //--------------------------------------------------------------------------
     //
@@ -65,7 +71,7 @@ export class Modal {
     //--------------------------------------------------------------------------
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.calciteModalOpen.emit() : this.calciteModalClose.emit();
+        this.open || this.active ? this.calciteModalOpen.emit() : this.calciteModalClose.emit();
       }
     };
     this.openEnd = () => {
@@ -82,6 +88,7 @@ export class Modal {
     this.close = () => {
       return this.beforeClose(this.el).then(() => {
         this.active = false;
+        this.open = false;
         focusElement(this.previousActiveElement);
         this.removeOverflowHiddenClass();
       });
@@ -109,8 +116,8 @@ export class Modal {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
-    if (this.active) {
-      this.open();
+    if (this.open || this.active) {
+      this.openModal();
     }
   }
   connectedCallback() {
@@ -185,7 +192,7 @@ export class Modal {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && e.key === "Escape") {
+    if ((this.open || this.active) && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }
@@ -195,7 +202,9 @@ export class Modal {
   //
   //--------------------------------------------------------------------------
   /**
-   * Focus first interactive element
+   * Focus the first interactive element.
+   *
+   * @param el
    * @deprecated use `setFocus` instead.
    */
   async focusElement(el) {
@@ -207,14 +216,21 @@ export class Modal {
   /**
    * Sets focus on the component.
    *
-   * By default, will try to focus on any focusable content. If there is none, it will focus on the close button.
-   * If you want to focus on the close button, you can use the `close-button` focus ID.
+   * By default, tries to focus on focusable content. If there is none, it will focus on the close button.
+   * To focus on the close button, use the `close-button` focus ID.
+   *
+   * @param focusId
    */
   async setFocus(focusId) {
     const closeButton = this.closeButtonEl;
     return focusElement(focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton);
   }
-  /** Set the scroll top of the modal content */
+  /**
+   * Sets the scroll top of the component's content.
+   *
+   * @param top
+   * @param left
+   */
   async scrollContent(top = 0, left = 0) {
     if (this.modalContent) {
       if (this.modalContent.scrollTo) {
@@ -229,7 +245,7 @@ export class Modal {
   async toggleModal(value, oldValue) {
     if (value !== oldValue) {
       if (value) {
-        this.open();
+        this.openModal();
       }
       else if (!value) {
         this.close();
@@ -237,10 +253,11 @@ export class Modal {
     }
   }
   /** Open the modal */
-  open() {
+  openModal() {
     this.previousActiveElement = document.activeElement;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.active = true;
+    this.open = true;
     const titleEl = getSlotted(this.el, SLOTS.header);
     const contentEl = getSlotted(this.el, SLOTS.content);
     this.titleId = ensureId(titleEl);
@@ -270,13 +287,34 @@ export class Modal {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Add the active attribute to open the modal"
+        "tags": [{
+            "name": "deprecated",
+            "text": "use open instead"
+          }],
+        "text": "When true, the `calcite-modal` is active."
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true,`calcite-modal`  opens"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "beforeClose": {
       "type": "unknown",
       "mutable": false,
@@ -293,10 +331,10 @@ export class Modal {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optionally pass a function to run before close"
+        "text": "Passes a function to run before the `calcite-modal` closes."
       },
       "defaultValue": "() => Promise.resolve()"
     },
@@ -312,7 +350,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables the display a close button within the Modal"
+        "text": "When true, disables the component's close button."
       },
       "attribute": "disable-close-button",
       "reflect": false,
@@ -330,7 +368,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables the closing of the Modal when clicked outside."
+        "text": "When true, disables the closing of the component when clicked outside."
       },
       "attribute": "disable-outside-close",
       "reflect": false,
@@ -348,7 +386,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Aria label for the close button"
+        "text": "Accessible name for the component's close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -366,30 +404,11 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Prevent the modal from taking up the entire screen on mobile"
+        "text": "When true, prevents the component from expanding to the entire screen on mobile devices."
       },
       "attribute": "docked",
       "reflect": true
     },
-    "firstFocus": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specify an element to focus when the modal is first opened"
-      }
-    },
     "disableEscape": {
       "type": "boolean",
       "mutable": false,
@@ -402,7 +421,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flag to disable the default close on escape behavior"
+        "text": "When true, disables the default close on escape behavior."
       },
       "attribute": "disable-escape",
       "reflect": false,
@@ -425,7 +444,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of modal, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -448,7 +467,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the width of the modal. Can use stock sizes or pass a number (in pixels)"
+        "text": "Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels)."
       },
       "attribute": "width",
       "reflect": true,
@@ -466,7 +485,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the modal to always be fullscreen (overrides width)"
+        "text": "Sets the component to always be fullscreen (overrides width)."
       },
       "attribute": "fullscreen",
       "reflect": true
@@ -483,7 +502,7 @@ export class Modal {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Adds a color bar at the top for visual impact,\nUse color to add importance to destructive/workflow dialogs."
+        "text": "Adds a color bar to the top of component for visual impact.\nUse color to add importance to destructive or workflow dialogs."
       },
       "attribute": "color",
       "reflect": true
@@ -505,7 +524,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Background color of modal content"
+        "text": "Sets the background color of the component's content."
       },
       "attribute": "background-color",
       "reflect": true,
@@ -523,7 +542,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Turn off spacing around the content area slot"
+        "text": "When true, disables spacing to the content area slot."
       },
       "attribute": "no-padding",
       "reflect": false,
@@ -541,7 +560,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal finishes the open animation"
+        "text": "Emits when the component finishes the open animation."
       },
       "complexType": {
         "original": "any",
@@ -556,7 +575,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal finishes the close animation"
+        "text": "Emits when the component finishes the close animation."
       },
       "complexType": {
         "original": "any",
@@ -569,7 +588,10 @@ export class Modal {
       "complexType": {
         "signature": "(el?: HTMLElement) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "el"
+              }],
             "text": ""
           }],
         "references": {
@@ -583,8 +605,11 @@ export class Modal {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Focus first interactive element",
+        "text": "Focus the first interactive element.",
         "tags": [{
+            "name": "param",
+            "text": "el"
+          }, {
             "name": "deprecated",
             "text": "use `setFocus` instead."
           }]
@@ -594,7 +619,10 @@ export class Modal {
       "complexType": {
         "signature": "(focusId?: \"close-button\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -605,18 +633,27 @@ export class Modal {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Sets focus on the component.\n\nBy default, will try to focus on any focusable content. If there is none, it will focus on the close button.\nIf you want to focus on the close button, you can use the `close-button` focus ID.",
-        "tags": []
+        "text": "Sets focus on the component.\n\nBy default, tries to focus on focusable content. If there is none, it will focus on the close button.\nTo focus on the close button, use the `close-button` focus ID.",
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     },
     "scrollContent": {
       "complexType": {
         "signature": "(top?: number, left?: number) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "top"
+              }],
             "text": ""
           }, {
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "left"
+              }],
             "text": ""
           }],
         "references": {
@@ -627,8 +664,14 @@ export class Modal {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Set the scroll top of the modal content",
-        "tags": []
+        "text": "Sets the scroll top of the component's content.",
+        "tags": [{
+            "name": "param",
+            "text": "top"
+          }, {
+            "name": "param",
+            "text": "left"
+          }]
       }
     }
   }; }
@@ -636,6 +679,9 @@ export class Modal {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "toggleModal"
+    }, {
+      "propName": "open",
+      "methodName": "toggleModal"
     }]; }
   static get listeners() { return [{
       "name": "keyup",

package/dist/collection/components/modal/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   title: "title",