Fix <wa-card> header and footer slot alignment (#1435)

* fixes to the card component

* linter fix

* updated doc css

* style touchup

* docs touchup

* remove docs.css change

* add changelog (and sneak in missing Figma entry)

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>

packages/webawesome/docs/docs/components/card.md

@@ -100,19 +100,20 @@ If using SSR, you need to also use the `with-media` attribute to add a media sec
 ```html {.example}
 <div class="wa-grid">
   <wa-card class="card-media">
-    <img
-      slot="media"
-      src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
-      alt="A kitten walks towards camera on top of pallet."
-    />
-    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    <div slot="media" class="wa-frame:landscape">
+      <img
+        src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
+        alt="A kitten walks towards camera on top of pallet."
+      />
+    </div>
+    This card has an image of a kitten walking along a pallet. 
   </wa-card>
   <wa-card class="card-media">
     <video slot="media" controls>
       <source src="https://uploads.webawesome.com/dog-with-glasses.mp4" />
       <p>Your browser doesn't support HTML video</p>
     </video>
-    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    This card has a video of a dog wearing shades.
   </wa-card>
 </div>
 
@@ -153,10 +154,10 @@ Use the `appearance` attribute to change the card's visual appearance.
 ### Orientation
 
 Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.
-<wa-callout>
-<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+
+:::info
 The `actions` slot is only available for the horizontal orientation
-</wa-callout>
+:::
 
 ```html {.example}
 <div class="wa-grid">
@@ -166,7 +167,7 @@ The `actions` slot is only available for the horizontal orientation
       src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       alt="A kitten sits patiently between a terracotta pot and decorative grasses."
     />
-    This is a kitten, but not just any kitten. This kitten likes walking along pallets.
+    This card has a horizontal orientation with media, body, and actions arranged side-by-side.
     <wa-button slot="actions" variant="neutral" appearance="plain"
       ><wa-icon name="ellipsis" label="actions"></wa-icon
     ></wa-button>

packages/webawesome/docs/docs/resources/changelog.md

@@ -27,6 +27,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
 - Added focus delegation to `<wa-button>` to ensure tabbing works properly when using `tabindex` [issue:1622]
 - Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
+- Added version 1.0.0 of the [official Web Awesome Figma Design Kit](/docs/resources/figma)
 - Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
 - Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
 - Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
@@ -41,6 +42,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
 - Fixed a bug in `<wa-popover>` and `<wa-tooltip>` that prevented dots and other valid ID characters from being used [issue:1648]
 - Fixed incorrect docs for the `wa-include-error` event which is dispatched by `<wa-include>` [issue:1663]
+- Fixed a bug in `<wa-card>` where slotted header and footer content wasn't properly aligned [pr:1435]
 - Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
 - Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
 - Improved Native Styles to use the `--wa-font-weight-code` design token

packages/webawesome/src/components/card/card.css

@@ -77,9 +77,7 @@
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: block;
   border-block-end-style: inherit;
   border-block-end-color: var(--wa-color-surface-border);
   border-block-end-width: var(--wa-panel-border-width);
@@ -92,15 +90,20 @@
 }
 
 .footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: block;
   border-block-start-style: inherit;
   border-block-start-color: var(--wa-color-surface-border);
   border-block-start-width: var(--wa-panel-border-width);
   padding: var(--spacing);
 }
 
+/* Push slots to sides when the action slots renders */
+.has-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 :host(:not([with-header])) .header,
 :host(:not([with-footer])) .footer,
 :host(:not([with-media])) .media {
@@ -115,7 +118,12 @@
     border-start-start-radius: var(--inner-border-radius);
     border-end-start-radius: var(--inner-border-radius);
     border-start-end-radius: 0;
-    object-fit: cover;
+
+    &::slotted(*) {
+      block-size: 100%;
+      inline-size: 100%;
+      object-fit: cover;
+    }
   }
 }
 

packages/webawesome/src/components/card/card.ts

@@ -69,15 +69,25 @@ export default class WaCard extends WebAwesomeElement {
     // Vertical Orientation
     return html`
       <slot name="media" part="media" class="media"></slot>
-      <header part="header" class="header">
-        <slot name="header"></slot>
-        <slot name="header-actions"></slot>
-      </header>
+
+      ${this.hasSlotController.test('header-actions')
+        ? html` <header part="header" class="header has-actions">
+            <slot name="header"></slot>
+            <slot name="header-actions"></slot>
+          </header>`
+        : html` <header part="header" class="header">
+            <slot name="header"></slot>
+          </header>`}
+
       <slot part="body" class="body"></slot>
-      <footer part="footer" class="footer">
-        <slot name="footer"></slot>
-        <slot name="footer-actions"></slot>
-      </footer>
+      ${this.hasSlotController.test('footer-actions')
+        ? html` <footer part="footer" class="footer has-actions">
+            <slot name="footer"></slot>
+            <slot name="footer-actions"></slot>
+          </footer>`
+        : html` <footer part="footer" class="footer">
+            <slot name="footer"></slot>
+          </footer>`}
     `;
   }
 }