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

Button bug fixes and visual updates #2374

Closed
wants to merge 18 commits into from
Closed

Conversation

langermank
Copy link
Contributor

@langermank langermank commented Sep 26, 2022

Note: These are breaking changes and should be considered for the next major release

Improvements

  • Add a block prop for full width
  • Add alignContent prop to align content to center or start
  • Use control sizing CSS variables
  • Use height over padding for more control over sizing
  • Refactor Button.Counter to better align with the other visual props
  • Rename visual props to better align with other Primer components

Visual updates

Addresses a few things missing from this discussion: https://github.com/github/primer/discussions/1016

  • Deprecate outline variant
  • Slightly more condensed padding
  • Improved invisible hover states (will update these colors when new functional colors are addressed)

Closes:

Screenshots

Please refer to the comprehensive Storybook stories- this is just a small sample of some of the changes

before after description
image image trailing action slot alignment
image image default padding, font-weight
image image large height
icon was blue image invisible svg color
image image trailing action locks right in full width

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link

changeset-bot bot commented Sep 26, 2022

🦋 Changeset detected

Latest commit: 79f8967

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 Major

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
Copy link
Contributor

github-actions bot commented Sep 26, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 79.23 KB (+0.36% 🔺)
dist/browser.umd.js 79.88 KB (+0.38% 🔺)

@langermank langermank temporarily deployed to github-pages September 26, 2022 21:00 Inactive
@langermank langermank temporarily deployed to github-pages September 29, 2022 01:51 Inactive
@langermank langermank changed the title [WIP] Button block alignment Button bug fixes and visual updates Oct 7, 2022
@langermank langermank added the major release breaking changes label Oct 7, 2022
@langermank langermank marked this pull request as ready for review October 7, 2022 03:22
@langermank langermank requested review from a team and siddharthkp October 7, 2022 03:22
/**
* The trailing icon comes after button content
*/
trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
Copy link
Member

Choose a reason for hiding this comment

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

Same question - should we add a unit test for it?

@langermank langermank temporarily deployed to github-pages December 5, 2022 20:06 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-2374 December 5, 2022 20:06 Inactive
@langermank
Copy link
Contributor Author

Closing in favor of #2714

@langermank langermank closed this Dec 20, 2022
@joshblack joshblack deleted the button-block-alignment branch January 19, 2023 16:50
@langermank langermank mentioned this pull request Jan 30, 2023
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
major release breaking changes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants