Button: Fix text and icon alignment

international-labour-organization / designsystem

A design system for the International Labour Organization

Apache License 2.0

1 stars 3 forks source link

Button: Fix text and icon alignment #1049

Open inesdgomes opened 5 months ago

inesdgomes commented 5 months ago

Hi @beatrizmartinmartins Could you please review how the button component has been implemented? https://ilo-ui-twig.netlify.app/?path=/docs/components-user-interface-button--button

It doesn't seem that padding and text/icon position is correct when compared to the designs: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=9-5&t=aNoNHhvVvYNKs9TX-0

Could you please list here exactly what needs to be changed by the developers?

beatrizmartinmartins commented 5 months ago

@inesdgomes basically the label needs to be inserted within a container that has a 4px top padding. This way the icon and the label look centered. Check the image attached:

inesdgomes commented 5 months ago

@justintemps Can we do this small fix? The text inside buttons is not vertically centered. This is visible with and without icon. See comment from Beatriz above.

justintemps commented 2 months ago

Hey @inesdgomes, this is currently blocked by #839. As soon as you can action that, we can do this.

inesdgomes commented 2 months ago

@justintemps #839 is done from a design point of view.

justintemps commented 2 months ago

@inesdgomes Ok, are the icon files in Figma?

inesdgomes commented 2 months ago

@justintemps Yes, it's all in Figma.