Fix animation-mode property naming

Tap30 · Jun 2, 2024 · e233f64 · e233f64
1 parent 6894e5e
commit e233f64
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/src/skeleton/index.ts b/src/skeleton/index.ts
@@ -22,15 +22,15 @@ import styles from './skeleton.style';
  * ##### Animation Modes
  *
  * ```html
- * <tap-skeleton animationMode="progress"></tap-skeleton>
- * <tap-skeleton animationMode="pulse"></tap-skeleton>
- * <tap-skeleton animationMode="none"></tap-skeleton>
+ * <tap-skeleton animation-mode="progress"></tap-skeleton>
+ * <tap-skeleton animation-mode="pulse"></tap-skeleton>
+ * <tap-skeleton animation-mode="none"></tap-skeleton>
  * ```
  *
  * @summary Display Skeleton component with different styles and types.
  *
  * @prop {`"line"` \| `"rect"` \| `"circle"`} [`variant`=`"line"`] - The variant of the skeleton.
- * @prop {`"progress"` \| `"pulse"` \| `"none"`} [`animationMode`=`"progress"`] - The animation mode of the skeleton.
+ * @prop {`"progress"` \| `"pulse"` \| `"none"`} [`animation-mode`=`"progress"`] - The animation mode of the skeleton.
  * @prop {`string`} [`width`=`"100%"`] - The width value of the skeleton.
  * @prop {`string`} [`height`=`"20px"`] - The height value of the skeleton.
  *

diff --git a/src/skeleton/skeleton.stories.ts b/src/skeleton/skeleton.stories.ts
@@ -51,7 +51,7 @@ const Template: Story<ArgTypes> = ({
 }: ArgTypes) =>
   html`<tap-skeleton
     variant=${variant}
-    animationMode=${animationMode}
+    animation-mode=${animationMode}
     width=${width}
     height=${height}
   ></tap-skeleton> `;

diff --git a/src/skeleton/skeleton.style.ts b/src/skeleton/skeleton.style.ts
@@ -44,7 +44,7 @@ export default css`
     );
   }
 
-  :host([animationMode='progress']) .skeleton {
+  :host([animation-mode='progress']) .skeleton {
     animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     background-size: 200px 100%;
     background-image: linear-gradient(
@@ -54,7 +54,7 @@ export default css`
       color-mix(in srgb, var(--tap-sys-color-surface-white), transparent 100%)
     );
   }
-  :host([animationMode='pulse']) .skeleton {
+  :host([animation-mode='pulse']) .skeleton {
     animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s infinite;
   }
 
@@ -83,12 +83,12 @@ export default css`
 
   // Removing animation if user enabled the 'Reduce Motion' option.
   @media (prefers-reduced-motion: reduce) {
-    :host([animationMode='progress']) .skeleton,
-    :host([animationMode='pulse']) .skeleton {
+    :host([animation-mode='progress']) .skeleton,
+    :host([animation-mode='pulse']) .skeleton {
       animation: none;
     }
 
-    :host([animationMode='progress']) .skeleton {
+    :host([animation-mode='progress']) .skeleton {
       background: none;
     }
   }

diff --git a/src/skeleton/skeleton.ts b/src/skeleton/skeleton.ts
@@ -4,12 +4,14 @@ import { SkeletonAnimation, SkeletonVariant } from './types';
 
 export class Skeleton extends LitElement {
   @property({ reflect: true }) variant?: SkeletonVariant = 'line';
-  @property({ reflect: true }) animationMode?: SkeletonAnimation = 'progress';
+  @property({ reflect: true, attribute: 'animation-mode' })
+  animationMode?: SkeletonAnimation = 'progress';
   @property({ reflect: true }) width?: string = '100%';
   @property({ reflect: true }) height?: string = '20px';
 
   render() {
     return html`<div
+      part="skeleton"
       class="skeleton"
       aria-label="Loading"
       aria-labeledby=${nothing}