TreeView: Add `truncate` prop by TylerJDev · Pull Request #5122 · primer/react

TylerJDev · 2024-10-14T21:17:21Z

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

Adds truncate prop to TreeView. There currently isn't a way to wrap text inside TreeView.Itemwithout 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

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-10-14T21:17:24Z

🦋 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 · 2024-10-14T21:17:53Z

👋 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 · 2024-10-14T21:20:10Z

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% 🔺)

primer-integration · 2024-10-21T16:54:51Z

🟢 golden-jobs completed with status success.

primer-integration · 2024-10-21T16:55:03Z

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

langermank · 2024-11-05T19:02:35Z

 'aria-labelledby': ariaLabelledby,
 children,
 flat,
+ truncate = true,


@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?

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 😅

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

langermank

🚀

TylerJDev · 2024-11-06T13:56:42Z

Updated snapshots for storybook story changes!

Add "opt in" prop for TreeView to opt in to truncation of text
bb1a4bd

github-actionsBot 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

TylerJDev temporarily deployed to github-pages October 14, 2024 21:19 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 October 14, 2024 21:19 Inactive

Merge branch 'main' into tylerjdev/truncate-opt-in-treeview
da50a14

TylerJDev temporarily deployed to github-pages October 21, 2024 16:47 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 October 21, 2024 16:47 Inactive

TylerJDev temporarily deployed to github-pages October 21, 2024 16:50 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 October 21, 2024 16:51 Inactive

Make non-truncate opt-in
ffe6535

TylerJDev force-pushed the tylerjdev/truncate-opt-in-treeview branch from 111509e to ffe6535Compare November 5, 2024 16:40

TylerJDev temporarily deployed to github-pages November 5, 2024 16:42 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 November 5, 2024 16:42 Inactive

Add extra CSS, stories
30c8e79

TylerJDev temporarily deployed to github-pages November 5, 2024 17:08 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 November 5, 2024 17:08 Inactive

TylerJDev changed the title ~~TreeView truncation opt-in [WIP]~~TreeView: Add truncate propNov 5, 2024

Add changeset
02aefd7

TylerJDev marked this pull request as ready for review November 5, 2024 17:44

TylerJDev requested a review from a team as a code owner November 5, 2024 17:44

TylerJDev requested a review from joshblack November 5, 2024 17:44

TylerJDev temporarily deployed to github-pages November 5, 2024 17:46 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 November 5, 2024 17:46 Inactive

langermank reviewed Nov 5, 2024
View reviewed changes

langermank approved these changes Nov 5, 2024
View reviewed changes

TylerJDev temporarily deployed to github-pages November 5, 2024 21:48 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 November 5, 2024 21:49 Inactive

Add back prop to story
33c63ac

TylerJDev temporarily deployed to github-pages November 6, 2024 13:09 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 November 6, 2024 13:10 Inactive

TylerJDev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 6, 2024

test(vrt): update snapshots
dc84f37

primerBot requested a review from a team as a code owner November 6, 2024 13:45

primerBot requested a review from maximedegreve November 6, 2024 13:45

github-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 6, 2024

primerBottemporarily deployed to github-pages November 6, 2024 13:46 Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 November 6, 2024 13:47 Inactive

TylerJDev added this pull request to the merge queue Nov 6, 2024

TylerJDev removed this pull request from the merge queue due to a manual request Nov 6, 2024

Fix story typos
ed1bd8c

TylerJDev temporarily deployed to github-pages November 6, 2024 14:05 — with GitHub Actions Inactive

github-actionsBottemporarily deployed to storybook-preview-5122 November 6, 2024 14:05 Inactive

TylerJDev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 6, 2024

test(vrt): update snapshots
19e2ac9

github-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 6, 2024

primerBotdeployed to github-pages November 6, 2024 14:27 View deployment

github-actionsBottemporarily deployed to storybook-preview-5122 November 6, 2024 14:28 Inactive

TylerJDev added this pull request to the merge queue Nov 6, 2024

TylerJDev mentioned this pull request Nov 6, 2024
TreeView: Add note on truncation primer/design#889
Merged

Merged via the queue into main with commit e021a8fNov 6, 2024

TylerJDev deleted the tylerjdev/truncate-opt-in-treeview branch November 6, 2024 14:49

primerBot mentioned this pull request Nov 6, 2024
Release tracking (37.4.0) #5239
Merged

siddharthkp mentioned this pull request Nov 8, 2024
Release Tracking (Nov 4 - Nov 15) #5217
Closed
4 tasks

Navigation Menu

Uh oh!

TreeView: Add `truncate` prop - #5122

TreeView: Add `truncate` prop#5122
TylerJDev merged 11 commits into
mainfrom
tylerjdev/truncate-opt-in-treeview

TylerJDev commented Oct 14, 2024•
edited
Loading

Uh oh!

changeset-botBot commented Oct 14, 2024•
edited
Loading

Uh oh!

github-actionsBot commented Oct 14, 2024

Uh oh!

github-actionsBot commented Oct 14, 2024•
edited
Loading

Uh oh!

primer-integrationBot commented Oct 21, 2024•
edited
Loading

Uh oh!

primer-integrationBot commented Oct 21, 2024

Uh oh!

langermankNov 5, 2024

Uh oh!

TylerJDevNov 5, 2024

Uh oh!

langermankNov 5, 2024

Uh oh!

langermank left a comment

Uh oh!

TylerJDev commented Nov 6, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

TylerJDev commented Oct 14, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot commented Oct 14, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Oct 14, 2024

Uh oh!

github-actionsBot commented Oct 14, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

primer-integrationBot commented Oct 21, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

primer-integrationBot commented Oct 21, 2024

Uh oh!

langermankNov 5, 2024

Choose a reason for hiding this comment

Uh oh!

TylerJDevNov 5, 2024

Choose a reason for hiding this comment

Uh oh!

langermankNov 5, 2024

Choose a reason for hiding this comment

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

TylerJDev commented Nov 6, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

TylerJDev commented Oct 14, 2024•
edited
Loading

changeset-botBot commented Oct 14, 2024•
edited
Loading

github-actionsBot commented Oct 14, 2024•
edited
Loading

primer-integrationBot commented Oct 21, 2024•
edited
Loading