Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
269 stars 75 forks source link

Enhancement: Truncate calcite-chip label #3265

Open jul11557 opened 2 years ago

jul11557 commented 2 years ago

Description

It would be helpful if the calcite-chip had a built-in function to truncate or abbreviate the chip label at either (1) a max number of characters, or (2) once it fills 100% of its available space on the page.

Although the best practice is not to create long chip labels, it cannot always be avoided. For example:

Acceptance Criteria

Relevant Info

Which Component

Chip

Example Use Case

In ArcGIS Mission, users have the option of creating tags for their mission. This helps make missions easily searchable and provides more context into the purpose of the mission. We recently switched our custom tag component out and replaced it with the calcite-chip component. Currently, the tags are in a container that scales to a smaller width as the page resizes. When this happens, the chips don't truncate -- they simply hang off the sides (see example below). We have corrected this in our app by setting a max character width, but this won't be a feasible solution in every scenario.

Screen Shot 2021-10-15 at 10 35 34 AM

caripizza commented 2 years ago

This reminds me of the trim dom util Matt and I discussed in https://github.com/Esri/calcite-components/issues/2096.

Should we can make the trim util available for use in consuming apps?

jul11557 commented 2 years ago

That does sound about right, and what we're looking for. I would love if it could be set to trim once the chip reaches 100% of the container it's in. As a start though, trimming at a set number of (configurable) characters would be a great improvement.