From df8ca3284d784350d9426a506caf4893ef3d7a24 Mon Sep 17 00:00:00 2001 From: Dave MacFarlane Date: Fri, 24 Feb 2023 11:22:41 -0500 Subject: [PATCH 1/2] [Form.js] Add support for vertical Radio button groups This adds a vertical=true/false attribute to our wrapper. The option toggles whether the radio options are displayed vertically or horizontally on the page. --- jsx/Form.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jsx/Form.js b/jsx/Form.js index c00beb805cc..4c542d60ded 100644 --- a/jsx/Form.js +++ b/jsx/Form.js @@ -2549,7 +2549,7 @@ class RadioElement extends React.Component { const styleRow = { display: 'flex', - flexDirection: 'row', + flexDirection: this.props.vertical == false ? 'row' : 'column', flexWrap: 'wrap', width: '100%', }; @@ -2657,6 +2657,7 @@ RadioElement.propTypes = { options: PropTypes.object.isRequired, disabled: PropTypes.bool, required: PropTypes.bool, + vertical: PropTypes.bool, checked: PropTypes.string.isRequired, errorMessage: PropTypes.string, elementClass: PropTypes.string, @@ -2665,6 +2666,7 @@ RadioElement.propTypes = { RadioElement.defaultProps = { disabled: false, required: false, + vertical: false, errorMessage: '', elementClass: 'row form-group', onUserInput: function() { From 4d51b863c305405196cf9b4532f4c6b62f409f13 Mon Sep 17 00:00:00 2001 From: Dave MacFarlane Date: Fri, 17 Mar 2023 08:58:59 -0400 Subject: [PATCH 2/2] Update jsx/Form.js Co-authored-by: jeffersoncasimir <15801528+jeffersoncasimir@users.noreply.github.com> --- jsx/Form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jsx/Form.js b/jsx/Form.js index 4c542d60ded..9ecf600e948 100644 --- a/jsx/Form.js +++ b/jsx/Form.js @@ -2549,7 +2549,7 @@ class RadioElement extends React.Component { const styleRow = { display: 'flex', - flexDirection: this.props.vertical == false ? 'row' : 'column', + flexDirection: this.props.vertical ? 'column' : 'row', flexWrap: 'wrap', width: '100%', };