Merge branch 'next' into konnorrogers/fix-pulse-badges

packages/webawesome/docs/docs/resources/changelog.md

@@ -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]
 

packages/webawesome/src/components/badge/badge.css

@@ -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;
 }
 

packages/webawesome/src/components/badge/badge.ts

@@ -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>`;