feat(RangeSlider): range slider with custom theme, storybook, unit test and docs (#548)

feat(RangeSlider): range slider with custom theme, stroybook, unit test and docs

Author: yoku2010

src/docs/pages/FormsPage.tsx

@@ -6,6 +6,7 @@ import { Checkbox } from '../../lib/components/Checkbox';
 import { FileInput } from '../../lib/components/FileInput';
 import { Label } from '../../lib/components/Label';
 import { Radio } from '../../lib/components/Radio';
+import { RangeSlider } from '../../lib/components/RangeSlider';
 import { Select } from '../../lib/components/Select';
 import { Textarea } from '../../lib/components/Textarea';
 import { TextInput } from '../../lib/components/TextInput';
@@ -387,6 +388,43 @@ const FormsPage: FC = () => {
         </div>
       ),
     },
+    {
+      title: 'Range Slider',
+      code: (
+        <div className="flex flex-col gap-4">
+          <div>
+            <div className="mb-1 block">
+              <Label htmlFor="default-range" value="Default" />
+            </div>
+            <RangeSlider id="default-range" />
+          </div>
+          <div>
+            <div className="mb-1 block">
+              <Label htmlFor="disbaled-range" value="Disabled" />
+            </div>
+            <RangeSlider id="disabled-range" disabled={true} />
+          </div>
+          <div>
+            <div className="mb-1 block">
+              <Label htmlFor="sm-range" value="Small" />
+            </div>
+            <RangeSlider id="sm-range" sizing="sm" />
+          </div>
+          <div>
+            <div className="mb-1 block">
+              <Label htmlFor="md-range" value="Medium" />
+            </div>
+            <RangeSlider id="md-range" sizing="md" />
+          </div>
+          <div>
+            <div className="mb-1 block">
+              <Label htmlFor="lg-range" value="Large" />
+            </div>
+            <RangeSlider id="lg-range" sizing="lg" />
+          </div>
+        </div>
+      ),
+    },
   ];
 
   return <DemoPage examples={examples} />;

src/lib/components/Flowbite/FlowbiteTheme.ts

@@ -20,6 +20,7 @@ import { FlowbiteNavbarTheme } from '../Navbar';
 import { FlowbitePaginationTheme } from '../Pagination';
 import { FlowbiteProgressTheme } from '../Progress';
 import { FlowbiteRadioTheme } from '../Radio';
+import { FlowbiteRangeSliderTheme } from '../RangeSlider';
 import { FlowbiteRatingTheme } from '../Rating';
 import { FlowbiteSelectTheme } from '../Select';
 import { FlowbiteSidebarTheme } from '../Sidebar';
@@ -65,6 +66,7 @@ export interface FlowbiteTheme extends Record<string, unknown> {
   fileInput: FlowbiteFileInputTheme;
   label: FlowbiteLabelTheme;
   radio: FlowbiteRadioTheme;
+  rangeSlider: FlowbiteRangeSliderTheme;
   select: FlowbiteSelectTheme;
   textInput: FlowbiteTextInputTheme;
   textarea: FlowbiteTextareaTheme;

src/lib/components/Label/Label.spec.tsx

@@ -5,6 +5,7 @@ import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { FileInput } from '../FileInput';
 import { Radio } from '../Radio';
+import { RangeSlider } from '../RangeSlider';
 import { Select } from '../Select';
 import { Textarea } from '../Textarea';
 import { TextInput } from '../TextInput';
@@ -22,6 +23,7 @@ describe.concurrent('Components / Label', () => {
         'Upload file',
         'United States',
         'Your message',
+        'Price',
       ];
 
       const { getByLabelText } = render(<TestForm />);
@@ -98,6 +100,10 @@ const TestForm = (): JSX.Element => (
         <Label htmlFor="comment">Your message</Label>
         <Textarea id="comment" helperText="Leave a comment..." required rows={4} />
       </div>
+      <div>
+        <Label htmlFor="price">Price</Label>
+        <RangeSlider id="price" min={0} max={100} />
+      </div>
     </fieldset>
     <Button type="submit">Submit</Button>
   </form>

src/lib/components/RangeSlider/RangeSlider.spec.tsx

@@ -0,0 +1,274 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { Flowbite } from '../Flowbite';
+import { RangeSlider } from './RangeSlider';
+
+describe('Components / Button', () => {
+  describe('A11y', () => {
+    it('should have `role="progressbar"` by default', () => {
+      render(<RangeSlider />);
+
+      expect(rangeSlider()).toBeInTheDocument();
+    });
+
+    it('should be able to use any other role permitted for `RangeSlider`', () => {
+      render(<RangeSlider role="rangeinput" />);
+
+      expect(rangeSlider('rangeinput')).toBeInTheDocument();
+    });
+  });
+
+  describe('Keyboard interactions', () => {
+    it('should focus when `Tab` is pressed', async () => {
+      const user = userEvent.setup();
+      render(<RangeSlider />);
+
+      await user.tab();
+
+      expect(rangeSlider()).toHaveFocus();
+    });
+
+    it('should be possible to `Tab` out', async () => {
+      const user = userEvent.setup();
+      render(
+        <>
+          <RangeSlider />
+          <RangeSlider />
+          <RangeSlider />
+        </>,
+      );
+
+      const rangeSliderElements = rangeSliders();
+
+      await user.tab();
+
+      expect(rangeSliderElements[0]).toHaveFocus();
+
+      await user.tab();
+
+      expect(rangeSliderElements[1]).toHaveFocus();
+
+      await user.tab();
+
+      expect(rangeSliderElements[2]).toHaveFocus();
+    });
+
+    it('should not trigger `onChange` when `Space` is pressed', async () => {
+      const user = userEvent.setup();
+      const handleChange = vi.fn();
+
+      render(<RangeSlider onChange={handleChange} />);
+
+      await user.tab();
+
+      expect(rangeSlider()).toHaveFocus();
+
+      await user.keyboard('[Space]');
+
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('should not trigger `onChange` when `Enter` is pressed', async () => {
+      const user = userEvent.setup();
+      const handleChange = vi.fn();
+
+      render(<RangeSlider onChange={handleChange} />);
+
+      await user.tab();
+
+      expect(rangeSlider()).toHaveFocus();
+
+      await user.keyboard('[Enter]');
+
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    /**
+     * Test Name: Should trigger `onChange` when `Arrow` key pressed
+     *
+     * This test is not testable because there is no support for
+     * input[type="range"] in the user-event library.
+     *
+     * Issues:
+     * https://github.com/testing-library/user-event/issues/1067
+     * https://github.com/testing-library/user-event/issues/871
+     *
+     * TODO: Once these issues get fixed, we will add this test case.
+     *
+     */
+  });
+
+  describe('Props', () => {
+    it('should allow HTML attributes for `<input type="range">`s', () => {
+      render(<RangeSlider formAction="post.php" min={4} max={10} step={0.5} />);
+      const rangeSliderElement = rangeSlider();
+      expect(rangeSliderElement).toHaveAttribute('formAction', 'post.php');
+      expect(rangeSliderElement).toHaveAttribute('min', '4');
+      expect(rangeSliderElement).toHaveAttribute('max', '10');
+      expect(rangeSliderElement).toHaveAttribute('step', '0.5');
+    });
+
+    it('should be disabled when `disabled={true}`', () => {
+      render(<RangeSlider disabled />);
+
+      expect(rangeSlider()).toBeDisabled();
+    });
+
+    it('should be required when `required={true}`', () => {
+      render(<RangeSlider required={true} />);
+      expect(rangeSlider()).toHaveAttribute('required');
+    });
+
+    it('should allow ref as prop', () => {
+      const ref = createRef<HTMLInputElement>();
+      render(<RangeSlider ref={ref} name="range_slider_name" />);
+      expect(ref.current?.name).toBe('range_slider_name');
+    });
+  });
+
+  describe('Rendering', () => {
+    it('should render with no props', () => {
+      render(<RangeSlider />);
+      expect(rangeSlider()).toBeInTheDocument();
+    });
+  });
+
+  describe('Theme', () => {
+    it('should use `base` classes', () => {
+      const theme = {
+        rangeSlider: {
+          base: 'dummy-range-slider-base-classes',
+        },
+      };
+
+      render(
+        <Flowbite theme={{ theme }}>
+          <RangeSlider />
+        </Flowbite>,
+      );
+
+      expect(rangeSliderContainer()).toHaveClass('dummy-range-slider-base-classes');
+    });
+
+    it('should use `base` classes of field', () => {
+      const theme = {
+        rangeSlider: {
+          field: {
+            base: 'dummy-range-slider-field-base-classes',
+          },
+        },
+      };
+
+      render(
+        <Flowbite theme={{ theme }}>
+          <RangeSlider />
+        </Flowbite>,
+      );
+
+      expect(rangeSliderContainer().childNodes[0]).toHaveClass('dummy-range-slider-field-base-classes');
+    });
+
+    it('should use `base` classes of input', () => {
+      const theme = {
+        rangeSlider: {
+          field: {
+            input: {
+              base: 'dummy-range-slider-field-input-base-classes',
+            },
+          },
+        },
+      };
+
+      render(
+        <Flowbite theme={{ theme }}>
+          <RangeSlider />
+        </Flowbite>,
+      );
+
+      expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-base-classes');
+    });
+
+    it('should use `sizes` classes of input', () => {
+      const theme = {
+        rangeSlider: {
+          field: {
+            input: {
+              sizes: {
+                lg: 'dummy-range-slider-field-input-sizes-lg-classes',
+              },
+            },
+          },
+        },
+      };
+
+      render(
+        <Flowbite theme={{ theme }}>
+          <RangeSlider sizing="lg" />
+        </Flowbite>,
+      );
+
+      expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-sizes-lg-classes');
+    });
+  });
+
+  describe('Theme as a prop', () => {
+    it('should use `base` classes', () => {
+      const theme = {
+        base: 'dummy-range-slider-base-classes',
+      };
+
+      render(<RangeSlider theme={theme} />);
+
+      expect(rangeSliderContainer()).toHaveClass('dummy-range-slider-base-classes');
+    });
+
+    it('should use `base` classes of field', () => {
+      const theme = {
+        field: {
+          base: 'dummy-range-slider-field-base-classes',
+        },
+      };
+
+      render(<RangeSlider theme={theme} />);
+
+      expect(rangeSliderContainer().childNodes[0]).toHaveClass('dummy-range-slider-field-base-classes');
+    });
+
+    it('should use `base` classes of input', () => {
+      const theme = {
+        field: {
+          input: {
+            base: 'dummy-range-slider-field-input-base-classes',
+          },
+        },
+      };
+
+      render(<RangeSlider theme={theme} />);
+
+      expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-base-classes');
+    });
+
+    it('should use `sizes` classes of input', () => {
+      const theme = {
+        field: {
+          input: {
+            sizes: {
+              lg: 'dummy-range-slider-field-input-sizes-lg-classes',
+            },
+          },
+        },
+      };
+
+      render(<RangeSlider sizing="lg" theme={theme} />);
+
+      expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-sizes-lg-classes');
+    });
+  });
+});
+
+const rangeSliderContainer = () => screen.getByTestId('flowbite-range-slider');
+const rangeSlider = (role = 'slider') => screen.getByRole(role);
+const rangeSliders = (role = 'slider') => screen.getAllByRole(role);