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.

Sign up for GitHub

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

Jump to bottom

TreeView: Add truncate prop #5122

Merged
merged 11 commits into from
Nov 6, 2024
Merged

TreeView: Add truncate prop #5122

merged 11 commits into from
Nov 6, 2024

Conversation

TylerJDev
Copy link
Contributor

@TylerJDev TylerJDev commented Oct 14, 2024 •
edited
Loading

Context https://github.com/github/primer/issues/3481

Adds truncate prop to TreeView. There currently isn't a way to wrap text inside TreeView.Item without doing it manually. This adds a prop which allows you to add this behavior directly via the prop, instead of doing it manually through custom styles.

Changelog

New

  • Adds truncate prop to TreeView

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Oct 14, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 19e2ac9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 14, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 October 14, 2024 21:19 Inactive
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 14, 2024 •
edited
Loading

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 98.58 KB (+0.09% 🔺)
packages/react/dist/browser.umd.js 98.94 KB (+0.03% 🔺)

@github-actions github-actions bot temporarily deployed to storybook-preview-5122 October 21, 2024 16:47 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 October 21, 2024 16:51 Inactive
@primer-integration
Copy link

primer-integration bot commented Oct 21, 2024 •
edited
Loading

🟢 golden-jobs completed with status success.

@primer-integration
Copy link

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/348023

@TylerJDev TylerJDev force-pushed the tylerjdev/truncate-opt-in-treeview branch from 111509e to ffe6535 Compare November 5, 2024 16:40
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 November 5, 2024 16:42 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 November 5, 2024 17:08 Inactive
@TylerJDev TylerJDev changed the title TreeView truncation opt-in [WIP] TreeView: Add truncate prop Nov 5, 2024
@TylerJDev TylerJDev marked this pull request as ready for review November 5, 2024 17:44
@TylerJDev TylerJDev requested a review from a team as a code owner November 5, 2024 17:44
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 November 5, 2024 17:46 Inactive
langermank
langermank reviewed Nov 5, 2024
View reviewed changes
packages/react/src/TreeView/TreeView.tsx
@@ -282,6 +289,7 @@ const Root: React.FC<TreeViewProps> = ({
'aria-labelledby': ariaLabelledby,
children,
flat,
truncate = true,
Copy link
Contributor

Choose a reason for hiding this comment

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

@TylerJDev do you think it might make more sense to make this false by default? Just wondering if this is kind of a breaking change. Have you run an integration test?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

For this, I set it to true to keep the default behavior of the text truncating when not using the prop. When using it with false, it will wrap instead. The new behavior should only be opt-in, so that we can release this under a non breaking change.

Let me know if you think we should change the prop name (e.g. shouldNotTruncate, wrap). Not sure if truncate is confusing or not 😅

Copy link
Contributor

Choose a reason for hiding this comment

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

OH sorry I totally read the CSS wrong. Awesome! LGTM

langermank
langermank approved these changes Nov 5, 2024
View reviewed changes
Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

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

🚀

@github-actions github-actions bot temporarily deployed to storybook-preview-5122 November 5, 2024 21:49 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 November 6, 2024 13:10 Inactive
@primer primer bot requested a review from a team as a code owner November 6, 2024 13:45
@primer primer bot requested a review from maximedegreve November 6, 2024 13:45
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 November 6, 2024 13:47 Inactive
@TylerJDev
Copy link
Contributor Author

Updated snapshots for storybook story changes!

@TylerJDev TylerJDev added this pull request to the merge queue Nov 6, 2024
@TylerJDev TylerJDev removed this pull request from the merge queue due to a manual request Nov 6, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-5122 November 6, 2024 14:05 Inactive
@TylerJDev TylerJDev added this pull request to the merge queue Nov 6, 2024
@TylerJDev TylerJDev mentioned this pull request Nov 6, 2024
Merged
Merged via the queue into main with commit e021a8f Nov 6, 2024
43 checks passed
@TylerJDev TylerJDev deleted the tylerjdev/truncate-opt-in-treeview branch November 6, 2024 14:49
@primer primer bot mentioned this pull request Nov 6, 2024
Merged
@siddharthkp siddharthkp mentioned this pull request Nov 8, 2024
Closed
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank langermank approved these changes

@maximedegreve maximedegreve Awaiting requested review from maximedegreve maximedegreve is a code owner automatically assigned from primer/design-reviewers

Assignees
No one assigned
Labels
integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@TylerJDev @langermank