Improve BM description character limit UX

Author: uhakruthi1

src/components/BMDashboard/Equipment/Add/AddTypeForm.jsx

@@ -15,13 +15,15 @@ const FuelTypes = {
   etha: 'Ethanol',
 };
 
+const DESC_CHAR_LIMIT = 150;
+
 // const [inputText, setInputText] = useState('');
 
 const schema = Joi.object({
   name: Joi.string().required(),
   desc: Joi.string()
     .required()
-    .max(150),
+    .max(DESC_CHAR_LIMIT),
 });
 
 export default function AddTypeForm() {
@@ -46,7 +48,7 @@ export default function AddTypeForm() {
       setName(event.target.value);
     }
     if (event.target.name === 'desc') {
-      setDesc(event.target.value);
+      setDesc(event.target.value.slice(0, DESC_CHAR_LIMIT));
     }
     if (event.target.name === 'fuel') {
       setFuel(event.target.value);
@@ -104,12 +106,24 @@ export default function AddTypeForm() {
           name="desc"
           type="textarea"
           rows={2}
+          maxLength={DESC_CHAR_LIMIT}
           value={desc}
           invalid={errInput === 'desc'}
           onChange={handleChange}
         />
-        <div className="form-footer" style={{ color: desc.length > 150 ? '#dc3545' : 'black' }}>
-          Character {desc.length}/150
+        <div
+          className="form-footer"
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '1rem',
+            color: 'black',
+          }}
+        >
+          <span>
+            Character {desc.length}/{DESC_CHAR_LIMIT}
+          </span>
+          <span aria-live="polite">{DESC_CHAR_LIMIT - desc.length} characters left</span>
         </div>
         {/* {!errInput && <FormText>Max 150 characters</FormText>} */}
         <FormFeedback>

src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.jsx

@@ -10,6 +10,8 @@ import { purchaseEquipment } from '~/actions/bmdashboard/equipmentActions';
 
 import stylesPurchaseForm from './PurchaseForm.module.css';
 
+const DESC_CHAR_LIMIT = 150;
+
 export default function PurchaseForm() {
   const bmProjects = useSelector(state => state.bmProjects);
   const equipments = useSelector(state => state.bmInvTypes.list);
@@ -38,7 +40,7 @@ export default function PurchaseForm() {
     estTime: Joi.string().required(),
     desc: Joi.string()
       .required()
-      .max(150),
+      .max(DESC_CHAR_LIMIT),
     makeModel: Joi.string().allow(''),
   });
 
@@ -204,13 +206,23 @@ export default function PurchaseForm() {
         <Input
           id="input-usage-description"
           type="textarea"
+          maxLength={DESC_CHAR_LIMIT}
           value={desc}
           onChange={({ currentTarget }) => {
             setValidationError('');
-            setDesc(currentTarget.value);
+            setDesc(currentTarget.value.slice(0, DESC_CHAR_LIMIT));
           }}
         />
-        <FormText>Max 150 characters</FormText>
+        <FormText
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '1rem',
+          }}
+        >
+          <span>Max {DESC_CHAR_LIMIT} characters</span>
+          <span aria-live="polite">{DESC_CHAR_LIMIT - desc.length} characters left</span>
+        </FormText>
       </FormGroup>
       <FormGroup>
         <Label for="input-brand">Preferred Make &amp; Model (optional)</Label>

src/components/BMDashboard/ToolPurchaseRequest/PurchaseForm.jsx

@@ -12,6 +12,7 @@ import styles from './PurchaseForm.module.css';
 
 const PRIORITY_ORDER = { Low: 1, Medium: 2, High: 3 };
 const RECENT_REQUEST_WINDOW_DAYS = 30;
+const DESC_CHAR_LIMIT = 150;
 
 function getObjectId(value) {
   if (!value) return '';
@@ -115,7 +116,7 @@ export default function PurchaseForm() {
     estTime: Joi.string().required(),
     desc: Joi.string()
       .required()
-      .max(150),
+      .max(DESC_CHAR_LIMIT),
     makeModel: Joi.string().allow(''),
   });
 
@@ -425,13 +426,23 @@ export default function PurchaseForm() {
         <Input
           id="input-usage-description"
           type="textarea"
+          maxLength={DESC_CHAR_LIMIT}
           value={desc}
           onChange={({ currentTarget }) => {
             setValidationError('');
-            setDesc(currentTarget.value);
+            setDesc(currentTarget.value.slice(0, DESC_CHAR_LIMIT));
           }}
         />
-        <FormText>Max 150 characters</FormText>
+        <FormText
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '1rem',
+          }}
+        >
+          <span>Max {DESC_CHAR_LIMIT} characters</span>
+          <span aria-live="polite">{DESC_CHAR_LIMIT - desc.length} characters left</span>
+        </FormText>
       </FormGroup>
       <FormGroup>
         <Label for="input-brand">Preferred Make &amp; Model (optional)</Label>