Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Chip]: truncate calcite-chip label #3265

Open
1 task
jul11557 opened this issue Oct 15, 2021 · 2 comments
Open
1 task

[Chip]: truncate calcite-chip label #3265

jul11557 opened this issue Oct 15, 2021 · 2 comments
Assignees
Labels
1 - assigned Issues that are assigned to a sprint and a team member. ArcGIS Mission Issues logged by ArcGIS Mission team members. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - design - sm Small design effort; 1-4 days of design work p - medium Issue is non core or affecting less that 60% of people using the library spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.

Comments

@jul11557
Copy link

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 jul11557 added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Oct 15, 2021
@jul11557 jul11557 changed the title Enhancement: Enhancement: Truncate calcite-chip label Oct 15, 2021
@caripizza
Copy link
Contributor

This reminds me of the trim dom util Matt and I discussed in #2096.

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

@jul11557
Copy link
Author

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.

@geospatialem geospatialem added the design Issues that need design consultation prior to development. label Jun 29, 2022
@benelan benelan added the ArcGIS Mission Issues logged by ArcGIS Mission team members. label Jan 30, 2023
@geospatialem geospatialem removed the design Issues that need design consultation prior to development. label Mar 20, 2023
@geospatialem geospatialem added the design Issues that need design consultation prior to development. label Aug 21, 2023
@brittneytewks brittneytewks added the p - medium Issue is non core or affecting less that 60% of people using the library label Aug 24, 2023
@brittneytewks brittneytewks added this to the Design Backlog milestone Aug 24, 2023
@brittneytewks brittneytewks added figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists and removed needs triage Planning workflow - pending design/dev review. labels Aug 24, 2023
@brittneytewks brittneytewks removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Dec 11, 2023
@geospatialem geospatialem added estimate - design - sm Small design effort; 1-4 days of design work 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels May 9, 2024
@geospatialem geospatialem removed this from the Design Backlog milestone May 9, 2024
@ashetland ashetland changed the title Enhancement: Truncate calcite-chip label [Chip]: truncate calcite-chip label Jul 25, 2024
@geospatialem geospatialem added the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Sep 16, 2024
@ashetland ashetland assigned jcfranco and anveshmekala and unassigned ashetland Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1 - assigned Issues that are assigned to a sprint and a team member. ArcGIS Mission Issues logged by ArcGIS Mission team members. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. estimate - design - sm Small design effort; 1-4 days of design work p - medium Issue is non core or affecting less that 60% of people using the library spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment.
Projects
None yet
Development

No branches or pull requests

9 participants