From 9e9b01c538c64f8bc440b1ae1308e1692ed01cd1 Mon Sep 17 00:00:00 2001 From: Karina Grishaeva Date: Mon, 8 Jan 2024 20:52:49 +0400 Subject: [PATCH 1/4] fix(range-slider): remove base wrappers remove base wrappers according to vanilla implementation BREAKING CHANGE: className prop applies directly to input --- src/components/RangeSlider/RangeSlider.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/RangeSlider/RangeSlider.tsx b/src/components/RangeSlider/RangeSlider.tsx index c75d21a31..0f95d66d7 100644 --- a/src/components/RangeSlider/RangeSlider.tsx +++ b/src/components/RangeSlider/RangeSlider.tsx @@ -34,16 +34,13 @@ export const RangeSlider = forwardRef( return ( <> -
-
- -
-
+ ); }, From 52b149b04fbce1999c783e0390292ac237b616cf Mon Sep 17 00:00:00 2001 From: Karina Grishaeva Date: Tue, 9 Jan 2024 13:49:29 +0400 Subject: [PATCH 2/4] test(range-slider): update tests remove tests for field base and add test for className prop --- .../RangeSlider/RangeSlider.spec.tsx | 68 ++----------------- src/components/RangeSlider/RangeSlider.tsx | 1 - 2 files changed, 7 insertions(+), 62 deletions(-) diff --git a/src/components/RangeSlider/RangeSlider.spec.tsx b/src/components/RangeSlider/RangeSlider.spec.tsx index 4f3885fee..260cf93a0 100644 --- a/src/components/RangeSlider/RangeSlider.spec.tsx +++ b/src/components/RangeSlider/RangeSlider.spec.tsx @@ -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', () => { @@ -137,42 +144,6 @@ describe('Components / Button', () => { }); describe('Theme', () => { - 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: { @@ -217,30 +188,6 @@ 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: { @@ -273,6 +220,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.tsx b/src/components/RangeSlider/RangeSlider.tsx index 0f95d66d7..1ea2d4ac1 100644 --- a/src/components/RangeSlider/RangeSlider.tsx +++ b/src/components/RangeSlider/RangeSlider.tsx @@ -35,7 +35,6 @@ export const RangeSlider = forwardRef( return ( <> Date: Tue, 9 Jan 2024 13:50:08 +0400 Subject: [PATCH 3/4] test(range-slider): fix top-level test name --- src/components/RangeSlider/RangeSlider.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RangeSlider/RangeSlider.spec.tsx b/src/components/RangeSlider/RangeSlider.spec.tsx index 260cf93a0..d68a3974f 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(); From a89707224264d6c4e9065783c6cf786ea4a09554 Mon Sep 17 00:00:00 2001 From: Karina Grishaeva Date: Thu, 11 Jan 2024 15:41:09 +0400 Subject: [PATCH 4/4] refactor(range-slider): change theme API remove unused field theme props BREAKING CHANGE: RangeSlider theme API changed --- .../RangeSlider/RangeSlider.spec.tsx | 36 ++++++------------- .../RangeSlider/RangeSlider.stories.tsx | 2 +- src/components/RangeSlider/RangeSlider.tsx | 21 ++--------- src/components/RangeSlider/index.ts | 7 +--- src/components/RangeSlider/theme.ts | 18 +++------- 5 files changed, 19 insertions(+), 65 deletions(-) diff --git a/src/components/RangeSlider/RangeSlider.spec.tsx b/src/components/RangeSlider/RangeSlider.spec.tsx index d68a3974f..b1375d615 100644 --- a/src/components/RangeSlider/RangeSlider.spec.tsx +++ b/src/components/RangeSlider/RangeSlider.spec.tsx @@ -144,14 +144,10 @@ describe('Components / RangeSlider', () => { }); describe('Theme', () => { - it('should use `base` classes of input', () => { + it('should use `base` classes', () => { const theme: CustomFlowbiteTheme = { rangeSlider: { - field: { - input: { - base: 'dummy-range-slider-field-input-base-classes', - }, - }, + base: 'dummy-range-slider-field-input-base-classes', }, }; @@ -164,15 +160,11 @@ describe('Components / RangeSlider', () => { 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', }, }, }; @@ -188,13 +180,9 @@ describe('Components / RangeSlider', () => { }); describe('Theme as a prop', () => { - it('should use `base` classes of input', () => { + it('should use `base` classes', () => { const theme: CustomFlowbiteTheme['rangeSlider'] = { - field: { - input: { - base: 'dummy-range-slider-field-input-base-classes', - }, - }, + base: 'dummy-range-slider-field-input-base-classes', }; render(); @@ -202,14 +190,10 @@ describe('Components / RangeSlider', () => { 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', }, }; 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 1ea2d4ac1..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,12 +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', }, };