Update padding & spacers on pfe-card

[starryeyez024]

We need clear definitions around when to use which one of these variables:

  container-spacer:              16px,
  container-padding:             16px,
  content-spacer:                24px,

There seems to be some mixnmatch in some components but my general understanding is:

• Container spacer is used to align UI items in components, like the chevron in an accordion header
• Container padding is used between the edges of containers and the content they hold
• Content spacer is used between sections within containers, like card header & card body, or band body & band footer.

Can anyone either tell me if these assumptions are right or wrong? And let's add that to the docs and clean up some of the outliers, like for example this is in the _extends.scss:

%container {
    position: relative;
    display: block;
    width: 100%;
    padding: #{pfe-var(container-spacer)};
}

(and I think that should be container-padding). Thanks!

[castastrophe]

+1

My assumption was similar:

• Container spacer is used to between two container elements like two cards in a grid or stack
• Container padding is used inside a container such as the padding between the edge of the card and the content inside it
• Content spacer is used between sections within containers, like card header & card body, or band body & band footer

🤷‍♀

[starryeyez024]

@castastrophe I think i agree with the first two bullets, but I would have guessed that content spacer is the default amount of space between things like paragraphs, or maybe between two elements in a component, like between the icon & text in an icon-panel.

It does beg the question of the space between regions in a layout, vs. the space between components in the same region of a layout. Do we need a 4th variable, like container-region-spacer or something?

[starryeyez024]

Adding the link here to the card XD file

[starryeyez024]

Adjusted the image to indicate an area of the card that we have questions about.. is that a container-spacer or container-padding variable?

[starryeyez024]

Also related to spacing; on the card mockups: https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/930cbfcc-d26a-49cc-85e9-30e360dde698/Card-bar

It shows the distance between the card header & card body as 32px, but the distance between the card body & card footer is 26px. Why are they different?

It also says there are 26px between the paragraph and the CTA, where does 26px come from? The spacers file only lists 24px.

cc @coreyvickery

[coreyvickery]

@starryeyez024

Unlike Sketch, XD doesn't apply extra height to text layers when the line height changes. For example, in Sketch, a single line of 16pt type with a default line height = 21px; with a line height of 24 = 24px. I've been told that this is the same in code.

In XD, sometimes I have to draw invisible rectangles around text layers which represents text's true height in code. In the examples below, the CTA is 18pts and 23px tall in XD, but its true height is 27px tall because the line height is 27 (1.5). I also did this to the CTA and Button text layers in XD to compensate for the text height when we compared my designs to Allie's in Sketch way back when.

XD app

The pink area represents the text layer height in XD; the red border represents the invisible rectangle in XD; the thin green border represents the true height of the text layer in code.

XD link

You have to know where to hover to find the invisible rectangle, but it's there.

This is a very long-winded way of saying that the space in between the paragraph and CTA should be 24px.

---

It shows the distance between the card header & card body as 32px, but the distance between the card body & card footer is 26px. Why are they different?

What did you mean by this? It should be 32px all around, even under the bar.

[starryeyez024]

@coreyvickery thanks for the explanation, we'll try to find the hidden blue boxes from now on. :)

To elaborate on my question, it was noting that the space between header & body regions is 32px:

but the space between body and footer regions is 24px:

Based on your response, you're kind of answering this question:

as "card padding", which is 32px. It seems as though a card header with a new background color is almost like a separate connected container, because it has its own unique padding. And the 24px is the container-spacer (space between regions). If that's true, I would extend the question to the other card mockups, which show 16px between the header & body regions; should that be 24px?

This deviates from how we have traditionally thought of the card header, body, and footer regions as equals. We have not usually changed the left/right padding on the header because sometimes the card header has a background color and sometimes it doesn't. We do adjust the space between the header and body if there is no background color though, so we could apply similar logic to support the reduced side padding. https://url.corp.redhat.com/6c8639b

Would you say that the smaller padding on the new card header designs is tied to the fact that there is a background color on the header? Asked another way, does a card header region cease to exist (visually) if it doesn't have a different background color?