feat(input, input-date-picker, input-number, input-text, input-time-picker): truncate value and placeholder when input is narrow #8160

jcfranco · 2023-11-10T08:49:23Z

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.

…icker): truncate value and placeholder when input is narrow

ashetland · 2023-11-13T20:49:36Z

Left this comment on the related issue and realized part of it should've gone here 🤦‍♂️.

SkyeSeitz · 2023-11-13T21:32:01Z

Left this comment on the related issue and realized part of it should've gone here 🤦‍♂️.

I second the need to add a gap before the dropdown chevron so the chevron and placeholder or value text does not overlap.

jcfranco · 2023-11-13T21:42:24Z

Do you have any suggestions for what the gap should be? The spacing looks different when the text is truncated vs when it's not. Worth noting that the gap is really padding applied within the input component since the chevron is positioned absolutely on top of it.

Here are some previews (scale=s):

chevron spacing * 2 + chevron icon size

chevron spacing + chevron icon size

chevron icon size

ashetland · 2023-11-13T21:46:02Z

Do you have any suggestions for what the gap should be? The spacing looks different when the text is truncated vs when it's not. Worth noting that the gap is really padding applied within the input component since the chevron is positioned absolutely on top of it.

Here are some previews (scale=s):

chevron spacing * 2 + chevron icon size

chevron spacing + chevron icon size

chevron icon size

Option 2 feels about right.

* adds internal CSS var to control padding for internal input used by calcite-input-text

SkyeSeitz · 2023-11-13T22:28:48Z

I recommend following our standard spacing size at each scale 8px, 12px, 16px. This will match what we have in Figma.

SkyeSeitz · 2023-11-13T22:35:36Z

Looks like we can log an issue for Input Date Picker to clear the invalid entry to match Time Picker's behavior making the truncation only applicable to the placeholder text.

…-value-and-placeholder

driskull

🎉

packages/calcite-components/src/components/input-number/input-number.scss

driskull · 2023-11-15T00:16:03Z

packages/calcite-components/src/components/input-number/input-number.stories.ts

+    ></calcite-input-number>
+    <calcite-input-number
+      scale="{scale}"
+      value="123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"


over 9000!!!

driskull · 2023-11-15T00:17:23Z

packages/calcite-components/src/components/input-time-picker/input-time-picker.scss

@@ -8,14 +8,23 @@

 :host([scale="s"]) {
  --calcite-toggle-spacing: theme("spacing.2");
+  --calcite-internal-input-text-input-padding-inline-end: calc(
+    var(--calcite-toggle-spacing) + theme("spacing.4")
+  ); // chevron gap + icon spacing


Are these comments necessary? Wonder if another internal variable might help here instead?

I took another stab at this with Sass functions. I'm trying to avoid creating another internal var that would probably be lengthy and not be minified in the output build.

…space value

driskull

Nice!!

…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.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> ## [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> ## [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-11-21) ### Features * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) ### Bug Fixes * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> ## 1.11.0 (2023-11-21) ### Bug Fixes * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> ## [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-11-21) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <[email protected]>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-11-21) * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-11-21) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <[email protected]>

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

957c4d3

…icker): truncate value and placeholder when input is narrow

jcfranco requested a review from a team as a code owner November 10, 2023 08:49

jcfranco requested review from SkyeSeitz and ashetland November 10, 2023 08:49

github-actions bot assigned jcfranco Nov 10, 2023

github-actions bot added the enhancement Issues tied to a new feature or request. label Nov 10, 2023

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed enhancement Issues tied to a new feature or request. labels Nov 10, 2023

jcfranco added 3 commits November 10, 2023 00:55

tidy up

5f5c8d9

tidy up

a5d677c

fix spacing regression in inline-editable use case

74a58b6

github-actions bot added the enhancement Issues tied to a new feature or request. label Nov 13, 2023

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 13, 2023

jcfranco added 2 commits November 13, 2023 14:21

swap calcite-input for calcite-input-text

2cb15d6

add gap between truncated date/time picker input and chevron

bbe94d4

* adds internal CSS var to control padding for internal input used by calcite-input-text

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 13, 2023

Merge branch 'main' into jcfranco/6677-update-inputs-to-truncate-long…

03708cc

…-value-and-placeholder

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 14, 2023

jcfranco added 2 commits November 13, 2023 22:38

Merge branch 'main' into jcfranco/6677-update-inputs-to-truncate-long…

1d1d132

…-value-and-placeholder

fix tests

146b094

jcfranco removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Nov 14, 2023

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Nov 14, 2023

driskull approved these changes Nov 15, 2023

View reviewed changes

use Sass function to avoid duplicate comments about trailing padding …

1bf5311

…space value

jcfranco requested a review from driskull November 15, 2023 07:48

driskull approved these changes Nov 15, 2023

View reviewed changes

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 15, 2023

jcfranco merged commit 533eff3 into main Nov 15, 2023

jcfranco deleted the jcfranco/6677-update-inputs-to-truncate-long-value-and-placeholder branch November 15, 2023 21:00

github-actions bot added this to the 2023 November Priorities milestone Nov 15, 2023

calcite-admin mentioned this pull request Nov 15, 2023

chore: release main #8092

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(input, input-date-picker, input-number, input-text, input-time-picker): truncate value and placeholder when input is narrow #8160

feat(input, input-date-picker, input-number, input-text, input-time-picker): truncate value and placeholder when input is narrow #8160

Uh oh!

jcfranco commented Nov 10, 2023

Uh oh!

ashetland commented Nov 13, 2023 •

edited

Loading

Uh oh!

SkyeSeitz commented Nov 13, 2023

Uh oh!

jcfranco commented Nov 13, 2023 •

edited

Loading

Uh oh!