diff --git a/packages/ui/lib/components/Form/Input.stories.tsx b/packages/ui/lib/components/Form/Input.stories.tsx index 694c8e17f8c..752011870d6 100644 --- a/packages/ui/lib/components/Form/Input.stories.tsx +++ b/packages/ui/lib/components/Form/Input.stories.tsx @@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react' import { MdPerson as PersonIcon } from 'react-icons/md' import { FiAtSign as AtSignIcon } from 'react-icons/fi' import { IconBaseProps } from 'react-icons' +import { Button } from '../Button/Button' const meta = { component: Input, @@ -87,3 +88,32 @@ export const CustomDescription = { copy: true, }, } satisfies Story + +export const WithAction = { + args: { + label: 'Input with Single Action', + size: 'medium', + value: 'Some input value', + description: 'This input has a single action', + actions: ( + + ), + }, +} satisfies Story + +export const WithMultipleActions = { + args: { + label: 'Input with Multiple Actions', + size: 'medium', + value: 'Copyable text', + description: 'This input has multiple actions', + copy: true, + actions: ( + + ), + }, +} satisfies Story diff --git a/packages/ui/lib/components/Form/Input.tsx b/packages/ui/lib/components/Form/Input.tsx index 0d5b6f5903c..e9e3914f1cb 100644 --- a/packages/ui/lib/components/Form/Input.tsx +++ b/packages/ui/lib/components/Form/Input.tsx @@ -77,15 +77,10 @@ export const Input = forwardRef( } const inputButtonClass = twMerge( - 'px-2 py-0.5 border border-gray-300 flex items-center gap-2 hover:border-gray-400 text-gray-600 hover:text-black shadow-sm rounded-lg', + 'flex items-center justify-center gap-2 text-gray-600 hover:text-black', + 'min-w-[80px]', INPUT_BUTTON_SIZE[size] ) - const inputClass = twMerge( - 'block w-full box-border rounded-lg transition-all shadow-sm border border-gray-400 hover:border-gray-500 focus:ring-gray-500 focus:border-gray-500 focus:outline-none flex-1 disabled:bg-gray-100', - inputSizeStyle, - inputStateStyles, - icon ? 'pl-10' : iconRight ? 'pr-10' : undefined - ) return (