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', }, };