[Bug]: Spacing utility classes not behaving as expected

[helenb]

Describe the bug

I think I have found a bug with the spacing utility classes in the design system.

Given the following HTML

<h1 class="ons-u-fs-3xl ons-u-mb-2xl ons-u-mb-s@m">
    Analysis page
</h1>

I would expect that with the above code my h1 would have a bottom margin of 2.5rem, below the medium breakpoint, and a bottom margin of 1 rem above the medium breakpoint.

However, instead I see the following styles in the inspector when viewing the page at a larger breakpoint than 740px:

I did wonder if I should be using one of the combination classes here, and searched the codebase for an example. I found for example the class ons-u-mt-l@2xs@m used in

design-system/src/components/footer/_macro.njk

Line 85 in af2ff28

<div class="ons-grid__col ons-col-4@m{{ ' ons-u-mt-l@2xs@m' if loop.index > 1 }}">

. This adds no margin-top styles at all, so I wonder if these are not working as expected?

Expected behaviour / outcome

<h1 class="ons-u-fs-3xl ons-u-mb-2xl ons-u-mb-s@m">
    Analysis page
</h1>

I would expect that with the above code my h1 would have a bottom margin of 2.5rem, below the medium breakpoint, and a bottom margin of 1 rem above the medium breakpoint.

<h1 class="ons-u-fs-3xl ons-u-mt-l@2xs@m">
    Analysis page
</h1>

I don't know exactly how this combination class is meant to work, but I expect it to add some margin-top styles, but instead no styles are applied.

List the steps necessary to reproduce the bug

I am seeing this bug when working on the https://github.com/ONSdigital/dis-wagtail repo, by applying the utility classes to any HTML in the codebase. This is using the design-system version 72.1.0. It should be repeatable in any repo using that version of the design system, by applying the relevant utility classes to some markup, and observing the resulting styles.

Additional context

No response

What version of the ONS Design System are you using?

72.1.0

What device(s) are you using?

Desktop

What operating system(s) are you using?

macOS

What browser(s) are you using?

Chrome

[MagdalenaLarge]

Hello @helenb , thank you for raising this issue. We will review this and come back to you as soon as possible. Thanks