From 1f020b34c854cb44038d86b7cf1a851c82170bc3 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 8 Jan 2025 16:12:16 +0000
Subject: [PATCH] Fix some styling feedback - placeholder text and error
 wrapper centering

---
 .../components/ExclusiveOrOptionManager.tsx   | 89 ++++++++++---------
 .../Public/components/GroupedChecklist.tsx    | 17 ++--
 .../components/shared/BaseOptionsEditor.tsx   |  3 +-
 .../src/ui/shared/ErrorWrapper.tsx            |  2 +-
 4 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx
index 77a48d2c4d..efd3cd47c0 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx
@@ -28,53 +28,56 @@ export const ExclusiveOrOptionManager = ({
   const { schema, initialOptionVals } = useInitialOptions(formik);
 
   return (
-    <Box mt={1}>
+    <Box mt={2}>
       <ErrorWrapper error={formik.errors.allRequired as string}>
-        <ListManager
-          values={exclusiveOptions || []}
-          onChange={(newExclusiveOptions) => {
-            if (grouped) {
-              const exclusiveOptionGroup = {
-                title: "Or",
-                children: newExclusiveOptions,
-              };
+        <Box mt={1}>
+          <ListManager
+            values={exclusiveOptions || []}
+            onChange={(newExclusiveOptions) => {
+              if (grouped) {
+                const exclusiveOptionGroup = {
+                  title: "Or",
+                  children: newExclusiveOptions,
+                };
+                const newCombinedOptions = [
+                  ...nonExclusiveOptions,
+                  exclusiveOptionGroup,
+                ];
+                formik.setFieldValue("groupedOptions", newCombinedOptions);
+                return;
+              }
               const newCombinedOptions = [
                 ...nonExclusiveOptions,
-                exclusiveOptionGroup,
+                ...newExclusiveOptions,
               ];
-              formik.setFieldValue("groupedOptions", newCombinedOptions);
-              return;
-            }
-            const newCombinedOptions = [
-              ...nonExclusiveOptions,
-              ...newExclusiveOptions,
-            ];
-            formik.setFieldValue("options", newCombinedOptions);
-          }}
-          newValueLabel='add "or" option'
-          maxItems={1}
-          disableDragAndDrop
-          newValue={() => {
-            return {
-              data: {
-                text: "",
-                description: "",
-                val: "",
-                exclusive: true,
-              },
-            } as Option;
-          }}
-          Editor={BaseOptionsEditor}
-          editorExtraProps={{
-            showValueField: !!formik.values.fn,
-            groupIndex,
-            schema: getOptionsSchemaByFn(
-              formik.values.fn,
-              schema,
-              initialOptionVals,
-            ),
-          }}
-        />
+              formik.setFieldValue("options", newCombinedOptions);
+            }}
+            newValueLabel='add "or" option'
+            maxItems={1}
+            disableDragAndDrop
+            newValue={() => {
+              return {
+                data: {
+                  text: "",
+                  description: "",
+                  val: "",
+                  exclusive: true,
+                },
+              } as Option;
+            }}
+            Editor={BaseOptionsEditor}
+            editorExtraProps={{
+              showValueField: !!formik.values.fn,
+              groupIndex,
+              optionPlaceholder: "Exclusive 'or' option",
+              schema: getOptionsSchemaByFn(
+                formik.values.fn,
+                schema,
+                initialOptionVals,
+              ),
+            }}
+          />
+        </Box>
       </ErrorWrapper>
     </Box>
   );
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx
index d5bfa35428..1e8da1a7c3 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/components/GroupedChecklist.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import { visuallyHidden } from "@mui/utils";
 import {
@@ -111,13 +112,15 @@ export const GroupedChecklist: React.FC<PublicChecklistProps> = (props) => {
                 formik={formik}
               />
             )}
-            {exclusiveOrOptionGroup && (
-              <ExclusiveChecklistItem
-                exclusiveOrOption={exclusiveOrOptionGroup?.children[0]}
-                changeCheckbox={toggleCheckbox}
-                formik={formik}
-              />
-            )}
+            <Box pt={1}>
+              {exclusiveOrOptionGroup && (
+                <ExclusiveChecklistItem
+                  exclusiveOrOption={exclusiveOrOptionGroup?.children[0]}
+                  changeCheckbox={toggleCheckbox}
+                  formik={formik}
+                />
+              )}
+            </Box>
           </Grid>
         </ErrorWrapper>
       </FullWidthWrapper>
diff --git a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
index e66f753d31..8722a26913 100644
--- a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -11,6 +11,7 @@ import { FlagsSelect } from "./FlagsSelect";
 export interface BaseOptionsEditorProps {
   value: Option;
   schema?: string[];
+  optionPlaceholder?: string;
   showValueField?: boolean;
   showDescriptionField?: boolean;
   onChange: (newVal: Option) => void;
@@ -38,7 +39,7 @@ export const BaseOptionsEditor: React.FC<BaseOptionsEditorProps> = (props) => (
               },
             });
           }}
-          placeholder="Option"
+          placeholder={props.optionPlaceholder || "Option"}
         />
       </InputRowItem>
       <ImgInput
diff --git a/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx b/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx
index 6e4e7cb1c7..10d730f962 100644
--- a/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx
+++ b/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx
@@ -54,7 +54,7 @@ export default function ErrorWrapper({
   return (
     <Root error={error} role={role} data-testid="error-wrapper">
       <ErrorText id={inputId} data-testid={inputId} variant="body1">
-        {error && error}
+        {error}
       </ErrorText>
       {children || null}
     </Root>