react icon indicating copy to clipboard operation
react copied to clipboard

Add `truncation` prop to `Button`

Open langermank opened this issue 1 year ago • 2 comments

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)

langermank avatar Apr 22 '24 23:04 langermank

🦋 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

changeset-bot[bot] avatar Apr 22 '24 23:04 changeset-bot[bot]

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

github-actions[bot] avatar Apr 22 '24 23:04 github-actions[bot]