Fix some styling feedback - placeholder text and error wrapper centering

theopensystemslab · Jan 8, 2025 · 1f020b3 · 1f020b3
1 parent c6bac81
commit 1f020b3
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 52 deletions.
diff --git a/...r.planx.uk/src/@planx/components/Checklist/Editor/components/ExclusiveOrOptionManager.tsx b/...r.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
@@ -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
@@ -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
@@ -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>