From 6239c7eaf7fe235d95b66f6747fcc678ccddb473 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Fri, 1 May 2026 08:17:25 +1000 Subject: [PATCH 1/2] feat: Textfield prefix (#9957) * feat: textfield and textarea prefix * Make stories better * add docs * Add chromatic tests * fix lint * make example more realistic, fix sizing --- .../s2/chromatic/TextField.stories.tsx | 32 ++++++++++ packages/@react-spectrum/s2/src/TextField.tsx | 60 +++++++++++++++---- .../s2/stories/TextField.stories.tsx | 31 +++++++++- packages/dev/s2-docs/pages/s2/TextArea.mdx | 20 +++++++ packages/dev/s2-docs/pages/s2/TextField.mdx | 20 +++++++ 5 files changed, 151 insertions(+), 12 deletions(-) diff --git a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx index 6b36960b013..f74206e0e74 100644 --- a/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/TextField.stories.tsx @@ -16,6 +16,7 @@ import {Content, Footer, Heading, Text} from '../src/Content'; import {ContextualHelp} from '../src/ContextualHelp'; import {Form} from '../src/Form'; import {Link} from '../src/Link'; +import Magnifier from '../s2wf-icons/S2_Icon_Search_20_N.svg'; import type {Meta, StoryObj} from '@storybook/react'; import {style} from '../style/spectrum-theme' with {type: 'macro'}; import {TextArea, TextField} from '../src/TextField'; @@ -42,6 +43,21 @@ export const Example: Story = { } }; +export const ExampleWithPrefixText: Story = { + render: (args) => , + args: { + label: 'Name', + placeholder: 'Enter your name' + } +}; + +export const ExampleWithPrefixIcon: Story = { + render: (args) => } />, + args: { + label: 'Name', + placeholder: 'Enter your name' + } +}; export const Validation: Story = { render: (args) => (
@@ -90,6 +106,22 @@ export const TextAreaExample: StoryObj = { } }; +export const TextAreaExampleWithPrefixText: StoryObj = { + render: (args) =>