Skip to content

fix: auto set static color auto and fix tokenfield docs regex for IME #10474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
LFDanLu wants to merge 2 commits into
base: main
Choose a base branch
from
+39 −29
Draft

fix: auto set static color auto and fix tokenfield docs regex for IME #10474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
71719a2
fix: auto set static color auto and fix tokenfield docs regex for IME
LFDanLu Aug 18, 2026
e990685
forgot to commit
LFDanLu Aug 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 35 additions & 25 deletions packages/@react-spectrum/ai/src/PromptField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
* governing permissions and limitations under the License.
*/

import {ActionButton} from '@react-spectrum/s2/ActionButton';
import {ActionButton, ActionButtonContext} from '@react-spectrum/s2/ActionButton';
import Attach from '@react-spectrum/s2/icons/Attach';
import {Attachment, AttachmentList, AttachmentListProps} from './AttachmentList';
import {Autocomplete} from 'react-aria-components/Autocomplete';
import {Button} from '@react-spectrum/s2/Button';
import {Button, ButtonContext} from '@react-spectrum/s2/Button';
import {Cell} from './loader/data';
import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
import {color, css, space, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};
Expand All @@ -39,6 +39,7 @@ import {Image, Text} from '@react-spectrum/s2/Card';
import intlMessages from '../intl/*.json';
import {isFileDropItem, useDrop} from 'react-aria-components/useDrop';
import {Link} from '@react-spectrum/s2/Link';
import {LinkButtonContext} from '@react-spectrum/s2/LinkButton';
import {Menu, MenuItem, MenuItemProps, MenuTrigger} from '@react-spectrum/s2/Menu';
import Microphone from '@react-spectrum/s2/icons/Microphone';
import {PixelLoader} from './loader/react';
Expand All @@ -53,10 +54,11 @@ import {
} from 'react-stately/useTokenFieldState';
import {PromptFieldContainer} from './PromptFieldContainer';
import {PromptFocusContext} from './Chat';
import {Provider} from 'react-aria-components/slots';
import Send from '@react-spectrum/s2/icons/ArrowUpSend';
import {setTokenFieldSelection} from 'react-aria/useTokenField';
import Stop from '@react-spectrum/s2/icons/StopProcessing';
import {ToggleButton} from '@react-spectrum/s2/ToggleButton';
import {ToggleButton, ToggleButtonContext} from '@react-spectrum/s2/ToggleButton';
import {
Token,
TokenField,
Expand Down Expand Up @@ -337,28 +339,36 @@ export const PromptField = forwardRef(function PromptField(
onAddAttachments,
onRemoveAttachments
}}>
<div ref={domRef} {...focusWithinProps}>
<PromptFieldContainer
{...dropProps}
role="group"
variant={variant}
brandColor={brandColor}
isGenerating={isGenerating ?? false}
isDropTarget={isDropTarget}
styles={styles}
inputRef={inputRef}>
{children}
</PromptFieldContainer>
<p className={style({font: 'ui-sm', textAlign: 'center'})}>
{stringFormatter.format('promptfield.aiDisclaimer')}{' '}
<Link
variant="secondary"
href="https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html"
target="_blank">
{stringFormatter.format('promptfield.aiUserGuidlines')}
</Link>
</p>
</div>
<Provider

@snowystinger snowystinger Aug 18, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we have chromatic for these components? would be nice to run it. if not, maybe revert this commit and make some, then run it, then undo the revert and run it again? that'd let us see the changes if any

values={[
[ButtonContext, {staticColor: 'auto'}],
[LinkButtonContext, {staticColor: 'auto'}],
[ActionButtonContext, {staticColor: 'auto'}],
[ToggleButtonContext, {staticColor: 'auto'}]
]}>
<div ref={domRef} {...focusWithinProps}>
<PromptFieldContainer
{...dropProps}
role="group"
variant={variant}
brandColor={brandColor}
isGenerating={isGenerating ?? false}
isDropTarget={isDropTarget}
styles={styles}
inputRef={inputRef}>
{children}
</PromptFieldContainer>
<p className={style({font: 'ui-sm', textAlign: 'center'})}>
{stringFormatter.format('promptfield.aiDisclaimer')}{' '}
<Link
variant="secondary"
href="https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html"
target="_blank">
{stringFormatter.format('promptfield.aiUserGuidlines')}
</Link>
</p>
</div>
</Provider>
</PromptFieldContext.Provider>
);
});
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/pages/react-aria/TagFieldValue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {type TokenFieldSegment, TokenFieldValue} from 'react-aria-components/Tok

export class TagFieldValue extends TokenFieldValue {
tokenize(text: string): TokenFieldSegment[] {
let parts = text.split(/[, \n]/);
let parts = text.split(/[,\s\u200B]/);

let segments: TokenFieldSegment[] = parts.map((part, i) => {
if (i === parts.length - 1 || part.length === 0) {
Expand Down
6 changes: 3 additions & 3 deletions packages/dev/s2-docs/pages/react-aria/TokenField.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const description = 'Allows users to enter text with inline tokens such a
/* PROPS */
defaultValue={TokenizingFieldValue.tokenize(
'This example automatically tokenizes #hashtags and @usernames in the text.',
/(?<=\s|^)[#@]\S+(?=\s)/g
/(?<=[\s\u200B]|^)[#@][^\s\u200B]+(?=[\s\u200B])/g
)}>
{segment => <Token>{segment.text}</Token>}
</TokenField>
Expand All @@ -38,7 +38,7 @@ export const description = 'Allows users to enter text with inline tokens such a
/* PROPS */
defaultValue={TokenizingFieldValue.tokenize(
'This example automatically tokenizes #hashtags and @usernames in the text.',
/(?<=\s|^)[#@]\S+(?=\s)/g
/(?<=[\s\u200B]|^)[#@][^\s\u200B]+(?=[\s\u200B])/g
)}>
{segment => <Token>{segment.text}</Token>}
</TokenField>
Expand Down Expand Up @@ -90,7 +90,7 @@ import {TokenizingFieldValue} from './TokenizingFieldValue';
allowsNewlines
defaultValue={TokenizingFieldValue.tokenize(
'This example automatically tokenizes #hashtags and @usernames in the text.',
/(?<=\s|^)[#@]\S+(?=\s)/g
/(?<=[\s\u200B]|^)[#@][^\s\u200B]+(?=[\s\u200B])/g
)}
label="Message">
{segment => <Token>{segment.text}</Token>}
Expand Down