Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Simplify and improve description radio layout #3729

Merged
merged 2 commits into from
Sep 24, 2024
Merged

refactor: Simplify and improve description radio layout #3729

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c9f00a
refactor: Simplify and improve description radio layout
ianjon3s Sep 24, 2024
6109824
css class import
ianjon3s Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const Question: React.FC<IQuestion> = (props) => {
>
<Grid
container
spacing={layout === QuestionLayout.Basic ? 0 : 2}
spacing={layout === QuestionLayout.Images ? 2 : 0}
alignItems="stretch"
>
{props.responses?.map((response) => {
Expand Down Expand Up @@ -136,16 +136,16 @@ const Question: React.FC<IQuestion> = (props) => {
);
case QuestionLayout.Descriptions:
return (
<Grid
item
xs={12}
sm={6}
contentWrap={4}
key={response.id}
data-testid="description-radio"
>
<DescriptionRadio {...buttonProps} {...response} />
</Grid>
<FormWrapper key={`wrapper-${response.id}`}>
<Grid
item
xs={12}
key={`grid-${response.id}`}
data-testid="description-radio"
>
<DescriptionRadio {...buttonProps} {...response} />
</Grid>
</FormWrapper>
);
case QuestionLayout.Images:
return (
Expand Down
8 changes: 7 additions & 1 deletion editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,13 @@ const BasicRadio: React.FC<Props> = ({
onChange={onChange}
control={<Radio variant={variant} />}
label={title}
sx={variant === "default" ? { pb: 1 } : {}}
sx={(theme) => ({
mb: variant === "default" ? 1 : 0,
alignItems: "flex-start",
".MuiFormControlLabel-label": {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can also use import { formLabelClasses } from "@mui/material/FormControlLabel" to get this in a more reliable way.

Suggested change
".MuiFormControlLabel-label": {
[`& .${formControlLabelClasses.label}`]: {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this @DafyddLlyr , updated.

paddingTop: theme.spacing(0.95),
},
})}
/>
);

Expand Down
39 changes: 12 additions & 27 deletions editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Box from "@mui/material/Box";
import FormLabel from "@mui/material/FormLabel";
import Radio, { RadioProps } from "@mui/material/Radio";
import { useRadioGroup } from "@mui/material/RadioGroup";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import React from "react";
Expand All @@ -13,25 +12,10 @@ export interface Props {
onChange: RadioProps["onChange"];
}

interface StyledFormLabelProps {
isSelected: boolean;
}

const StyledFormLabel = styled(FormLabel, {
shouldForwardProp: (prop) => prop !== "isSelected",
})<StyledFormLabelProps>(({ theme, isSelected }) => ({
border: "2px solid",
borderColor: isSelected
? theme.palette.primary.main
: theme.palette.border.main,
padding: theme.spacing(1.5),
const StyledFormLabel = styled(FormLabel)(({ theme }) => ({
display: "flex",
marginBottom: theme.spacing(1),
cursor: "pointer",
display: "block",
height: "100%",
color: theme.palette.text.primary,
"& > p": {
color: theme.palette.text.secondary,
},
}));

const DescriptionRadio: React.FC<Props> = ({
Expand All @@ -40,16 +24,17 @@ const DescriptionRadio: React.FC<Props> = ({
onChange,
id,
}) => {
const radioGroupState = useRadioGroup();
const isSelected = radioGroupState?.value === id;

return (
<StyledFormLabel focused={false} isSelected={isSelected}>
<Box sx={{ paddingBottom: 1, display: "flex", alignItems: "center" }}>
<Radio value={id} onChange={onChange} />
<Typography variant="body1">{title}</Typography>
<StyledFormLabel focused={false}>
<Radio value={id} onChange={onChange} />
<Box>
<Typography color="text.primary" variant="body1" pt={0.95}>
{title}
</Typography>
<Typography variant="body2" pt={0.5}>
{description}
</Typography>
</Box>
<Typography variant="body2">{description}</Typography>
</StyledFormLabel>
);
};
Expand Down
Loading