mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align right radio groups (#1167)

Browse Source 
* 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
1 changed files with 30 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
View File

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