Skip to content
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

feat(TruncatedList): new component TruncatedList #4139

Conversation

paul-balchin-ibm
Copy link
Contributor

@paul-balchin-ibm paul-balchin-ibm commented Jan 23, 2024

Contributes to #4071

Migrating TruncatedList from Products v1 / Security / TruncatedList.

v1 references: GitHub, Storybook.

What did you change?

This is a new v2 component.

Prop updates

Old prop New prop Change
as as Unchanged.
collapsedItemLimit collapsedItemsLimit Spelling (with an "s").
expandedItemLimit expandedItemsLimit Spelling (with an "s").
expandButtonClassName buttonClassName Name change.
onClick Optional callback reports the collapsed state of the list.
viewLessLabel Text label for when the list is expanded.
viewMoreLabel Callback function for building the label when the list is collapsed.
getExpandButtonLabel (deprecated) Replaced by viewLessLabel and viewMoreLabel.
truncateThreshold (deprecated) Removing it did not change the behavior of the component.
scrollGradientColor (deprecated) Scroll gradients are deprecated in Carbon 11.

How did you test and verify your work?

  • Storybook review.
  • Design review by Bridget Ndege.

@paul-balchin-ibm paul-balchin-ibm requested a review from a team as a code owner January 23, 2024 18:22
Copy link

netlify bot commented Jan 23, 2024

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

Name Link
🔨 Latest commit 3fecb9e
🔍 Latest deploy log https://app.netlify.com/sites/carbon-for-ibm-products/deploys/65c295b76edbb000080865fd
😎 Deploy Preview https://deploy-preview-4139--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 site configuration.

@paul-balchin-ibm paul-balchin-ibm marked this pull request as draft January 23, 2024 18:22
@paul-balchin-ibm paul-balchin-ibm linked an issue Jan 23, 2024 that may be closed by this pull request
4 tasks
@paul-balchin-ibm paul-balchin-ibm marked this pull request as ready for review January 24, 2024 17:35
@elycheea elycheea mentioned this pull request Jan 25, 2024
5 tasks
@elycheea elycheea added the area: migration ➡️ Migration of Security package to IBM Products label Jan 25, 2024
@paul-balchin-ibm paul-balchin-ibm marked this pull request as draft January 29, 2024 14:13
@paul-balchin-ibm paul-balchin-ibm marked this pull request as ready for review January 29, 2024 14:13
@paul-balchin-ibm paul-balchin-ibm self-assigned this Feb 2, 2024
@matthewgallo matthewgallo self-assigned this Feb 6, 2024
<ListItem>Item 5</ListItem>
</TruncatedList>
);
expect(document.querySelectorAll(`li`).length).toBe(2);
Copy link
Member

Choose a reason for hiding this comment

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

Use getByRole here to avoid using document.querySelector.

Possibly something like the follow:

expect(screen.getByRole('listitem').length).toBe(2);

<ListItem>Item 2</ListItem>
</TruncatedList>
);
expect(document.querySelector(`.${blockClass}`)).toHaveClass(className);
Copy link
Member

Choose a reason for hiding this comment

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

Use data-testid here to avoid document.querySelector.

<ListItem>Item 2</ListItem>
</TruncatedList>
);
expect(document.querySelector(`.${blockClass}`)).toBeInTheDocument();
Copy link
Member

Choose a reason for hiding this comment

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

Use data-testid here to avoid document.querySelector.

matthewgallo
matthewgallo previously approved these changes Feb 6, 2024
@matthewgallo matthewgallo added this pull request to the merge queue Feb 6, 2024
Merged via the queue into carbon-design-system:main with commit bc54d2f Feb 6, 2024
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New Component: TruncatedList
3 participants