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

package/dist/collection/components/popover/popover.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 { forceUpdate, Host, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
@@ -28,39 +28,39 @@ export class Popover {
      */
     this.autoClose = false;
     /**
-     * When true, a close button is added to the component.
+     * When `true`, a close button is added to the component.
      *
      * @deprecated use dismissible instead.
      */
     this.closeButton = 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, display a close button within the Popover */
+    /** When `true`, display a close button within the component. */
     this.closable = false;
     /**
-     * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
+     * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.
      */
     this.disableFlip = false;
     /**
-     * When true, removes the caret pointer.
+     * When `true`, removes the caret pointer.
      */
     this.disablePointer = false;
     /**
-     * Offsets the position of the popover away from the `referenceElement`.
+     * Offsets the position of the component away from the `referenceElement`.
      *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offsets the position of the popover along the `referenceElement`.
+     * Offsets the position of the component along the `referenceElement`.
      */
     this.offsetSkidding = 0;
     /**
-     * When true, displays and positions the component.
+     * When `true`, displays and positions the component.
      */
     this.open = false;
     /**
@@ -79,7 +79,9 @@ export class Popover {
      */
     this.placement = defaultPopoverPlacement;
     /**
-     * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
+     * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.
+     *
+     * This property can be set to `true` to manage when the component is open.
      */
     this.triggerDisabled = false;
     /**
@@ -357,7 +359,7 @@ export class Popover {
               "name": "deprecated",
               "text": "use dismissible instead."
             }],
-          "text": "When true, a close button is added to the component."
+          "text": "When `true`, a close button is added to the component."
         },
         "attribute": "close-button",
         "reflect": true,
@@ -376,9 +378,9 @@ export class Popover {
         "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,
@@ -396,7 +398,7 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, display a close button within the Popover"
+          "text": "When `true`, display a close button within the component."
         },
         "attribute": "closable",
         "reflect": true,
@@ -414,7 +416,7 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, prevents flipping the component's placement when overlapping its `referenceElement`."
+          "text": "When `true`, prevents flipping the component's placement when overlapping its `referenceElement`."
         },
         "attribute": "disable-flip",
         "reflect": true,
@@ -432,7 +434,7 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, removes the caret pointer."
+          "text": "When `true`, removes the caret pointer."
         },
         "attribute": "disable-pointer",
         "reflect": true,
@@ -529,7 +531,7 @@ export class Popover {
               "name": "default",
               "text": "6"
             }],
-          "text": "Offsets the position of the popover away from the `referenceElement`."
+          "text": "Offsets the position of the component away from the `referenceElement`."
         },
         "attribute": "offset-distance",
         "reflect": true,
@@ -547,7 +549,7 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Offsets the position of the popover along the `referenceElement`."
+          "text": "Offsets the position of the component along the `referenceElement`."
         },
         "attribute": "offset-skidding",
         "reflect": true,
@@ -565,7 +567,7 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays and positions the component."
+          "text": "When `true`, displays and positions the component."
         },
         "attribute": "open",
         "reflect": true,
@@ -637,7 +639,7 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The `referenceElement` used to position the component according to its \"placement\" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used."
+          "text": "The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used."
         },
         "attribute": "reference-element",
         "reflect": false
@@ -654,7 +656,7 @@ export class Popover {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to \"true\" to manage when a popover is open."
+          "text": "When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.\n\nThis property can be set to `true` to manage when the component is open."
         },
         "attribute": "trigger-disabled",
         "reflect": true,

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

@@ -0,0 +1,95 @@
+import { select, number, text } from "@storybook/addon-knobs";
+import { html } from "../../../support/formatting";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { placements } from "../../utils/floating-ui";
+import readme from "./readme.md";
+import { defaultPopoverPlacement } from "../popover/resources";
+import { themesDarkDefault } from "../../../.storybook/utils";
+const contentHTML = `
+<div style="width: 300px; padding:12px 16px;">
+  <b>I am a title!</b> <br>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  <calcite-link>I am an inline link</calcite-link>
+</div>
+`;
+const referenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+const nestedReferenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button title="Nested Reference Element" id="reference-element-nested">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+export default {
+    title: "Components/Popover",
+    parameters: {
+        notes: [readme]
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width: 400px;">
+    ${referenceElementHTML}
+    <calcite-popover
+      ${boolean("dismissible", false)}
+      ${boolean("disable-flip", false)}
+      ${boolean("disable-pointer", false)}
+      reference-element="reference-element"
+      placement="${select("placement", placements, defaultPopoverPlacement)}"
+      offset-distance="${number("offset-distance", 6)}"
+      offset-skidding="${number("offset-skidding", 0)}"
+      ${boolean("open", true)}
+      text-close="${text("text-close", "Close")}"
+    >
+      ${contentHTML}
+    </calcite-popover>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html ` <div style="width: 400px;">
+  ${referenceElementHTML}
+  <calcite-popover
+    ${boolean("dismissible", false)}
+    ${boolean("disable-flip", false)}
+    ${boolean("disable-pointer", false)}
+    reference-element="reference-element"
+    placement="${select("placement", placements, defaultPopoverPlacement)}"
+    offset-distance="${number("offset-distance", 6)}"
+    offset-skidding="${number("offset-skidding", 0)}"
+    ${boolean("open", true)}
+    text-close="${text("text-close", "Close")}"
+    dir="${select("dir", ["ltr", "rtl"], "rtl")}"
+    class="calcite-theme-dark"
+  >
+    ${contentHTML}
+  </calcite-popover>
+</div>`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const nested = () => html `
+  <div style="width: 400px;">
+    ${referenceElementHTML}
+    <calcite-popover
+      ${boolean("dismissible", true)}
+      reference-element="reference-element"
+      placement="${select("placement", placements, defaultPopoverPlacement)}"
+      ${boolean("open", true)}
+    >
+      <div style="width: 300px; padding:12px 16px;">${nestedReferenceElementHTML}</div>
+      <calcite-popover
+        heading="${text("heading", "Heading")}"
+        ${boolean("dismissible", true)}
+        reference-element="reference-element-nested"
+        placement="${select("placement", placements, defaultPopoverPlacement)}"
+        ${boolean("open", true)}
+      >
+        ${contentHTML}
+      </calcite-popover>
+    </calcite-popover>
+  </div>
+`;
+export const flipPlacements_TestOnly = () => html `
+  <div style="height: 100px; overflow:scroll; width: 200px;">
+    <div class="my-popover-reference">
+      <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button>
+    </div>
+    <calcite-popover class="my-popover" reference-element="reference-element" open placement="top" heading="Heading">
+      ${contentHTML}
+    </calcite-popover>
+  </div>
+  <script>
+    document.querySelector(".my-popover").flipPlacements = ["right"];
+  </script>
+`;

package/dist/collection/components/popover/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 = {
   container: "container",

package/dist/collection/components/popover-manager/popover-manager.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";

package/dist/collection/components/progress/progress.js

@@ -1,16 +1,21 @@
 /*!
  * 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";
 export class Progress {
   constructor() {
-    /** Use indeterminate if finding actual progress value is impossible. */
+    /**
+     * Specifies the component type.
+     *
+     * Use `"indeterminate"` if finding actual progress value is impossible.
+     *
+     */
     this.type = "determinate";
     /** The component's progress value, with a range of 0.0 - 1.0. */
     this.value = 0;
-    /** When true and for indeterminate progress bars, reverses the animation direction. */
+    /** When `true` and for `"indeterminate"` progress bars, reverses the animation direction. */
     this.reversed = false;
   }
   render() {
@@ -48,7 +53,7 @@ export class Progress {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Use indeterminate if finding actual progress value is impossible."
+          "text": "Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible."
         },
         "attribute": "type",
         "reflect": true,
@@ -118,7 +123,7 @@ export class Progress {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true and for indeterminate progress bars, reverses the animation direction."
+          "text": "When `true` and for `\"indeterminate\"` progress bars, reverses the animation direction."
         },
         "attribute": "reversed",
         "reflect": true,

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

@@ -0,0 +1,28 @@
+import { select, number, text } from "@storybook/addon-knobs";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Progress",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-progress
+    type="${select("type", ["determinate", "indeterminate"], "determinate")}"
+    value="${number("value", 0.8, { range: true, min: 0, max: 1, step: 0.01 })}"
+    text="${text("text", "")}"
+  ></calcite-progress>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-progress
+    class="calcite-theme-dark"
+    type="${select("type", { determinate: "determinate", indeterminate: "indeterminate" }, "indeterminate")}"
+    value="${number("value", 0.2, { range: true, min: 0, max: 1, step: 0.01 })}"
+    text="${text("text", "% Complete (optional text)")}"
+  ></calcite-progress>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/radio-button/radio-button.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, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -18,9 +18,9 @@ export class RadioButton {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the component is checked. */
+    /** When `true`, the component is checked. */
     this.checked = 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;
     /**
      * The focused state of the component.
@@ -28,7 +28,7 @@ export class RadioButton {
      * @internal
      */
     this.focused = false;
-    /** When true, the component is not displayed and is not focusable or checkable. */
+    /** When `true`, the component is not displayed and is not focusable or checkable. */
     this.hidden = false;
     /**
      * The hovered state of the component.
@@ -36,7 +36,7 @@ export class RadioButton {
      * @internal
      */
     this.hovered = false;
-    /** When true, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. */
+    /** When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. */
     this.required = false;
     /** Specifies the size of the component inherited from the `calcite-radio-button-group`. */
     this.scale = "m";
@@ -276,7 +276,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is checked."
+          "text": "When `true`, the component is checked."
         },
         "attribute": "checked",
         "reflect": true,
@@ -294,7 +294,7 @@ export class RadioButton {
         "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,
@@ -333,7 +333,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The id attribute of the component. When omitted, a globally unique identifier is used."
+          "text": "The `id` of the component. When omitted, a globally unique identifier is used."
         },
         "attribute": "guid",
         "reflect": true
@@ -350,7 +350,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is not displayed and is not focusable or checkable."
+          "text": "When `true`, the component is not displayed and is not focusable or checkable."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -426,7 +426,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit."
+          "text": "When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,
@@ -501,7 +501,7 @@ export class RadioButton {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group."
+          "text": "Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the `calciteRadioButtonGroupChange` event if using this with `calcite-radio-button-group`."
         },
         "complexType": {
           "original": "void",

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -0,0 +1,43 @@
+import { select, text } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Controls/Radio/Radio Button",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-label layout="inline">
+    <calcite-radio-button
+      ${boolean("checked", false)}
+      ${boolean("disabled", false)}
+      ${boolean("hidden", false)}
+      ${boolean("focused", false)}
+      name="simple"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      value="value"
+    ></calcite-radio-button>
+    ${text("label", "Radio Button")}
+  </calcite-label>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-label layout="inline" class="calcite-theme-dark" dir="rtl">
+    <calcite-radio-button
+      ${boolean("checked", false)}
+      ${boolean("disabled", false)}
+      ${boolean("hidden", false)}
+      ${boolean("focused", false)}
+      name="dark"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      value="value"
+    >
+    </calcite-radio-button>
+    ${text("label", "Radio Button")}
+  </calcite-label>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const disabled_TestOnly = () => html `<calcite-radio-button checked disabled></calcite-radio-button>`;

package/dist/collection/components/radio-button/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 = {
   container: "container"

package/dist/collection/components/radio-button-group/radio-button-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 { Host, h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -15,13 +15,13 @@ export class RadioButtonGroup {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** 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, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. */
+    /** When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. */
     this.hidden = false;
     /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** When true, the component must have a value in order for the form to submit. */
+    /** When `true`, the component must have a value in order for the form to submit. */
     this.required = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -117,7 +117,7 @@ export class RadioButtonGroup {
         "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,
@@ -135,7 +135,7 @@ export class RadioButtonGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable."
+          "text": "When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -193,7 +193,7 @@ export class RadioButtonGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component must have a value in order for the form to submit."
+          "text": "When `true`, the component must have a value in order for the form to submit."
         },
         "attribute": "required",
         "reflect": true,

package/dist/collection/components/radio-button-group/radio-button-group.stories.js

@@ -0,0 +1,67 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Controls/Radio/Radio Button Group",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-radio-button-group
+    name="simple"
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  >
+    <calcite-label layout="inline">
+      <calcite-radio-button value="react"></calcite-radio-button>
+      React
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-radio-button value="ember"></calcite-radio-button>
+      Ember
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-radio-button value="angular"></calcite-radio-button>
+      Angular
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-radio-button value="vue"></calcite-radio-button>
+      Vue
+    </calcite-label>
+  </calcite-radio-button-group>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-radio-button-group
+    class="calcite-theme-dark"
+    dir="rtl"
+    name="dark"
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  >
+    <calcite-label layout="inline">
+      <calcite-radio-button value="react"></calcite-radio-button>
+      React
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-radio-button value="ember"></calcite-radio-button>
+      Ember
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-radio-button value="angular"></calcite-radio-button>
+      Angular
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-radio-button value="vue"></calcite-radio-button>
+      Vue
+    </calcite-label>
+  </calcite-radio-button-group>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };