fix: introduce back start and end addon on input

ivan-dalmet · ivan-dalmet · commit 4811903ad199 · 2026-01-09T10:43:13.000+01:00
diff --git a/src/components/ui/date-input.stories.tsx b/src/components/ui/date-input.stories.tsx
@@ -4,9 +4,9 @@ import { useState } from 'react';
 import { useDisclosure } from 'react-use-disclosure';
 
 import { onSubmit } from '@/components/form/docs.utils';
-import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { DateInput } from '@/components/ui/date-input';
+import { InputGroupButton } from '@/components/ui/input-group';
 import {
   Popover,
   PopoverContent,
@@ -43,15 +43,15 @@ export const WithPicker = () => {
     <DateInput
       onChange={(date) => setDate(date)}
       value={date}
-      endElement={
+      endAddon={
         <Popover
           open={datePicker.isOpen}
           onOpenChange={(open) => datePicker.toggle(open)}
         >
           <PopoverTrigger asChild>
-            <Button size="icon-xs" className="-mr-1.5">
+            <InputGroupButton size="icon-xs">
               <CalendarIcon />
-            </Button>
+            </InputGroupButton>
           </PopoverTrigger>
           <PopoverContent className="w-auto p-0" align="start">
             <Calendar
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
@@ -2,9 +2,9 @@ import { CalendarIcon } from 'lucide-react';
 import { ComponentProps } from 'react';
 import { useDisclosure } from 'react-use-disclosure';
 
-import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { DateInput } from '@/components/ui/date-input';
+import { InputGroupButton } from '@/components/ui/input-group';
 import {
   Popover,
   PopoverContent,
@@ -29,16 +29,16 @@ export const DatePicker = ({
   return (
     <DateInput
       {...props}
-      endElement={
+      endAddon={
         noCalendar ? null : (
           <Popover
             open={datePicker.isOpen}
             onOpenChange={(open) => datePicker.toggle(open)}
           >
             <PopoverTrigger asChild>
-              <Button size="icon-xs" variant="secondary">
+              <InputGroupButton size="icon-xs">
                 <CalendarIcon />
-              </Button>
+              </InputGroupButton>
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0" align="start">
               <Calendar
diff --git a/src/components/ui/input.stories.tsx b/src/components/ui/input.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta } from '@storybook/react-vite';
+import { MailIcon } from 'lucide-react';
 
 import { Input } from '@/components/ui/input';
+import { InputGroupText } from '@/components/ui/input-group';
 
 export default {
   title: 'Input',
@@ -31,3 +33,38 @@ export const Sizes = () => {
     </div>
   );
 };
+export const StartEndAddons = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-sm">
+        See <strong>InputGroup</strong> for more advanced use cases
+      </p>
+      <Input
+        startAddon={<MailIcon />}
+        defaultValue="Icon start"
+        placeholder="Placeholder..."
+      />
+      <Input
+        endAddon={<MailIcon />}
+        defaultValue="Icon end"
+        placeholder="Placeholder..."
+      />
+      <Input
+        startAddon={<MailIcon />}
+        endAddon={<MailIcon />}
+        defaultValue="Icon start and end"
+        placeholder="Placeholder..."
+      />
+      <Input
+        startAddon={<InputGroupText>https://</InputGroupText>}
+        defaultValue="Text start"
+        placeholder="Placeholder..."
+      />
+      <Input
+        endAddon={<InputGroupText>.com</InputGroupText>}
+        defaultValue="Text end"
+        placeholder="Placeholder..."
+      />
+    </div>
+  );
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -1,4 +1,10 @@
-import { InputGroup, InputGroupInput } from '@/components/ui/input-group';
+import { ReactNode } from 'react';
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@/components/ui/input-group';
 
 type InputProps = Pick<
   React.ComponentProps<'input'>,
@@ -23,12 +29,27 @@ type InputProps = Pick<
 > &
   Pick<React.ComponentProps<typeof InputGroup>, 'size'> & {
     ref?: React.Ref<HTMLInputElement | null>;
+    startAddon?: ReactNode;
+    endAddon?: ReactNode;
   };
 
-function Input({ ref, size, ...props }: InputProps) {
+function Input({
+  ref,
+  size,
+  className,
+  startAddon,
+  endAddon,
+  ...props
+}: InputProps) {
   return (
-    <InputGroup size={size}>
+    <InputGroup size={size} className={className}>
+      {!!startAddon && (
+        <InputGroupAddon align="inline-start">{startAddon}</InputGroupAddon>
+      )}
       <InputGroupInput {...props} ref={ref} data-slot="input" />
+      {!!endAddon && (
+        <InputGroupAddon align="inline-end">{endAddon}</InputGroupAddon>
+      )}
     </InputGroup>
   );
 }
diff --git a/src/components/ui/select.stories.tsx b/src/components/ui/select.stories.tsx
@@ -1,8 +1,10 @@
 import { faker } from '@faker-js/faker';
+import { ComboboxButton } from '@headlessui/react';
 import { Meta } from '@storybook/react-vite';
-import { CheckIcon } from 'lucide-react';
+import { ArrowDown, CheckIcon } from 'lucide-react';
 import { useState } from 'react';
 
+import { InputGroupButton } from '@/components/ui/input-group';
 import { ComboboxOption, Select } from '@/components/ui/select';
 
 export default {
@@ -208,8 +210,12 @@ export const Customization = () => {
     <Select
       options={astrobears}
       inputProps={{
-        className:
-          'bg-warning-200 text-warning-700 border-transparent shadow-none dark:bg-warning-800',
+        endAddon: (
+          <ComboboxButton as={InputGroupButton} size="icon-xs">
+            <ArrowDown />
+          </ComboboxButton>
+        ),
+        className: 'bg-warning-200 border-none shadow-none dark:bg-warning-800',
       }}
       value={bear}
       onChange={(v) => setBear(v)}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -16,33 +16,30 @@ import { isEmpty, isNonNullish, isNullish } from 'remeda';
 
 import { cn } from '@/lib/tailwind/utils';
 
-import { Button } from '@/components/ui/button';
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from '@/components/ui/input-group';
+import { Input } from '@/components/ui/input';
+import { InputGroupButton } from '@/components/ui/input-group';
 
 type OptionBase = { id: string; label: string; disabled?: boolean };
 type TValueBase = OptionBase | null;
 
-type InputPropsRoot = Pick<ComponentProps<typeof InputGroup>, 'size'> &
-  Pick<
-    ComponentProps<typeof InputGroupInput>,
-    | 'placeholder'
-    | 'aria-invalid'
-    | 'aria-describedby'
-    | 'readOnly'
-    | 'autoFocus'
-  >;
+type InputProps = ComponentProps<typeof Input>;
+type InputPropsRoot = Pick<
+  InputProps,
+  | 'placeholder'
+  | 'size'
+  | 'aria-invalid'
+  | 'aria-describedby'
+  | 'readOnly'
+  | 'autoFocus'
+>;
 
 type SelectProps<TValue extends TValueBase> = ComboboxProps<TValue, false> &
   InputPropsRoot & {
     /** Allow user to clear the select using a button */
     withClearButton?: boolean;
     options: ReadonlyArray<NonNullable<TValue>>;
     inputProps?: Omit<
-      RemoveFromType<ComponentProps<typeof InputGroupInput>, InputPropsRoot>,
+      RemoveFromType<InputProps, InputPropsRoot>,
       // Removing the defaultValue from the input to avoid conflict with ComboboxInput type
       'defaultValue'
     >;
@@ -65,6 +62,7 @@ export const Select = <TValue extends TValueBase>({
   renderOption,
   onChange,
   value,
+  autoFocus,
   allowCustomValue = false,
   'aria-describedby': ariaDescribedBy,
   'aria-invalid': ariaInvalid,
@@ -123,10 +121,6 @@ export const Select = <TValue extends TValueBase>({
     return set('default');
   });
 
-  const { className: inputGroupClassName, ...restInputProps } = inputProps ?? {
-    className: '',
-  };
-
   return (
     <Combobox
       immediate
@@ -141,42 +135,41 @@ export const Select = <TValue extends TValueBase>({
       disabled={props.disabled || readOnly}
       {...props}
     >
-      <InputGroup size={size} className={inputGroupClassName}>
+      <div className="relative">
         {/* Setting the type so we have type check and typings for the displayValue prop */}
-        <ComboboxInput<TValue, typeof InputGroupInput>
-          as={InputGroupInput}
+        <ComboboxInput<TValue, typeof Input>
+          as={Input}
+          size={size}
           displayValue={(item) => item?.label ?? ''}
           onChange={handleInputChange}
+          autoFocus={autoFocus}
           placeholder={placeholder ?? t('components:select.placeholder')}
           aria-invalid={ariaInvalid}
           aria-describedby={ariaDescribedBy}
-          {...restInputProps}
-        />
-        <InputGroupAddon align="inline-end">
-          <div className="flex gap-1">
-            {!!withClearButton && value && (
-              <Button
-                variant="ghost"
+          endAddon={
+            <>
+              {!!withClearButton && value && (
+                <InputGroupButton
+                  size="icon-xs"
+                  className="-mr-1"
+                  onClick={() => {
+                    onChange?.(null);
+                  }}
+                >
+                  <XIcon />
+                </InputGroupButton>
+              )}
+              <ComboboxButton
+                as={InputGroupButton}
+                disabled={props.disabled}
                 size="icon-xs"
-                className="text-inherit"
-                onClick={() => {
-                  onChange?.(null);
-                }}
               >
-                <XIcon />
-              </Button>
-            )}
-            <ComboboxButton
-              as={Button}
-              variant="ghost"
-              disabled={props.disabled}
-              className="-me-1.5 text-inherit opacity-60 hover:opacity-100"
-              size="icon-xs"
-            >
-              <ChevronDownIcon aria-hidden="true" />
-            </ComboboxButton>
-          </div>
-        </InputGroupAddon>
+                <ChevronDownIcon aria-hidden="true" />
+              </ComboboxButton>
+            </>
+          }
+          {...inputProps}
+        />
 
         <ComboboxOptions
           anchor="bottom start"
@@ -211,7 +204,7 @@ export const Select = <TValue extends TValueBase>({
             )
             .exhaustive()}
         </ComboboxOptions>
-      </InputGroup>
+      </div>
     </Combobox>
   );
 };
