feat: truncated text initial commit web component

[devadula-nandan]

Closes #7542
Closes #7541

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	d3684cf
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-for-ibm-products/deploys/6849a3963ffafa0008283258
😎 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	1eb83bb
🔍 Latest deploy log	https://app.netlify.com/projects/ibm-products-web-components/deploys/6849a483c0e1d200086c4202
😎 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 85.33333% with 22 lines in your changes missing coverage. Please review.

Project coverage is 84.46%. Comparing base (134e285) to head (1eb83bb).
Report is 13 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7397      +/-   ##
==========================================
- Coverage   84.49%   84.46%   -0.04%     
==========================================
  Files         425      427       +2     
  Lines       17288    17453     +165     
  Branches     4589     4625      +36     
==========================================
+ Hits        14608    14742     +134     
- Misses       2680     2711      +31     

Components	Coverage Δ
ibm-products	82.03% <ø> (-0.05%)	⬇️
ibm-products-web-components	91.90% <85.33%> (-0.24%)	⬇️

🚀 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.

[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]

the align right seems to be adding some unnecessary styles, it could be adding some rtl direction.

[elycheea]

A few small comments.

Also wonder if we’Ll need to move some of the styles to @carbon/ibm-products-styles once we add the React version.

[elycheea]

Any reason we’re using em instead of rem here? If we’re using these specific numbers over tokens, we should also comment on how we derived these; e.g. avoid magic numbers!

[devadula-nandan]

i intended em particularly in this case as this utility (or component) will be used in various html text elements, that has varying font sizes, so setting padding-inline-start: 0.2em would set the tiny padding between ... and the text to 0.2em and it scales as per the context (parent font size) its used in. so a tiny text will have tiny padding, and larger text will have larger padding.

there will be cases where the font sizes are modified in an application.
cases where custom typography mixins could be applied to certain elements.

in such cases, if we use rem, it will always be derived from the root, but em derive the units from the parent.

added the comment and removed padding as we are not using the gradient

[elycheea]

I actually wonder if ch would be better alternative then? But can do that when we move styles to @carbon/ibm-products-styles for the React version.

[elycheea]

Actually updating to approve — the comments I have are pretty minor and I think can be considered non-blocking. We can definitely update when we update the React implementation too.