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

Update button groups to use flexbox #2075

Merged
merged 1 commit into from
Oct 25, 2024
Merged

Update button groups to use flexbox #2075

merged 1 commit into from
Oct 25, 2024

Conversation

anselmbradford
Copy link
Member

@anselmbradford anselmbradford commented Oct 23, 2024

Fixes #1971

Changes

  • Wrap buttons that are together in a m-btn-group container.
  • Update the m-btn-group class to use flexbox.
  • Remove specific button group example callout, and add paragraph about button groups to intro section.

Testing

Compare button spacing across screen sizes on https://deploy-preview-2075--cfpb-design-system.netlify.app/design-system/components/buttons vs https://cfpb.github.io/design-system/components/buttons

Screenshots

Before:
Screenshot 2024-10-23 at 5 41 24 PM

Screenshot 2024-10-23 at 5 41 37 PM

After:

Screenshot 2024-10-23 at 5 41 15 PM Screenshot 2024-10-23 at 5 41 45 PM

Copy link

netlify bot commented Oct 23, 2024

Thanks for the improvements! Browse a preview of your changes using the link below.

Name Link
🔨 Latest commit fe857d0
🔍 Latest deploy log https://app.netlify.com/sites/cfpb-design-system/deploys/6719712f20128e0008824e3f
😎 Deploy Preview https://deploy-preview-2075--cfpb-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@anselmbradford anselmbradford merged commit 33a3d20 into main Oct 25, 2024
8 checks passed
@anselmbradford anselmbradford deleted the ans_btn_group branch October 25, 2024 21:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

cfpb-buttons: m-btn-group needs to add a row gap when buttons wrap
2 participants