Button text doesn't wrap on small screens

Patterns Report a bug
1

Currently button text doesn’t wrap on smaller screens which causes buttons to be cut off.
Suggest a simple fix. Change .nsw-button white-space:nowrap; to white-space:normal;

Currently buttons have a 1rem margin-right to allow multiple buttons to sit alongside each other. This causes larger right spacing for single buttons on smaller screens. Are we able to remove this margin if there’s only a single button? Perhaps we could use the :last-of-typeselector to remove the margin-right?

image
image986×531 162 KB

2

Hi Adham,

Looks like we need to make sure the button doesn’t extend beyond the parent element. I’ll check in with Anna about best practice - last-of-type sounds like a good idea - we’ll test what happens when the buttons themselves need to wrap.

We’re on it! :slight_smile:

1 Like
3

Hi @tjharrop - Any progress on this or do you have an ETA for when it might make it to the top of the list? Thanks, Jennifer

4

Hi @jennifer.weiley and @adham we have fixed this issue starting from version 2.3.1.

1 Like
5

Thanks @benjamin. Also noticed that when buttons are side-by-side in desktop / stacked in mobile, they are different widths. Have you considered forcing the full width for CTA buttons in mobile?

image
image882×1768 139 KB

6

Hi @jennifer.weiley what we could do is add a full-width variant to the button component instead of forcing it to be full-width globally because this might not fit all use cases.

7

Good thinking @benjamin. I was wondering however how this might work from desktop to mobile and found an example on the NZ site, where the desktop size of the button is based on the text and the mobile fits to width. This might work, together with allowing text to wrap where necessary.

nz-govt-button-desktop
nz-govt-button-desktop1378×2044 256 KB
nz-govt-button-full-width-mobile
nz-govt-button-full-width-mobile878×1764 122 KB

8

Yeah exactly what I was thinking. The team will have a look at this and keep you posted.

Thanks for the contribution.

1 Like
9

Hi @benjamin - our Dev team has also been asked to deliver this. Have you made any progress? If you haven’t, we’d be happy to share with you if we have something to show from the upcoming sprint. cc @tjharrop

10

Hi @jennifer.weiley we have added this in our sprint and @anna.yeshtukova will be working on it. Looking into getting in live next week for our next release.

If ever there is something else your team would like to share, they may fork our repo and create a pull request for it. Appreciate the help.

1 Like
11

That’s excellent news @benjamin and we’re definitely keen to collaborate and share. Let us know when it’s done and we’ll grab it for nsw.gov.au. And do get in touch to check out anything new we’ve delivered or working on that you might be interested in.

12

Hi @jennifer.weiley we just released v2.9.0 with the new full-width option for the button.
https://nswdesignsystem.surge.sh/components/button/index.html

1 Like