search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.6k stars 1.76k forks source link

[Bug]: Tab with long label text is not rendering properly in smaller screens #16627

Open laxman-4656 opened 1 month ago

laxman-4656 commented 1 month ago

Package

@carbon/react

Browser

Chrome

Package version

v1.53.1

React version

v18.2.0

Description

The tab is not handling the long names properly, it is cutting off in smaller window and so the entire label text is not visible. Attaching the screenshot for reference where the text cut off and also boarder is incorrect & it doesn't render properly.

Screenshot 2024-05-31 at 9 31 29 AM

It'd be great if we have an option to be able to set a max char limit and then it could add the ... ellipsis as needed with tooltip, something like this

image

Reproduction/example

https://stackblitz.com/edit/github-8ktu82?file=src%2FApp.jsx

Steps to reproduce

Add more than 3 tabs, and one with long label text in it.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

Gururajj77 commented 3 weeks ago

This is the current spec around the width for each Tab, https://react.carbondesignsystem.com/?path=/story/components-toggle--default

laxman-4656 commented 3 weeks ago

https://react.carbondesignsystem.com/?path=/story/components-toggle--default

@Gururajj77 This link is navigating to the Toggle component, but this issue is created for Tab component.

tay1orjones commented 3 weeks ago

Sorry for the mis-link, tabs are specced right now to be auto-width https://carbondesignsystem.com/components/tabs/style/#line-tab-structure

Since truncation isn't part of the spec, there's currently no mechanism to provide a tooltip or title like this. I'm not sure if we can add a Tooltip to the tab elements - they have role="tab". We'd need to look at the spec for that role.

AmandaFurukawa commented 3 weeks ago

To prevent this shouldn't we add a character limit to the tabs? Otherwise, scenarios like this are going to happen.

thyhmdo commented 1 week ago

Hi, we're working to update this. In the horizontal case, there's no truncation needed since tabs allow horizontal scrolling. However, we also don't recommend having the tab labels to be that long, it should be one to two words, as these are easier to scan. See Tabs Content.

Reference link for Overflow content: https://carbondesignsystem-git-fork-kingtra-fa0cca-carbon-design-system.vercel.app/components/tabs/usage/#overflow-content