Add `truncation` prop to `Button`
This has been an ongoing issue with the Button component across all frameworks. Previously, we had hoped to introduce this change that allows button labels to wrap by default if the label string is too long. However, after testing this behind a feature flag for a bit we continued to find random issues across dotcom as the change can lead to unpredictable layout regressions.
In Rails, to unblock a few open accessibility issues I decided to introduce the change with a param. This is a boolean, but I could refactor it to be closer to the prop I'm proposing here in React.
The only way to make this change the default is with a major release, and even then we would need to babysit it and individually fix each area where layout breaks. I don't think this is realistic, and feel like introducing it as a prop should be sufficient for unblocking teams and mitigating accessibility issues.
Closes https://github.com/github/primer/issues/3123
Rollout strategy
- [ ] Patch release
- [x] 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 detected
Latest commit: 8e0f700466c552869fe5df3d32450db9a690853f
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
size-limit report 📦
| Path | Size |
|---|---|
| packages/react/dist/browser.esm.js | 89.62 KB (+0.18% 🔺) |
| packages/react/dist/browser.umd.js | 89.93 KB (+0.23% 🔺) |