fix(packages/ui): Input UI actions refactor (#14444)

* improve input layout and fix actions overlap * add new stories for inputs with single and multiple actions * update stories' labels and descriptions
unlock-protocol · Aug 21, 2024 · dab36d5 · dab36d5
1 parent 6c51c26
commit dab36d5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 10 deletions.
diff --git 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: (
+      <Button variant="borderless" className="p-2.5">
+        Continue
+      </Button>
+    ),
+  },
+} 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: (
+      <Button size="small" variant="borderless">
+        More
+      </Button>
+    ),
+  },
+} satisfies Story
diff --git 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 (
       <FieldLayout
@@ -98,7 +93,12 @@ export const Input = forwardRef(
         description={description}
         hidden={inputProps.type === 'hidden'}
       >
-        <div className="relative">
+        <div
+          className={twMerge(
+            'relative flex items-center w-full box-border rounded-lg transition-all shadow-sm border border-gray-400 hover:border-gray-500 focus-within:ring-gray-500 focus-within:border-gray-500',
+            inputStateStyles
+          )}
+        >
           {icon && (
             <span className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
               <div className={iconClass}>
@@ -112,7 +112,13 @@ export const Input = forwardRef(
             id={label}
             value={value}
             ref={ref}
-            className={inputClass}
+            title={value ? value.toString() : undefined}
+            className={twMerge(
+              'flex-grow min-w-0 bg-transparent border-none focus:ring-0 focus:outline-none transition-all duration-200',
+              'truncate focus:overflow-visible focus:whitespace-normal',
+              inputSizeStyle,
+              icon ? 'pl-10' : ''
+            )}
           />
           {iconRight && (
             <span className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
@@ -121,7 +127,7 @@ export const Input = forwardRef(
               </div>
             </span>
           )}
-          <div className="absolute inset-y-0 right-0 flex items-center pl-4 pr-1">
+          <div className="flex items-center space-x-2 flex-shrink-0 pr-2">
             {copy && !hidden && (
               <button onClick={() => setCopy()} className={inputButtonClass}>
                 <CopyIcon /> {isCopied ? 'Copied' : 'Copy'}