Skip to content

feat: truncated text initial commit web component #7397

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

Open
wants to merge 15 commits into
base: main
Choose a base branch
from

Conversation

devadula-nandan
Copy link
Contributor

@devadula-nandan devadula-nandan commented Apr 28, 2025

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

Copy link

netlify bot commented Apr 28, 2025

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

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Apr 28, 2025

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

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

codecov bot commented Apr 28, 2025

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 devadula-nandan marked this pull request as ready for review April 29, 2025 12:12
@devadula-nandan devadula-nandan requested a review from a team as a code owner April 29, 2025 12:12
@devadula-nandan devadula-nandan requested review from AlexanderMelox and paul-balchin-ibm and removed request for a team April 29, 2025 12:12
@devadula-nandan devadula-nandan changed the title chore: string formatter initial commit chore: string formatter initial commit web component Apr 29, 2025
import { property, query } from 'lit/decorators.js';
import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import { prefix } from '../../globals/settings';
// todo: replace with definition tooltip to get tab stop
Copy link
Contributor Author

@devadula-nandan devadula-nandan Apr 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@elycheea elycheea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines 7 to 11
# FullPageError

Display a full-page error when the requested page is unavailable to the user.
This is typically caused by issues with the requested URL or access permissions.
Errors caused by server connectivity issues are not covered in this guideline.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should update this. :)

@devadula-nandan
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor Author

devadula-nandan commented May 12, 2025

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

@elycheea elycheea requested review from a team, matthewgallo and anamikaanu96 and removed request for AlexanderMelox, paul-balchin-ibm and a team May 13, 2025 13:19
@devadula-nandan
Copy link
Contributor Author

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.

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

@devadula-nandan devadula-nandan added status: needs design review 🎨 Component is ready for design review needs: design opinion Design question needs opinion from designer labels May 15, 2025
@RichKummer
Copy link
Contributor

RichKummer commented May 15, 2025

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)
Screenshot 2025-05-15 at 11 45 52 AM

@devadula-nandan
Copy link
Contributor Author

  • 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 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

@devadula-nandan devadula-nandan changed the title chore: string formatter initial commit web component chore: truncated text initial commit web component May 21, 2025
@devadula-nandan devadula-nandan changed the title chore: truncated text initial commit web component feat: truncated text initial commit web component May 21, 2025
@devadula-nandan devadula-nandan requested a review from elycheea May 22, 2025 05:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: design opinion Design question needs opinion from designer status: needs design review 🎨 Component is ready for design review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request]: WC TruncatedText Sprint 10
3 participants