Merge pull request #4257 from JoinColony/fix/4014-title-length-counter

fix: show max length counter on action title
JoinColony · Feb 7, 2025 · 8e40288 · 8e40288
2 parents 1837f46 + b0d431f
commit 8e40288
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 22 deletions.
diff --git a/playwright/models/advanced-payment.ts b/playwright/models/advanced-payment.ts
@@ -17,7 +17,7 @@ type CSVFileInput =
 export class AdvancedPayment {
   static readonly validationMessages = {
     title: {
-      maxLengthExceeded: 'Title must not exceed 60 characters',
+      maxLengthExceeded: 'The maximum character limit is 60.',
       isRequired: 'Title is required',
     },
     allRequiredFields: [

diff --git a/playwright/models/simple-payment.ts b/playwright/models/simple-payment.ts
@@ -3,7 +3,7 @@ import type { Locator, Page } from '@playwright/test';
 export class SimplePayment {
   static readonly validationMessages = {
     title: {
-      maxLengthExceeded: 'Title must not exceed 60 characters',
+      maxLengthExceeded: 'The maximum character limit is 60.',
       isRequired: 'Title is required',
     },
     allRequiredFields: [

diff --git a/playwright/models/split-payment.ts b/playwright/models/split-payment.ts
@@ -3,7 +3,7 @@ import type { Page, Locator } from '@playwright/test';
 export class SplitPayment {
   static readonly validationMessages = {
     title: {
-      maxLengthExceeded: 'Title must not exceed 60 characters',
+      maxLengthExceeded: 'The maximum character limit is 60.',
       isRequired: 'Title is required',
     },
     allRequiredFields: [

diff --git a/playwright/models/staged-payment.ts b/playwright/models/staged-payment.ts
@@ -3,7 +3,7 @@ import type { Locator, Page } from '@playwright/test';
 export class StagedPayment {
   static readonly validationMessages = {
     title: {
-      maxLengthExceeded: 'Title must not exceed 60 characters',
+      maxLengthExceeded: 'The maximum character limit is 60.',
       isRequired: 'Title is required',
     },
     allRequiredFields: [

diff --git a/src/components/v5/common/ActionSidebar/consts.ts b/src/components/v5/common/ActionSidebar/consts.ts
@@ -33,6 +33,7 @@ export const ARBITRARY_TRANSACTIONS_FIELD_NAME = 'transactions';
 export const COLONY_OBJECTIVE_TITLE_FIELD_NAME = 'colonyObjectiveTitle';
 export const COLONY_OBJECTIVE_DESCRIPTION_FIELD_NAME =
   'colonyObjectiveDescription';
+export const ACTION_TITLE_MAX_LENGTH = 60;
 
 export const NON_RESETTABLE_FIELDS = [TITLE_FIELD_NAME, ACTION_TYPE_FIELD_NAME];
 
@@ -54,9 +55,9 @@ export const ACTION_BASE_VALIDATION_SCHEMA = object()
   .shape({
     title: string()
       .required(formatText({ id: 'errors.title.required' }))
-      .max(60, ({ max }) =>
+      .max(ACTION_TITLE_MAX_LENGTH, ({ max }) =>
         formatText(
-          { id: 'errors.title.maxLength' },
+          { id: 'errors.text.maxLength' },
           {
             maxLength: max,
           },

diff --git a/...components/v5/common/ActionSidebar/partials/ActionSidebarContent/ActionSidebarContent.tsx b/...components/v5/common/ActionSidebar/partials/ActionSidebarContent/ActionSidebarContent.tsx
@@ -18,6 +18,7 @@ import { formatText } from '~utils/intl.ts';
 import { isQueryActive } from '~utils/isQueryActive.ts';
 import ActionTypeSelect from '~v5/common/ActionSidebar/ActionTypeSelect.tsx';
 import {
+  ACTION_TITLE_MAX_LENGTH,
   ACTION_TYPE_FIELD_NAME,
   CREATED_IN_FIELD_NAME,
   DECISION_METHOD_FIELD_NAME,
@@ -141,6 +142,7 @@ const ActionSidebarFormContent: FC<ActionSidebarFormContentProps> = ({
           placeholder={formatText({ id: 'placeholder.title' })}
           className="leading-tight text-gray-900 transition-colors heading-3"
           message={false}
+          maxLength={ACTION_TITLE_MAX_LENGTH}
           shouldFocus
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
@@ -151,9 +153,7 @@ const ActionSidebarFormContent: FC<ActionSidebarFormContentProps> = ({
           onChange={(e) => {
             e.target.value = e.target.value.replace(/[\r\n\v]+/g, '');
           }}
-          wrapperClassName={clsx('flex flex-col', {
-            'mb-2': selectedAction,
-          })}
+          wrapperClassName="w-full"
         />
         {selectedAction && (
           <div

diff --git a/src/components/v5/common/Fields/TextareaBase/TextareaBase.tsx b/src/components/v5/common/Fields/TextareaBase/TextareaBase.tsx
@@ -85,19 +85,19 @@ const TextareaBase = React.forwardRef<HTMLTextAreaElement, TextareaBaseProps>(
             id={id}
             {...rest}
           />
+          {state === FieldState.Error &&
+            notMaybe(maxLength) &&
+            !withoutCounter && (
+              <div
+                className={clsx('absolute right-0 flex justify-end text-4', {
+                  'text-negative-400': state === FieldState.Error,
+                  'text-gray-500': state !== FieldState.Error,
+                })}
+              >
+                {typeof value === 'string' && value.length}/{maxLength}
+              </div>
+            )}
         </div>
-        {state === FieldState.Error &&
-          notMaybe(maxLength) &&
-          !withoutCounter && (
-            <div
-              className={clsx('absolute right-0 flex justify-end text-4', {
-                'text-negative-400': state === FieldState.Error,
-                'text-gray-500': state !== FieldState.Error,
-              })}
-            >
-              {typeof value === 'string' && value.length}/{maxLength}
-            </div>
-          )}
         {!!message && (
           <span
             className={clsx(

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1646,7 +1646,7 @@
     "colonyAvatar.chainImage.alt": "Chain logo",
     "colonyName": "Colony name",
     "errors.domain": "Team must be provided",
-    "errors.title.maxLength": "Title must not exceed {maxLength} characters",
+    "errors.text.maxLength": "The maximum character limit is {maxLength}.",
     "errors.description.maxLength": "Description must not exceed {maxLength} characters",
     "errors.title.required": "Title is required",
     "errors.decisionMethod.required": "Decision method is required",