diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md index bbca071f4..45f10a62d 100644 --- a/packages/webawesome/docs/docs/components/card.md +++ b/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}
- A kitten walks towards camera on top of pallet. - This is a kitten, but not just any kitten. This kitten likes walking along pallets. + + This card has an image of a kitten walking along a pallet. - 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.
@@ -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. - - + +:::info The `actions` slot is only available for the horizontal orientation - +::: ```html {.example}
@@ -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. diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 49e760c3f..8d5e82353 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -27,6 +27,7 @@ Components with the Experimental badge sh - Added back the missing `form-control-label` part to `` for consistency with other form controls [pr:1533] - Added focus delegation to `` 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 `` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377] - Fixed focus outline styles in `` and native `
` [issue:1456] - Fixed focus outline styles in ``, ``, and `` [issue:1484] @@ -41,6 +42,7 @@ Components with the Experimental badge sh - Fixed a bug in `` and `` that caused the component to prematurely hide when certain child elements are used [pr:1636] - Fixed a bug in `` and `` 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 `` [issue:1663] +- Fixed a bug in `` where slotted header and footer content wasn't properly aligned [pr:1435] - Improved autofill styles in `` 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 diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css index 859272bf8..5156511df 100644 --- a/packages/webawesome/src/components/card/card.css +++ b/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; + } } } diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts index 2eabca454..86062d673 100644 --- a/packages/webawesome/src/components/card/card.ts +++ b/packages/webawesome/src/components/card/card.ts @@ -69,15 +69,25 @@ export default class WaCard extends WebAwesomeElement { // Vertical Orientation return html` -
- - -
+ + ${this.hasSlotController.test('header-actions') + ? html`
+ + +
` + : html`
+ +
`} + -
- - -
+ ${this.hasSlotController.test('footer-actions') + ? html`
+ + +
` + : html` `} `; } }