feat(rangeselect): add customizable input placeholders

Author: ClaraTschamon

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<typeof RangeSelect> = (args) => <RangeSelect {...args} />;
 
 export const Default = Template.bind({});
-Default.args = {
-  placeholder: 'Select a range',
-  rangeFromLabel: 'From',
-  rangeToLabel: 'To',
-};
+Default.args = {};
 
 export const WithValidation: StoryFn<typeof RangeSelect> = (args) => {
   const [value, setValue] = useState<string[]>(['', '']);

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(<RangeSelect />);
+  it('opens dropdown and shows From/To labels and placeholders when clicked', async () => {
+    render(<RangeSelect rangeFromPlaceholder="10" rangeToPlaceholder="20" />);
 
     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();
     });
   });
 

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<RangeSelectProps> = ({
+  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<RangeSelectProps> = ({
                   <Input
                     type="number"
                     size="md"
+                    placeholder={fromPlaceholder}
                     value={selectedOptions[0] || ''}
                     onChange={(e) => handleRangeChange(0, e.target.value)}
                     borderRadius="md"
@@ -216,6 +221,7 @@ export const RangeSelect: React.FC<RangeSelectProps> = ({
                   </Text>
                   <Input
                     type="number"
+                    placeholder={toPlaceholder}
                     size="md"
                     value={selectedOptions[1] || ''}
                     onChange={(e) => handleRangeChange(1, e.target.value)}