feat(input, input-date-picker, input-number, input-text, input-time-p…

…icker): truncate value and placeholder when input is narrow (#8160) **Related Issue:** #6677 ## Summary Text will be truncated and display an ellipsis when the placeholder or value overflows the input. **Note**: this also tidies up some CSS by removing unnecessary `:host` usage and organizing some Tailwind utils.
Esri · Nov 15, 2023 · 533eff3 · 533eff3
1 parent ad4470a
commit 533eff3
Show file tree

Hide file tree

Showing 14 changed files with 288 additions and 165 deletions.
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
@@ -114,7 +114,7 @@ describe("calcite-input-date-picker", () => {
       async (inputIndex: number): Promise<string> =>
         document
           .querySelector("calcite-input-date-picker")
-          .shadowRoot.querySelectorAll("calcite-input")
+          .shadowRoot.querySelectorAll("calcite-input-text")
           [inputIndex].shadowRoot.querySelector("input").value,
       inputIndex
     );
@@ -275,7 +275,7 @@ describe("calcite-input-date-picker", () => {
       await page.waitForFunction(() =>
         document
           .querySelector("calcite-input-date-picker")
-          .shadowRoot.querySelector("calcite-input")
+          .shadowRoot.querySelector("calcite-input-text")
           .shadowRoot.querySelector("input")
       )
     ).asElement();
@@ -483,7 +483,7 @@ describe("calcite-input-date-picker", () => {
     await page.setContent(`<calcite-input-date-picker read-only id="canReadOnly"></calcite-input-date-picker>`);
 
     const component = await page.find("#canReadOnly");
-    const input = await page.find("#canReadOnly >>> calcite-input");
+    const input = await page.find("#canReadOnly >>> calcite-input-text");
 
     expect(await input.getProperty("value")).toBe("");
 
@@ -655,7 +655,7 @@ describe("calcite-input-date-picker", () => {
       await page.keyboard.press("Tab");
       await page.keyboard.up("Shift");
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-DATE-PICKER");
-      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT");
+      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT-TEXT");
 
       const opening = page.waitForEvent("calciteInputDatePickerOpen");
       await page.keyboard.press("ArrowDown");
@@ -674,7 +674,7 @@ describe("calcite-input-date-picker", () => {
       await page.keyboard.press("Escape");
       await closing;
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-DATE-PICKER");
-      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT");
+      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT-TEXT");
 
       await page.keyboard.press("Tab");
       expect(await getFocusedElementProp(page, "id")).toBe("next-sibling");
@@ -705,7 +705,7 @@ describe("calcite-input-date-picker", () => {
       await page.keyboard.press("Tab");
       await page.keyboard.up("Shift");
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-DATE-PICKER");
-      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT");
+      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT-TEXT");
 
       const startOpening = page.waitForEvent("calciteInputDatePickerOpen");
       await page.keyboard.press("ArrowDown");
@@ -724,11 +724,11 @@ describe("calcite-input-date-picker", () => {
       await page.keyboard.press("Escape");
       await startClosing;
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-DATE-PICKER");
-      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT");
+      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT-TEXT");
 
       await page.keyboard.press("Tab");
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-DATE-PICKER");
-      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT");
+      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT-TEXT");
 
       const endOpening = page.waitForEvent("calciteInputDatePickerOpen");
       await page.keyboard.press("ArrowDown");
@@ -747,7 +747,7 @@ describe("calcite-input-date-picker", () => {
       await page.keyboard.press("Escape");
       await endClosing;
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-DATE-PICKER");
-      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT");
+      expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-INPUT-TEXT");
 
       await page.keyboard.press("Tab");
       expect(await getFocusedElementProp(page, "id")).toBe("next-sibling");
@@ -762,7 +762,7 @@ describe("calcite-input-date-picker", () => {
     await page.setContent(html` <calcite-input-date-picker value="${expectedValue}"></calcite-input-date-picker>`);
 
     const inputDatePickerEl = await page.find("calcite-input-date-picker");
-    const input = await page.find("calcite-input-date-picker >>> calcite-input");
+    const input = await page.find("calcite-input-date-picker >>> calcite-input-text");
 
     expect(await inputDatePickerEl.getProperty("value")).toEqual(expectedValue);
     expect(await input.getProperty("value")).toEqual(expectedInputValue);
@@ -783,7 +783,7 @@ describe("calcite-input-date-picker", () => {
     inputDatePicker.setProperty("value", ["2023-02-01", "2023-02-28"]);
     await page.waitForChanges();
 
-    const [startDatePicker, endDatePicker] = await page.findAll("calcite-input-date-picker >>> calcite-input");
+    const [startDatePicker, endDatePicker] = await page.findAll("calcite-input-date-picker >>> calcite-input-text");
 
     await startDatePicker.click();
     await page.waitForChanges();

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -9,16 +9,23 @@
     shadow-none;
 }
 
+@function get-trailing-text-input-padding($chevron-spacing) {
+  @return calc(var(--calcite-toggle-spacing) + $chevron-spacing);
+}
+
 :host([scale="s"]) {
   --calcite-toggle-spacing: theme("spacing.2");
+  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(theme("spacing.4"))};
 }
 
 :host([scale="m"]) {
   --calcite-toggle-spacing: theme("spacing.3");
+  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(theme("spacing.6"))};
 }
 
 :host([scale="l"]) {
   --calcite-toggle-spacing: theme("spacing.4");
+  --calcite-internal-input-text-input-padding-inline-end: #{get-trailing-text-input-padding(theme("spacing.8"))};
 }
 
 @include disabled();

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -1,5 +1,5 @@
 import { boolean, select, text } from "@storybook/addon-knobs";
-import { modesDarkDefault } from "../../../.storybook/utils";
+import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import readme from "./readme.md";
 import { html } from "../../../support/formatting";
 import { locales } from "../../utils/locale";
@@ -158,3 +158,8 @@ export const darkModeRTL_TestOnly = (): string => html`
   </div>
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
+export const widthSetToBreakpoints_TestOnly = (): string =>
+  createBreakpointStories(
+    html`<calcite-input-date-picker scale="{scale}" value="2020-12-12"></calcite-input-date-picker>`
+  );
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
@@ -526,7 +526,7 @@ export class InputDatePicker
               // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
               ref={this.setStartWrapper}
             >
-              <calcite-input
+              <calcite-input-text
                 aria-autocomplete="none"
                 aria-controls={this.dialogId}
                 aria-describedby={this.placeholderTextId}
@@ -537,18 +537,15 @@ export class InputDatePicker
                 }`}
                 disabled={disabled}
                 icon="calendar"
-                number-button-type="none"
-                numberingSystem={numberingSystem}
-                onCalciteInputInput={this.calciteInternalInputInputHandler}
-                onCalciteInternalInputBlur={this.calciteInternalInputBlurHandler}
-                onCalciteInternalInputFocus={this.startInputFocus}
+                onCalciteInputTextInput={this.calciteInternalInputInputHandler}
+                onCalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
+                onCalciteInternalInputTextFocus={this.startInputFocus}
                 onFocus={this.startEndInputFocus}
                 placeholder={this.localeData?.placeholder}
                 readOnly={readOnly}
                 role="combobox"
                 scale={this.scale}
                 status={this.status}
-                type="text"
                 // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
                 ref={this.setStartInput}
               />
@@ -621,7 +618,7 @@ export class InputDatePicker
                 // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
                 ref={this.setEndWrapper}
               >
-                <calcite-input
+                <calcite-input-text
                   aria-autocomplete="none"
                   aria-controls={this.dialogId}
                   aria-expanded={toAriaBoolean(this.open)}
@@ -632,18 +629,15 @@ export class InputDatePicker
                   }}
                   disabled={disabled}
                   icon="calendar"
-                  number-button-type="none"
-                  numberingSystem={numberingSystem}
-                  onCalciteInputInput={this.calciteInternalInputInputHandler}
-                  onCalciteInternalInputBlur={this.calciteInternalInputBlurHandler}
-                  onCalciteInternalInputFocus={this.endInputFocus}
+                  onCalciteInputTextInput={this.calciteInternalInputInputHandler}
+                  onCalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
+                  onCalciteInternalInputTextFocus={this.endInputFocus}
                   onFocus={this.startEndInputFocus}
                   placeholder={this.localeData?.placeholder}
                   readOnly={readOnly}
                   role="combobox"
                   scale={this.scale}
                   status={this.status}
-                  type="text"
                   // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
                   ref={this.setEndInput}
                 />

diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -56,57 +56,60 @@
 
 @include disabled();
 
-:host input {
+input {
   transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
   -webkit-appearance: none;
-  @apply font-inherit
-    text-color-1
-    bg-foreground-1
-    relative
-    m-0
+  @apply bg-foreground-1
     box-border
     flex
+    flex-1
+    font-inherit
+    font-normal
+    m-0
     max-h-full
-    w-full
     max-w-full
-    flex-1
+    relative
     rounded-none
-    font-normal;
+    text-color-1
+    text-ellipsis
+    w-full;
+
+  &:placeholder-shown {
+    @apply text-ellipsis;
+  }
 }
 
 // states
-:host {
-  & input {
-    @apply text-color-1
-      border-color-input
-      border
-      border-solid;
-    &::placeholder,
-    &:-ms-input-placeholder,
-    &::-ms-input-placeholder {
-      @apply text-color-3 font-normal;
-    }
-  }
-  & input:focus {
-    @apply border-color-brand text-color-1;
-  }
-  & input[readonly] {
-    @apply bg-background font-medium;
-  }
-  & input[readonly]:focus {
-    @apply text-color-1;
-  }
-  & calcite-icon {
-    @apply text-color-3;
+input {
+  @apply text-color-1
+    border-color-input
+    border
+    border-solid;
+  &::placeholder,
+  &:-ms-input-placeholder,
+  &::-ms-input-placeholder {
+    @apply text-color-3 font-normal;
   }
 }
+input:focus {
+  @apply border-color-brand text-color-1;
+}
+input[readonly] {
+  @apply bg-background font-medium;
+}
+input[readonly]:focus {
+  @apply text-color-1;
+}
+calcite-icon {
+  @apply text-color-3;
+}
 
 //focus
-:host input {
+input {
   @apply focus-base;
 }
 
-:host input:focus {
+input:focus {
   @apply focus-inset;
 }
 
@@ -396,14 +399,14 @@
   @apply border-t-color-1;
 }
 
-:host .inline-child {
+.inline-child {
   @apply transition-default bg-transparent;
   .editing-enabled {
     background-color: inherit;
   }
 }
 
-:host .inline-child:not(.editing-enabled) {
+.inline-child:not(.editing-enabled) {
   @apply border-color-transparent
     flex
     cursor-pointer;

diff --git a/packages/calcite-components/src/components/input-number/input-number.stories.ts b/packages/calcite-components/src/components/input-number/input-number.stories.ts
@@ -1,6 +1,6 @@
 import { number, select, text } from "@storybook/addon-knobs";
 import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { modesDarkDefault } from "../../../.storybook/utils";
+import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import readme from "./readme.md";
 
@@ -154,3 +154,23 @@ export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
 
 export const invalidStatus_TestOnly = (): string =>
   html`<calcite-input-number status="invalid" value="54321"></calcite-input-number>`;
+
+export const widthSetToBreakpoints_TestOnly = (): string =>
+  createBreakpointStories(html`
+    <style>
+      .breakpoint-story-container {
+        flex-wrap: wrap;
+      }
+      .breakpoint-story-container > * {
+        flex-basis: 100%;
+      }
+    </style>
+    <calcite-input-number
+      scale="{scale}"
+      placeholder="Placeholder: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque eu ultrices vitae auctor eu augue. Rhoncus dolor purus non enim praesent elementum facilisis."
+    ></calcite-input-number>
+    <calcite-input-number
+      scale="{scale}"
+      value="123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"
+    ></calcite-input-number>
+  `);