-
-
Notifications
You must be signed in to change notification settings - Fork 146
Allow parent_className and parent_style attributes on dcc.Loading components #840
Conversation
src/components/Loading.react.js
Outdated
@@ -53,7 +55,13 @@ export default class Loading extends Component { | |||
const Spinner = isLoading && getSpinner(spinnerType); | |||
|
|||
return ( | |||
<div style={isLoading ? hiddenContainer : {}}> | |||
<div | |||
className={isLoading ? null : className} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the original behavior, modified in #740 which introduced the regression, the className
was either applied to
- the Spinner, if in a loading state
- the
this.props.children
div parent, otherwise (at least, ifthis.props.children
wasn't anObject
orFunction
, for some reason. If it was, noclassName
would be applied. See below for these three conditions.)
I'm attempting to mimic this behaviour here. Ideally this would be two different props, in the pattern of style
and the new (in this PR) parent_style
, but in order to fix the regression and have current apps working without breaking changes I think we need to replicate the old behaviour here.
This was the previous render return value:
dash-core-components/src/components/Loading.react.js
Lines 40 to 73 in aa4fce7
if (loading_state && loading_state.is_loading) { | |
const Spinner = getSpinner(spinnerType); | |
return ( | |
<div style={{visibility: 'hidden', position: 'relative'}}> | |
{this.props.children} | |
<Spinner | |
className={className} | |
style={{ | |
visibility: 'visible', | |
position: 'absolute', | |
top: '0', | |
height: '100%', | |
width: '100%', | |
display: 'flex', | |
justifyContent: 'center', | |
alignItems: 'center', | |
...style, | |
}} | |
status={loading_state} | |
color={color} | |
debug={debug} | |
fullscreen={fullscreen} | |
/> | |
</div> | |
); | |
} | |
if ( | |
type(this.props.children) !== 'Object' || | |
type(this.props.children) !== 'Function' | |
) { | |
return <div className={className}>{this.props.children}</div>; | |
} | |
return this.props.children; |
Some relevant comments from #740 that I wish to address in this PR:
The problem here is that you do need to be able to apply a class to the wrapper in order to avoid the situation described in #831, and e.g. this community issue (and previously, this was the |
An alternative to this would be to keep What do you think @alexcjohnson? It's a breaking change, but arguably that ship has sailed already with DCC 1.9.1. If you think |
Talking with @wbrgss just now, it seems like there was never really a use case for having the same className on both the spinner and the parent. There was a use case for the spinner className (to style the spinner itself) and a separate use case to style the parent (primarily to inherit sizing from its own parent). But if you happened to require both of these use cases at the same time, you'd be out of luck - one of them would break the other behavior. Based on that, I think we can consider the previous behavior (prior to #740) to be a bug, and we can use @wbrgss's suggestion of adding |
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Another question is where to put I guess it would be consistent to add it as a prop of the |
The only reason to want So sure, you can put |
OK, sounds good to me. Let's keep the scope of this to just address the original issue then, and leave out the |
@wbrgss this looks good to me. Just needs a changelog entry, and either update the failing test not to use |
value=5, | ||
), | ||
]) | ||
app.layout = html.Div( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The only manual changes here were removing the output=
, input=
, state=
keyword arguments in the test_location_link
test in order to work around plotly/dash#1366; the other changes (double "
quotes, indentation) are formatting changes from black
ening this file.
@alexcjohnson thanks for info re plotly/dash#1366; didn't realize that was the cause of the failing legacy tests. Tests are passing and CHANGELOG has been updated 🙂 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💃 Excellent!
Fixes #831
I plan to make a test for this in the vein of the test app in #831 (comment)