Utility or class to add .5rem margin-top on images

[lyubomir-popov]

We often need a space above the image (only the image) in layouts like these:

We have this locally in c.com, would be nice to have it documented and upstreamed to vanilla:

.p-image-wrapper { padding-top: $spv--small; }

[bartaz]

This one bugs me a lot and I don't know how to approach it.

Creating a component for that purpose sounds weird. A utility/modifier on images may be a workaround, we have couple p-image--something class names currently (although by the look of them, they will be dropped soon).

The issue I see is that this "top padding" is not really part of the image, it should be part of the rule component because it comes from it and it's a bit counterintuitive that instead of rule having bottom margin, we force some elements (only images?) after it to add top margin (that we don't use anywhere else).

I experimented before with adding top margin to all images but this obviously causes some issues (especially when small images are used in lists, etc).

[lyubomir-popov]

The issue is this: All text elements and components (headings, tables, accordions, tabs, etc) comes with give or take .5rem of spacing already applied (the vertical rhythm nudges). Non text blocks of content (images, videos, etc) do not have that, so they sit a little higher up. So we need something to add that amount of space to those blocks of content, but not further displace text. To me that seems a clearcut case for having a class of some sort to do it. It can't be an element qualifier as that's too broad.

[bartaz]

@lyubomir-popov maybe a stupid question, but why do text elements have it built-in? Maybe we could remove it from text elements (move them up 0.5rem, so they will still be on the baseline) and then the rule component can simply have bottom margin?

[lyubomir-popov]

Its the nudges @bartaz

vanilla-framework/scss/_settings_spacing.scss

Line 38 in 564339f

$nudges: (

They are close to, but not precisely .5rem. So for those that are .4rem (p for example) you'd need to do -.1rem padding, and paddings can't be negative. You could maybe do margin-top: -.5rem, but that won't work reliably due to margin-collapse. And if anything above the text has no margin-bottom of its own, it might get too close to the text. So there's no reliable, safe way of negating that on text elements. Much simpler to do it on the very few images or videos we add to the page. It is something we've been doing on canonical.com, it is easy to spot in reviews and fix, and takes next to no effort.

[bartaz]

I understand that it's "next to no effort" to add a class name or a wrapper element to an image. The issue is that there is no nice way to implement it within a design system.

It's not a good component, because it's only purpose is to nudge an image couple pixels down.
It's not a good util, because it only makes sense for images.

So maybe it's a "variant" class name on an image. But will it only be images?

You mentioned @lyubomir-popov other block components that may need that. Are there any examples? I guess I've seen cards under horizontal rule, anything else may go there? Would other components have such "nudge" built in, or would they need an option for it as well?

[lyubomir-popov]

applies to videos as well. not necessarily images only

[danielmutis]

@lyubomir-popov to provide design guidelines for these spacing rules. Further discussion with @bartaz

[bartaz]

Scope:

We could implement it as a new component called "media container", possibly as simple as:

.p-media-container {
   margin-top: $sp-unit;
}

It should be documented on Images page https://vanillaframework.io/docs/patterns/images.
An example should show an image wrapped in this new container placed under a rule component:

<hr class="p-rule" />
<div class="p-media-container">
   <img … />
</div>

possibly should be mentioned on Rule component page, as it's mostly needed for situations when we place an image under a rule component (https://vanillaframework.io/docs/patterns/rule)