fix(skeleton): inline doc & css mixin

ovh · Jul 29, 2024 · a5e07f3 · a5e07f3
1 parent 2fe8ff8
commit a5e07f3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 35 deletions.
diff --git a/packages/examples/react-webpack/src/app/app.scss b/packages/examples/react-webpack/src/app/app.scss
@@ -4,10 +4,10 @@
 .app {
   font-family: var(--ods-font-family-default);
 
-  &__title {
-    //@include ods.ods-headline();
-    @include ods-headline();
-  }
+  // &__title {
+  //   //@include ods.ods-headline();
+  //   @include ods-headline();
+  // }
 
   &__code {
     font-family: var(--ods-font-family-code);

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
@@ -17,7 +17,7 @@ Size skeleton:
 <ods-skeleton class="my-skeleton"></ods-skeleton>
 
 <style>
-  .my-skeleton::part(text) {
+  .my-skeleton::part(skeleton) {
     width: 250px;
   }
 </style>
@@ -27,11 +27,12 @@ Inline skeleton:
 ```html
 <ods-skeleton inline></ods-skeleton>
 <!-- is now -->
-<ods-skeleton class="my-skeleton"></ods-skeleton>
+<ods-skeleton class="my-skeleton--inline"></ods-skeleton>
 
 <style>
-  .my-skeleton {
+  .my-skeleton--inline {
     display: inline-block;
+    width: 100px;
   }
 </style>
 ```

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,11 +1,7 @@
 @import '../../../../../style/skeleton';
 
-:host(.ods-skeleton) {
-  @include ods-skeleton;
-}
-
 .ods-skeleton {
   &__loader {
-    @include ods-skeleton-loader;
+    @include ods-skeleton;
   }
 }
diff --git a/packages/ods/src/components/skeleton/src/index.html b/packages/ods/src/components/skeleton/src/index.html
@@ -16,15 +16,21 @@
   </ods-skeleton>
 
   <p>Custom Css</p>
-  <ods-skeleton id="mySkeleton"></ods-skeleton>
+  <ods-skeleton class="my-skeleton"></ods-skeleton>
+  <style>
+    .my-skeleton::part(skeleton) {
+      width: 100px;
+    }
+  </style>
+
+  <p>Inline</p>
+  <ods-skeleton class="my-skeleton--inline"></ods-skeleton><span>text inline</span>
 
-  <script>
-    const mySkeleton = document.getElementById('mySkeleton');
-    const getRandomValue = () => {
-      // between 30 and 100
-      return Math.floor(Math.random() * (100 - 30)) + 30;
+  <style>
+    .my-skeleton--inline {
+      display: inline-block;
+      width: 100px;
     }
-    mySkeleton.style.width = getRandomValue() + '%';
-  </script>
+  </style>
 </body>
 </html>
diff --git a/packages/ods/src/style/_skeleton.scss b/packages/ods/src/style/_skeleton.scss
@@ -1,20 +1,5 @@
 @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));