Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Fix RadioItems & Checklist inline prop. #2450

Merged
merged 6 commits into from
Mar 15, 2023
Merged

Fix RadioItems & Checklist inline prop. #2450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
455e91f
Fix RadioItems & Checklist inline prop.
T4rk1n Mar 10, 2023
ca803f7
Update changelog.
T4rk1n Mar 10, 2023
9ecfcdf
Update docstring.
T4rk1n Mar 15, 2023
2ac4075
Move changelog entry to breaking section.
T4rk1n Mar 15, 2023
f54be37
Add test inline.
T4rk1n Mar 15, 2023
d51444d
Update CHANGELOG.md
T4rk1n Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
14 changes: 6 additions & 8 deletions components/dash-core-components/src/components/Checklist.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,

Expand Down
14 changes: 6 additions & 8 deletions components/dash-core-components/src/components/RadioItems.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down Expand Up @@ -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,

Expand Down
22 changes: 22 additions & 0 deletions components/dash-core-components/tests/test_inline.py
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh you know what, I don't think this test ran. I think it needs to be moved into tests/integration/misc to match the pattern in the CI config circleci tests glob "tests/integration/**/test_*.py"

Original file line number Diff line number Diff line change
@@ -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")