calcite-design-system
calcite-design-system copied to clipboard
Enhancement: Truncate calcite-chip label
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.
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?
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.