Improve TextField

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Button/types.ts

@@ -15,7 +15,6 @@
  */
 
 import type { ButtonOwnProps } from './Button.props';
-import { ReactElement } from 'react';
 
 /**
  * Properties for {@link Button}
@@ -44,10 +43,10 @@ export interface ButtonProps
   /**
    * Optional icon to display at the start of the button
    */
-  iconStart?: ReactElement;
+  iconStart?: React.ReactNode;
 
   /**
    * Optional icon to display at the end of the button
    */
-  iconEnd?: ReactElement;
+  iconEnd?: React.ReactNode;
 }

packages/canon/src/components/TextField/TextField.stories.tsx

@@ -17,6 +17,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { TextField } from './TextField';
 import { Flex } from '../Flex';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/TextField',
@@ -79,8 +80,8 @@ export const Sizes: Story = {
   },
   render: args => (
     <Flex direction="row" gap="4" style={{ width: '100%', maxWidth: '600px' }}>
-      <TextField {...args} size="small" />
-      <TextField {...args} size="medium" />
+      <TextField {...args} size="small" icon={<Icon name="bug" />} />
+      <TextField {...args} size="medium" icon={<Icon name="bug" />} />
     </Flex>
   ),
 };
@@ -114,7 +115,7 @@ export const WithIcon: Story = {
   args: {
     ...WithLabel.args,
     placeholder: 'Search...',
-    icon: 'search',
+    icon: <Icon name="search" />,
   },
 };
 

packages/canon/src/components/TextField/TextField.styles.css

@@ -59,15 +59,24 @@
   background-color: var(--canon-bg-surface-1);
 }
 
-.canon-TextFieldInputIcon {
-  display: block;
-  padding-right: var(--canon-space-1);
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-TextFieldIcon {
+  margin-right: var(--canon-space-1);
   color: var(--canon-fg-primary);
   flex-shrink: 0;
 }
 
+.canon-TextFieldIcon[data-size='small'],
+.canon-TextFieldIcon[data-size='small'] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.canon-TextFieldIcon[data-size='medium'],
+.canon-TextFieldIcon[data-size='medium'] svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .canon-TextFieldInput {
   border: none;
   background: none;

packages/canon/src/components/TextField/TextField.tsx

@@ -27,7 +27,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
   (props: TextFieldProps, ref) => {
     const {
       className,
-      size = 'medium',
+      size = 'small',
       label,
       description,
       error,
@@ -61,7 +61,15 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
           </Field.Label>
         )}
         <div className="canon-TextFieldInputWrapper" data-size={responsiveSize}>
-          {icon && <Icon className="canon-TextFieldInputIcon" name={icon} />}
+          {icon && (
+            <div
+              className="canon-TextFieldIcon"
+              aria-hidden="true"
+              data-size={responsiveSize}
+            >
+              {icon}
+            </div>
+          )}
           <Field.Control
             className="canon-TextFieldInput"
             required={required}

packages/canon/src/components/TextField/types.ts

@@ -15,7 +15,6 @@
  */
 
 import type { Breakpoint } from '../../types';
-import type { IconNames } from '../Icon';
 
 /** @public */
 export interface TextFieldProps
@@ -54,7 +53,7 @@ export interface TextFieldProps
   /**
    * An icon to render before the input
    */
-  icon?: IconNames;
+  icon?: React.ReactNode;
 
   /**
    * Handler to call when the clear button is pressed