fix(skeleton): improve documentation

ovh · Jul 29, 2024 · 57730f9 · 57730f9
1 parent 156dbb1
commit 57730f9
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 15 deletions.
diff --git a/packages/ods/src/components/skeleton/documentation/migration.from.17.x.mdx b/packages/ods/src/components/skeleton/documentation/migration.from.17.x.mdx
@@ -1,21 +1,18 @@
 ## Attributes changes
 
 `inline` <img src="https://img.shields.io/badge/removed-FF0000" />
-`ramdomized` <img src="https://img.shields.io/badge/removed-FF0000" />
+`randomized` <img src="https://img.shields.io/badge/removed-FF0000" />
 `size` <img src="https://img.shields.io/badge/removed-FF0000" />
 
 Have been removed.
 
-You can use the css to obtain the same rendering.
+You can use the css and js to obtain the same rendering.
 
 ## Migration examples
 
-
-Size or inline skeleton:
+Size skeleton:
 ```html
 <ods-skeleton size="md"></ods-skeleton>
-
-<ods-skeleton inline></ods-skeleton>
 <!-- is now -->
 <ods-skeleton class="my-skeleton"></ods-skeleton>
 
@@ -25,3 +22,32 @@ Size or inline skeleton:
   }
 </style>
 ```
+
+Inline skeleton:
+```html
+<ods-skeleton inline></ods-skeleton>
+<!-- is now -->
+<ods-skeleton class="my-skeleton"></ods-skeleton>
+
+<style>
+  .my-skeleton {
+    display: inline-block;
+  }
+</style>
+```
+
+Randomized skeleton:
+```html
+<ods-skeleton randomized></ods-skeleton>
+<!-- is now -->
+<ods-skeleton id="mySkeleton"></ods-skeleton>
+
+<script>
+  const mySkeleton = document.getElementById('mySkeleton');
+  const getRandomValue = () => {
+    // between 30 and 100
+    return Math.floor(Math.random() * (100 - 30)) + 30;
+  }
+  mySkeleton.style.width = getRandomValue() + '%';
+</script>
+```
diff --git a/packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.scss b/packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.scss
@@ -1,7 +1,11 @@
 @import '../../../../../style/skeleton';
 
+:host(.ods-skeleton) {
+  @include ods-skeleton;
+}
+
 .ods-skeleton {
   &__loader {
-    @include ods-skeleton;
+    @include ods-skeleton-loader;
   }
 }
diff --git a/packages/ods/src/components/skeleton/src/index.html b/packages/ods/src/components/skeleton/src/index.html
@@ -16,13 +16,15 @@
   </ods-skeleton>
 
   <p>Custom Css</p>
-  <ods-skeleton class="my-skeleton">
-  </ods-skeleton>
-  <style>
-    .my-skeleton::part(skeleton) {
-      height: 2em;
-      width: 10em;
+  <ods-skeleton id="mySkeleton"></ods-skeleton>
+
+  <script>
+    const mySkeleton = document.getElementById('mySkeleton');
+    const getRandomValue = () => {
+      // between 30 and 100
+      return Math.floor(Math.random() * (100 - 30)) + 30;
     }
-  </style>
+    mySkeleton.style.width = getRandomValue() + '%';
+  </script>
 </body>
 </html>
diff --git a/packages/ods/src/style/_skeleton.scss b/packages/ods/src/style/_skeleton.scss
@@ -1,5 +1,20 @@
 @mixin ods-skeleton() {
+  display: flex;
+  position: relative;
+
+  &::before {
+    font-size: inherit;
+    content: "\00a0";
+  }
+}
+
+@mixin ods-skeleton-loader() {
   display: block;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  transform: translateY(-50%);
   border-radius: .5rem;
   background-color : var(--ods-color-neutral-050);
   background-image: linear-gradient(-90deg, var(--ods-color-neutral-050), var(--ods-color-neutral-100) 46%, var(--ods-color-neutral-100) 61%, var(--ods-color-neutral-050));

diff --git a/packages/storybook/stories/components/skeleton/1_specifications.stories.mdx b/packages/storybook/stories/components/skeleton/1_specifications.stories.mdx
@@ -6,7 +6,7 @@ import SpecificationsSkeleton from '@ovhcloud/ods-components/src/components/skel
 # Skeleton - Design Specifications
 ----
 
-Skeleton TODO add small description:
+Skeleton component indicates that data is loading. It improves the perceived loading time for the user:
 <div>
   <a href="#"
      target="_blank">