Allow displaying field status (error, warning, info) under form fields (#38175)

app/javascript/mastodon/features/account_timeline/modals/note_modal.tsx

@@ -141,8 +141,11 @@ const InnerNodeModal: FC<{
             onChange={handleChange}
             label={intl.formatMessage(messages.fieldLabel)}
             className={classes.noteInput}
-            hasError={state === 'error'}
-            hint={errorText}
+            status={
+              state === 'error'
+                ? { variant: 'error', message: errorText }
+                : undefined
+            }
             // eslint-disable-next-line jsx-a11y/no-autofocus -- We want to focus here as it's a modal.
             autoFocus
           />

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -1,12 +1,15 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import { useHistory } from 'react-router-dom';
 
 import { isFulfilled } from '@reduxjs/toolkit';
 
-import { inputToHashtag } from '@/mastodon/utils/hashtags';
+import {
+  hasSpecialCharacters,
+  inputToHashtag,
+} from '@/mastodon/utils/hashtags';
 import type {
   ApiCreateCollectionPayload,
   ApiUpdateCollectionPayload,
@@ -31,6 +34,7 @@ import classes from './styles.module.scss';
 import { WizardStepHeader } from './wizard_step_header';
 
 export const CollectionDetails: React.FC = () => {
+  const intl = useIntl();
   const dispatch = useAppDispatch();
   const history = useHistory();
   const { id, name, description, topic, discoverable, sensitive, accountIds } =
@@ -152,6 +156,11 @@ export const CollectionDetails: React.FC = () => {
     ],
   );
 
+  const topicHasSpecialCharacters = useMemo(
+    () => hasSpecialCharacters(topic),
+    [topic],
+  );
+
   return (
     <form onSubmit={handleSubmit} className={classes.form}>
       <FormStack className={classes.formFieldStack}>
@@ -224,6 +233,18 @@ export const CollectionDetails: React.FC = () => {
           autoCorrect='off'
           spellCheck='false'
           maxLength={40}
+          status={
+            topicHasSpecialCharacters
+              ? {
+                  variant: 'warning',
+                  message: intl.formatMessage({
+                    id: 'collections.topic_special_chars_hint',
+                    defaultMessage:
+                      'Special characters will be removed when saving',
+                  }),
+                }
+              : undefined
+          }
         />
 
         <Fieldset

app/javascript/mastodon/features/onboarding/profile.tsx

@@ -230,7 +230,7 @@ export const Profile: React.FC<{
               }
               value={displayName}
               onChange={handleDisplayNameChange}
-              hasError={!!errors?.display_name}
+              status={errors?.display_name ? 'error' : undefined}
               id='display_name'
             />
           </div>
@@ -252,7 +252,7 @@ export const Profile: React.FC<{
               }
               value={note}
               onChange={handleNoteChange}
-              hasError={!!errors?.note}
+              status={errors?.note ? 'error' : undefined}
               id='note'
             />
           </div>