Align right radio groups (#1167)

* Match Design for Switches

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Margins

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Align Right Radio Buttons

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2021-11-01 18:46:43 -07:00
committed by GitHub
parent 2f917134e6
commit e7f1aeff94

View File

@@ -50,12 +50,6 @@ const styles = (theme: Theme) =>
...fieldBasic, ...fieldBasic,
...tooltipHelper, ...tooltipHelper,
radioBoxContainer: {}, radioBoxContainer: {},
fieldContainer: {
...fieldBasic.fieldContainer,
display: "flex",
paddingBottom: 10,
marginTop: 11,
},
optionLabel: { optionLabel: {
"&.Mui-disabled": { "&.Mui-disabled": {
"& .MuiFormControlLabel-label": { "& .MuiFormControlLabel-label": {
@@ -116,8 +110,8 @@ export const RadioGroupSelector = ({
displayInColumn = false, displayInColumn = false,
}: RadioGroupProps) => { }: RadioGroupProps) => {
return ( return (
<React.Fragment> <Grid container alignItems={"center"}>
<Grid item xs={12} className={classes.fieldContainer}> <Grid item xs>
<InputLabel htmlFor={id} className={classes.inputLabel}> <InputLabel htmlFor={id} className={classes.inputLabel}>
<span>{label}</span> <span>{label}</span>
{tooltip !== "" && ( {tooltip !== "" && (
@@ -130,8 +124,8 @@ export const RadioGroupSelector = ({
</div> </div>
)} )}
</InputLabel> </InputLabel>
</Grid>
<div className={classes.radioBoxContainer}> <Grid item xs>
<RadioGroup <RadioGroup
aria-label={id} aria-label={id}
id={id} id={id}
@@ -139,6 +133,7 @@ export const RadioGroupSelector = ({
value={currentSelection} value={currentSelection}
onChange={onChange} onChange={onChange}
row={!displayInColumn} row={!displayInColumn}
style={{ display: "block", textAlign: "right" }}
> >
{selectorOptions.map((selectorOption) => { {selectorOptions.map((selectorOption) => {
return ( return (
@@ -156,9 +151,8 @@ export const RadioGroupSelector = ({
); );
})} })}
</RadioGroup> </RadioGroup>
</div>
</Grid> </Grid>
</React.Fragment> </Grid>
); );
}; };