Update spacing within lists

international-labour-organization / designsystem

A design system for the International Labour Organization

Apache License 2.0

1 stars 3 forks source link

Update spacing within lists #1180

Open inesdgomes opened 2 months ago

inesdgomes commented 2 months ago

Update list component so it uses new typography spacing in the Foundations file. See comment here: https://www.figma.com/design/qr8jQnxqJkRJFQnVC5PmrB?node-id=1905-4#921545624

beatrizmartinmartins commented 2 months ago

@inesdgomes done. Can you review it? I will update the templates as well now

inesdgomes commented 2 months ago

Hi @beatrizmartinmartins A few things I'd like to discuss today:

Spacing between lists' lines seems too big. This may be useful in some cases, but not always. Let's look at this together: https://design-system.service.gov.uk/styles/lists/
We should probably add spacing info for lists in the Foundations file as well
Is spacing after list's heading 24px? Why does it seem more?

beatrizmartinmartins commented 2 months ago

@inesdgomes Changed what we talked about during the meeting:

Added the "long" and "short" version and included different paddings between them
Changed the default paddings from 24 to 16px although on the long version is still 24px

See here

inesdgomes commented 2 months ago

Thanks @beatrizmartinmartins. @justintemps We need this change to spacing in lists. This is to improve readibility in lists with a lot of text. See similar solution here: https://design-system.service.gov.uk/styles/lists/

We now have two sizing options:

Standard: 24px after the heading; 16px between list items;
Wide: 24px after the heading; 24px between list items;