fix: tag not using elipses when width constrained #4518
Conversation
ghost
requested review from
| cursor: pointer; | ||
| padding-right: rem(2px); // Align with hover circle of X button | ||
| padding-right: rem(26px); // Space for hover circle and X button |
There was a problem hiding this comment.
just to confirm the 26px is from 20px width svg, 2px left border, 2px right border, and 2px space from the right edge right? should we express it as this?
| padding-right: rem(26px); // Space for hover circle and X button | |
| padding-right: calc(#{$carbon--spacing-06} + #{rem(2px)}); // icon width + 2px space from right edge |
There was a problem hiding this comment.
bump @lee-chase if you have a sec!
|
Deploy preview for carbon-components-react ready! Built with commit 8e98b8e https://deploy-preview-4518--carbon-components-react.netlify.com |
|
Deploy preview for the-carbon-components ready! Built with commit 8e98b8e https://deploy-preview-4518--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 8e98b8e |
|
@jendowns if I understand 2.1 requirements correctly, truncated text will need a tooltip. For 2.0, I believe it needs the One question I had for this, do we want to go down the route of truncated text in the tag or do we just want it to scale as the text overflows? Seems like making sure it scales would help in our text resize situations but let me know if I'm missing something here! |
dakahn
added
status: waiting for author's response 💬
and removed
status: waiting for author's response 💬
labels
|
To joshs comment my gut feeling is I don't think we should have truncated text inside a tag. I think what is in the tag should be visible at all times. But maybe there are some use cases for it so we could have it. |
|
IMO Tags by default should not have a max width, they should just keep growing until the edge of the container. However, tags should also never be multi-lined so if a tag is constrained by space then it should elipse with a tooltip to show the full content.
|
|
I can really only see this being a problem with user generated tags. Any system tags shouldn't have to ellipse, designers should be putting tags in layout/content area's that allow for whatever the tag widths are needed or designers should consider alternatives for displaying this information if size constraints is problematic. |
|
Hello, |
|
@skaparelos1 why is adding an elipses better than letting the tag be displayed at full width? At what max size were you thinking this tags will elipse? Can you also share a screenshot or where these tags are being used so we can understand the content? Thanks! |
If the user selected a location like
Ideally I would like this to depend on the size of the parent. If it doesn't fit in the parent, then add ellipsis. If it does, then show it all.
I am not sure if I am allowed to post a screenshot here. These tags are being used as filter refinements for a search application. Center of page contains search results whereas on the left side users are given the option to select several options to further refine their search. |
|
Ok let's add the elipse function but the tag itself shouldn't have a max width on it (if that makes since). I think we'll need to be careful on the design side when this can be used. |
|
bump @dakahn what are the 2.1 requirements for ellipses/truncated text? Anything we need to consider here for ellipses in tags? |
|
I can't find a reference to any requirements around truncated text. Usability is a concern, but as long as we've addressed those it seems like Checkpoint 1.4.4 relates to text truncation/rewrap on resize. 👍 |
Closes #4511
Makes the tag/filter to show the text elipses when the tag is too large for the
Changelog
Changed
M packages/components/src/components/tag/_tag.scss
M packages/components/src/components/tag/tag.hbs
Testing / Reviewing
Ran up base components storybook for both filter and tag. Used developer tools to constrain the width of the containing div.