feat: Match Ian's styles

theopensystemslab · Nov 14, 2024 · c6189aa · c6189aa
1 parent d17220b
commit c6189aa
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx b/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx
@@ -72,7 +72,7 @@ export const FlagsSelect: React.FC<Props> = (props) => {
       <SelectMultiple
         id="select-multiple-flags"
         key="select-multiple-flags"
-        label="Flags (up to one per category)"
+        placeholder="Flags (up to one per category)"
         options={flatFlags}
         getOptionLabel={(flag) => flag.text}
         groupBy={(flag) => flag.category}

diff --git a/editor.planx.uk/src/ui/editor/ListManager/ListManager.tsx b/editor.planx.uk/src/ui/editor/ListManager/ListManager.tsx
@@ -38,7 +38,7 @@ export interface Props<T, EditorExtraProps = {}> {
 
 const Item = styled(Box)(({ theme }) => ({
   display: "flex",
-  marginBottom: theme.spacing(1),
+  marginBottom: theme.spacing(2),
 }));
 
 export default function ListManager<T, EditorExtraProps>(

diff --git a/editor.planx.uk/src/ui/shared/SelectMultiple.tsx b/editor.planx.uk/src/ui/shared/SelectMultiple.tsx
@@ -42,7 +42,6 @@ type WithPlaceholder<T> = {
 type Props<T> = WithLabel<T> | WithPlaceholder<T>;
 
 const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
-  marginTop: theme.spacing(2),
   "& > div > label": {
     paddingRight: theme.spacing(3),
   },
@@ -113,9 +112,14 @@ export const CustomCheckbox = styled("span")(({ theme }) => ({
 }));
 
 export function SelectMultiple<T>(props: Props<T>) {
+  // MUI doesn't pass the Autocomplete value along to the TextField automatically
+  const isSelectEmpty = !props.value?.length;
+  const placeholder = isSelectEmpty ? props.placeholder : undefined
+
   return (
     <FormControl sx={{ display: "flex", flexDirection: "column" }}>
       <StyledAutocomplete<T, true, true, false, "div">
+        sx={{ mt: props.label ? 2 : 0 }}
         role="status"
         aria-atomic={true}
         aria-live="polite"
@@ -129,9 +133,9 @@ export function SelectMultiple<T>(props: Props<T>) {
             InputProps={{
               ...params.InputProps,
               notched: false,
-              placeholder: props?.placeholder
             }}
             label={props.label}
+            placeholder={placeholder}
           />
         )}
         ChipProps={{