fix(range): css variable

Signed-off-by: Alexandre Esteves <[email protected]>
ovh · Dec 11, 2024 · 7174c41 · 7174c41
1 parent 816e7a4
commit 7174c41
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 45 deletions.
diff --git a/packages/ods/src/components/range/src/components/ods-range/ods-range.scss b/packages/ods/src/components/range/src/components/ods-range/ods-range.scss
@@ -1,12 +1,15 @@
 @use '../../../../../style/range';
 @use '../../../../../style/text';
 
+$ods-range-tick-width: 2px;
+$ods-range-text-top: 16px;
+
 :host {
   display: inline-flex;
   position: relative;
-  padding-top: 5px;
+  flex-direction: column;
   width: inherit;
-  height: range.$ods-range-height;
+  height: inherit;
 }
 
 :host(.ods-range-dual) {
@@ -22,31 +25,32 @@
     @include range.ods-range();
   }
 
-  &__min {
-    @include text.ods-text-label();
-
-    position: absolute;
-    top: 12px;
-  }
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 4px;
 
-  &__max {
-    @include text.ods-text-label();
+    &__min {
+      @include text.ods-text-label();
+    }
 
-    position: absolute;
-    top: 12px;
-    right: 0;
+    &__max {
+      @include text.ods-text-label();
+    }
   }
 
   &__shadow-thumb {
     position: absolute;
     top: -2px;
     opacity: 0;
     z-index: -1;
-    width: 16px;
-    height: 16px;
+    width: range.$ods-input-range-size-thumb;
+    height: range.$ods-input-range-size-thumb;
   }
 
   &__ticks {
+    --ods-range-tick-width: #{$ods-range-tick-width};
+
     position: absolute;
     inset: 0 calc(range.$ods-input-range-size-thumb / 2);
     z-index: range.$range-z-index-dual - 2;
@@ -55,8 +59,8 @@
       position: absolute;
       border-radius: 6px;
       background-color: range.$range-background-color;
-      width: 3px;
-      height: 18px;
+      width: $ods-range-tick-width;
+      height: range.$ods-input-range-size-thumb;
 
       &--activated {
         background-color: range.$range-background-color-active;

diff --git a/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx b/packages/ods/src/components/range/src/components/ods-range/ods-range.tsx
@@ -26,12 +26,12 @@ export class OdsRange implements OdsFormElement {
   private tooltipDual?: OdsTooltip;
   private listId = getRandomHTMLId();
 
+  @State() private activatedTicks: number[] = [];
   @State() private dualValue?: number;
   @State() private currentValue?: number;
   @State() private isDualRange: boolean = false;
   @State() private isInvalid: boolean | undefined;
   @State() private parsedTicks: number[] = [];
-  @State() private activatedTicks: number[] = [];
 
   @Element() el!: HTMLElement;
 
@@ -333,7 +333,7 @@ export class OdsRange implements OdsFormElement {
                 'ods-range__ticks__tick': true,
                 'ods-range__ticks__tick--activated': this.activatedTicks.indexOf(tick) > -1,
               }}
-              style={{ left: `calc(${tick * ratio}% - 2px)` }}>
+              style={{ left: `calc(${tick * ratio}% - calc(var(--ods-range-tick-width) / 2))` }}>
             </div>
           ))
         }
@@ -454,8 +454,10 @@ export class OdsRange implements OdsFormElement {
 
         { this.isDualRange && this.renderTooltip(percentageDual, this.dualValue, true) }
 
-        <span class="ods-range__min">{ this.min }</span>
-        <span class="ods-range__max">{ this.max }</span>
+        <div class="ods-range__info">
+          <span class="ods-range__info__min">{ this.min }</span>
+          <span class="ods-range__info__max">{ this.max }</span>
+        </div>
       </Host>
     );
   }

diff --git a/packages/ods/src/style/_range.scss b/packages/ods/src/style/_range.scss
@@ -11,7 +11,7 @@ $range-z-index-dual: 1;
   $range: &;
 
   appearance: none;
-  margin: 0;
+  margin: calc($ods-input-range-size-thumb / 4) 0 0;
   outline: none;
   border-radius: var(--ods-border-radius-sm);
   cursor: pointer;
@@ -30,6 +30,11 @@ $range-z-index-dual: 1;
     @include thumb();
   }
 
+  &::-webkit-slider-container {
+    min-block-size: 0;
+  }
+
+
   &:not(:disabled) {
     &::-webkit-slider-thumb {
       @include thumb-hover-active();
@@ -160,7 +165,7 @@ $range-z-index-dual: 1;
   .ods-range__range {
     position: absolute;
     z-index: $range-z-index-dual + 1;
-    margin-top: 4px;
+    margin-top: $ods-input-range-height;
     height: 0;
   }
 }

diff --git a/packages/storybook/stories/components/range/range.stories.ts b/packages/storybook/stories/components/range/range.stories.ts
@@ -123,26 +123,7 @@ export const Demo: StoryObj = {
 
 export const DemoDual: StoryObj = {
   render: (arg) => {
-    const validityStateTemplate = html`<br>
-    <div id="validity-state" style="display: grid; row-gap: 5px;"></div>
-    <script>
-      (async () => {
-          const divValidityState = document.querySelector('#validity-state');
-          const rangeDual = document.querySelector('.my-range-dual-demo');
-          await customElements.whenDefined('ods-range');
-          await renderValidityState();
-          rangeDual.addEventListener('odsChange', async () => {
-            await renderValidityState();
-          })
-          async function renderValidityState() {
-            const validity = await rangeDual.getValidity()
-            divValidityState.innerHTML = '';
-            for (let key in validity) {
-              divValidityState.innerHTML += "<div>" + key + ": " + validity[key] + "</div>";
-            }
-          }
-      })();
-    </script>`;
+
     return html`
     <ods-range
       class="my-range-dual-demo"
@@ -154,9 +135,10 @@ export const DemoDual: StoryObj = {
       step="${arg.step}"
       ticks="${arg.ticks ? '[0,25,50,75,100]' : ''}"
     ></ods-range>
-    ${arg.validityState ? validityStateTemplate : ''}
+    ${arg.validityState ? ValidityStateTemplate('range', '.my-range-dual-demo') : ''}
     <script>
-    (() => {
+    (async() => {
+      await customElements.whenDefined('ods-range')
       const rangeDual = document.querySelector('.my-range-dual-demo');
       rangeDual.value = [30, 70];
     })()