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 badge pulsing (#1173)

Browse Source 
* fix badge pulsing

* use and document `--pulse-color`

* Add changelog entry

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
This commit is contained in:
Konnor Rogers
2025-07-14 17:00:35 -04:00
committed by GitHub
parent 1e8bbc3b06
commit 2a52b2766f
3 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
## Next
### Bug Fixes and Improvements {data-no-outline}
- Fixed a bug in `<wa-badge>` where `appearance="pulse"` was not working as expected [pr:1173]
- Fixed a missing TypeScript type for `<wa-badge>` for its `attention` property missing `bounce` value. [pr:1173]
- Fixed a bug in `<wa-slider>` that prevented the hint from showing up [pr:1174]
- Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
- Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]

18
packages/webawesome/src/components/badge/badge.css
View File

@@ -1,4 +1,6 @@
:host {
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
display: inline-flex;
align-items: center;
justify-content: center;
@@ -19,29 +21,31 @@
}
/* Appearance modifiers */
:host([appearance~='plain']) {
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
background-color: transparent;
border-color: transparent;
}
:host([appearance~='outlined']) {
--pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
}
:host([appearance~='filled']) {
--pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
border-color: transparent;
}
:host([appearance~='filled'][appearance~='outlined']) {
--pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
}
:host([appearance~='accent']) {
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
border-color: transparent;
@@ -54,8 +58,6 @@
/* Pulse attention */
:host([attention='pulse']) {
--pulse-color: var(--background-color);
animation: pulse 1.5s infinite;
}

6
packages/webawesome/src/components/badge/badge.ts
View File

@@ -14,6 +14,8 @@ import styles from './badge.css';
*
* @csspart base - The component's base wrapper.
*
* @cssproperty --pulse-color - The color of the badge's pulse effect when using `attention="pulse"`.
*
*/
@customElement('wa-badge')
export default class WaBadge extends WebAwesomeElement {
@@ -28,8 +30,8 @@ export default class WaBadge extends WebAwesomeElement {
/** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;
/** Makes the badge pulsate to draw attention. */
@property({ reflect: true }) attention: 'none' | 'pulse' = 'none';
/** Adds an animation to draw attention to the badge. */
@property({ reflect: true }) attention: 'none' | 'pulse' | 'bounce' = 'none';
render() {
return html` <slot part="base" role="status"></slot>`;