diff --git a/src/components/RangeSlider/RangeSlider.spec.tsx b/src/components/RangeSlider/RangeSlider.spec.tsx
index 4f3885fee..b1375d615 100644
--- a/src/components/RangeSlider/RangeSlider.spec.tsx
+++ b/src/components/RangeSlider/RangeSlider.spec.tsx
@@ -5,7 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite';
import { RangeSlider } from './RangeSlider';
-describe('Components / Button', () => {
+describe('Components / RangeSlider', () => {
describe('A11y', () => {
it('should have `role="progressbar"` by default', () => {
render();
@@ -127,6 +127,13 @@ describe('Components / Button', () => {
render();
expect(ref.current?.name).toBe('range_slider_name');
});
+
+ it('should allow className as prop', () => {
+ const className = 'dummy-custom-class-name';
+
+ render();
+ expect(rangeSlider()).toHaveClass(className);
+ });
});
describe('Rendering', () => {
@@ -140,47 +147,7 @@ describe('Components / Button', () => {
it('should use `base` classes', () => {
const theme: CustomFlowbiteTheme = {
rangeSlider: {
- root: {
- base: 'dummy-range-slider-base-classes',
- },
- },
- };
-
- render(
-
-
- ,
- );
-
- expect(rangeSliderContainer()).toHaveClass('dummy-range-slider-base-classes');
- });
-
- it('should use `base` classes of field', () => {
- const theme: CustomFlowbiteTheme = {
- rangeSlider: {
- field: {
- base: 'dummy-range-slider-field-base-classes',
- },
- },
- };
-
- render(
-
-
- ,
- );
-
- expect(rangeSliderContainer().childNodes[0]).toHaveClass('dummy-range-slider-field-base-classes');
- });
-
- it('should use `base` classes of input', () => {
- const theme: CustomFlowbiteTheme = {
- rangeSlider: {
- field: {
- input: {
- base: 'dummy-range-slider-field-input-base-classes',
- },
- },
+ base: 'dummy-range-slider-field-input-base-classes',
},
};
@@ -193,15 +160,11 @@ describe('Components / Button', () => {
expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-base-classes');
});
- it('should use `sizes` classes of input', () => {
+ it('should use `sizes` classes', () => {
const theme: CustomFlowbiteTheme = {
rangeSlider: {
- field: {
- input: {
- sizes: {
- lg: 'dummy-range-slider-field-input-sizes-lg-classes',
- },
- },
+ sizes: {
+ lg: 'dummy-range-slider-field-input-sizes-lg-classes',
},
},
};
@@ -219,35 +182,7 @@ describe('Components / Button', () => {
describe('Theme as a prop', () => {
it('should use `base` classes', () => {
const theme: CustomFlowbiteTheme['rangeSlider'] = {
- root: {
- base: 'dummy-range-slider-base-classes',
- },
- };
-
- render();
-
- expect(rangeSliderContainer()).toHaveClass('dummy-range-slider-base-classes');
- });
-
- it('should use `base` classes of field', () => {
- const theme: CustomFlowbiteTheme['rangeSlider'] = {
- field: {
- base: 'dummy-range-slider-field-base-classes',
- },
- };
-
- render();
-
- expect(rangeSliderContainer().childNodes[0]).toHaveClass('dummy-range-slider-field-base-classes');
- });
-
- it('should use `base` classes of input', () => {
- const theme: CustomFlowbiteTheme['rangeSlider'] = {
- field: {
- input: {
- base: 'dummy-range-slider-field-input-base-classes',
- },
- },
+ base: 'dummy-range-slider-field-input-base-classes',
};
render();
@@ -255,14 +190,10 @@ describe('Components / Button', () => {
expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-base-classes');
});
- it('should use `sizes` classes of input', () => {
+ it('should use `sizes` classes', () => {
const theme: CustomFlowbiteTheme['rangeSlider'] = {
- field: {
- input: {
- sizes: {
- lg: 'dummy-range-slider-field-input-sizes-lg-classes',
- },
- },
+ sizes: {
+ lg: 'dummy-range-slider-field-input-sizes-lg-classes',
},
};
@@ -273,6 +204,5 @@ describe('Components / Button', () => {
});
});
-const rangeSliderContainer = () => screen.getByTestId('flowbite-range-slider');
const rangeSlider = (role = 'slider') => screen.getByRole(role);
const rangeSliders = (role = 'slider') => screen.getAllByRole(role);
diff --git a/src/components/RangeSlider/RangeSlider.stories.tsx b/src/components/RangeSlider/RangeSlider.stories.tsx
index bb61f73b3..9d7c254ba 100644
--- a/src/components/RangeSlider/RangeSlider.stories.tsx
+++ b/src/components/RangeSlider/RangeSlider.stories.tsx
@@ -15,7 +15,7 @@ export default {
],
argTypes: {
sizing: {
- options: Object.keys(theme.rangeSlider.field.input.sizes),
+ options: Object.keys(theme.rangeSlider.sizes),
control: { type: 'select' },
},
disabled: {
diff --git a/src/components/RangeSlider/RangeSlider.tsx b/src/components/RangeSlider/RangeSlider.tsx
index c75d21a31..44b71ca4d 100644
--- a/src/components/RangeSlider/RangeSlider.tsx
+++ b/src/components/RangeSlider/RangeSlider.tsx
@@ -7,20 +7,8 @@ import type { DeepPartial } from '../../types';
import type { FlowbiteTextInputSizes } from '../TextInput';
export interface FlowbiteRangeSliderTheme {
- root: FlowbiteRangeSliderRootTheme;
- field: FlowbiteRangeSliderFieldTheme;
-}
-
-export interface FlowbiteRangeSliderRootTheme {
- base: string;
-}
-
-export interface FlowbiteRangeSliderFieldTheme {
base: string;
- input: {
- base: string;
- sizes: FlowbiteTextInputSizes;
- };
+ sizes: FlowbiteTextInputSizes;
}
export interface RangeSliderProps extends Omit, 'ref' | 'type'> {
@@ -34,16 +22,7 @@ export const RangeSlider = forwardRef(
return (
<>
-
+
>
);
},
diff --git a/src/components/RangeSlider/index.ts b/src/components/RangeSlider/index.ts
index cd5cccbb2..c41ca90b7 100644
--- a/src/components/RangeSlider/index.ts
+++ b/src/components/RangeSlider/index.ts
@@ -1,7 +1,2 @@
export { RangeSlider } from './RangeSlider';
-export type {
- FlowbiteRangeSliderFieldTheme,
- FlowbiteRangeSliderRootTheme,
- FlowbiteRangeSliderTheme,
- RangeSliderProps,
-} from './RangeSlider';
+export type { FlowbiteRangeSliderTheme, RangeSliderProps } from './RangeSlider';
diff --git a/src/components/RangeSlider/theme.ts b/src/components/RangeSlider/theme.ts
index ba1f77871..c8f872783 100644
--- a/src/components/RangeSlider/theme.ts
+++ b/src/components/RangeSlider/theme.ts
@@ -1,18 +1,10 @@
import type { FlowbiteRangeSliderTheme } from './RangeSlider';
export const rangeSliderTheme: FlowbiteRangeSliderTheme = {
- root: {
- base: 'flex',
- },
- field: {
- base: 'relative w-full',
- input: {
- base: 'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700',
- sizes: {
- sm: 'h-1 range-sm',
- md: 'h-2',
- lg: 'h-3 range-lg',
- },
- },
+ base: 'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700',
+ sizes: {
+ sm: 'h-1 range-sm',
+ md: 'h-2',
+ lg: 'h-3 range-lg',
},
};