feat: truncated text initial commit web component

[devadula-nandan]

Closes #7542

adds truncated text in web components

What did you change?

added new web component

How did you test and verify your work?

setup basic test, test coverage of at least 80% will be covered in #7541

[netlify]

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	c8e5a80
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-for-ibm-products/deploys/682dbe253dbcd200081d4d30
😎 Deploy Preview	https://deploy-preview-7397--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	c8e5a80
🔍 Latest deploy log	https://app.netlify.com/projects/ibm-products-web-components/deploys/682dbe2572821d0008cdb038
😎 Deploy Preview	https://deploy-preview-7397--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 72.00000% with 35 lines in your changes missing coverage. Please review.

Project coverage is 84.35%. Comparing base (ffbdbc4) to head (c8e5a80).
Report is 17 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7397      +/-   ##
==========================================
+ Coverage   83.94%   84.35%   +0.41%     
==========================================
  Files         425      427       +2     
  Lines       17218    17357     +139     
  Branches     4545     4580      +35     
==========================================
+ Hits        14453    14641     +188     
+ Misses       2765     2716      -49     

Components	Coverage Δ
ibm-products	81.99% <ø> (-0.02%)	⬇️
ibm-products-web-components	91.55% <72.00%> (+1.53%)	⬆️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[devadula-nandan]

definition tooltip is not released in carbon/web-components yet.

we could leave this as it is as well.
IMO we don't need a tab stop on string formatter, as it could potentially cause inconsistencies in tab order in some tests. however we could still access it with mouse or touch

[elycheea]

Not a full review, but I know @davidmenendez was considering something like useOverflowString, but maybe that’s more for utility format.

I do think this should be classified as a utility component. But I’d love for us to consider the naming if there are better ways to describe its purpose.

(Maybe @RichKummer has thoughts?)

Also we should label this a feat not a chore :D

[elycheea]

We should update this. :)

[devadula-nandan]

Not a full review, but I know @davidmenendez was considering something like useOverflowString, but maybe that’s more for utility format.

I do think this should be classified as a utility component. But I’d love for us to consider the naming if there are better ways to describe its purpose.

(Maybe @RichKummer has thoughts?)

Also we should label this a feat not a chore :D

ah, the framework agonistic utility, let me try that parallel. sounds like a good idea to me.

[RichKummer]

StringFormatter seems a little generic to me, and could mean anything related to a string. I'm wondering if the name could incorporate truncate/truncation and tooltip to help convey the purpose? Those are the two key aspects to the utility

TruncateWithTooltip? There's also TruncatedList so maybe something more in line with that?

[devadula-nandan]

i have updated this pr, and the changes include.

name change to truncated string and the tag name being cds-truncated-string.
introduced a new prop with which gives two options to present the full string.

tests will be fixed soon

[devadula-nandan]

Hi @RichKummer,

All the changes are done. and the team decided to go with TruncatedText for the name.
I have added a variant to this, with with prop that changes the mode of presentation of whole content with tooltip or expand (read more / read less).

Needed design inputs

1. While developing this, the DefinitionTooltip wasn't released in @carbon-web-components so i have made it with Tooltip. the original string formatter was built with DefinitionTooltip in react.
   key differences are
   DefinitionTooltip receives tab stop by default. and Tooltip doesn't. (we have to explicitly make the target focusable by providing tabindex)

another viable option to replace Tooltip or DefinitionTooltip is by Popover. but the hover states should be handled manually.

2. The second variant, expand, was implemented without formal design guidance, as it was either requested or anticipated to address specific use cases. and needs some design opinion and validation.
   This approach supports a more natural reading flow: users read the visible text up to the truncation point, and clicking Read more expands the content in place, allowing them to continue reading seamlessly without breaking cognitive focus.

In contrast, the tooltip variant requires users to reorient themselves after opening the tooltip, they often need to reread the entire text to find where they left off, which can disrupt comprehension.

The deploy preview is ready to test.

CC: @elycheea

[RichKummer]

Hey @devadula-nandan !

Tooltip

• For this use case, I think Tooltip is most appropriate. The DefinitionToolip is built "to provide additional information about a particular term or phrase in text content" (from the Storybook). There's also an impact on the actual tooltip styling (the DefinitionTooltip has a slimmer container. Popover doesn't seem to fit here - it would trigger on click and remain open, whereas this is triggered on hover and does not stay open when the user changes focus or moves off the hover state.
• That said, the description still be focusable if it's truncated with the tooltip. Does explicitly adding the tabindex have a negative effect on adopting this?

Expand
This is looking great, and mirrors the Tearsheet specs. Two things that I'm looking at:

• I can’t tell from the build, but I’m wondering if we could apply the [Carbon motion package](https://carbondesignsystem.com/elements/motion/code/) to provide some motion out of the box. Using the [Motion generator](https://ibm.github.io/motion/), it looks like Productive motion (UI) using Easing: cubic-bezier(0.2, 0.2, 0.38, 0.9) might work for the use case. This could also become a follow-on enhancement.
• For the "read more" indication, it looks like the actual clickable area extends to the left of the "read more" label, including an area with a gradient fade-out. I don't think we necessarily need the fade-out or the expanded clickable area (shown below in the pink border)

[devadula-nandan]

• That said, the description still be focusable if it's truncated with the tooltip. Does explicitly adding the tabindex have a negative effect on adopting this?

it could be an accessibility choice, and we can pass this to accessibility team to get the expected behavior, ill make it tabbable in this pr for now.

• I can’t tell from the build, but I’m wondering if we could apply the [Carbon motion package](https://carbondesignsystem.com/elements/motion/code/) to provide some motion out of the box. Using the [Motion generator](https://ibm.github.io/motion/), it looks like Productive motion (UI) using Easing: cubic-bezier(0.2, 0.2, 0.38, 0.9) might work for the use case. This could also become a follow-on enhancement.

i couldn't find the corresponding tokens in the library for the exact vales mentioned, so i have used the nearest available match.

// transition: max-height 107ms cubic-bezier(0.2, 0.2, 0.38, 0.9); // recommended
transition: max-height $duration-fast-02 motion(standard, productive); // nearest match for the token

• For the "read more" indication, it looks like the actual clickable area extends to the left of the "read more" label, including an area with a gradient fade-out. I don't think we necessarily need the fade-out or the expanded clickable area (shown below in the pink border)

removed the gradient as per discussion