Merge remote-tracking branch 'origin/main' into benelan/8000-form-val…

…idation-ui * 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)
Esri · Jan 5, 2024 · 94a59c4 · 94a59c4
2 parents f1709df + ed1fe2b
commit 94a59c4
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 34 deletions.
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/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 () => {

diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -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;
     }
   };
 

diff --git a/packages/calcite-components/src/components/combobox/interfaces.ts b/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";
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -387,6 +387,10 @@ describe("calcite-input-date-picker", () => {
         return (await calendar.isVisible()) && calendarPosition === type;
       }
 
+      async function resetFocus(page: E2EPage): Promise<void> {
+        await page.mouse.click(0, 0);
+      }
+
       it("toggles the date picker when clicked", async () => {
         const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
 
@@ -409,6 +413,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via start date input
 
+        await resetFocus(page);
         await startInput.click();
         await page.waitForChanges();
 
@@ -421,6 +426,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via start date toggle icon
 
+        await resetFocus(page);
         await startInputToggle.click();
         await page.waitForChanges();
 
@@ -433,6 +439,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via end date input
 
+        await resetFocus(page);
         await endInput.click();
         await page.waitForChanges();
 
@@ -445,6 +452,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via end date toggle icon
 
+        await resetFocus(page);
         await endInputToggle.click();
         await page.waitForChanges();
 
@@ -457,6 +465,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via start date input and toggle icon
 
+        await resetFocus(page);
         await startInput.click();
         await page.waitForChanges();
 
@@ -469,6 +478,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via start toggle icon and date input
 
+        await resetFocus(page);
         await startInputToggle.click();
         await page.waitForChanges();
 
@@ -481,6 +491,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via end date input and toggle icon
 
+        await resetFocus(page);
         await endInput.click();
         await page.waitForChanges();
 
@@ -493,6 +504,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via end toggle icon and date input
 
+        await resetFocus(page);
         await endInputToggle.click();
         await page.waitForChanges();
 
@@ -505,6 +517,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via start date input and end toggle icon
 
+        await resetFocus(page);
         await startInput.click();
         await page.waitForChanges();
 
@@ -517,6 +530,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via start toggle icon and date input
 
+        await resetFocus(page);
         await startInputToggle.click();
         await page.waitForChanges();
 
@@ -533,6 +547,7 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via end date input and start toggle icon
 
+        await resetFocus(page);
         await endInput.click();
         await page.waitForChanges();
 
@@ -545,11 +560,13 @@ describe("calcite-input-date-picker", () => {
 
         // toggling via end toggle icon and start date input
 
+        await resetFocus(page);
         await endInputToggle.click();
         await page.waitForChanges();
 
         expect(await isCalendarVisible(calendar, "end")).toBe(true);
 
+        await resetFocus(page);
         await startInput.click();
         await page.waitForChanges();
 

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -682,7 +682,8 @@ export class InputDatePicker
 
   renderToggleIcon(open: boolean): VNode {
     return (
-      <span class={CSS.toggleIcon}>
+      // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
+      <span class={CSS.toggleIcon} tabIndex={-1}>
         <calcite-icon
           icon={open ? "chevron-up" : "chevron-down"}
           scale={getIconScale(this.scale)}
@@ -774,24 +775,17 @@ export class InputDatePicker
 
   private onInputWrapperClick = (event: MouseEvent) => {
     const { range, endInput, startInput, currentOpenInput } = this;
-    if (!range || !this.open) {
-      this.open = !this.open;
-      return;
-    }
-
     const currentTarget = event.currentTarget as HTMLDivElement;
     const position = currentTarget.getAttribute("data-position") as "start" | "end";
     const path = event.composedPath();
-    const wasToggleClicked = path.find((el: HTMLElement) => {
-      return el.classList?.contains(CSS.toggleIcon);
-    });
+    const wasToggleClicked = path.find((el: HTMLElement) => el.classList?.contains(CSS.toggleIcon));
 
     if (wasToggleClicked) {
       const targetInput = position === "start" ? startInput : endInput;
       targetInput.setFocus();
     }
 
-    if (currentOpenInput === position) {
+    if (!range || !this.open || currentOpenInput === position) {
       this.open = !this.open;
     }
   };

diff --git a/packages/calcite-components/src/utils/interactive.tsx b/packages/calcite-components/src/utils/interactive.tsx
@@ -194,8 +194,6 @@ export function InteractiveContainer(
   children: VNode[],
 ): FunctionalComponent {
   return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-error - `inert` is missing from Stencil's types (see https://github.com/ionic-team/stencil/issues/5071)
     <div class={CSS.container} inert={disabled}>
       {...children}
     </div>