fix(card): collapse margins (#1326)

Closes #1324

.changeset/rh-card-collapse-margins.md

@@ -0,0 +1,24 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: collapses margins between header, body, and footer
+
+NOTE that this changes the default styling of the `header`, `body`, and `footer`
+CSS Shadow Parts. They previously used `padding` for layout, and now use `margin`.
+If you modified their padding via the `::part` selector, you will need to update your CSS
+
+Before:
+```css
+.special-card::part(header) {
+  padding: var(--rh-space-sm);
+}
+```
+
+After:
+
+```css
+.special-card::part(header) {
+  margin-block-start: var(--rh-space-sm);
+  margin-inline: var(--rh-space-sm);
+}
+```

elements/rh-card/demo/grid.html

@@ -8,7 +8,7 @@ <h2 slot="header">Grid Card</h2>
   </rh-card>
 
   <rh-card>
-    <h2 slot="header">Grid Card with More Content</h2>
+    <h2 slot="header">Longer Content</h2>
     <p>
       In such a case, all of the grid card's footers should be
       vertically aligned. Meaning, they should always rest in
@@ -31,6 +31,31 @@ <h2 slot="header">Grid Card</h2>
       <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
     </rh-cta>
   </rh-card>
+
+  <rh-card>
+    <p>This card has no header and short body content.</p>
+    <rh-cta priority="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">No footer, More Content</h2>
+    <p>
+      In such a case, all of the grid card's footers should be
+      vertically aligned. Meaning, they should always rest in
+      the bottom of their card. Even when one card has much more
+      content than its neighbour, and thus fill more vertical space
+      in it's body, the footers should still be aligned.
+    </p>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">No body</h2>
+    <rh-cta priority="primary" slot="footer">
+      <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
+    </rh-cta>
+  </rh-card>
 </div>
 
 <script type="module">
@@ -43,5 +68,6 @@ <h2 slot="header">Grid Card</h2>
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: var(--rh-space-lg, 16px);
+  max-width: 1058px;
 }
 </style>

elements/rh-card/rh-card.css

@@ -1,36 +1,10 @@
-:root {
-  display: flex;
-  flex-direction: column;
-}
-
 article {
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-[part="header"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rh-space-lg, 16px);
-}
-
-[part="body"] ::slotted(:not([slot]):first-of-type) {
-  margin-block-start: 0;
-}
-
-[part="body"] ::slotted(:not([slot]):last-of-type) {
-  margin-block-end: 0;
-}
-
-[part="footer"] {
-  display: flex;
-  gap: 0.5em;
-  inset-block-end: 0;
-  margin-block-start: auto;
-}
-
 .empty {
   display: none;
 }
@@ -50,55 +24,79 @@ article {
   flex-direction: column;
   justify-items: flex-start;
   overflow: hidden;
-  border:
-    var(
-        --_border,
-        var(--_border-width, 1px)
-        var(--_border-style, solid)
-        var(
-          --_border-color,
-          var(--rh-color-border-subtle-on-light, #c7c7c7)
-        )
-      );
-  background-color: var(--_background-color, var(--rh-color-surface-lightest, #ffffff));
   border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px));
-  color: var(--_color, var(--rh-color-text-primary-on-light, #151515));
   font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
   line-height: var(--rh-line-height-body-text, 1.5);
+  border-style: solid;
+  border-width: var(--rh-border-width-sm, 1px);
+}
+
+#container,
+#container.light {
+  color: var(--rh-color-text-primary-on-light, #151515);
+  background-color: var(--rh-color-surface-lightest, #ffffff);
+  border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
 }
 
 #container.dark {
-  --_background-color: var(--rh-color-surface-darkest, #151515);
-  --_color: var(--rh-color-text-primary-on-dark, #ffffff);
-  --_border-color: var(--rh-color-border-subtle-on-dark, #707070);
+  background-color: var(--rh-color-surface-darkest, #151515);
+  color: var(--rh-color-text-primary-on-dark, #ffffff);
+  border-color: var(--rh-color-border-subtle-on-dark, #707070);
+}
+
+#header,
+#body,
+#footer {
+  margin-inline: var(--rh-space-xl, 24px);
 }
 
 #header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rh-space-lg, 16px);
   box-sizing: border-box;
   font-size: var(--rh-card-header-font-size, var(--rh-font-size-heading-sm, 1.5rem));
-  padding-block: var(--rh-space-lg, 16px);
-  padding-inline: var(--rh-space-xl, 24px);
+  margin-block-start: var(--rh-space-lg, 16px);
 }
 
 #body {
-  padding: var(--rh-space-xl, 24px);
+  margin-block-start: var(--rh-space-2xl, 32px);
+  margin-block-end: var(--rh-space-xl, 24px);
 }
 
 #footer {
-  padding: var(--rh-space-xl, 24px);
+  display: flex;
+  gap: 0.5em;
+  margin-block-start: auto;
+  margin-block-end: var(--rh-space-xl, 24px);
+}
+
+#header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+  margin: unset;
+  font-weight: var(--rh-font-weight-body-text-medium, 500);
+}
+
+#body ::slotted(:not([slot]):first-of-type) {
+  margin-block-start: 0;
+}
+
+#body ::slotted(:not([slot]):last-of-type) {
+  margin-block-end: 0;
 }
 
 @media screen and (min-width: 768px) {
+  #header,
+  #body,
+  #footer {
+    margin-inline: var(--rh-space-2xl, 32px);
+  }
+
+  #header,
   #body {
-    padding: var(--rh-space-2xl, 32px);
+    margin-block-start: var(--rh-space-2xl, 32px);
   }
 
   #footer {
-    padding: var(--rh-space-2xl, 32px);
+    margin-block-end: var(--rh-space-2xl, 32px);
   }
 }
-
-#header ::slotted(:is(h1, h2, h3, h4, h5, h6)) {
-  margin: unset;
-  font-weight: var(--rh-font-weight-body-text-medium, 500);
-}