From 94f750bc4ebfb03740d2bd7f2bfe4377e3e1dbec Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 3 Sep 2021 22:18:13 +0100 Subject: [PATCH 1/2] Fix RadioButton and Checkbox examples --- docs/components_page/components/input.md | 6 +-- .../components/input/radio_check_standalone.R | 21 ++++------ .../input/radio_check_standalone.jl | 39 +++++++++++-------- .../input/radio_check_standalone.py | 15 +++---- src/components/form/Label.js | 9 ++++- 5 files changed, 46 insertions(+), 44 deletions(-) diff --git a/docs/components_page/components/input.md b/docs/components_page/components/input.md index 2e2c1bdfd..b0cabe7b0 100644 --- a/docs/components_page/components/input.md +++ b/docs/components_page/components/input.md @@ -31,7 +31,7 @@ When using `Input` with `type='number'`, the `value` prop will be given the valu ## Labels and text -Use the `FormGroup` component along with `Label` and `FormText` to control the layout of your `Input` components. See the [documentation for forms](/l/components/form) for more details. +Use the `Label` and `FormText` components to add additional information about the `Input` to your layout. See the [documentation for forms](/docs/components/form/) for more details. {{example:components/input/text_label.py:text_input}} @@ -63,8 +63,6 @@ The `Select` component can be used to render a Bootstrap themed select input. Th `RadioItems` and `Checklist` components also work like _dash-core-components_. Provided you specify an `id`, _dash-bootstrap-components_ will render custom themed radio buttons or checkboxes rather than using the native browser buttons. When using `Checklist` you can also specify `switch=True` to render toggle-like switches rather than checkboxes. If you prefer to use the native buttons and checkboxes, set `custom=False`. Note that there is no native browser switch, so if you set `custom=False` then `switch` will be ignored. -Use these components with `FormGroup` for automatic spacing and padding. - {{example:components/input/radio_check.py:inputs}} Set `inline=True` to make the radio items or checklists fit next to each other on a line. @@ -79,7 +77,7 @@ Use the `input_checked_style`, `input_checked_class_name`, `label_checked_style` ## Standalone checkboxes and radio buttons -If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `checked` keyword to react to changes in the input state. To attach a label, create a FormGroup with `check=True` and use the label's `html_for` keyword to bind it to the checkbox. +If you need more granular control over checkboxes and radio buttons, you can also create standalone components. Bind callbacks to the `checked` keyword to react to changes in the input state. To attach a label, wrap the input and a `Label` with a `html.Div` and add the class `form-check`. You can use the label's `html_for` keyword to bind it to the checkbox or radio button. {{example:components/input/radio_check_standalone.py:standalone_radio_check}} diff --git a/docs/components_page/components/input/radio_check_standalone.R b/docs/components_page/components/input/radio_check_standalone.R index af5d6d98d..9ca133474 100644 --- a/docs/components_page/components/input/radio_check_standalone.R +++ b/docs/components_page/components/input/radio_check_standalone.R @@ -5,31 +5,26 @@ standalone_radio_check <- htmlDiv( list( htmlDiv( list( - dbcCheckbox( - id = "standalone-checkbox", - class_name = "form-check-input" - ), + dbcCheckbox(id = "standalone-checkbox"), dbcLabel( "This is a checkbox", html_for = "standalone-checkbox", - class_name = "form-check-label" + check = TRUE ) - ) + ), + class_name = "form-check" ), htmlDiv( list( - dbcRadioButton( - id = "standalone-radio", - class_name = "form-check-input" - ), + dbcRadioButton(id = "standalone-radio"), dbcLabel( "This is a radio button", html_for = "standalone-radio", - class_name = "form-check-label" + check = TRUE ) - ) + ), + class_name = "form-check" ), - htmlBr(), htmlP(id = "standalone-radio-check-output") ) ) diff --git a/docs/components_page/components/input/radio_check_standalone.jl b/docs/components_page/components/input/radio_check_standalone.jl index dd3cf97e1..13282566a 100644 --- a/docs/components_page/components/input/radio_check_standalone.jl +++ b/docs/components_page/components/input/radio_check_standalone.jl @@ -1,23 +1,28 @@ using DashBootstrapComponents, DashHtmlComponents standalone_radio_check = html_div([ - html_div([ - dbc_checkbox(id = "standalone-checkbox", class_name = "form-check-input"), - dbc_label( - "This is a checkbox", - html_for = "standalone-checkbox", - class_name = "form-check-label", - ), - ]), - html_div([ - dbc_radiobutton(id = "standalone-radio", class_name = "form-check-input"), - dbc_label( - "This is a radio button", - html_for = "standalone-radio", - class_name = "form-check-label", - ), - ]), - html_br(), + html_div( + [ + dbc_checkbox(id = "standalone-checkbox"), + dbc_label( + "This is a checkbox", + html_for = "standalone-checkbox", + check = true, + ), + ], + class_name = "form-check", + ), + html_div( + [ + dbc_radiobutton(id = "standalone-radio"), + dbc_label( + "This is a radio button", + html_for = "standalone-radio", + check = true, + ), + ], + class_name = "form-check", + ), html_p(id = "standalone-radio-check-output"), ]); diff --git a/docs/components_page/components/input/radio_check_standalone.py b/docs/components_page/components/input/radio_check_standalone.py index 0d1000775..69313eeb5 100644 --- a/docs/components_page/components/input/radio_check_standalone.py +++ b/docs/components_page/components/input/radio_check_standalone.py @@ -6,29 +6,26 @@ [ html.Div( [ - dbc.Checkbox( - id="standalone-checkbox", class_name="form-check-input" - ), + dbc.Checkbox(id="standalone-checkbox"), dbc.Label( "This is a checkbox", html_for="standalone-checkbox", - class_name="form-check-label", + check=True, ), ], + class_name="form-check", ), html.Div( [ - dbc.RadioButton( - id="standalone-radio", class_name="form-check-input" - ), + dbc.RadioButton(id="standalone-radio"), dbc.Label( "This is a radio button", html_for="standalone-radio", - class_name="form-check-label", + check=True, ), ], + class_name="form-check", ), - html.Br(), html.P(id="standalone-radio-check-output"), ] ) diff --git a/src/components/form/Label.js b/src/components/form/Label.js index 3a0d8029c..465ed75ae 100644 --- a/src/components/form/Label.js +++ b/src/components/form/Label.js @@ -34,6 +34,7 @@ const Label = props => { color, style, loading_state, + check, ...otherProps } = props; @@ -52,7 +53,8 @@ const Label = props => { const classes = classNames( class_name || className, cols.length && alignClass, - color && isBootstrapColor && `text-${color}` + color && isBootstrapColor && `text-${color}`, + check && 'form-check-label' ); return ( @@ -143,6 +145,11 @@ Label.propTypes = { */ html_for: PropTypes.string, + /** + * Set to True when using to label a Checkbox or RadioButton. + */ + check: PropTypes.bool, + /** * Specify width of label for use in grid layouts. Accepts the same values * as the Col component. From 7e6332d7b4dfd000cd1ddcf1c79037070cb1972c Mon Sep 17 00:00:00 2001 From: tcbegley Date: Fri, 3 Sep 2021 22:23:29 +0100 Subject: [PATCH 2/2] Remove references to FormGroup --- src/components/form/FormFeedback.js | 2 +- src/components/input/Input.js | 4 ++-- src/components/input/Select.js | 4 ++-- src/components/input/Textarea.js | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/form/FormFeedback.js b/src/components/form/FormFeedback.js index 3f634e324..c5fa9665e 100644 --- a/src/components/form/FormFeedback.js +++ b/src/components/form/FormFeedback.js @@ -5,7 +5,7 @@ import RBFormControl from 'react-bootstrap/FormControl'; /** * The FormFeedback component can be used to provide feedback on input values - * in a form. Add the form feedback to a `FormGroup` and set the `valid` or + * in a form. Add the form feedback to your layout and set the `valid` or * `invalid` props of the associated input to toggle visibility. */ const FormFeedback = props => { diff --git a/src/components/input/Input.js b/src/components/input/Input.js index a5c6287b3..900807a4f 100644 --- a/src/components/input/Input.js +++ b/src/components/input/Input.js @@ -568,13 +568,13 @@ Input.propTypes = { /** * Apply valid style to the Input for feedback purposes. This will cause - * any FormFeedback in the enclosing FormGroup with valid=True to display. + * any FormFeedback in the enclosing div with valid=True to display. */ valid: PropTypes.bool, /** * Apply invalid style to the Input for feedback purposes. This will cause - * any FormFeedback in the enclosing FormGroup with valid=False to display. + * any FormFeedback in the enclosing div with valid=False to display. */ invalid: PropTypes.bool, diff --git a/src/components/input/Select.js b/src/components/input/Select.js index bb8e8eab6..8f66ea17b 100644 --- a/src/components/input/Select.js +++ b/src/components/input/Select.js @@ -151,13 +151,13 @@ Select.propTypes = { /** * Apply valid style to the Input for feedback purposes. This will cause - * any FormFeedback in the enclosing FormGroup with valid=True to display. + * any FormFeedback in the enclosing div with valid=True to display. */ valid: PropTypes.bool, /** * Apply invalid style to the Input for feedback purposes. This will cause - * any FormFeedback in the enclosing FormGroup with valid=False to display. + * any FormFeedback in the enclosing div with valid=False to display. */ invalid: PropTypes.bool, diff --git a/src/components/input/Textarea.js b/src/components/input/Textarea.js index 938698374..41e4c23e1 100644 --- a/src/components/input/Textarea.js +++ b/src/components/input/Textarea.js @@ -383,13 +383,13 @@ Textarea.propTypes = { /** * Apply valid style to the Textarea for feedback purposes. This will cause - * any FormFeedback in the enclosing FormGroup with valid=True to display. + * any FormFeedback in the enclosing div with valid=True to display. */ valid: PropTypes.bool, /** * Apply invalid style to the Textarea for feedback purposes. This will cause - * any FormFeedback in the enclosing FormGroup with valid=False to display. + * any FormFeedback in the enclosing div with valid=False to display. */ invalid: PropTypes.bool,