diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md index fad003729..3e7260b26 100644 --- a/docs/docs/components/badge.md +++ b/docs/docs/components/badge.md @@ -89,22 +89,34 @@ Use the `pill` attribute to give badges rounded edges. Danger ``` -### Pulsating Badges +### Drawing Attention -Use the `pulse` attribute to draw attention to the badge with a subtle animation. +Use the `attention` attribute to draw attention to the badge with a subtle animation. Supported effects are `bounce`, `pulse` and `none`. ```html {.example} -
- 1 - 1 - 1 - 1 - 1 +
+ 1 + 1 + 1 + 1 + 1 +
+ +
+ 1 + 1 + 1 + 1 + 1
``` diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index c1806e33d..d92da39c1 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -15,6 +15,7 @@ During the alpha period, things might break! We take breaking changes very serio ## Next - 🚨 BREAKING: Renamed the `classic` theme to `shoelace` +- 🚨 BREAKING: Renamed `pulse` attribute in `` to `attention="pulse"` and added `attention="bounce"` [issue:#940] - Fixed a bug in `` that caused radios to uncheck when assigning a numeric value [issue:924] ## 3.0.0-alpha.13 diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css index 896d05a1f..dd1a2da39 100644 --- a/src/components/badge/badge.css +++ b/src/components/badge/badge.css @@ -23,8 +23,8 @@ border-radius: var(--wa-border-radius-pill); } -/* Pulse modifier */ -:host([pulse]) { +/* Pulse attention */ +:host([attention='pulse']) { --pulse-color: var(--background-color); animation: pulse 1.5s infinite; @@ -42,6 +42,27 @@ } } +/* Bounce attention */ +:host([attention='bounce']) { + animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite; +} + +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-5px); + } + 60% { + transform: translateY(-2px); + } +} + ::slotted(wa-icon) { margin-inline-end: var(--wa-space-2xs, 0.25em); opacity: 90%; diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index 4b9edffba..7544eadaa 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -39,7 +39,7 @@ export default class WaBadge extends WebAwesomeElement { @property({ type: Boolean, reflect: true }) pill = false; /** Makes the badge pulsate to draw attention. */ - @property({ type: Boolean, reflect: true }) pulse = false; + @property({ reflect: true }) attention: 'none' | 'pulse' = 'none'; render() { return html` `;