Describe spacing between components

[inesdgomes]

Currently in the ILO website:

• Headlines / Margin-bottom: 55px
• Components / Padding-bottom: 64px

Should it be?

• Headlines / Margin-bottom: 64px (this is not applied everywhere in the designs - what are the exceptions?)
• Components / Padding-bottom: 112px (it seems this is not applied everywhere in the designs - what are the exceptions?)

Possible exceptions:

• Headlines / Margin-bottom for a) accordion, b) content tabs; c) links list; d) profile; e) Social media: 24px? They have different spacing in the designs

We need to ensure whatever spacing is defined here kind of matches what we define for headings in the rich text. See https://github.com/international-labour-organization/designsystem/issues/1059

[beatrizmartinmartins]

@inesdgomes Hey! So this depends a lot on the template. Sometimes the accordion for example, they way it is displayed, needs one top or bottom spacing or another. This doesn't really depends on the components, but rather on the template. We can include a few spacings, like the SectionDivider one but I don't feel like we can do that on a lot of places honestly.

For example on this screenshot, the SectionDivider can have a top spacing and bottom spacing that is different because it's a divider, but for example if we have a top and bottom spacing on the button of 16px for example, then we would need to make adjustments on every single page for this to work.

If you'd like we can talk about it during our meeting

[beatrizmartinmartins]

I have encountered some problems while searching this task, but we can agree on the following as of now: -SectionDivider: Desktop Top 64px, Gap 64px, Bottom 112px Mobile Top 56px, Gap 56px, Bottom 80px

I will update this task during today. @inesdgomes

[beatrizmartinmartins]

I took a look at all the components after a long time and there's actually not a single component that follows any type or form of guidelines like 112px whatsoever. On every instance there's multiple components that don't follow that approach. Should we not rely on general padding-bottoms for components? Should it depend on the template? I think that would be the best approach honestly @inesdgomes

[inesdgomes]

Hi @beatrizmartinmartins Can the spacing be changed so there is some sort of norm for components across all templates? Otherwise, I think we can go with rules for specific templates, yes. I'm checking with the developers.

[inesdgomes]

Hi @beatrizmartinmartins Just to confirm that the developers would prefer to have consistent spacing rules across templates, but if we need to make exceptions for specific templates, that's fine - as long as the exceptions are clear.

[beatrizmartinmartins]

@inesdgomes I will make adjustments when required and point the specific templates today. You will have this task done by tomorrow, sorry for the delay!

[beatrizmartinmartins]

@inesdgomes Gathered all the information and I'm making all the changes on the Templates file on a new branch wich it will be finished today (I will merge it when I finish). In terms of spacing, this is what we should have defined:

• All components will have 64px margin bottom (Desktop) and 56px (Mobile). If we have 112px, it just gets way too big between components.
• All headlines will have 64px margin bottom (Desktop) and 56px (Mobile).

Exceptions:

• RichText: Whenever we have content and some components inside of it, after the headlines, we have 24px (16 on mobile) just like on the richtext component. Example here

• SectionDivider: Has a 64px padding-top and a 64px padding-bottom predefined, so this means that everything within, needs to be placed inside of it.

• Accordions: 0px margin-bottom.

• ListLinks: 0px margin-bottom.

• Buttons: No margins. Mainly because Buttons are placed within a container that already has some bottom spacing and margin. For example this button doesn't need any padding because it is placed within the SectionDivider padding-bottom and the Feature Card margin-bottom. It also has some exceptions where the button has some top and bottom spacing on mobile like on refine results, but I think we can solve this by having a container with top and bottom margin, so that way the button doesn't need any padding.

• Forms: All forms components have a 40px spacing-bottom. (Dropdown, Date Picker, Text Input, Text Area & File Upload) except the Search form that has 0px like on the image above

• Refine Results and any type of search page: Maintain the same paddings and structure as we have right now.

-Detail Card: 0px margin-bottom. It should go inside a SectionDivider type of container that has 64px (56px on mobile) of bottom spacing.

• Profile: 40px padding-bottom (24px in mobile)
• SocialMedia: same as the components (64 for desktop and 56 for mobile) except on the footer, which should have the same spacing as defined on the footer component.

In terms of left and right spacing, is this predefined by the platform grids? Or can we set some pixels for paddings as well? Examples of grids:

What do you think @inesdgomes ? Does this work?

[beatrizmartinmartins]

@inesdgomes Merged it to main file and included some components above. ContentTabs doesn;t need a specific spacing. Also, I'm finishing today all the other templates because there where a lot of changes on the components lately, that's why it might look weird, but today we will have them finalized.

[beatrizmartinmartins]

@inesdgomes finished all the templates according to the latest changes. Also, there where a lot of components that have changed on the templates due to the recent updates made to them.

[inesdgomes]

Hi @beatrizmartinmartins Thanks for all the work on this. I know it takes a lot of time to adjust all the templates. I left some comments in the designs, but some of the main things I'm not so convinced about are:

• The rule_All headlines will have 64px margin bottom (Desktop) and 56px (Mobile)._It doesn't seem that's always the case, neither it should be, so we need to be clearer about the exceptions.
• The section divider spacing rule doesn't work on many of the templates (Publication, Event, etc.) as it creates too much space between components. In most cases, it seems there should only be a space of 64px between components, rather than 64px * 2.

[inesdgomes]

@beatrizmartinmartins to transfer guidelines on spacing between components and exceptions to Templates file.

[inesdgomes]

Hi @beatrizmartinmartins Any chance we could have this done between today and tomorrow? Thanks!

[beatrizmartinmartins]

@inesdgomes while working on this task, I realized, there's some things that look weird. For example on this page, the different headings are H3, so they are not placed within a SectionDivider are they? On the other hand, on this one, they are inside a SectionDivider with an H2. As part of the guidelines we specified on this task a while ago, we said that after the headline on a section divider, we should include a 64px spacing. This has some issues on these two instances, where on one is a SectionDivider, and the other one is not. What should we do here? Make them all SectionDividers?

[beatrizmartinmartins]

@inesdgomes Included the exceptions on the Templates file (as well as new exceptions with links to the correspondant frame).

Also, I just checked what you mentioned on July 17th about the Section Divider and I think we need to talk about it. Are these SectionDivider or RichText?.

Templates are updated with the latest exceptions created and components changes.

[inesdgomes]

Hi @beatrizmartinmartins I replied to your questions in this template. Let me know it it's clear. In a nutshell, we shouldn't skip heading levels, so there shouldn't be H3 after a H1. That was the main objective of this ticket.

As for your comment: Included the exceptions on the Templates file (as well as new exceptions with links to the correspondant frame). I don't know where to find this, sorry, I may be missing something here. I think we talked about having a document explaining the spacing logic and exceptions. See this comment.

[beatrizmartinmartins]

@inesdgomes all the exceptions are here at the bottom of the page. It just made more sense to have everything under the same file so it's easier to look for. Maybe I didn't gave you the correct link to look at.

I will make the changes with the comments you made. Now it's much more clear if we need to use a RichText or a SectionDivider as I wasn't too sure what that was or needed to be. Expect a new comment here once they are done.

[inesdgomes]

Hi @beatrizmartinmartins A few comments in the Read Me file: https://www.figma.com/design/TnVsWy6VobbHzZdbHdx3Rb/ILO-global-website?node-id=3980-44684&node-type=canvas&t=FwqVEiExHazEmTrT-0

Let's talk about this today.