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.

Sign up for GitHub

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

Jump to bottom

Add support for button groups #1349

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Add support for button groups #1349

wants to merge 6 commits into from
+81 −10

Conversation

jamesmockett
Copy link
Contributor

@jamesmockett jamesmockett commented Apr 11, 2024 •
edited

What are you changing?

  • Adds collapseUntil option to Inline layout component to allow collapsing into a single column below a given breakpoint.
  • Horizontally centre button content by default. (This only has an affect when a button is stretched beyond its intrinsic default width.)

Why?

  • This is to enable support for button groups where buttons are laid out horizontally at their default intrinsic width on larger viewports, but stretch to full width and stack horizontally on smaller viewports.

Images

Below tablet breakpoint

Screenshot 2024-05-14 at 17 54 49 Screenshot 2024-05-14 at 17 52 39

At tablet breakpoint

Screenshot 2024-05-14 at 17 53 08 Screenshot 2024-05-14 at 17 45 44

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Apr 11, 2024 •
edited

🦋 Changeset detected

Latest commit: 637d127

The changes in this PR will be included in the next version bump.

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

@jamesmockett jamesmockett self-assigned this Apr 11, 2024
@github-actions GitHub Actions
Copy link
Contributor

Tip

Once this PR is ready to go, add the run_chromatic label to run the Chromatic tests.

This saves us a lot of money by not running the tests before we need them.

@github-actions github-actions bot added the 📦 npm Affects a @guardian package on NPM label Apr 11, 2024
@jamesmockett jamesmockett force-pushed the jm/mobile-buttons branch 2 times, most recently from b55ebd7 to c03d0c0 Compare April 16, 2024 15:55
@jamesmockett jamesmockett force-pushed the jm/mobile-buttons branch 2 times, most recently from e6e93a0 to ceb81cd Compare May 14, 2024 14:08
@jamesmockett jamesmockett changed the title Allow buttons to stretch to full width on mobile Support button groups May 14, 2024
@jamesmockett jamesmockett marked this pull request as ready for review May 14, 2024 17:01
@jamesmockett jamesmockett requested review from a team as code owners May 14, 2024 17:01
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label May 14, 2024
@jamesmockett jamesmockett added the 🐥 Canaries Triggers canary releases of any packages with changesets waiting. label May 17, 2024
@jamesmockett jamesmockett requested review from a team as code owners May 17, 2024 10:09
@github-actions GitHub Actions
Copy link
Contributor

Note

The following canaries were published to NPM:

🐥

@jamesmockett jamesmockett removed the 🐥 Canaries Triggers canary releases of any packages with changesets waiting. label May 17, 2024
@SiAdcock SiAdcock changed the title Support button groups Add support for button groups May 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@jamesmockett jamesmockett

Labels
📦 npm Affects a @guardian package on NPM run_chromatic Runs chromatic when label is applied
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
1 participant
@jamesmockett