make example more realistic, fix sizing

Author: snowystinger

packages/@react-spectrum/s2/src/TextField.tsx

@@ -14,7 +14,7 @@ import {TextArea as AriaTextArea, TextAreaContext as AriaTextAreaContext} from '
 import {TextContext as AriaTextContext} from 'react-aria-components/Text';
 import {TextField as AriaTextField, TextFieldProps as AriaTextFieldProps} from 'react-aria-components/TextField';
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, style} from '../style' with {type: 'macro'};
+import {centerPadding, fontRelative, style} from '../style' with {type: 'macro'};
 import {composeRenderProps} from 'react-aria-components/composeRenderProps';
 import {ContextValue, DEFAULT_SLOT, Provider, useSlottedContext} from 'react-aria-components/slots';
 import {controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -150,6 +150,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldP
                   [IconContext, {
                     render: centerBaseline({}),
                     styles: style({
+                      size: fontRelative(20),
                       '--iconPrimary': {
                         type: 'fill',
                         value: 'currentColor'

packages/@react-spectrum/s2/stories/TextField.stories.tsx

@@ -15,7 +15,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 MentionIcon from '../s2wf-icons/S2_Icon_Mention_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
 import {TextArea, TextField} from '../src/TextField';
@@ -180,7 +180,7 @@ export const TextFieldWithAddons: StoryTextField = {
     <Form>
       <TextField {...args} label="Phone Number" prefix="#" placeholder="(000) 000-0000" />
       <TextField {...args} label="URL" prefix="https://" placeholder="example.com" />
-      <TextField {...args} label="Search" prefix={<Magnifier />} placeholder="Search phrase" />
+      <TextField {...args} label="Mention" prefix={<MentionIcon />} placeholder="username" />
       <Button type="submit" variant="primary">Submit</Button>
     </Form>
   ),
@@ -194,7 +194,7 @@ export const TextAreaWithAddons: StoryTextArea = {
   render: (args) => (
     <Form>
       <TextArea {...args} label="Phone Number" prefix="#" placeholder="(000) 000-0000" />
-      <TextArea {...args} label="Search" prefix={<Magnifier />} placeholder="Search phrase" />
+      <TextArea {...args} label="Mention" prefix={<MentionIcon />} placeholder="username" />
       <Button type="submit" variant="primary">Submit</Button>
     </Form>
   ),

packages/dev/s2-docs/pages/s2/TextArea.mdx

@@ -57,14 +57,14 @@ Use the `prefix` prop to display a prefix in the text area. Either a string or w
 ```tsx render
 "use client";
 import {TextArea} from '@react-spectrum/s2/TextArea';
-import Magnifier from '@react-spectrum/s2/icons/Search';
+import MentionIcon from '@react-spectrum/s2/icons/Mention';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example() {
   return (
     <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
       <TextArea label="Irrational number" prefix="#" placeholder="3.1415926535897932384626433832795028841971" />
-      <TextArea label="Search" prefix={<Magnifier />} placeholder="Search phrase" />
+      <TextArea label="Mention" prefix={<MentionIcon />} placeholder="username" />
     </div>
   );
 }

packages/dev/s2-docs/pages/s2/TextField.mdx

@@ -57,15 +57,15 @@ Use the `prefix` prop to display a prefix in the text field. Either a string or
 ```tsx render
 "use client";
 import {TextField} from '@react-spectrum/s2/TextField';
-import Magnifier from '@react-spectrum/s2/icons/Search';
+import MentionIcon from '@react-spectrum/s2/icons/Mention';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example() {
   return (
     <div className={style({display: 'flex', flexDirection: 'column', gap: 8})}>
       <TextField label="Phone Number" prefix="#" placeholder="(000) 000-0000" type="tel" />
       <TextField label="URL" prefix="https://" placeholder="example.com" />
-      <TextField label="Search" prefix={<Magnifier />} placeholder="Search phrase" />
+      <TextField label="Mention" prefix={<MentionIcon />} placeholder="username" />
     </div>
   );
 }