From 455e91f1b396e5d099bdf7c8bd73fe3317277747 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Fri, 10 Mar 2023 15:10:25 -0500
Subject: [PATCH 1/6] Fix RadioItems & Checklist inline prop.
---
.../src/components/Checklist.react.js | 14 ++++++--------
.../src/components/RadioItems.react.js | 14 ++++++--------
2 files changed, 12 insertions(+), 16 deletions(-)
diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
index b911612a2b..f9d95aacf4 100644
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ b/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 labelStyle display should be inline (true=horizontal)
+ * or in block (false=vertical).
*/
inline: PropTypes.bool,
diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js
index a8c968e53d..e2a9c6433f 100644
--- a/components/dash-core-components/src/components/RadioItems.react.js
+++ b/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 labelStyle display should be inline (true=horizontal)
+ * or in block (false=vertical).
*/
inline: PropTypes.bool,
From ca803f7e7196864241f08bf6595e20819abbaa7a Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Fri, 10 Mar 2023 15:15:59 -0500
Subject: [PATCH 2/6] Update changelog.
---
CHANGELOG.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 68328b17e7..78ac659a18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
- [#2425](https://github.com/plotly/dash/pull/2425) Fix multiple log handler added unconditionally to the logger, resulting in duplicate log message.
- [#2415](https://github.com/plotly/dash/pull/2415) Fix background callbacks progress not deleted after fetch.
- [#2426](https://github.com/plotly/dash/pull/2426) Set default interval to 1 second for app.long_callback, restoring the behavior it had before v2.6.0 when we introduced `backround=True` callbacks.
+- [#2450](https://github.com/plotly/dash/pull/2450) Set label style `display: block` if `inline` is false in RadioItems & Checklist components.
## Changed
From 9ecfcdf972e33e4532a7c5b1cebfdc6e9becb627 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Wed, 15 Mar 2023 15:09:25 -0400
Subject: [PATCH 3/6] Update docstring.
---
.../dash-core-components/src/components/Checklist.react.js | 4 ++--
.../dash-core-components/src/components/RadioItems.react.js | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
index f9d95aacf4..784d8fc596 100644
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ b/components/dash-core-components/src/components/Checklist.react.js
@@ -143,8 +143,8 @@ Checklist.propTypes = {
),
/**
- * Indicates whether labelStyle display should be inline (true=horizontal)
- * or in block (false=vertical).
+ * Indicates whether the options labels should be displayed inline (true=horizontal)
+ * or in a block (false=vertical).
*/
inline: PropTypes.bool,
diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js
index e2a9c6433f..a62e2293ff 100644
--- a/components/dash-core-components/src/components/RadioItems.react.js
+++ b/components/dash-core-components/src/components/RadioItems.react.js
@@ -136,8 +136,8 @@ RadioItems.propTypes = {
]),
/**
- * Indicates whether labelStyle display should be inline (true=horizontal)
- * or in block (false=vertical).
+ * Indicates whether the options labels should be displayed inline (true=horizontal)
+ * or in a block (false=vertical).
*/
inline: PropTypes.bool,
From 2ac4075e36791bd4baab291347e31488b41a627e Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Wed, 15 Mar 2023 15:13:12 -0400
Subject: [PATCH 4/6] Move changelog entry to breaking section.
---
CHANGELOG.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78ac659a18..19a3cb4b0b 100644
--- a/CHANGELOG.md
+++ b/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`.
+
## 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.
@@ -22,7 +25,6 @@ This project adheres to [Semantic Versioning](https://semver.org/).
- [#2425](https://github.com/plotly/dash/pull/2425) Fix multiple log handler added unconditionally to the logger, resulting in duplicate log message.
- [#2415](https://github.com/plotly/dash/pull/2415) Fix background callbacks progress not deleted after fetch.
- [#2426](https://github.com/plotly/dash/pull/2426) Set default interval to 1 second for app.long_callback, restoring the behavior it had before v2.6.0 when we introduced `backround=True` callbacks.
-- [#2450](https://github.com/plotly/dash/pull/2450) Set label style `display: block` if `inline` is false in RadioItems & Checklist components.
## Changed
From f54be37873e9a319a999f7bdb4a979c65c5a95d6 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Wed, 15 Mar 2023 15:25:17 -0400
Subject: [PATCH 5/6] Add test inline.
---
.../dash-core-components/tests/test_inline.py | 22 +++++++++++++++++++
1 file changed, 22 insertions(+)
create mode 100644 components/dash-core-components/tests/test_inline.py
diff --git a/components/dash-core-components/tests/test_inline.py b/components/dash-core-components/tests/test_inline.py
new file mode 100644
index 0000000000..ea7ef59c69
--- /dev/null
+++ b/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")
From d51444d727bf696e8efc4da45dac46a09a43df44 Mon Sep 17 00:00:00 2001
From: Philippe Duval <t4rk@outlook.com>
Date: Wed, 15 Mar 2023 15:41:33 -0400
Subject: [PATCH 6/6] Update CHANGELOG.md
Co-authored-by: Alex Johnson <johnson.alex.c@gmail.com>
---
CHANGELOG.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19a3cb4b0b..e5ee777493 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ 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`.
+- [#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