diff --git a/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js b/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js index 4feab71109..228ecc71a6 100644 --- a/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js +++ b/src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.js @@ -1,8 +1,6 @@ // @flow import React, { Component } from 'react'; -import { Checkbox, Switch, spacersNum } from '@dhis2/ui'; -import FormControl from '@material-ui/core/FormControl'; -import FormLabel from '@material-ui/core/FormLabel'; +import { Checkbox, Switch, spacersNum, FieldSet, Label } from '@dhis2/ui'; import { withStyles } from '@material-ui/core/styles'; const styles = theme => ({ @@ -65,9 +63,7 @@ class D2TrueOnlyPlain extends Component { ref={(containerInstance) => { this.materialUIContainerInstance = containerInstance; }} style={style} > - +
{ (() => { if (!label || useValueLabel) { @@ -75,14 +71,12 @@ class D2TrueOnlyPlain extends Component { } return ( - {label} - + ); })() } @@ -90,7 +84,7 @@ class D2TrueOnlyPlain extends Component { : } - +
); } diff --git a/src/core_modules/capture-core/components/FormFields/Options/FormGroup.component.js b/src/core_modules/capture-core/components/FormFields/Options/FormGroup.component.js new file mode 100644 index 0000000000..3241b9d7a0 --- /dev/null +++ b/src/core_modules/capture-core/components/FormFields/Options/FormGroup.component.js @@ -0,0 +1,29 @@ +// @flow +import React from 'react'; +import { withStyles } from '@material-ui/core'; + +const styles = { + formGroup: { + display: 'flex', + flexDirection: 'column', + }, + formGroupRow: { + display: 'flex', + flexDirection: 'row', + }, +}; + +type Props = { + row?: boolean; + classes: Object; + children: any; +} + +const FormGroupPlain = ({ children, classes, row = false, ...props }: Props) => ( +
+ {children} +
+) +; + +export const FormGroup = withStyles(styles)(FormGroupPlain); diff --git a/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js b/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js index 1d8e2b597e..26b4b4165d 100644 --- a/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js +++ b/src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.js @@ -1,12 +1,10 @@ // @flow /* eslint-disable react/no-array-index-key */ import React, { Component, type ComponentType } from 'react'; -import { Checkbox, spacersNum } from '@dhis2/ui'; -import FormControl from '@material-ui/core/FormControl'; -import FormLabel from '@material-ui/core/FormLabel'; -import FormGroup from '@material-ui/core/FormGroup'; +import { Checkbox, spacersNum, FieldSet, Label } from '@dhis2/ui'; import { withStyles } from '@material-ui/core/styles'; import { multiOrientations } from './multiSelectBoxes.const'; +import { FormGroup } from '../FormGroup.component'; const styles = theme => ({ label: theme.typography.formFieldTitle, @@ -137,7 +135,7 @@ class MultiSelectBoxesPlain extends Component { return (
{ this.materialUIContainerInstance = containerInstance; }}> - +
{ (() => { if (!label) { @@ -145,19 +143,17 @@ class MultiSelectBoxesPlain extends Component { } return ( - {label} - + ); })() } {this.renderCheckboxes()} - +
); } diff --git a/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/SingleSelectBoxes.component.js b/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/SingleSelectBoxes.component.js index 70a932a5ef..daaed7a6bd 100644 --- a/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/SingleSelectBoxes.component.js +++ b/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/SingleSelectBoxes.component.js @@ -1,13 +1,12 @@ // @flow /* eslint-disable react/no-array-index-key */ import React, { Component, type ComponentType } from 'react'; -import FormControl from '@material-ui/core/FormControl'; -import { Radio, colors, spacersNum } from '@dhis2/ui'; -import FormLabel from '@material-ui/core/FormLabel'; -import FormGroup from '@material-ui/core/FormGroup'; +import { Radio, colors, spacersNum, FieldSet, Label } from '@dhis2/ui'; import { withStyles } from '@material-ui/core/styles'; import { singleOrientations } from './singleSelectBoxes.const'; import type { Props } from './singleSelectBoxes.types'; +import { FormGroup } from '../FormGroup.component'; + const styles = ({ typography, palette }) => ({ label: typography.formFieldTitle, @@ -17,7 +16,7 @@ const styles = ({ typography, palette }) => ({ iconDeselected: { fill: colors.grey700, }, - checkbox: { + radio: { marginTop: spacersNum.dp8, marginBottom: spacersNum.dp16, }, @@ -52,7 +51,7 @@ class SingleSelectBoxesPlain extends Component { name={`singleSelectBoxes-${index}`} onChange={(e: Object) => { this.handleOptionChange(e, value); }} value={value} - className={classes.checkbox} + className={classes.radio} dense /> )); @@ -112,7 +111,7 @@ class SingleSelectBoxesPlain extends Component { return (
{ this.materialUIContainerInstance = containerInstance; }}> - +
{ (() => { if (!label) { @@ -120,19 +119,17 @@ class SingleSelectBoxesPlain extends Component { } return ( - {label} - + ); })() } - {this.renderBoxes()} - + { this.renderBoxes() } +
); } diff --git a/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/singleSelectBoxes.types.js b/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/singleSelectBoxes.types.js index 6f1e71e585..81b9d3eee4 100644 --- a/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/singleSelectBoxes.types.js +++ b/src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/singleSelectBoxes.types.js @@ -13,7 +13,7 @@ export type Props = { label: string, iconSelected: string, iconDeselected: string, - checkbox: string, + radio: string, }, style?: ?Object, };