Merge branch 'master' into benelan/4893-date-picker-numbering-system

CHANGELOG.md

@@ -7,6 +7,11 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## Unreleased
 
+### ⚠ BREAKING CHANGES
+
+- **build:** dropped ES5 build output – this was disabled as legacy browsers are no longer supported, any `nomodule` scripts should be removed ([#5412](https://github.com/Esri/calcite-components/issues/5412))
+- **build:** dropped `dist-custom-elements-bundle` output target – this is deprecated by Stencil and developers should use the `custom-elements` output target instead ([#5411](https://github.com/Esri/calcite-components/issues/5411))
+
 ### Features
 
 - **tree-item:** allow disabling tree-item ([#5194](https://github.com/Esri/calcite-components/issues/5194)) ([a16bea2](https://github.com/Esri/calcite-components/commit/a16bea2d0da14b9cd0c5d734ffc24cdf83eb22a9)), closes [#3772](https://github.com/Esri/calcite-components/issues/3772)

src/components/accordion-item/accordion-item.tsx

@@ -45,9 +45,9 @@ export class AccordionItem implements ConditionalSlotComponent {
   //--------------------------------------------------------------------------
 
   /**
-   * When true, the component is active.
+   * When `true`, the component is active.
    *
-   * @deprecated use expanded instead
+   * @deprecated use `expanded` instead.
    */
 
   @Prop({ reflect: true, mutable: true }) active = false;
@@ -57,7 +57,7 @@ export class AccordionItem implements ConditionalSlotComponent {
     this.expanded = value;
   }
 
-  /** When true, item is expanded */
+  /** When `true`, the component is expanded. */
   @Prop({ reflect: true, mutable: true }) expanded = false;
 
   @Watch("expanded")

src/components/accordion/accordion.tsx

@@ -38,8 +38,8 @@ export class Accordion {
   @Prop({ reflect: true }) scale: Scale = "m";
 
   /**
-   * Specifies the selection mode - "multi" (allow any number of open items), "single" (allow one open item),
-   * or "single-persist" (allow and require one open item).
+   * Specifies the selection mode - `"multi"` (allow any number of open items), `"single"` (allow one open item),
+   * or `"single-persist"` (allow and require one open item).
    */
   @Prop({ reflect: true }) selectionMode: "multi" | "single" | "single-persist" = "multi";
 

src/components/action-bar/action-bar.tsx

@@ -47,7 +47,7 @@ export class ActionBar implements ConditionalSlotComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * When true, the expand-toggling behavior is disabled.
+   * When `true`, the expand-toggling behavior is disabled.
    */
   @Prop({ reflect: true }) expandDisabled = false;
 
@@ -57,7 +57,7 @@ export class ActionBar implements ConditionalSlotComponent {
   }
 
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   @Prop({ reflect: true, mutable: true }) expanded = false;
 

src/components/action-group/action-group.scss

@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is "grid".
+ * @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is `"grid"`.
  */
 
 :host {

src/components/action-group/action-group.tsx

@@ -29,7 +29,7 @@ export class ActionGroup implements ConditionalSlotComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   @Prop({ reflect: true }) expanded = false;
 
@@ -54,7 +54,7 @@ export class ActionGroup implements ConditionalSlotComponent {
   @Prop() intlMore?: string;
 
   /**
-   * When true, the `calcite-action-menu` is open.
+   * When `true`, the `calcite-action-menu` is open.
    */
   @Prop({ reflect: true, mutable: true }) menuOpen = false;
 

src/components/action-menu/action-menu.tsx

@@ -50,7 +50,7 @@ export class ActionMenu {
   // --------------------------------------------------------------------------
 
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   @Prop({ reflect: true }) expanded = false;
 
@@ -71,7 +71,7 @@ export class ActionMenu {
   @Prop() label!: string;
 
   /**
-   * When true, the component is open.
+   * When `true`, the component is open.
    */
   @Prop({ reflect: true, mutable: true }) open = false;
 

src/components/action-pad/action-pad.tsx

@@ -37,12 +37,12 @@ export class ActionPad implements ConditionalSlotComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * When true, the expand-toggling behavior is disabled.
+   * When `true`, the expand-toggling behavior is disabled.
    */
   @Prop({ reflect: true }) expandDisabled = false;
 
   /**
-   * When true, the component is expanded.
+   * When `true`, the component is expanded.
    */
   @Prop({ reflect: true, mutable: true }) expanded = false;
 

src/components/action/action.scss

@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-action-indicator-color: optionally specify the color of the action indicator
+ * @prop --calcite-action-indicator-color: Specifies the color of the component's indicator.
  */
 
 :host {

src/components/action/action.tsx

@@ -35,7 +35,7 @@ export class Action implements InteractiveComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * When true, the component is highlighted.
+   * When `true`, the component is highlighted.
    */
   @Prop({ reflect: true }) active = false;
 
@@ -48,20 +48,20 @@ export class Action implements InteractiveComponent {
   @Prop({ reflect: true }) appearance: Extract<"solid" | "clear", Appearance> = "solid";
 
   /**
-   * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
+   * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
    */
   @Prop({ reflect: true }) compact = 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.
    */
   @Prop({ reflect: true }) disabled = false;
 
   /** Specifies an icon to display. */
   @Prop() icon?: string;
 
   /**
-   * When true, indicates unread changes.
+   * When `true`, indicates unread changes.
    */
   @Prop({ reflect: true }) indicator = false;
 
@@ -78,7 +78,7 @@ export class Action implements InteractiveComponent {
   @Prop() label?: string;
 
   /**
-   * When true, a busy indicator is displayed.
+   * When `true`, a busy indicator is displayed.
    */
   @Prop({ reflect: true }) loading = false;
 
@@ -106,7 +106,7 @@ export class Action implements InteractiveComponent {
   /**
    * Emits when the component has been clicked.
    *
-   * @deprecated use onClick instead.
+   * @deprecated use `onClick` instead.
    */
   @Event({ cancelable: false }) calciteActionClick: EventEmitter<void>;
 

src/components/alert/alert.tsx

@@ -61,13 +61,13 @@ export class Alert implements OpenCloseComponent, LocalizedComponent {
   //---------------------------------------------------------------------------
 
   /**
-   * When true, opens the combobox
+   * When `true`, displays and positions the component.
    *
-   * @deprecated use open instead
+   * @deprecated use `open` instead.
    */
   @Prop({ reflect: true, mutable: true }) active = false;
 
-  /** When true, opens the dropdown */
+  /** When `true`, displays and positions the component. */
   @Prop({ reflect: true, mutable: true }) open = false;
 
   @Watch("active")
@@ -88,7 +88,7 @@ export class Alert implements OpenCloseComponent, LocalizedComponent {
     }
   }
 
-  /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
+  /** When `true`, the component closes automatically (recommended for passive, non-blocking alerts). */
   @Prop({ reflect: true }) autoDismiss = false;
 
   /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
@@ -98,7 +98,7 @@ export class Alert implements OpenCloseComponent, LocalizedComponent {
   @Prop({ reflect: true }) color: StatusColor = "blue";
 
   /**
-   * When true, shows a default recommended icon. Alternatively,
+   * When `true`, shows a default recommended icon. Alternatively,
    * pass a Calcite UI Icon name to display a specific icon.
    */
   @Prop({ reflect: true }) icon: string | boolean;

src/components/flow-item/flow-item.e2e.ts

@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
+import { html } from "../../../support/formatting";
 
 describe("calcite-flow-item", () => {
   it("renders", async () => renders("calcite-flow-item", { display: "flex" }));
@@ -96,4 +97,48 @@ describe("calcite-flow-item", () => {
     expect(calciteFlowItemBackClick).toHaveReceivedEvent();
     expect(calciteFlowItemBack).toHaveReceivedEvent();
   });
+
+  it("allows scrolling content", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-flow style="height: 300px">
+        <calcite-flow-item heading="Flow heading" id="flowOrPanel">
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+          <calcite-block heading="Block example" summary="Some subtext" collapsible open>
+            <calcite-notice active>
+              <div slot="message">An excellent assortment of content.</div>
+            </calcite-notice>
+          </calcite-block>
+        </calcite-flow-item>
+      </calcite-flow>
+    `);
+    const [top, _middle, bottom] = await page.findAll("calcite-block");
+
+    await bottom.callMethod("scrollIntoView");
+
+    expect(await top.isIntersectingViewport()).toBe(false);
+
+    await page.$eval("calcite-flow-item", (panel: HTMLCalcitePanelElement) =>
+      panel.scrollContentTo({
+        top: 0,
+        behavior: "auto"
+      })
+    );
+
+    expect(await top.isIntersectingViewport()).toBe(true);
+  });
 });

src/components/flow-item/flow-item.tsx

@@ -188,7 +188,7 @@ export class FlowItem implements InteractiveComponent {
    */
   @Method()
   async scrollContentTo(options?: ScrollToOptions): Promise<void> {
-    this.containerEl?.scrollContentTo(options);
+    await this.containerEl?.scrollContentTo(options);
   }
 
   // --------------------------------------------------------------------------
@@ -211,6 +211,10 @@ export class FlowItem implements InteractiveComponent {
     this.backButtonEl = node;
   };
 
+  setContainerRef = (node: HTMLCalcitePanelElement): void => {
+    this.containerEl = node;
+  };
+
   getBackLabel = (): string => {
     return this.intlBack || TEXT.back;
   };
@@ -278,6 +282,7 @@ export class FlowItem implements InteractiveComponent {
           loading={loading}
           menuOpen={menuOpen}
           onCalcitePanelClose={this.handlePanelClose}
+          ref={this.setContainerRef}
           widthScale={widthScale}
         >
           <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />

src/components/input-message/input-message.tsx

@@ -26,7 +26,7 @@ export class InputMessage {
   //
   //--------------------------------------------------------------------------
 
-  /** When true, the component is active. */
+  /** When `true`, the component is active. */
   @Prop({ reflect: true }) active = false;
 
   /** Specifies an icon to display. */

src/components/input-number/input-number.tsx

@@ -72,19 +72,19 @@ export class InputNumber
   @Prop({ reflect: true }) alignment: Position = "start";
 
   /**
-   * When true, the component is focused on page load.
+   * When `true`, the component is focused on page load.
    *
    * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
    */
   @Prop({ reflect: true }) autofocus = false;
 
   /**
-   * When true, a clear button is displayed when the component has a value.
+   * When `true`, a clear button is displayed when the component has a value.
    */
   @Prop({ reflect: true }) clearable = 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.
    *
    * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
    */
@@ -96,19 +96,19 @@ export class InputNumber
   }
 
   /**
-   * When true, number values are displayed with the locale's group separator.
+   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    */
   @Prop({ reflect: true }) groupSeparator = false;
 
   /**
-   * When true, the component will not be visible.
+   * When `true`, the component will not be visible.
    *
    * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
    */
   @Prop({ reflect: true }) hidden = false;
 
   /**
-   * When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
+   * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
    */
   @Prop({ reflect: true }) icon: string | boolean;
 
@@ -124,13 +124,13 @@ export class InputNumber
    */
   @Prop() intlLoading?: string = COMMON_TEXT.loading;
 
-  /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
 
   /** Accessible name for the component's button or hyperlink. */
   @Prop() label?: string;
 
-  /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+  /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */
   @Prop({ reflect: true }) loading = false;
 
   /**
@@ -219,13 +219,13 @@ export class InputNumber
   @Prop() prefixText?: string;
 
   /**
-   * When true, the component's value can be read, but cannot be modified.
+   * When `true`, the component's value can be read, but cannot be modified.
    *
    * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
    */
   @Prop({ reflect: true }) readOnly = false;
 
-  /** 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. */
   @Prop({ reflect: true }) required = false;
 
   /** Specifies the size of the component. */