fix(range): prevent negative horizontal paddings

Author: dpellier

packages/ods-react/src/components/range/src/components/range-tick/RangeTick.tsx

@@ -34,12 +34,12 @@ const RangeTick: FC<RangeTickProp> = ({
         if (index === 0) {
           setRootPadding((padding) => ({
             ...padding,
-            left: (width / 2) - (THUMB_SIZE / 2),
+            left: Math.max(0, (width / 2) - (THUMB_SIZE / 2)),
           }));
         } else if (isLast) {
           setRootPadding((padding) => ({
             ...padding,
-            right: (width / 2) - (THUMB_SIZE / 2),
+            right: Math.max(0, (width / 2) - (THUMB_SIZE / 2)),
           }));
         }
 

packages/ods-react/src/components/range/tests/rendering/range.e2e.ts

@@ -1,10 +1,60 @@
 import 'jest-puppeteer';
+import { type Page } from 'puppeteer';
 import { gotoStory } from '../../../../helpers/test';
 
+async function getRangePadding(page: Page): Promise<{ bottom?: number, left?: number, right?: number, top?: number }> {
+  return page.evaluate(() => {
+    function stripPx(value: string): number {
+      return parseInt(value.split('px')[0], 10);
+    }
+
+    const range = document.querySelector('[data-ods="range"]');
+
+    if (!range) {
+      return {};
+    }
+
+    const style = window.getComputedStyle(range);
+
+    return {
+      bottom: stripPx(style.getPropertyValue('padding-bottom')),
+      left: stripPx(style.getPropertyValue('padding-left')),
+      right: stripPx(style.getPropertyValue('padding-right')),
+      top: stripPx(style.getPropertyValue('padding-top')),
+    };
+  });
+}
+
 describe('Range rendering', () => {
   it('should render the web component', async() => {
     await gotoStory(page, 'rendering/render');
 
     expect(await page.waitForSelector('[data-ods="range"]')).not.toBeNull();
   });
+
+  describe('custom ticks', () => {
+    it('should render with no horizontal padding if bound labels are small', async() => {
+      await gotoStory(page, 'rendering/custom-small-ticks');
+      await page.waitForSelector('[data-ods="range"]');
+
+      const padding = await getRangePadding(page);
+
+      expect(padding.bottom).toBeGreaterThan(0);
+      expect(padding.left).toBe(0);
+      expect(padding.right).toBe(0);
+      expect(padding.top).toBeGreaterThan(0);
+    });
+
+    it('should render with some horizontal padding if bound labels are large', async() => {
+      await gotoStory(page, 'rendering/custom-large-ticks');
+      await page.waitForSelector('[data-ods="range"]');
+
+      const padding = await getRangePadding(page);
+
+      expect(padding.bottom).toBeGreaterThan(0);
+      expect(padding.left).toBeGreaterThan(0);
+      expect(padding.right).toBeGreaterThan(0);
+      expect(padding.top).toBeGreaterThan(0);
+    });
+  });
 });

packages/ods-react/src/components/range/tests/rendering/range.stories.tsx

@@ -5,6 +5,36 @@ export default {
   title: 'Tests rendering',
 };
 
-export const render = () => (
+export const CustomLargeTicks = () => (
+  <Range
+    displayBounds={ false }
+    displayTooltip={ false }
+    max={ 5 }
+    min={ 1 }
+    ticks={[
+      { label: 'Very Poor', value: 1 },
+      { label: 'Poor', value: 2 },
+      { label: 'Average', value: 3 },
+      { label: 'Good', value: 4 },
+      { label: 'Excellent', value: 5 },
+    ]} />
+);
+
+export const CustomSmallTicks = () => (
+  <Range
+    displayBounds={ false }
+    displayTooltip={ false }
+    max={ 5 }
+    min={ 1 }
+    ticks={[
+      { label: 'V', value: 1 },
+      { label: 'Poor', value: 2 },
+      { label: 'Average', value: 3 },
+      { label: 'Good', value: 4 },
+      { label: 'E', value: 5 },
+    ]} />
+);
+
+export const Render = () => (
   <Range />
 );