Add attention attribute to <wa-badge>; fixes #940 (#962)

* add attention attribute; fixes #940

* add bounce

* update changelog

* reword

Author: claviska

docs/docs/components/badge.md

@@ -89,22 +89,34 @@ Use the `pill` attribute to give badges rounded edges.
 <wa-badge variant="danger" pill>Danger</wa-badge>
 ```
 
-### 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}
-<div class="badge-pulse">
-  <wa-badge variant="brand" pill pulse>1</wa-badge>
-  <wa-badge variant="success" pill pulse>1</wa-badge>
-  <wa-badge variant="neutral" pill pulse>1</wa-badge>
-  <wa-badge variant="warning" pill pulse>1</wa-badge>
-  <wa-badge variant="danger" pill pulse>1</wa-badge>
+<div class="badge-attention">
+  <wa-badge variant="brand" attention="pulse" pill>1</wa-badge>
+  <wa-badge variant="success" attention="pulse" pill>1</wa-badge>
+  <wa-badge variant="neutral" attention="pulse" pill>1</wa-badge>
+  <wa-badge variant="warning" attention="pulse" pill>1</wa-badge>
+  <wa-badge variant="danger" attention="pulse" pill>1</wa-badge>
+</div>
+
+<div class="badge-attention">
+  <wa-badge variant="brand" attention="bounce" pill>1</wa-badge>
+  <wa-badge variant="success" attention="bounce" pill>1</wa-badge>
+  <wa-badge variant="neutral" attention="bounce" pill>1</wa-badge>
+  <wa-badge variant="warning" attention="bounce" pill>1</wa-badge>
+  <wa-badge variant="danger" attention="bounce" pill>1</wa-badge>
 </div>
 
 <style>
-  .badge-pulse wa-badge:not(:last-of-type) {
-    margin-right: 1rem;
+  .badge-attention {
+    margin-block-end: var(--wa-space-m);
+
+    wa-badge:not(:last-of-type) {
+      margin-right: 1rem;
+    }
   }
 </style>
 ```

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 `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
 - Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
 
 ## 3.0.0-alpha.13

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%;

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` <slot part="base" role="status"></slot>`;