diff --git a/src/components/RangeSelect/RangeSelect.stories.tsx b/src/components/RangeSelect/RangeSelect.stories.tsx index d910077..0886154 100644 --- a/src/components/RangeSelect/RangeSelect.stories.tsx +++ b/src/components/RangeSelect/RangeSelect.stories.tsx @@ -7,6 +7,10 @@ export default { component: RangeSelect, argTypes: { placeholder: { control: { type: 'text' } }, + rangeFromLabel: { control: { type: 'text' } }, + rangeToLabel: { control: { type: 'text' } }, + rangeFromPlaceholder: { control: { type: 'text' } }, + rangeToPlaceholder: { control: { type: 'text' } }, isDisabled: { control: { type: 'boolean' } }, isInvalid: { control: { type: 'boolean' } }, isFullWidth: { control: { type: 'boolean' } }, @@ -37,11 +41,7 @@ export default { const Template: StoryFn = (args) => ; export const Default = Template.bind({}); -Default.args = { - placeholder: 'Select a range', - rangeFromLabel: 'From', - rangeToLabel: 'To', -}; +Default.args = {}; export const WithValidation: StoryFn = (args) => { const [value, setValue] = useState(['', '']); diff --git a/src/components/RangeSelect/RangeSelect.test.tsx b/src/components/RangeSelect/RangeSelect.test.tsx index 8df5712..764c3d3 100644 --- a/src/components/RangeSelect/RangeSelect.test.tsx +++ b/src/components/RangeSelect/RangeSelect.test.tsx @@ -9,8 +9,8 @@ describe('The RangeSelect component', () => { expect(screen.getByText('Select a range')).toBeInTheDocument(); }); - it('opens dropdown and shows From/To labels when clicked', async () => { - render(); + it('opens dropdown and shows From/To labels and placeholders when clicked', async () => { + render(); const combobox = screen.getByRole('combobox'); await act(async () => { @@ -20,6 +20,8 @@ describe('The RangeSelect component', () => { await waitFor(() => { expect(screen.getByText('From')).toBeInTheDocument(); expect(screen.getByText('To')).toBeInTheDocument(); + expect(screen.getByPlaceholderText('10')).toBeInTheDocument(); + expect(screen.getByPlaceholderText('20')).toBeInTheDocument(); }); }); diff --git a/src/components/RangeSelect/RangeSelect.tsx b/src/components/RangeSelect/RangeSelect.tsx index c2312da..15dedac 100644 --- a/src/components/RangeSelect/RangeSelect.tsx +++ b/src/components/RangeSelect/RangeSelect.tsx @@ -12,13 +12,15 @@ export interface RangeSelectProps color?: string; clearText?: string; placeholder?: string; - isDisabled?: boolean; - isInvalid?: boolean; - isFullWidth?: boolean; rangeFromLabel?: string; rangeToLabel?: string; + rangeFromPlaceholder?: string; + rangeToPlaceholder?: string; rangeFromError?: string; rangeToError?: string; + isDisabled?: boolean; + isInvalid?: boolean; + isFullWidth?: boolean; value?: string[]; size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; dropdownWidth?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; @@ -28,22 +30,24 @@ export interface RangeSelectProps } export const RangeSelect: React.FC = ({ + variant = 'outline', + borderColor = selectRecipe.variants?.visual[variant]?.borderColor, + backgroundColor = selectRecipe.variants?.visual[variant]?.backgroundColor, color = 'black', - placeholder = 'Select a range', clearText = 'Clear', - isDisabled = false, - isInvalid = false, - isFullWidth = true, + placeholder = 'Select a range', rangeFromLabel = 'From', rangeToLabel = 'To', + rangeFromPlaceholder: fromPlaceholder = '', + rangeToPlaceholder: toPlaceholder = '', rangeFromError, rangeToError, + isDisabled = false, + isInvalid = false, + isFullWidth = true, + value, size = 'md', dropdownWidth, - variant = 'outline', - borderColor = selectRecipe.variants?.visual[variant]?.borderColor, - backgroundColor = selectRecipe.variants?.visual[variant]?.backgroundColor, - value, onChange, onClose, ...rest @@ -191,6 +195,7 @@ export const RangeSelect: React.FC = ({ handleRangeChange(0, e.target.value)} borderRadius="md" @@ -216,6 +221,7 @@ export const RangeSelect: React.FC = ({ handleRangeChange(1, e.target.value)}