fix(skeleton): display size correctly when inline

ovh · Sep 8, 2023 · cd062dc · cd062dc
1 parent b2ef007
commit cd062dc
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 37 deletions.
diff --git a/packages/components/skeleton/src/components/osds-skeleton/interfaces/attributes.ts b/packages/components/skeleton/src/components/osds-skeleton/interfaces/attributes.ts
@@ -3,13 +3,9 @@ import type { ODS_SKELETON_SIZE } from '../constants/skeleton-size';
 interface OdsSkeletonAttribute {
   /** inline or not: see component principles */
   inline?: boolean;
-  /**
-   * Wether or not skeleton size is randomized
-   */
+  /** wether or not skeleton size is randomized */
   randomized?: boolean
-  /**
-   * Skeleton size
-   */
+  /** skeleton size */
   size?: ODS_SKELETON_SIZE
 }
 

diff --git a/packages/components/skeleton/src/components/osds-skeleton/osds-skeleton.scss b/packages/components/skeleton/src/components/osds-skeleton/osds-skeleton.scss
@@ -4,9 +4,9 @@
 @import '~@ovhcloud/ods-common-theming/ods-theme';
 
 :host {
-  min-height: .5rem;
   position: relative;
   display: flex;
+  min-height: .5rem;
 
   &::before {
     content: "\00a0";
@@ -41,7 +41,6 @@
 :host([inline]) {
   @include osds-skeleton-on-selected-host() {
     display: inline-block;
-    width: var(--width);
   }
 }
 

diff --git a/packages/components/skeleton/src/components/osds-skeleton/osds-skeleton.tsx b/packages/components/skeleton/src/components/osds-skeleton/osds-skeleton.tsx
@@ -6,7 +6,7 @@ import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 @Component({
   tag: 'osds-skeleton',
   styleUrl: 'osds-skeleton.scss',
-  shadow: true
+  shadow: true,
 })
 export class OsdsSkeleton implements OdsSkeletonAttribute {
   /** @see OdsSkeletonAttributes.inline */
@@ -16,16 +16,21 @@ export class OsdsSkeleton implements OdsSkeletonAttribute {
   /** @see OdsSkeletonAttributes.size */
   @Prop({ reflect: true }) public size?: ODS_SKELETON_SIZE = DEFAULT_ATTRIBUTE.size;
 
+  private getRandomValue() {
+    // between 30 and 100
+    return Math.floor(Math.random() * (100 - 30)) + 30;
+  }
+
   render() {
     const { inline, randomized } = this;
 
     return (
       <Host {...{
         'style': {
-          width: !inline ? '100%' : randomized ? `${Math.floor(Math.random() * (100 - 30)) + 30}%` : '', // between 30-100%
+          width: !inline ? '100%' : randomized ? `${this.getRandomValue()}%` : '',
         }
       }}>
-        <div {...{ class: 'loader' }}></div>
+        <div class="loader"></div>
       </Host>
     );
   }

diff --git a/packages/components/skeleton/src/index.html b/packages/components/skeleton/src/index.html
@@ -4,34 +4,24 @@
   <meta charset='utf-8' />
   <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0' />
   <title>Dev ods-skeleton</title>
-
-  <script type="module">
-    !window.ods && (window.ods = {config: {logging: {active:true}}});
-  </script>
-
-  <script type='module' src='/build/ods-skeleton.esm.js'></script>
-  <script nomodule src='/build/ods-skeleton.js'></script>
-  <link rel="stylesheet" href="/build/ods-skeleton.css">
+  <script type='module' src='/build/osds-skeleton.esm.js'></script>
+  <script nomodule src='/build/osds-skeleton.js'></script>
+  <link rel="stylesheet" href="/build/osds-skeleton.css">
 </head>
 <body>
+  <p>Size</p>
+  <osds-skeleton></osds-skeleton>
+  <osds-skeleton inline size="xs"></osds-skeleton>
+  <osds-skeleton inline size="sm"></osds-skeleton>
+  <osds-skeleton inline size="md"></osds-skeleton>
+  <osds-skeleton inline size="lg"></osds-skeleton>
+  <osds-skeleton inline size="xl"></osds-skeleton>
 
-<p>Size</p>
-<osds-skeleton></osds-skeleton>
-<osds-skeleton size="xs"></osds-skeleton>
-<osds-skeleton size="sm"></osds-skeleton>
-<osds-skeleton size="md"></osds-skeleton>
-<osds-skeleton size="lg"></osds-skeleton>
-<osds-skeleton size="xl"></osds-skeleton>
-
-<p>Randomized</p>
-<osds-skeleton randomized></osds-skeleton>
-<osds-skeleton randomized></osds-skeleton>
-<osds-skeleton randomized></osds-skeleton>
-<osds-skeleton randomized></osds-skeleton>
-<osds-skeleton randomized></osds-skeleton>
-
-<script>
-  document.querySelectorAll('ods-skeleton').forEach((elem) => {});
-</script>
+  <p>Randomized</p>
+  <osds-skeleton inline randomized></osds-skeleton>
+  <osds-skeleton inline randomized></osds-skeleton>
+  <osds-skeleton inline randomized></osds-skeleton>
+  <osds-skeleton inline randomized></osds-skeleton>
+  <osds-skeleton inline randomized></osds-skeleton>
 </body>
 </html>