Profile editing: Rearranging and adding fields (#38083)

app/javascript/mastodon/components/form_fields/emoji_text_field.stories.tsx

@@ -26,13 +26,13 @@ export const Simple: Story = {};
 
 export const WithMaxLength: Story = {
   args: {
-    maxLength: 20,
+    counterMax: 20,
   },
 };
 
 export const WithRecommended: Story = {
   args: {
-    maxLength: 20,
+    counterMax: 20,
     recommended: true,
   },
 };
@@ -52,7 +52,7 @@ export const TextArea: Story = {
         value={value}
         onChange={setValue}
         label='Label'
-        maxLength={100}
+        counterMax={100}
       />
     );
   },

app/javascript/mastodon/components/form_fields/emoji_text_field.tsx

@@ -26,7 +26,7 @@ import { TextInput } from './text_input_field';
 export type EmojiInputProps = {
   value?: string;
   onChange?: Dispatch<SetStateAction<string>>;
-  maxLength?: number;
+  counterMax?: number;
   recommended?: boolean;
 } & Omit<CommonFieldWrapperProps, 'wrapperClassName'>;
 
@@ -39,6 +39,7 @@ export const EmojiTextInputField: FC<
   hint,
   hasError,
   maxLength,
+  counterMax = maxLength,
   recommended,
   disabled,
   ...otherProps
@@ -49,7 +50,7 @@ export const EmojiTextInputField: FC<
     label,
     hint,
     hasError,
-    maxLength,
+    counterMax,
     recommended,
     disabled,
     inputRef,
@@ -63,6 +64,7 @@ export const EmojiTextInputField: FC<
         <TextInput
           {...inputProps}
           {...otherProps}
+          maxLength={maxLength}
           value={value}
           ref={inputRef}
         />
@@ -78,7 +80,8 @@ export const EmojiTextAreaField: FC<
   value,
   label,
   maxLength,
-  recommended = false,
+  counterMax = maxLength,
+  recommended,
   disabled,
   hint,
   hasError,
@@ -90,7 +93,7 @@ export const EmojiTextAreaField: FC<
     label,
     hint,
     hasError,
-    maxLength,
+    counterMax,
     recommended,
     disabled,
     inputRef: textareaRef,
@@ -104,6 +107,7 @@ export const EmojiTextAreaField: FC<
         <TextArea
           {...otherProps}
           {...inputProps}
+          maxLength={maxLength}
           value={value}
           ref={textareaRef}
         />
@@ -126,7 +130,7 @@ const EmojiFieldWrapper: FC<
   children,
   disabled,
   inputRef,
-  maxLength,
+  counterMax,
   recommended = false,
   ...otherProps
 }) => {
@@ -159,10 +163,10 @@ const EmojiFieldWrapper: FC<
         <>
           {children({ ...inputProps, onChange: handleChange })}
           <EmojiPickerButton onPick={handlePickEmoji} disabled={disabled} />
-          {maxLength && (
+          {counterMax && (
             <CharacterCounter
               currentString={value ?? ''}
-              maxLength={maxLength}
+              maxLength={counterMax}
               recommended={recommended}
               id={counterId}
             />