-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
Tab/ProgressIndicator items has max-width specified even when space is available #4973
Comments
will need design input on what the default tab widths should be, but a temp fix would be to add |
Just noticed the same behaviour with ProgressIndicator component. Updated the issue accordingly. |
In the new design language each tab (or section of progress indicator) is an equal width with 16px padding on the left and right. To incorporate more room for text the tabs need to be made wider. The progress indicator can be stretched to fill a wider area and that will help give the text more room to display. |
@aagonzales Got it. But the question is will carbon support wider tabs, or we need to override? |
What if we have the min-width set at 120 but enabled tabs to grow larger as long as each tab in the set have equal widths? I have no clue how to technically achieve this. @emyarod do you have any ideas? |
I too in appid dashboard suffer from this, we need this to handle our informative tab/progress bar labels. We should also remember that in localizations, often text changes length and so this need to be responsive, we cannot account for text size in advance |
@aagonzales this is feasible, but how strongly are we tied to the requirement that all tabs are the same width? |
why do you realy need all tabs to be the same size? i mean just fit content and size it,. |
@alon24 It is an aesthetic choice made for brand vision. It helps with alignment and layout structure. We want to keep equal width tabs. Its not an uncommon pattern. Chrome browser tabs do this (i'm looking at them right now). |
Any thoughts about when this will be fixed, we can't realy deploy to production like this. |
@aagonzales The case of Chrome and ours is different. |
This was an aesthetic band decision that was made. We'd have to consult to @mjabbink about changing it but the tabs being equal sizes is the original intended design aesthetic. The equal sizing offers alignment on the page and create an equal visual weight among tabs, this is especially important for the container tabs. I think the style of our tabs being left alignment and not centered like the google product example also benefits from the equal tab sizes. |
For now we can do what I proposed in this comment: #4973 (comment). And set a min-width but no max width. That is all I'm comfortable with changing at the moment. |
@aagonzales will this allow me to put texts or varient sizes? meaning if internalization text is bigger it will show ok? |
The size of the tabs should be based off the longest string of text. |
@alon24 You are welcomed to make a PR that fixes this if you are waiting. Otherwise when it gets done is up to our team. Carbon should not be a blocker for you. If you need to build something custom in the mean time then you are welcomed to. |
What package(s) are you using?
"carbon-components": "10.9.0",
"carbon-components-react": "7.9.0"
through Cloud Pal: 1.40.8
Detailed description
Tab/ProgressIndicator component has max-width specified for its items, which makes it difficult for the user to know what the entire string is. It is worse in multilingual environments (eg: German). Ideally, it should show the entire title or at least provide a way for the user to view the entire title. Our tabs are two words in total, it makes sense and is reasonable to support this
Component affected
Tabs, ProgressIndicator
Additional information
The text was updated successfully, but these errors were encountered: