js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix appearance="filled-outlined" in <wa-card> (#1694)

Browse Source 
* upated filled-outlined attribute for cards

* updated selector

* updated changelog

* updated heading

* updated css

* remove final `~=` selector (thanks @Copilot)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Kelsey Jackson
2025-11-17 14:12:23 -06:00
committed by GitHub
parent 411d385d65
commit 2491ca45ac
3 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -13,6 +13,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
## Next ## Next
- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `<wa-card>` [issue:1671]
- Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703] - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
- Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450] - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729] - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
@@ -23,6 +24,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
- `<wa-badge>` - `<wa-badge>`
- `<wa-button>` - `<wa-button>`
- `<wa-callout>` - `<wa-callout>`
- `<wa-card>`
- `<wa-details>` - `<wa-details>`
- `<wa-input>` - `<wa-input>`
- `<wa-select>` - `<wa-select>`

13
packages/webawesome/src/components/card/card.css
View File

@@ -16,27 +16,28 @@
} }
/* Appearance modifiers */ /* Appearance modifiers */
:host([appearance~='plain']) { :host([appearance='plain']) {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;
} }
:host([appearance~='outlined']) { :host([appearance='outlined']) {
background-color: var(--wa-color-surface-default); background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-surface-border); border-color: var(--wa-color-surface-border);
} }
:host([appearance~='filled']) { :host([appearance='filled']) {
background-color: var(--wa-color-neutral-fill-quiet); background-color: var(--wa-color-neutral-fill-quiet);
border-color: transparent; border-color: transparent;
} }
:host([appearance~='filled'][appearance~='outlined']) { :host([appearance='filled-outlined']) {
border-color: var(--wa-color-neutral-border-quiet); background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-surface-border);
} }
:host([appearance~='accent']) { :host([appearance='accent']) {
color: var(--wa-color-neutral-on-loud); color: var(--wa-color-neutral-on-loud);
background-color: var(--wa-color-neutral-fill-loud); background-color: var(--wa-color-neutral-fill-loud);
border-color: transparent; border-color: transparent;

2
packages/webawesome/src/components/card/card.ts
View File

@@ -42,7 +42,7 @@ export default class WaCard extends WebAwesomeElement {
/** The card's visual appearance. */ /** The card's visual appearance. */
@property({ reflect: true }) @property({ reflect: true })
appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined'; appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined';
/** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */ /** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
@property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false; @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;