Merge branch 'ian/flag-select-placeholder' of github.com:theopensyste…

…mslab/planx-new into ian/flag-select-placeholder
theopensystemslab · Nov 12, 2024 · 2dca60d · 2dca60d
2 parents 2c8eaf3 + 116316e
commit 2dca60d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 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,9 @@ export const FlagsSelect: React.FC<Props> = (props) => {
       <SelectMultiple
         id="select-multiple-flags"
         key="select-multiple-flags"
+        hideLabel
         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
@@ -8,6 +8,7 @@ import { inputLabelClasses } from "@mui/material/InputLabel";
 import { outlinedInputClasses } from "@mui/material/OutlinedInput";
 import { styled } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
+import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { borderedFocusStyle } from "theme";
 
@@ -29,23 +30,32 @@ type OptionalAutocompleteProps<T> = Partial<
 
 type Props<T> = {
   label: string;
+  hideLabel?: boolean;
+  placeholder?: string;
 } & RequiredAutocompleteProps<T> &
   OptionalAutocompleteProps<T>;
 
-const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
-  marginTop: theme.spacing(2),
-  "& > div > label": {
-    paddingRight: theme.spacing(3),
-  },
-  [`& .${autocompleteClasses.endAdornment}`]: {
-    top: "unset",
-  },
-  "&:focus-within": {
-    "& svg": {
-      color: "black",
+interface CustomAutocompleteProps<T>
+  extends AutocompleteProps<T, true, true, false, "div"> {
+  hideLabel?: boolean;
+}
+
+const StyledAutocomplete = styled(Autocomplete)<CustomAutocompleteProps<any>>(
+  ({ theme, hideLabel }) => ({
+    ...(hideLabel ? {} : { marginTop: theme.spacing(2) }),
+    "& > div > label": {
+      paddingRight: theme.spacing(3),
     },
-  },
-})) as typeof Autocomplete;
+    [`& .${autocompleteClasses.endAdornment}`]: {
+      top: "unset",
+    },
+    "&:focus-within": {
+      "& svg": {
+        color: "black",
+      },
+    },
+  }),
+) as typeof Autocomplete;
 
 const StyledTextField = styled(TextField)(({ theme }) => ({
   "&:focus-within": {
@@ -103,7 +113,13 @@ export const CustomCheckbox = styled("span")(({ theme }) => ({
   },
 }));
 
-export function SelectMultiple<T>(props: Props<T>) {
+export function SelectMultiple<T>({
+  label,
+  hideLabel = false,
+  placeholder,
+  value = [],
+  ...props
+}: Props<T> & { value?: T[] }) {
   return (
     <FormControl sx={{ display: "flex", flexDirection: "column" }}>
       <StyledAutocomplete<T, true, true, false, "div">
@@ -114,14 +130,21 @@ export function SelectMultiple<T>(props: Props<T>) {
         disableCloseOnSelect
         multiple
         popupIcon={PopupIcon}
+        value={value}
+        hideLabel={hideLabel}
         renderInput={(params) => (
           <StyledTextField
             {...params}
             InputProps={{
               ...params.InputProps,
               notched: false,
+              placeholder: value.length === 0 ? placeholder : "",
+            }}
+            label={hideLabel ? "" : label}
+            InputLabelProps={{
+              ...params.InputLabelProps,
+              sx: hideLabel ? visuallyHidden : {},
             }}
-            label={props.label}
           />
         )}
         ChipProps={{