dxc-technology / halstack-react

Library of components for building SPAs with React and Halstack Design System
https://developer.dxc.com/halstack/
Apache License 2.0
15 stars 14 forks source link

Tabs Component Labels should handle text overflow #1682

Closed diwakarang closed 7 months ago

diwakarang commented 1 year ago

Describe the bug When Tabs label is too long to be displayed inside the available space it should force the text to trucate with ellipsis. That is not working

To Reproduce

  1. Visit Halstack component website, and add following values to list of tabs

    
    
     [
          {
            label: "Customer Journey V2 Jan 2023.pdf",
          },
          {
            label: "Market Compensation Levels Report Q1 2023.pdf",
          },
          {
            label: "Market Reform Contract",
          },
          {
            label: "Market Reform Proposal",
          }
     ] 


2. It can be noticed that tabs label doesn't get truncated with ellipsis.

**Expected behaviour**
When Tabs label is too long to be displayed inside the available space it should force the text to trucate with ellipsis
As mentioned in the screenshot below.

**Screenshots**
Usage mentioned in [Docs](https://developer.dxc.com/halstack/10/components/tabs/usage/#content)
<img width="902" alt="Tabs" src="https://github.com/dxc-technology/halstack-react/assets/42486284/65518109-e83e-4cb6-be0a-b63f06b9a0d7">

**Additional context**
This is observed, when it is required to use lengthy labels for Tabs

**Add labels**
Tabs, text overflow
Mil4n0r commented 8 months ago

The multi-line ellipsis is, as far as I know, a functionality that can be implemented only using -webkit-line-clamp (with value 2 in this case), which is not supported by all the browsers. It is also not handled either by our BaseTypography which could become a problem due to it being used in order to display the label of the Tabs.

We should find a way to proceed in order to cover this scenario.

kukoc commented 8 months ago

From our doc:

image

We need to engage to our Designers and figure out if long text is a fair use case for tab titles.. Maybe not.

Mil4n0r commented 7 months ago

Hello,

Following our discussion, we have decided not to incorporate the requested feature into Halstack. We believe that accommodating long text within the Tabs component does not align with its intended use case.

Thank you in any case for proposing it and helping us to improve.