From 0a0d6f6fd4710f2959dd53db32138e92d579af36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 17 May 2024 16:37:31 +0100 Subject: [PATCH 1/4] fix: Remove input checkbox elements and replace with spans --- .../components/FileUploadAndLabel/SelectMultiple.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx index 66cac4e7ba..f3f113e59e 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx @@ -17,7 +17,7 @@ import { styled } from "@mui/material/styles"; import TextField from "@mui/material/TextField"; import Typography from "@mui/material/Typography"; import capitalize from "lodash/capitalize"; -import React, { forwardRef, PropsWithChildren, useMemo, useState } from "react"; +import React, { forwardRef, PropsWithChildren, useMemo } from "react"; import { borderedFocusStyle } from "theme"; import Checkbox from "ui/shared/Checkbox"; @@ -157,13 +157,9 @@ const renderOption: AutocompleteProps< "div" >["renderOption"] = (props, option, { selected }) => ( - + {option.name} ); From ab76627451ef413948266cc4df0becdc172d9336 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 17 May 2024 16:50:27 +0100 Subject: [PATCH 2/4] chore: Remove unused import --- .../src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx index f3f113e59e..749856aa2c 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx @@ -19,7 +19,6 @@ import Typography from "@mui/material/Typography"; import capitalize from "lodash/capitalize"; import React, { forwardRef, PropsWithChildren, useMemo } from "react"; import { borderedFocusStyle } from "theme"; -import Checkbox from "ui/shared/Checkbox"; import { FileUploadSlot } from "../FileUpload/Public"; import { From fb5b43aee3903ee2b7e5aec724c46ece8a7c621e Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 17 May 2024 16:59:45 +0100 Subject: [PATCH 3/4] fix: Checkboxes as pure css --- .../FileUploadAndLabel/SelectMultiple.tsx | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx index 749856aa2c..b3325702ee 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx @@ -10,7 +10,6 @@ import FormControl from "@mui/material/FormControl"; import { inputLabelClasses } from "@mui/material/InputLabel"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; -import ListItemText from "@mui/material/ListItemText"; import ListSubheader from "@mui/material/ListSubheader"; import { outlinedInputClasses } from "@mui/material/OutlinedInput"; import { styled } from "@mui/material/styles"; @@ -92,6 +91,31 @@ const StyledTextField = styled(TextField)(({ theme }) => ({ }, })); +const CustomCheckbox = styled("span")(({ theme }) => ({ + display: "inline-flex", + flexShrink: 0, + position: "relative", + width: 40, + height: 40, + borderColor: theme.palette.text.primary, + border: "2px solid", + background: "transparent", + marginRight: theme.spacing(1.5), + "&.selected::after": { + content: "''", + position: "absolute", + height: 24, + width: 12, + borderColor: theme.palette.text.primary, + borderBottom: "5px solid", + borderRight: "5px solid", + left: "50%", + top: "42%", + transform: "translate(-50%, -50%) rotate(45deg)", + cursor: "pointer", + }, +})); + /** * Function which returns the Input component used by Autocomplete */ @@ -108,7 +132,7 @@ const renderInput: AutocompleteProps< ...params.InputProps, notched: false, }} - label="What does this file show?" + label="What does this file show? (select all that apply)" /> ); @@ -156,10 +180,8 @@ const renderOption: AutocompleteProps< "div" >["renderOption"] = (props, option, { selected }) => ( - - {option.name} + ); From df530be13f5d2c4aad2188fa769701f64a07cefd Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 17 May 2024 17:32:28 +0100 Subject: [PATCH 4/4] fix: Sort out longer label --- .../@planx/components/FileUploadAndLabel/SelectMultiple.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx index b3325702ee..974fd6c239 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/SelectMultiple.tsx @@ -50,6 +50,10 @@ const StyledAutocomplete = styled( Autocomplete, )(({ theme }) => ({ marginTop: theme.spacing(2), + // Prevent label from overlapping expand icon + "& > div > label": { + paddingRight: theme.spacing(3), + }, // Vertically center "large" size caret icon [`& .${autocompleteClasses.endAdornment}`]: { top: "unset", @@ -86,7 +90,7 @@ const StyledTextField = styled(TextField)(({ theme }) => ({ textDecoration: "none", color: theme.palette.text.primary, paddingY: 0, - transform: "translate(14px, -22px) scale(0.85)", + transform: "translate(0px, -22px) scale(0.85)", }, }, }));