refactor(skeletons): code review changes contd

eBay · Nov 14, 2023 · b6664f0 · b6664f0
1 parent c202dd1
commit b6664f0
Show file tree

Hide file tree

Showing 12 changed files with 602 additions and 560 deletions.
diff --git a/dist/skeleton-loader/skeleton-loader.css → dist/skeleton/skeleton.css b/dist/skeleton-loader/skeleton-loader.css → dist/skeleton/skeleton.css
@@ -5,89 +5,127 @@
   --skeleton-tile-width-min: 121px;
   --skeleton-width: 100%;
 }
-.skeleton {
-  background: var(--color-loading-fill);
-  border-radius: var(--skeleton-border-radius);
-  cursor: progress;
-  height: var(--skeleton-height);
-  min-height: 12px;
-  width: var(--skeleton-width);
-}
-.skeleton-elevated {
+.skeleton-avatar--elevated,
+.skeleton-btn--elevated,
+.skeleton-text--elevated,
+.skeleton-image--elevated,
+.skeleton-form--elevated {
   background: var(--color-loading-elevated-fill);
 }
-.skeleton-ai-gradient-purple-subtle {
+.skeleton-avatar--ai-gradient-purple-subtle,
+.skeleton-btn--ai-gradient-purple-subtle,
+.skeleton-text--ai-gradient-purple-subtle,
+.skeleton-image--ai-gradient-purple-subtle,
+.skeleton-form--ai-gradient-purple-subtle {
   background: var(--color-ai-gradient-purple-subtle);
 }
-.skeleton-ai-gradient-green-subtle {
+.skeleton-avatar--ai-gradient-green-subtle,
+.skeleton-btn--ai-gradient-green-subtle,
+.skeleton-text--ai-gradient-green-subtle,
+.skeleton-image--ai-gradient-green-subtle,
+.skeleton-form--ai-gradient-green-subtle {
   background: var(--color-ai-gradient-green-subtle);
 }
-.skeleton-ai-gradient-blue-subtle {
+.skeleton-avatar--ai-gradient-blue-subtle,
+.skeleton-btn--ai-gradient-blue-subtle,
+.skeleton-text--ai-gradient-blue-subtle,
+.skeleton-image--ai-gradient-blue-subtle,
+.skeleton-form--ai-gradient-blue-subtle {
   background: var(--color-ai-gradient-blue-subtle);
 }
-.skeleton--avatar {
+.skeleton-avatar {
+  background: var(--color-loading-fill);
   border-radius: 50%;
+  cursor: progress;
   height: var(--skeleton-height);
+  min-height: 12px;
   width: var(--skeleton-height);
 }
-.skeleton--btn {
+.skeleton-btn {
+  background: var(--color-loading-fill);
   border-radius: 20px;
+  cursor: progress;
   height: 40px;
+  min-height: 12px;
+  width: var(--skeleton-width);
 }
-.skeleton--btn-small {
+.skeleton-btn--small {
+  background: var(--color-loading-fill);
   border-radius: 16px;
+  cursor: progress;
   height: 32px;
+  min-height: 12px;
+  width: var(--skeleton-width);
 }
-.skeleton--btn-large {
+.skeleton-btn--large {
+  background: var(--color-loading-fill);
   border-radius: 24px;
+  cursor: progress;
   height: 48px;
+  min-height: 12px;
+  width: var(--skeleton-width);
 }
-.skeleton--text-small {
+.skeleton-text,
+.skeleton-text--small {
+  background: var(--color-loading-fill);
   border-radius: 3px;
+  cursor: progress;
   height: 16px;
+  min-height: 12px;
+  width: var(--skeleton-width);
 }
-.skeleton--text-small::after {
+.skeleton-text--small::after {
   height: 16px;
   margin-top: calc(16px + var(--spacing-100));
 }
-.skeleton--text-large {
+.skeleton-text--large {
+  background: var(--color-loading-fill);
   border-radius: 3px;
+  cursor: progress;
   height: 24px;
+  min-height: 12px;
+  width: var(--skeleton-width);
 }
-.skeleton--text-large::after {
+.skeleton-text--large::after {
   height: 24px;
   margin-top: calc(24px + var(--spacing-100));
 }
-.skeleton--text-multiline {
+.skeleton-text--multiline {
   position: relative;
   width: calc(100% - var(--spacing-300));
 }
-.skeleton--text-multiline::after {
+.skeleton-text--multiline::after {
   background: inherit;
   content: "";
   position: absolute;
   width: calc(100% - var(--spacing-700));
 }
-.skeleton--text-small.skeleton--text-multiline {
+.skeleton-text--small.skeleton-text--multiline {
   margin-bottom: var(--spacing-300);
 }
-.skeleton--text-large.skeleton--text-multiline {
+.skeleton-text--large.skeleton--text--multiline {
   margin-bottom: var(--spacing-400);
 }
-.skeleton--form {
+.skeleton-form {
+  background: var(--color-loading-fill);
   border-radius: 8px;
+  cursor: progress;
   height: 48px;
+  min-height: 12px;
+  width: var(--skeleton-width);
 }
-.skeleton--image {
+.skeleton-image {
+  background: var(--color-loading-fill);
   border-radius: 8px;
+  cursor: progress;
   height: 100%;
-  max-width: initial;
-}
-.skeleton-image-container {
+  min-height: 12px;
+  width: var(--skeleton-width);
   container-name: skeleton-image;
   container-type: inline-size;
+  max-width: initial;
 }
-.skeleton-image-container .skeleton.skeleton--image {
+.skeleton-image::after {
   bottom: 0;
   height: 100%;
   left: 0;
@@ -96,51 +134,55 @@
   top: 0;
   width: 100%;
 }
-.skeleton--tile {
+.skeleton__tile {
   max-width: var(--skeleton-tile-width-max);
   min-width: var(--skeleton-tile-width-min);
 }
-.skeleton--tile .skeleton.skeleton--text-small,
-.skeleton--tile .skeleton.skeleton--text-large {
+.skeleton__tile .skeleton-text--small,
+.skeleton__tile .skeleton-text--large {
   width: calc(100% - var(--spacing-300));
 }
-.skeleton--tile .skeleton-image-container {
+.skeleton__tile .skeleton-image {
   margin-bottom: var(--spacing-150);
   padding-bottom: 100%;
   position: relative;
   width: 100%;
 }
-.skeleton--tiles-layout {
+.skeleton__tile-container {
   display: inline-block;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
 }
-.skeleton--tiles-layout li {
+.skeleton__tile-container li {
   display: inline-table;
   margin: var(--spacing-50);
 }
 /* Columns */
-.skeleton--tiles-layout[data-columns="2"] li {
+.skeleton__tile-container[data-columns="2"] li {
   width: calc(100% / 2 - 11px);
 }
-.skeleton--tiles-layout[data-columns="3"] li {
+.skeleton__tile-container[data-columns="3"] li {
   width: calc(100% / 3 - 11px);
 }
-.skeleton--tiles-layout[data-columns="4"] li {
+.skeleton__tile-container[data-columns="4"] li {
   width: calc(100% / 4 - 11px);
 }
-.skeleton--tiles-layout[data-columns="5"] li {
+.skeleton__tile-container[data-columns="5"] li {
   width: calc(100% / 5 - 11px);
 }
-.skeleton--tiles-layout[data-columns="6"] li {
+.skeleton__tile-container[data-columns="6"] li {
   width: calc(100% / 6 - 11px);
 }
-[dir="rtl"] .skeleton {
+[dir="rtl"] .skeleton-avatar,
+[dir="rtl"] .skeleton-btn,
+[dir="rtl"] .skeleton-text,
+[dir="rtl"] .skeleton-image,
+[dir="rtl"] .skeleton-form {
   animation-direction: normal, reverse;
 }
-[dir="rtl"] .skeleton.skeleton--text-multiline::after {
+[dir="rtl"] .skeleton-text--multiline::after {
   left: var(--spacing-700);
 }
 @keyframes loading-frames {
@@ -163,7 +205,11 @@
   }
 }
 @media (prefers-reduced-motion: no-preference) {
-  .skeleton {
+  .skeleton-avatar,
+  .skeleton-btn,
+  .skeleton-text,
+  .skeleton-image,
+  .skeleton-form {
     /*  setting animation-iteration-count to 6 (5000/833ms)    */
     /*  so it does not exceed 5s per WCAG 2.2.2    */
     animation: fade-in 500ms forwards, loading-frames 833ms 667ms linear 6;
@@ -172,15 +218,23 @@
   }
 }
 @media screen and (max-width: 512px) {
-  .skeleton {
+  .skeleton-avatar,
+  .skeleton-btn,
+  .skeleton-text,
+  .skeleton-image,
+  .skeleton-form {
     background: var(--color-loading-shimmer);
   }
-  .skeleton-elevated {
+  .skeleton-avatar--elevated,
+  .skeleton-btn--elevated,
+  .skeleton-text--elevated,
+  .skeleton-image--elevated,
+  .skeleton-form--elevated {
     background: var(--color-loading-shimmer-elevated);
   }
 }
 @container skeleton-image (width > 79px) {
-  .skeleton--image {
+  .skeleton-image {
     border-radius: 16px;
   }
 }
diff --git a/docs/_data/modules.yaml b/docs/_data/modules.yaml
@@ -50,7 +50,7 @@ list:
   - segmented-buttons
   - select
   - signal
-  - skeleton-loader
+  - skeleton
   - snackbar-dialog
   - split-button
   - star-rating