diff --git a/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx b/editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx index 46832c0a39..65a865af79 100644 --- 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) => { 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 index 9fb64dc58a..1f8fc49f1c 100644 --- 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 { const Item = styled(Box)(({ theme }) => ({ display: "flex", - marginBottom: theme.spacing(1), + marginBottom: theme.spacing(2), })); export default function ListManager( diff --git a/editor.planx.uk/src/ui/shared/SelectMultiple.tsx b/editor.planx.uk/src/ui/shared/SelectMultiple.tsx index 30d32f277b..8196eca79f 100644 --- 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 = Partial< type Props = { label: string; + hideLabel?: boolean; + placeholder?: string; } & RequiredAutocompleteProps & OptionalAutocompleteProps; -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 + extends AutocompleteProps { + hideLabel?: boolean; +} + +const StyledAutocomplete = styled(Autocomplete)>( + ({ 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(props: Props) { +export function SelectMultiple({ + label, + hideLabel = false, + placeholder, + value = [], + ...props +}: Props & { value?: T[] }) { return ( @@ -114,14 +130,21 @@ export function SelectMultiple(props: Props) { disableCloseOnSelect multiple popupIcon={PopupIcon} + value={value} + hideLabel={hideLabel} renderInput={(params) => ( )} ChipProps={{