wip! make invalid state show up on error

mbta · Nov 4, 2024 · df88720 · df88720
1 parent 9f030d9
commit df88720
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/assets/src/components/detours/activateDetourModal.tsx b/assets/src/components/detours/activateDetourModal.tsx
@@ -81,7 +81,7 @@ const SurroundingModal = ({
       ) : (
         <Button
           variant="primary"
-          disabled={onNext === undefined}
+          className={onNext ? "" : "disabled"}
           onClick={onNext}
           data-fs-element={nextStepLabel}
         >
@@ -112,7 +112,7 @@ const SelectingDuration = ({
     <p>
       <span className="fw-bold">Time length</span> <span>(estimate)</span>
     </p>
-    <Form noValidate validated>
+    <Form noValidate>
       <Form.Group>
         {possibleDurations.map((duration) => (
           <Form.Check
@@ -125,9 +125,13 @@ const SelectingDuration = ({
             type="radio"
             label={duration}
             checked={selectedDuration === duration}
+            isInvalid={isError}
           />
         ))}
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback
+          type="invalid"
+          className={isError ? "d-block" : ""}
+        >
           Time length is required
         </Form.Control.Feedback>
       </Form.Group>

diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -329,6 +329,15 @@ export const DiversionPage = ({
                       duration: selectedDuration,
                     })
                   }}
+                  isError={snapshot.matches({
+                    "Detour Drawing": {
+                      "Share Detour": {
+                        Activating: {
+                          "Selecting Duration": "No Duration Selected - Error",
+                        },
+                      },
+                    },
+                  })}
                   selectedDuration={selectedDuration}
                 />
               ) : snapshot.matches({