[BUG] Button with Text and Icon spacing needs amending

[KatiePUX]

Spacing needs amending to the icon button with text.

Task:

• Create design
• Update component
• Playback to team

[leighmaude]

Padding between text and icon area should be 15px. The padding between the icon and the outside edge of the button should be 18px (left AND right if no text is displayed)

https://www.figma.com/proto/LoZRmfjF5Bn5sr2ha4VC3j/UKHO-Figma-Design-System?page-id=2491%3A2938&node-id=7019-8534&viewport=2185%2C-712%2C1.68&t=WB5Zb6DafEqdQAVs-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=2555%3A4985

@KatiePUX

[KatiePUX]

Thanks @leighmaude for picking this up, we work in multiples of 4 at UKHO so would it work at 12px? Or was there another reason for the 15px?

[leighmaude]

Thanks @leighmaude for picking this up, we work in multiples of 4 at UKHO so would it work at 12px? Or was there another reason for the 15px?

I measured the spacing on the existing button in the DS. Can make it 12px and 16px respectively?

[KatiePUX]

Ah I see, its probably out of date, we changed to multiples of 4 a while back Naran currently working on this in the Design system, not all designs have been updated - especially if you're looking at the ones in Figma. Yeah 12 or 16px whichever you think looks best. Aim for everything in multiples of 4 going forward. Its on my to do list to update components with Dave next week actually as we have a lot to update.

[leighmaude]

12px padding between the text and the icon, 16px outside padding (l/r). Looks ok to me.

[KatiePUX]

That's perfect thanks @leighmaude, looks great