Carbon: Tag component doesn't look like a tag when there is only one character

Created on 10 Jan 2020  ยท  6Comments  ยท  Source: carbon-design-system/carbon

What package(s) are you using?

  • [ ] carbon-components 10.9.0
  • [ ] carbon-components-react 7.9.0

Detailed description

Describe in detail the issue you're having.
We are using Tag component to show the count of roles a user can have and when it's in single-digit the component looks like a ball instead of tag. There should a min width provided to make it look like a tag.

Is this issue related to a specific component?
Tag

What did you expect to happen? What happened instead? What would you like to see changed?
We are using Tag component to show the count of roles a user can have and when it's in single-digit the component looks like a ball instead of tag.

What browser are you working in?
FF
Chrome
Safari

What version of the Carbon Design System are you using?

  • carbon-components 10.9.0
  • carbon-components-react 7.9.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM Cloud

Steps to reproduce the issue

  1. Use a single character in a tag component and see the issue

Screen Shot 2020-01-10 at 11 12 59 AM
Screen Shot 2020-01-10 at 11 13 03 AM

tags low visual ๐ŸŽจ 4 bug ๐Ÿ›

Most helpful comment

If this is okay, I'll go ahead and make a PR ๐Ÿ‘

All 6 comments

@carbon-design-system/design we could add a min-width property to ensure single character tags still maintain a pill shape

I did talk to the design team and we do like the pill shape better for a single digital but I think technically if we set a min-width on tag, say 32px, then the text will be off centered, which is not ideal.
image

@aagonzales It seems like we can center the single-digit without it affecting the other variations

https://codesandbox.io/s/codesandbox-x5etc

Screen Shot 2020-01-14 at 2 51 58 PM

Oh noice! You're a genius TJ.

If this is okay, I'll go ahead and make a PR ๐Ÿ‘

Yup, approved โœ…

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mouadcherkaoui picture mouadcherkaoui  ยท  3Comments

skaparelos1 picture skaparelos1  ยท  3Comments

drewdistefano picture drewdistefano  ยท  3Comments

ahoyahoy picture ahoyahoy  ยท  3Comments

windgaucho picture windgaucho  ยท  3Comments