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

Badge: Add property to toggle truncation #68091

Closed
jameskoster opened this issue Dec 18, 2024 · 3 comments · Fixed by #68107
Closed

Badge: Add property to toggle truncation #68091

jameskoster opened this issue Dec 18, 2024 · 3 comments · Fixed by #68107
Assignees
Labels
Design System Issues related to the system of combining components according to best practices. [Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@jameskoster
Copy link
Contributor

This came up while trying to tackle #68020.

The anchor 'badge' in List View is truncated to prevent it from taking over the entire row:

Image

In order to replace this ad hoc element with the Badge component, it would need to be updated to support truncation.

The Text component already supports truncation, so perhaps this is just a case of utilising Text inside Badge, and providing a way to pass the truncate property down to Text.

cc @WordPress/gutenberg-components

@jameskoster jameskoster added [Package] Components /packages/components [Type] Enhancement A suggestion for improvement. Design System Issues related to the system of combining components according to best practices. labels Dec 18, 2024
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Dec 18, 2024
@mirka
Copy link
Member

mirka commented Dec 18, 2024

There are some issues with the Truncate API, so I'm considering adding direct truncation handling by default whenever there's an explicit width restriction on the Badge: #68107.

I am assuming we never want multi-line badges. Let me know if you can think of use cases if this kind of auto-truncation would not work.

@jameskoster
Copy link
Contributor Author

Now that you mention it, forcing truncation to avoid multi-line badges is probably a good guardrail to avoid misuse :) Min/max-width's may also be worth considering.

@tyxla
Copy link
Member

tyxla commented Dec 19, 2024

I agree, and now that we have just created this component, it is a good time to impose that limitation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design System Issues related to the system of combining components according to best practices. [Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
Status: 💫 Done
Development

Successfully merging a pull request may close this issue.

3 participants