Fix RadioItems & Checklist inline prop.

CHANGELOG.md

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [UNRELEASED]
 
+## Breaking
+- [#2450](https://github.com/plotly/dash/pull/2450) Set label style `display: block` if `inline` is false in RadioItems & Checklist components. To keep previous behavior, set `inline=True`. This is already how it was described and worked in our documentation and other places with CSS stylesheets that set the default orientation of RadioItems and Checklist options to vertical (including Dash Design Kit), but for unstyled pages it is a breaking change.
+
 ## Added
 
 - [#2068](https://github.com/plotly/dash/pull/2068) Added `refresh="callback-nav"` in `dcc.Location`. This allows for navigation without refreshing the page when url is updated in a callback.

components/dash-core-components/src/components/Checklist.react.js

@@ -38,11 +38,10 @@ export default class Checklist extends Component {
                     return (
                         <label
                             key={option.value}
-                            style={Object.assign(
-                                {},
-                                labelStyle,
-                                inline ? {display: 'inline-block'} : {}
-                            )}
+                            style={{
+                                display: inline ? 'inline-block' : 'block',
+                                ...labelStyle,
+                            }}
                             className={labelClassName}
                         >
                             <input
@@ -144,9 +143,8 @@ Checklist.propTypes = {
     ),
 
     /**
-     * Indicates whether labelStyle should be inline or not
-     * True: Automatically set { 'display': 'inline-block' } to labelStyle
-     * False: No additional styles are passed into labelStyle.
+     * Indicates whether the options labels should be displayed inline (true=horizontal)
+     * or in a block (false=vertical).
      */
     inline: PropTypes.bool,
 

components/dash-core-components/src/components/RadioItems.react.js

@@ -42,11 +42,10 @@ export default class RadioItems extends Component {
             >
                 {sanitizeOptions(options).map(option => (
                     <label
-                        style={Object.assign(
-                            {},
-                            labelStyle,
-                            inline ? {display: 'inline-block'} : {}
-                        )}
+                        style={{
+                            display: inline ? 'inline-block' : 'block',
+                            ...labelStyle,
+                        }}
                         className={labelClassName}
                         key={option.value}
                     >
@@ -137,9 +136,8 @@ RadioItems.propTypes = {
     ]),
 
     /**
-     * Indicates whether labelStyle should be inline or not
-     * True: Automatically set { 'display': 'inline-block' } to labelStyle
-     * False: No additional styles are passed into labelStyle.
+     * Indicates whether the options labels should be displayed inline (true=horizontal)
+     * or in a block (false=vertical).
      */
     inline: PropTypes.bool,
 

components/dash-core-components/tests/test_inline.py

@@ -0,0 +1,22 @@
+from dash import Dash, html, dcc
+
+
+def test_inline_props(dash_dcc):
+    app = Dash(__name__)
+
+    options = ["one", "two", "three"]
+    app.layout = html.Div(
+        [
+            html.Div(
+                [
+                    html.H2(f"Inline: {inline}"),
+                    dcc.RadioItems(options=options, inline=inline),
+                    dcc.Checklist(options=options, inline=inline),
+                ]
+            )
+            for inline in [True, False]
+        ]
+    )
+
+    dash_dcc.start_server(app)
+    dash_dcc.percy_snapshot("RadioItems/Checklist-inline")