@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.598

package/dist/collection/components/notice/notice.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-next.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -28,22 +28,22 @@ export class Notice {
     //
     //---------------------------------------------------------------------------
     /**
-     * When true, the component is active.
+     * When `true`, the component is active.
      *
-     * @deprecated Use open instead.
+     * @deprecated Use `open` instead.
      */
     this.active = false;
-    /** When true, the component is visible */
+    /** When `true`, the component is visible. */
     this.open = false;
     /** The color for the component's top border and icon. */
     this.color = "blue";
     /**
-     * When true, a close button is added to the component.
+     * When `true`, a close button is added to the component.
      *
-     * @deprecated use closable instead
+     * @deprecated use `closable` instead.
      */
     this.dismissible = false;
-    /** When true, displays a button user can click to dismiss the `calcite-notice` */
+    /** When `true`, a close button is added to the component. */
     this.closable = false;
     /**
      * Accessible name for the close button.
@@ -156,9 +156,9 @@ export class Notice {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "Use open instead."
+              "text": "Use `open` instead."
             }],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -176,7 +176,7 @@ export class Notice {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is visible"
+          "text": "When `true`, the component is visible."
         },
         "attribute": "open",
         "reflect": true,
@@ -218,9 +218,9 @@ export class Notice {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use closable instead"
+              "text": "use `closable` instead."
             }],
-          "text": "When true, a close button is added to the component."
+          "text": "When `true`, a close button is added to the component."
         },
         "attribute": "dismissible",
         "reflect": true,
@@ -238,7 +238,7 @@ export class Notice {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When true, displays a button user can click to dismiss the `calcite-notice`"
+          "text": "When `true`, a close button is added to the component."
         },
         "attribute": "closable",
         "reflect": true,
@@ -256,7 +256,7 @@ export class Notice {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+          "text": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
         },
         "attribute": "icon",
         "reflect": true

package/dist/collection/components/notice/notice.stories.js

@@ -0,0 +1,90 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Notice",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:600px;max-width:100%;text-align:center;">
+    <calcite-notice
+      ${boolean("icon", true)}
+      ${boolean("open", true)}
+      ${boolean("closable", true)}
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
+      icon="${select("icon", iconNames, iconNames[0])}"
+    >
+      <div slot="title">Your settings area has changed</div>
+      <div slot="message">Look around and let us know what you think</div>
+      <calcite-link slot="link" title="my action">Learn more</calcite-link>
+      <calcite-action
+        label="Retry"
+        icon="reset"
+        scale="${select("scale", ["s", "m", "l"], "m")}"
+        slot="actions-end"
+      ></calcite-action>
+    </calcite-notice>
+  </div>
+`;
+export const customIcon = () => html `
+  <div style="width:600px;max-width:100%;text-align:center;">
+    <calcite-notice
+      icon="${select("icon", iconNames, iconNames[0])}"
+      ${boolean("open", true)}
+      ${boolean("closable", true)}
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
+    >
+      <div slot="title">Your settings area has changed</div>
+      <div slot="message">Look around and let us know what you think</div>
+      <calcite-link slot="link" title="my action">Learn more</calcite-link>
+    </calcite-notice>
+  </div>
+`;
+export const withAction = () => html `
+  <div style="width:600px;max-width:100%;text-align:center;">
+    <calcite-notice
+      ${boolean("icon", true)}
+      ${boolean("open", true)}
+      ${boolean("closable", false)}
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+    >
+      <div slot="title">Notice with action</div>
+      <div slot="message">This shows a notice with a custom action</div>
+      <calcite-action
+        label="Retry"
+        icon="reset"
+        scale="${select("scale", ["s", "m", "l"], "m")}"
+        slot="actions-end"
+      ></calcite-action>
+    </calcite-notice>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div style="width:600px;max-width:100%;text-align:center;">
+    <calcite-notice
+      dir="rtl"
+      class="calcite-theme-dark"
+      ${boolean("icon", true)}
+      ${boolean("open", true)}
+      ${boolean("closable", false)}
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      width="${select("width", ["auto", "half", "full"], "auto")}"
+      color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+    >
+      <div slot="title">This is a destructive action</div>
+      <div slot="message">Be sure you know what you are doin, folks.</div>
+    </calcite-notice>
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/notice/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-next.597
+ * v1.0.0-next.598
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.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-next.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -13,7 +13,7 @@ export class Option {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     this.mutationObserver = createObserver("mutation", () => {
@@ -96,7 +96,7 @@ export class Option {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -131,7 +131,7 @@ export class Option {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is selected."
+          "text": "When `true`, the component is selected."
         },
         "attribute": "selected",
         "reflect": true

package/dist/collection/components/option-group/option-group.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-next.597
+ * v1.0.0-next.598
  */
 import { h, Fragment } from "@stencil/core";
 /**
@@ -15,7 +15,7 @@ export class OptionGroup {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
   }
@@ -56,7 +56,7 @@ export class OptionGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,

package/dist/collection/components/pagination/pagination.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-next.597
+ * v1.0.0-next.598
  */
 import { h, Fragment } from "@stencil/core";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
@@ -15,7 +15,7 @@ export class Pagination {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, number values are displayed with a group separator corresponding to the language and country format.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
     /** Specifies the number of items per page. */
@@ -58,11 +58,11 @@ export class Pagination {
      * @param value
      */
     this.determineGroupSeparator = (value) => {
-      numberStringFormatter.setOptions({
+      numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
-      });
+      };
       return this.groupSeparator
         ? numberStringFormatter.localize(value.toString())
         : value.toString();
@@ -215,7 +215,7 @@ export class Pagination {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, number values are displayed with a group separator corresponding to the language and country format."
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
         },
         "attribute": "group-separator",
         "reflect": true,

package/dist/collection/components/pagination/pagination.stories.js

@@ -0,0 +1,37 @@
+import { number, select } from "@storybook/addon-knobs";
+import { locales } from "../../utils/locale";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Pagination",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-pagination
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    start="${number("start", 1)}"
+    lang="${select("lang", locales, "en")}"
+    total="${number("total", 123456789)}"
+    num="${number("num", 10)}"
+  >
+  </calcite-pagination>
+`;
+export const darkThemeFrenchLocaleAndRTL_NoTest = () => html `
+  <calcite-pagination
+    class="calcite-theme-dark"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    start="${number("start", 1)}"
+    lang="fr"
+    total="${number("total", 123456789)}"
+    num="${number("num", 10)}"
+    dir="rtl"
+    }
+  >
+  </calcite-pagination>
+`;
+darkThemeFrenchLocaleAndRTL_NoTest.parameters = { themes: themesDarkDefault };

package/dist/collection/components/pagination/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-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.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-next.597
+ * v1.0.0-next.598
  */
 import { h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -28,37 +28,37 @@ export class Panel {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, hides the component.
+     * When `true`, hides the component.
      *
-     * @deprecated use closed instead
+     * @deprecated use `closed` instead.
      */
     this.dismissed = false;
-    /** When true, panel will be hidden */
+    /** When `true`, the component will be hidden. */
     this.closed = false;
     /**
-     *  When true, interaction is prevented and the component is displayed with lower opacity.
+     *  When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, a close button is added to the component.
+     * When `true`, a close button is added to the component.
      *
-     * @deprecated use closable instead
+     * @deprecated use `closable` instead
      */
     this.dismissible = false;
-    /** When true, displays a close button in the trailing side of the header */
+    /** When `true`, displays a close button in the trailing side of the header. */
     this.closable = false;
     /**
-     * When true, displays a back button in the header.
+     * When `true`, displays a back button in the header.
      *
      * @deprecated use `calcite-flow-item` instead.
      */
     this.showBackButton = false;
     /**
-     * When true, a busy indicator is displayed.
+     * When `true`, a busy indicator is displayed.
      */
     this.loading = false;
     /**
-     * When true, the action menu items in the `header-menu-actions` slot are open.
+     * When `true`, the action menu items in the `header-menu-actions` slot are open.
      */
     this.menuOpen = false;
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
@@ -304,14 +304,17 @@ export class Panel {
   renderFooterNode() {
     const { hasFooterContent, hasFooterActions } = this;
     const showFooter = hasFooterContent || hasFooterActions;
-    return (h("footer", { class: CSS.footer, hidden: !showFooter, key: "footer" }, h("slot", { key: "footer-slot", name: SLOTS.footer, onSlotchange: this.handleFooterSlotChange }), h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
+    return (h("footer", { class: CSS.footer, hidden: !showFooter }, h("slot", { key: "footer-slot", name: SLOTS.footer, onSlotchange: this.handleFooterSlotChange }), h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
   }
   renderContent() {
     const { hasFab } = this;
     const defaultSlotNode = h("slot", { key: "default-slot" });
-    const contentWrapperKey = "content-wrapper";
     const containerNode = hasFab ? (h("section", { class: CSS.contentContainer }, defaultSlotNode)) : (defaultSlotNode);
-    return (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, containerNode, this.renderFab()));
+    return (h("div", { class: {
+        [CSS.contentWrapper]: true,
+        [CSS.contentContainer]: !hasFab,
+        [CSS.contentHeight]: hasFab
+      }, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, containerNode, this.renderFab()));
   }
   renderFab() {
     return (h("div", { class: CSS.fabContainer, hidden: !this.hasFab }, h("slot", { name: SLOTS.fab, onSlotchange: this.handleFabSlotChange })));
@@ -348,9 +351,9 @@ export class Panel {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use closed instead"
+              "text": "use `closed` instead."
             }],
-          "text": "When true, hides the component."
+          "text": "When `true`, hides the component."
         },
         "attribute": "dismissed",
         "reflect": true,
@@ -368,7 +371,7 @@ export class Panel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, panel will be hidden"
+          "text": "When `true`, the component will be hidden."
         },
         "attribute": "closed",
         "reflect": true,
@@ -408,7 +411,7 @@ export class Panel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -427,9 +430,9 @@ export class Panel {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use closable instead"
+              "text": "use `closable` instead"
             }],
-          "text": "When true, a close button is added to the component."
+          "text": "When `true`, a close button is added to the component."
         },
         "attribute": "dismissible",
         "reflect": true,
@@ -447,7 +450,7 @@ export class Panel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays a close button in the trailing side of the header"
+          "text": "When `true`, displays a close button in the trailing side of the header."
         },
         "attribute": "closable",
         "reflect": true,
@@ -490,7 +493,7 @@ export class Panel {
               "name": "deprecated",
               "text": "use `calcite-flow-item` instead."
             }],
-          "text": "When true, displays a back button in the header."
+          "text": "When `true`, displays a back button in the header."
         },
         "attribute": "show-back-button",
         "reflect": true,
@@ -511,7 +514,7 @@ export class Panel {
               "name": "deprecated",
               "text": "use `calcite-flow-item` instead."
             }],
-          "text": "Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true."
+          "text": "Accessible name for the component's back button. The back button will only be shown when `showBackButton` is `true`."
         },
         "attribute": "intl-back",
         "reflect": false
@@ -572,7 +575,7 @@ export class Panel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed."
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -590,7 +593,7 @@ export class Panel {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true."
+          "text": "Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`."
         },
         "attribute": "intl-close",
         "reflect": false
@@ -642,7 +645,7 @@ export class Panel {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use description instead"
+              "text": "use `description` instead."
             }],
           "text": "Summary text. A description displayed underneath the heading."
         },
@@ -678,7 +681,7 @@ export class Panel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the action menu items in the `header-menu-actions` slot are open."
+          "text": "When `true`, the action menu items in the `header-menu-actions` slot are open."
         },
         "attribute": "menu-open",
         "reflect": true,
@@ -722,7 +725,7 @@ export class Panel {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use calcitePanelClose instead."
+              "text": "use `calcitePanelClose` instead."
             }],
           "text": "Fires when the close button is clicked."
         },
@@ -740,7 +743,7 @@ export class Panel {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "use calcitePanelClose instead."
+              "text": "use `calcitePanelClose` instead."
             }],
           "text": "Fires when there is a change to the `dismissed` property value ."
         },