fix: align title length for forms

ONEARMY · Dec 15, 2021 · f0bb5bc · f0bb5bc
1 parent 37257a3
commit f0bb5bc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -33,7 +33,7 @@ import IconHeaderHowto from 'src/assets/images/header-section/howto-header-icon.
 import { COMPARISONS } from 'src/utils/comparisons'
 import { UnsavedChangesDialog } from 'src/components/Form/UnsavedChangesDialog'
 import { logger } from 'src/logger'
-import { HOWTO_MAX_LENGTH } from '../../constants'
+import { HOWTO_MAX_LENGTH, HOWTO_TITLE_MAX_LENGTH } from '../../constants'
 
 interface IState {
   formSaved: boolean
@@ -245,8 +245,8 @@ export class HowtoForm extends React.PureComponent<IProps, IState> {
                                 isEqual={COMPARISONS.textInput}
                                 modifiers={{ capitalize: true }}
                                 component={InputField}
-                                maxLength="50"
-                                placeholder="Make a chair from.. (max 50 characters)"
+                                maxLength={HOWTO_TITLE_MAX_LENGTH}
+                                placeholder={`Make a chair from... (max ${HOWTO_TITLE_MAX_LENGTH} characters)`}
                               />
                             </Flex>
                             <Flex flexDirection={'column'} mb={3}>

diff --git a/src/pages/Howto/Content/Common/HowtoStep.form.tsx b/src/pages/Howto/Content/Common/HowtoStep.form.tsx
@@ -13,7 +13,7 @@ import { IHowtoStep } from 'src/models/howto.models'
 import { IUploadedFileMeta } from 'src/stores/storage'
 import { required } from 'src/utils/validators'
 import { COMPARISONS } from 'src/utils/comparisons'
-import { HOWTO_MAX_LENGTH } from '../../constants'
+import { HOWTO_MAX_LENGTH, HOWTO_TITLE_MAX_LENGTH } from '../../constants'
 
 const ImageInputFieldWrapper = styled.div`
   width: 150px;
@@ -146,8 +146,8 @@ class HowtoStep extends PureComponent<IProps, IState> {
             data-cy="step-title"
             modifiers={{ capitalize: true }}
             component={InputField}
-            placeholder="Title of this step (max 30 characters)"
-            maxLength="30"
+            placeholder={`Title of this step (max ${HOWTO_TITLE_MAX_LENGTH} characters)`}
+            maxLength={HOWTO_TITLE_MAX_LENGTH}
             validate={required}
             validateFields={[]}
             isEqual={COMPARISONS.textInput}

diff --git a/src/pages/Howto/constants.ts b/src/pages/Howto/constants.ts
@@ -1 +1,2 @@
-export const HOWTO_MAX_LENGTH = 1000;
+export const HOWTO_MAX_LENGTH = 1000;
+export const HOWTO_TITLE_MAX_LENGTH = 50;