Merge remote-tracking branch 'origin/main' into benelan/7866-input-nu…

…mber-infinity

* origin/main:
  refactor: remove @ts-ignore needed for Stencil missing  in JSX types (#8551)
  refactor(combobox): remove unused interface (#8552)
  fix(input-date-picker): ensure range icon toggles open corresponding date-picker (#8554)
  fix(button): avoid needlessly overwriting title (#8491)
  docs(d, f, g, and h-named components): update api description refs (#8540)
  docs(b and c components): consistent api description refs (#8536)

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

@@ -159,7 +159,7 @@ export class ActionBar
   // --------------------------------------------------------------------------
 
   /**
-   * Emits when the `expanded` property is toggled.
+   * Fires when the `expanded` property is toggled.
    */
   @Event({ cancelable: false }) calciteActionBarToggle: EventEmitter<void>;
 

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

@@ -131,7 +131,7 @@ export class ActionMenu implements LoadableComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * Emits when the `open` property is toggled.
+   * Fires when the `open` property is toggled.
    *
    */
   @Event({ cancelable: false }) calciteActionMenuOpen: EventEmitter<void>;

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

@@ -124,7 +124,7 @@ export class ActionPad
   // --------------------------------------------------------------------------
 
   /**
-   * Emits when the `expanded` property is toggled.
+   * Fires when the `expanded` property is toggled.
    */
   @Event({ cancelable: false }) calciteActionPadToggle: EventEmitter<void>;
 

packages/calcite-components/src/components/block-section/block-section.tsx

@@ -65,7 +65,7 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
   @Prop() text: string;
 
   /**
-   * Specifies the component's toggle display -
+   * Specifies how the component's toggle is displayed -
    *
    * `"button"` (selectable header), or
    *
@@ -132,7 +132,7 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
   // --------------------------------------------------------------------------
 
   /**
-   * Emits when the header has been clicked.
+   * Fires when the header has been clicked.
    */
   @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;
 

packages/calcite-components/src/components/block/block.tsx

@@ -249,9 +249,9 @@ export class Block
   @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;
 
   /**
-   * Emits when the component's header is clicked.
+   * Fires when the component's header is clicked.
    *
-   * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead.
+   * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.
    */
   @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;
 

packages/calcite-components/src/components/button/button.e2e.ts

@@ -648,26 +648,44 @@ describe("calcite-button", () => {
     t9n("calcite-button");
   });
 
-  it("shows tooltip for buttons with truncated long text", async () => {
-    const shortText = "Hi!";
-    const longText =
-      "This_long_text_contains_a_coded_map_for_hidden_treasures_of_Edward_Teach_aka_Blackbeard_._If_only_you_could_access_it_you_could_buy_out_The_Magic_Castle_on_Franklin_ave_Los_Angeles_like_you_ve_always_wanted.";
+  describe('automatic tooltip', ()=>{
 
-    const page = await newE2EPage();
-    await page.setContent(html`
-      <calcite-button id="one" style="width: 100px">${longText}</calcite-button>
-      <calcite-button id="two" style="width: 100px">${shortText}</calcite-button>
-    `);
-    await page.waitForChanges();
+    it("shows tooltip for buttons with truncated long text", async () => {
+      const shortText = "Hi!";
+      const longText =
+        "This_long_text_contains_a_coded_map_for_hidden_treasures_of_Edward_Teach_aka_Blackbeard_._If_only_you_could_access_it_you_could_buy_out_The_Magic_Castle_on_Franklin_ave_Los_Angeles_like_you_ve_always_wanted.";
 
-    const button1 = await page.find(`calcite-button[id='one'] >>> button`);
-    const button2 = await page.find(`calcite-button[id='two'] >>> button`);
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-button id="one" style="width: 100px">${longText}</calcite-button>
+        <calcite-button id="two" style="width: 100px">${shortText}</calcite-button>
+      `);
+      await page.waitForChanges();
+
+      const button1 = await page.find(`calcite-button[id='one'] >>> button`);
+      const button2 = await page.find(`calcite-button[id='two'] >>> button`);
 
-    expect(button1).toHaveAttribute("title");
-    expect(button2).not.toHaveAttribute("title");
+      expect(button1).toHaveAttribute("title");
+      expect(button2).not.toHaveAttribute("title");
+
+      expect(button1.textContent.length).toBeLessThan(longText.length);
+      expect(button1.getAttribute("title")).toEqual(longText);
+    });
+
+    it("does not show tooltip for buttons without text content", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-button style="width:32px;height:32px" scale="s">
+          <calcite-icon icon="compass-needle" scale="m" />
+        </calcite-button>
+      `);
+      await page.waitForChanges();
+
+      const button = await page.find(`calcite-button >>> button`);
+
+      expect(button).not.toHaveAttribute("title");
+    });
 
-    expect(button1.textContent.length).toBeLessThan(longText.length);
-    expect(button1.getAttribute("title")).toEqual(longText);
   });
 
   it("should set aria-expanded attribute on shadowDOM element when used as trigger", async () => {

packages/calcite-components/src/components/button/button.tsx

@@ -89,7 +89,7 @@ export class Button
   /** Accessible name for the component. */
   @Prop() label: string;
 
-  /** Specifies the kind of the component (will apply to border and background if applicable). */
+  /** Specifies the kind of the component, which will apply to the border and background if applicable. */
   @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> =
     "brand";
 
@@ -150,7 +150,7 @@ export class Button
   @Prop({ reflect: true }) target: string;
 
   /**
-   * Specifies the default behavior of the button.
+   * Specifies the default behavior of the component.
    *
    * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
    */
@@ -404,7 +404,7 @@ export class Button
   private setTooltipText = (): void => {
     const { contentEl } = this;
     if (contentEl) {
-      this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText : null;
+      this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null;
     }
   };
 

packages/calcite-components/src/components/checkbox/checkbox.tsx

@@ -84,7 +84,11 @@ export class Checkbox
   /** Accessible name for the component. */
   @Prop() label: string;
 
-  /** Specifies the name of the component on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   @Prop({ reflect: true }) name: string;
 
   /**
@@ -183,17 +187,17 @@ export class Checkbox
   //--------------------------------------------------------------------------
 
   /**
-   * Emits when the component is blurred.
+   * Fires when the component is blurred.
    *
    * @internal
    */
   @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;
 
-  /** Emits when the component's `checked` status changes. */
+  /** Fires when the component's `checked` status changes. */
   @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;
 
   /**
-   * Emits when the component is focused.
+   * Fires when the component is focused.
    *
    * @internal
    */

packages/calcite-components/src/components/chip-group/chip-group.tsx

@@ -49,7 +49,13 @@ export class ChipGroup implements InteractiveComponent {
   /** Specifies the size of the component. Child `calcite-chip`s inherit the component's value. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** Specifies the selection mode of the component. */
+  /**
+   * Specifies the selection mode of the component:
+   * `"multiple"` allows any number of selections,
+   * `"single"` allows only one selection,
+   * `"single-persist"` allow and require one selected item,
+   * `"none"` does not allow any selections.
+   */
   @Prop({ reflect: true }) selectionMode: Extract<
     "multiple" | "single" | "single-persist" | "none",
     SelectionMode
@@ -87,7 +93,7 @@ export class ChipGroup implements InteractiveComponent {
   //
   //--------------------------------------------------------------------------
 
-  /** Emits when the component's selection changes. */
+  /** Fires when the component's selection changes. */
   @Event({ cancelable: false }) calciteChipGroupSelect: EventEmitter<void>;
 
   //--------------------------------------------------------------------------

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx

@@ -82,14 +82,14 @@ export class ColorPickerHexInput implements LoadableComponent {
   //--------------------------------------------------------------------------
 
   /**
-   * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
+   * When `true`, an empty color (`null`) will be allowed as a `value`.
    *
-   * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
+   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
    */
   @Prop() allowEmpty = false;
 
   /**
-   * When true, the component will allow updates to the color's alpha value.
+   * When `true`, the component will allow updates to the color's alpha value.
    */
   @Prop() alphaChannel = false;
 

packages/calcite-components/src/components/color-picker/color-picker.tsx

@@ -95,12 +95,14 @@ export class ColorPicker
   //--------------------------------------------------------------------------
 
   /**
-   * When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
+   * When `true`, an empty color (`null`) will be allowed as a `value`.
+   *
+   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
    */
   @Prop({ reflect: true }) allowEmpty = false;
 
   /**
-   * When true, the component will allow updates to the color's alpha value.
+   * When `true`, the component will allow updates to the color's alpha value.
    */
   @Prop() alphaChannel = false;
 
@@ -116,7 +118,7 @@ export class ColorPicker
     }
   }
 
-  /** When true, hides the RGB/HSV channel inputs */
+  /** When `true`, hides the RGB/HSV channel inputs. */
   @Prop() channelsDisabled = false;
 
   /**
@@ -161,7 +163,7 @@ export class ColorPicker
    */
   @Prop({ reflect: true }) hideChannels = false;
 
-  /** When true, hides the hex input */
+  /** When `true`, hides the hex input. */
   @Prop() hexDisabled = false;
 
   /**
@@ -178,7 +180,7 @@ export class ColorPicker
    */
   @Prop({ reflect: true }) hideSaved = false;
 
-  /** When true, hides the saved colors section */
+  /** When `true`, hides the saved colors section. */
   @Prop({ reflect: true }) savedDisabled = false;
 
   /** Specifies the size of the component. */

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

@@ -140,7 +140,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   // --------------------------------------------------------------------------
 
   /**
-   * Emits whenever the component is selected or unselected.
+   * Fires whenever the component is selected or unselected.
    *
    */
   @Event({ cancelable: false }) calciteComboboxItemChange: EventEmitter<void>;

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -219,10 +219,10 @@ export class Combobox
 
   /**
    * Specifies the selection mode:
-   * - "multiple" allows any number of selected items (default),
-   * - "single" allows only one selection,
-   * - "single-persist" allow and require one open item,
-   * - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   * `"multiple"` allows any number of selected items,
+   * `"single"` allows only one selection,
+   * `"single-persist"` allow and require one open item,
+   * `"ancestors"` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    */
   @Prop({ reflect: true }) selectionMode: Extract<
     "single" | "single-persist" | "ancestors" | "multiple",

packages/calcite-components/src/components/combobox/interfaces.ts

@@ -1,7 +1,2 @@
-export interface listItem {
-  label: string;
-  value: string;
-}
-
 export type ComboboxChildElement = HTMLCalciteComboboxItemElement | HTMLCalciteComboboxItemGroupElement;
 export type SelectionDisplay = "all" | "fit" | "single";

packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx

@@ -54,7 +54,7 @@ export class DatePickerDay implements InteractiveComponent {
   /**  When `true`, the component is selected. */
   @Prop({ reflect: true }) selected = false;
 
-  /** Date is currently highlighted as part of the range */
+  /** Date is currently highlighted as part of the range, */
   @Prop({ reflect: true }) highlighted = false;
 
   /** When `true`, activates the component's range mode to allow a start and end date. */
@@ -67,13 +67,13 @@ export class DatePickerDay implements InteractiveComponent {
    */
   @Prop({ reflect: true }) rangeEdge: "start" | "end" | undefined;
 
-  /** Date is the start of date range */
+  /** Date is the start of date range. */
   @Prop({ reflect: true }) startOfRange = false;
 
-  /** Date is the end of date range */
+  /** Date is the end of date range. */
   @Prop({ reflect: true }) endOfRange = false;
 
-  /** Date is being hovered and within the set range */
+  /** Date is being hovered and within the set range. */
   @Prop({ reflect: true }) rangeHover = false;
 
   /** When `true`, the component is active. */
@@ -122,12 +122,12 @@ export class DatePickerDay implements InteractiveComponent {
   //--------------------------------------------------------------------------
 
   /**
-   * Emitted when user selects day
+   * Fires when user selects day.
    */
   @Event({ cancelable: false }) calciteDaySelect: EventEmitter<void>;
 
   /**
-   * Emitted when user hovers over a day
+   * Fires when user hovers over a day.
    *
    * @internal
    */

packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

@@ -44,7 +44,7 @@ export class DatePickerMonthHeader {
   /** Already selected date. */
   @Prop() selectedDate: Date;
 
-  /** Focused date with indicator (will become selected date if user proceeds) */
+  /** The focused date is indicated and will become the selected date if the user proceeds. */
   @Prop() activeDate: Date;
 
   /**
@@ -61,7 +61,7 @@ export class DatePickerMonthHeader {
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale;
 
-  /** CLDR locale data for translated calendar info */
+  /** CLDR locale data for translated calendar info. */
   @Prop() localeData: DateLocaleData;
 
   /**
@@ -80,7 +80,7 @@ export class DatePickerMonthHeader {
   //
   //--------------------------------------------------------------------------
   /**
-   *  Changes to active date
+   *  Fires to active date
    *
    * @internal
    */