Merge pull request #1087 from kadena-community/refactor/input-left-icon-update

Refactor/input left icon update

Author: ferreroltd

.changeset/polite-forks-poke.md

@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': minor
+'@kadena/docs': minor
+---
+
+Updated leftIcon prop to icon

packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx

@@ -29,7 +29,7 @@ export const Subscribe: FC = () => {
               <Stack gap="$sm">
                 <Input
                   id="email"
-                  leftIcon="At"
+                  icon="At"
                   onChange={handleFormState}
                   placeholder="Email address"
                   outlined

packages/apps/tools/src/components/Global/AccountNameField/index.tsx

@@ -85,7 +85,7 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
           setSelectedAccount(e.target.value);
           onChange?.(e);
         }}
-        leftIcon={noIcon ? undefined : 'KIcon'}
+        icon={noIcon ? undefined : 'KIcon'}
       />
     ),
   };

packages/apps/tools/src/components/Global/RequestKeyField/index.tsx

@@ -50,7 +50,7 @@ const RequestKeyField: FC<IRequestKeyFieldProps> = ({
       inputProps={{
         id: 'request-key-input',
         placeholder: t('Enter Request Key'),
-        leftIcon: 'KeyIconFilled',
+        icon: 'KeyIconFilled',
         ...inputProps,
       }}
     />

packages/libs/react-ui/src/components/Input/Input.stories.tsx

@@ -59,7 +59,7 @@ const meta: Meta<IInputProps> = {
         defaultValue: { summary: 'false' },
       },
     },
-    leftIcon: {
+    icon: {
       description:
         'Icon rendered inside the input to the left of the input text.',
       options: [
@@ -115,24 +115,24 @@ export default meta;
 type Story = StoryObj<
   {
     leadingText: string;
-    leftIcon: keyof typeof SystemIcon;
+    icon: keyof typeof SystemIcon;
     rightIcon: keyof typeof SystemIcon;
     type: React.HTMLInputTypeAttribute;
-  } & Omit<IInputProps, 'leftIcon' | 'rightIcon'>
+  } & Omit<IInputProps, 'icon' | 'rightIcon'>
 >;
 
 export const Dynamic: Story = {
   name: 'Input',
   args: {
-    leftIcon: undefined,
+    icon: undefined,
     type: 'text',
     rightIcon: undefined,
     leadingText: '',
     leadingTextWidth: undefined,
     outlined: false,
   },
   render: ({
-    leftIcon,
+    icon,
     rightIcon,
     outlined,
     leadingText,
@@ -143,7 +143,7 @@ export const Dynamic: Story = {
   }) => (
     <Input
       id="inlineInputStory"
-      leftIcon={leftIcon}
+      icon={icon}
       rightIcon={rightIcon}
       onChange={onChange}
       placeholder="This is a placeholder"
@@ -159,14 +159,14 @@ export const Dynamic: Story = {
 export const InlineWithButton: Story = {
   name: 'Inline with button',
   args: {
-    leftIcon: undefined,
+    icon: undefined,
     type: 'text',
   },
-  render: ({ leftIcon, onChange, type }) => (
+  render: ({ icon, onChange, type }) => (
     <Stack gap="$xs" alignItems="stretch">
       <Input
         id="inlineInputStory"
-        leftIcon={leftIcon}
+        icon={icon}
         onChange={onChange}
         placeholder="This is a placeholder"
         outlined

packages/libs/react-ui/src/components/Input/Input.tsx

@@ -21,7 +21,7 @@ export interface IInputProps
   > {
   leadingText?: string;
   leadingTextWidth?: keyof typeof vars.sizes;
-  leftIcon?: keyof typeof SystemIcon;
+  icon?: keyof typeof SystemIcon;
   rightIcon?: keyof typeof SystemIcon;
   disabled?: boolean;
   type?: React.HTMLInputTypeAttribute;
@@ -36,15 +36,15 @@ export const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
       outlined,
       leadingText,
       leadingTextWidth,
-      leftIcon,
+      icon,
       rightIcon,
       disabled = false,
       ...rest
     },
     ref,
   ) {
     const RightIcon = rightIcon && SystemIcon[rightIcon];
-    const LeftIcon = leftIcon && SystemIcon[leftIcon];
+    const Icon = icon && SystemIcon[icon];
 
     return (
       <div
@@ -65,7 +65,7 @@ export const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
           </div>
         )}
         <div className={inputContainerClass}>
-          {LeftIcon && <LeftIcon size="md" />}
+          {Icon && <Icon size="md" />}
           <input
             ref={ref}
             className={inputClass}

packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx

@@ -10,7 +10,7 @@ import { statusVariant } from './InputWrapper.css';
 type StoryProps = {
   helperText: string;
   leadingText: string;
-  leftIcon: keyof typeof SystemIcon;
+  icon: keyof typeof SystemIcon;
   rightIcon: keyof typeof SystemIcon;
 } & IInputWrapperProps;
 

packages/libs/react-ui/src/components/TextField/TextField.stories.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 type StoryProps = {
   helperText: string;
   leadingText: string;
-  leftIcon: keyof typeof SystemIcon;
+  icon: keyof typeof SystemIcon;
   rightIcon: keyof typeof SystemIcon;
 } & ITextFieldProps;
 
@@ -87,7 +87,7 @@ const meta: Meta<StoryProps> = {
         defaultValue: { summary: 'false' },
       },
     },
-    leftIcon: {
+    icon: {
       description:
         'Icon rendered inside the input to the left of the input text.',
       options: Object.keys(SystemIcon) as (keyof typeof SystemIcon)[],
@@ -123,14 +123,14 @@ export const Group: Story = {
     label: 'Label',
     disabled: false,
     status: undefined,
-    leftIcon: 'Account',
+    icon: 'Account',
     rightIcon: undefined,
     leadingText: 'Leading',
     leadingTextWidth: undefined,
   },
   render: ({
     leadingText,
-    leftIcon,
+    icon,
     rightIcon,
     disabled,
     status,
@@ -152,7 +152,7 @@ export const Group: Story = {
         inputProps={{
           id: 'inputStory',
           leadingText,
-          leftIcon,
+          icon,
           rightIcon,
           placeholder: 'This is a placeholder',
         }}