Docs improvements

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

canon-docs/src/app/(docs)/components/text-field/page.mdx

@@ -33,9 +33,16 @@ A text field component for your forms.
   <Tabs.Panel>
     We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
     your brand. For additional flexibility, you can use the provided class names for each element listed below.
-    <CodeBlock
-      code={`<TextField className="canon-TextField" />`}
-    />
+    - `canon-TextField`
+    - `canon-TextFieldLabel`
+    - `canon-TextFieldRequired`
+    - `canon-TextFieldInputWrapper`
+    - `canon-TextFieldIcon`
+    - `canon-TextFieldInput`
+    - `canon-TextFieldClearButton`
+    - `canon-TextFieldClearButtonIcon`
+    - `canon-TextFieldDescription`
+    - `canon-TextFieldError`
   </Tabs.Panel>
 </Tabs.Root>
 
@@ -55,8 +62,8 @@ We support two different sizes: `small`, `medium`.
   open
   preview={<TextFieldSnippet story="Sizes" />}
   code={`<Flex direction="row" gap="4">
-    <TextField size="small" placeholder="Small" />
-    <TextField size="medium" placeholder="Medium" />
+    <TextField size="small" placeholder="Small" icon={<Icon name="sparkling" />} />
+    <TextField size="medium" placeholder="Medium" icon={<Icon name="sparkling" />} />
   </Flex>`}
 />
 

canon-docs/src/app/(docs)/components/text-field/props.ts

@@ -5,12 +5,16 @@ export const inputPropDefs: Record<string, PropDef> = {
   size: {
     type: 'enum',
     values: ['small', 'medium'],
-    default: 'medium',
-    responsive: false,
+    default: 'small',
+    responsive: true,
   },
   label: {
     type: 'string',
   },
+  icon: {
+    type: 'enum',
+    values: ['ReactNode'],
+  },
   description: {
     type: 'string',
   },

packages/canon/report.api.md

@@ -15,6 +15,7 @@ import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { Menu as Menu_2 } from '@base-ui-components/react/menu';
+import type { MouseEventHandler } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -1220,10 +1221,10 @@ export interface TextFieldProps
   className?: string;
   description?: string;
   error?: string | null;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   label?: string;
   name: string;
-  onClear?: React.MouseEventHandler<HTMLButtonElement>;
+  onClear?: MouseEventHandler<HTMLButtonElement>;
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
 }
 

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

@@ -80,8 +80,8 @@ export const Sizes: Story = {
   },
   render: args => (
     <Flex direction="row" gap="4" style={{ width: '100%', maxWidth: '600px' }}>
-      <TextField {...args} size="small" icon={<Icon name="bug" />} />
-      <TextField {...args} size="medium" icon={<Icon name="bug" />} />
+      <TextField {...args} size="small" icon={<Icon name="sparkling" />} />
+      <TextField {...args} size="medium" icon={<Icon name="sparkling" />} />
     </Flex>
   ),
 };

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

@@ -15,7 +15,7 @@
  */
 
 import type { Breakpoint } from '../../types';
-
+import type { ReactNode, MouseEventHandler } from 'react';
 /** @public */
 export interface TextFieldProps
   extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
@@ -53,10 +53,10 @@ export interface TextFieldProps
   /**
    * An icon to render before the input
    */
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 
   /**
    * Handler to call when the clear button is pressed
    */
-  onClear?: React.MouseEventHandler<HTMLButtonElement>;
+  onClear?: MouseEventHandler<HTMLButtonElement>;
 }