ref(textarea): renaming to natural name maxLength

digitalservicebund · Dec 6, 2024 · a36df36 · a36df36
1 parent 09f80df
commit a36df36
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 23 deletions.
diff --git a/app/components/inputs/Textarea.tsx b/app/components/inputs/Textarea.tsx
@@ -16,7 +16,7 @@ type TextareaProps = Readonly<{
     content: string;
   };
   placeholder?: string;
-  maxCharacterLimit: number;
+  maxLength: number;
   errorMessages?: ErrorMessageProps[];
   formId?: string;
   classNameLabel?: string;
@@ -33,7 +33,7 @@ const Textarea = ({
   label,
   details,
   placeholder,
-  maxCharacterLimit,
+  maxLength,
   errorMessages,
   classNameLabel,
   role,
@@ -61,7 +61,7 @@ const Textarea = ({
         {...getInputProps({
           id: name,
           placeholder,
-          maxLength: maxCharacterLimit,
+          maxLength,
         })}
         rows={TEXT_AREA_ROWS}
         className={classNames(

diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx
@@ -41,7 +41,7 @@ describe("Textarea component", () => {
         Component: () => (
           <Textarea
             name={componentName}
-            maxCharacterLimit={maxLength}
+            maxLength={maxLength}
             label="Test Label"
             formId="formId"
           />
@@ -74,7 +74,7 @@ describe("Textarea component", () => {
             label="Test Label"
             description="Test Description"
             formId="formId"
-            maxCharacterLimit={5000}
+            maxLength={5000}
           />
         ),
       },
@@ -102,7 +102,7 @@ describe("Textarea component", () => {
               content: "Lorem ipsum",
             }}
             formId="formId"
-            maxCharacterLimit={5000}
+            maxLength={5000}
           />
         ),
       },
@@ -123,7 +123,7 @@ describe("Textarea component", () => {
             name="test"
             errorMessages={[{ code: "required", text: "error" }]}
             formId="formId"
-            maxCharacterLimit={5000}
+            maxLength={5000}
           />
         ),
       },
@@ -143,11 +143,7 @@ describe("Textarea component", () => {
       {
         path: "",
         Component: () => (
-          <Textarea
-            maxCharacterLimit={5000}
-            name="componentName"
-            label="Test Label"
-          />
+          <Textarea maxLength={5000} name="componentName" label="Test Label" />
         ),
       },
     ]);
@@ -165,11 +161,7 @@ describe("Textarea component", () => {
       {
         path: "",
         Component: () => (
-          <Textarea
-            maxCharacterLimit={5000}
-            name="componentName"
-            label="Test Label"
-          />
+          <Textarea maxLength={5000} name="componentName" label="Test Label" />
         ),
       },
     ]);
@@ -199,7 +191,7 @@ describe("Textarea component", () => {
             name="componentName"
             label="Test Label"
             formId="formId"
-            maxCharacterLimit={maxLength}
+            maxLength={maxLength}
           />
         ),
       },

diff --git a/app/components/userFeedback/FeedbackFormBox.tsx b/app/components/userFeedback/FeedbackFormBox.tsx
@@ -76,7 +76,7 @@ export const FeedbackFormBox = ({
           placeholder={feedbackTranslations["placeholder-feedback"]}
           role="status"
           innerRef={textAreaReference}
-          maxCharacterLimit={TEXTAREA_CHAR_LIMIT}
+          maxLength={TEXTAREA_CHAR_LIMIT}
         />
         <ButtonContainer>
           <Button

diff --git a/app/services/cms/components/StrapiTextarea.tsx b/app/services/cms/components/StrapiTextarea.tsx
@@ -17,7 +17,7 @@ const StrapiTextareaSchema = z
     label: z.string().nullable(),
     placeholder: z.string().nullable(),
     errors: StrapiErrorRelationSchema,
-    maxCharacterLimit: z.number().default(TEXTAREA_CHAR_LIMIT),
+    maxLength: z.number().nullable(),
   })
   .merge(HasOptionalStrapiIdSchema);
 
@@ -28,9 +28,11 @@ export const StrapiTextareaComponentSchema = StrapiTextareaSchema.extend({
 });
 
 export const StrapiTextarea = ({ errors, ...props }: StrapiTextarea) => {
+  const maxLength = props.maxLength ?? TEXTAREA_CHAR_LIMIT;
   return (
     <Textarea
       {...omitNull(props)}
+      maxLength={maxLength}
       errorMessages={flattenStrapiErrors(errors)}
     />
   );

diff --git a/stories/Textarea.stories.tsx b/stories/Textarea.stories.tsx
@@ -21,7 +21,7 @@ export const Default: Story = {
     name: "textarea",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
+    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -32,7 +32,7 @@ export const WithDescription: Story = {
     description: "Lorem **ipsum**\n\n* _Lorem ipsum_\n* _Lorem ipsum_",
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
+    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };
@@ -46,7 +46,7 @@ export const Withdetails: Story = {
     },
     label: "Lorem ipsum dolor sit amet",
     formId: "formId",
-    maxCharacterLimit: TEXTAREA_CHAR_LIMIT,
+    maxLength: TEXTAREA_CHAR_LIMIT,
   },
   decorators: [(Story) => remixContext(Story)],
 };