calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

Enhancement: Truncate calcite-chip label

Open jul11557 opened this issue 3 years ago • 2 comments

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:

  • Some users may need to or choose to enter long tag labels, such as the name of an organization or location
  • Some users may simply have very long names, requiring very long user chips
  • When translated, some words and phrases might increase significantly in character length

Acceptance Criteria

  • [ ] Allow a method that would truncate the calcite chip when needed to accommodate for longer chip labels

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

jul11557 avatar Oct 15 '21 14:10 jul11557

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?

caripizza avatar Oct 15 '21 16:10 caripizza

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.

jul11557 avatar Oct 15 '21 19:10 jul11557