Merge branch 'dev' into fix_lint_black

alexcjohnson · web-flow · commit 59e9add1420d · 2020-08-27T02:26:26.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ build/
 dist/
 lib/
 lib/bundle.js*
+Project.toml
 coverage/
 node_modules/
 .npm
@@ -18,8 +19,10 @@ venv/
 /build
 /dash_core_components
 dash_core_components_base/plotly.min.js
+/deps
 /inst
 /man
 /R
+/src/*.jl
 DESCRIPTION
 NAMESPACE
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.11.0] - 2020-08-25
+### Added
+- [#851](https://github.com/plotly/dash-core-components/pull/851) Add support for Dash.jl Julia built components
+- [#840](https://github.com/plotly/dash-core-components/pull/840) Add styling properties to `dcc.Loading` component
+  + `parent_className`: Add CSS class for the outermost `dcc.Loading` parent div DOM node
+  + `parent_style`: Add CSS style property for the outermost `dcc.Loading` parent div DOM node
+  + provides a workaround for the previous behaviour the of `className` property, which changed in [#740](https://github.com/plotly/dash-core-components/pull/740). `parent_className` (or inline styles in `parent_style`) now allow CSS rules to be applied to the outermost `dcc.Loading` div, which is no longer covered by `className` on loading completion as of Dash Core Components `>= 1.9.1` (Dash `>= 1.11.0`).
+
 ## [1.10.2] - 2020-07-27
 - [#835](https://github.com/plotly/dash-core-components/pull/835)
   - Upgraded Plotly.js to [1.54.7](https://github.com/plotly/plotly.js/releases/tag/v1.54.7)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "1.10.2",
+  "version": "1.11.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
@@ -21,16 +21,16 @@
     "private::lint.prettier": "prettier --config .prettierrc src/**/*.js tests/unit/*.js --list-different",
     "prepublishOnly": "rm -rf lib && babel src --out-dir lib --copy-files",
     "start": "webpack-serve ./webpack.serve.config.js --open",
-    "test": "run-s -c lint lint:py format:test test-unit test:legacy test:intg test:pyimport",
+    "test": "run-s -c lint test-unit test:legacy test:intg test:pyimport",
     "test:legacy": "pytest tests/test_integration*.py",
     "test:intg": "pytest --nopercyfinalize --headless tests/integration",
     "test:pyimport": "python -m unittest tests/test_dash_import.py",
     "test-unit": "jest",
     "uninstall-local": "pip uninstall dash-core-components -y",
     "prebuild:js": "cp node_modules/plotly.js/dist/plotly.min.js dash_core_components_base/plotly.min.js",
     "build:js": "webpack --mode production",
-    "build:py_and_r": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly'",
-    "build": "run-s prepublishOnly build:js build:py_and_r",
+    "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc'",
+    "build": "run-s prepublishOnly build:js build:backends",
     "postbuild": "es-check es5 dash_core_components/*.js",
     "build:watch": "watch 'npm run build' src",
     "format": "run-s private::format.*",
diff --git a/src/components/Loading.react.js b/src/components/Loading.react.js
@@ -5,6 +5,7 @@ import DefaultSpinner from '../fragments/Loading/spinners/DefaultSpinner.jsx';
 import CubeSpinner from '../fragments/Loading/spinners/CubeSpinner.jsx';
 import CircleSpinner from '../fragments/Loading/spinners/CircleSpinner.jsx';
 import DotSpinner from '../fragments/Loading/spinners/DotSpinner.jsx';
+import {mergeRight} from 'ramda';
 
 function getSpinner(spinnerType) {
     switch (spinnerType) {
@@ -44,6 +45,8 @@ export default class Loading extends Component {
             color,
             className,
             style,
+            parent_className,
+            parent_style,
             fullscreen,
             debug,
             type: spinnerType,
@@ -53,7 +56,14 @@ export default class Loading extends Component {
         const Spinner = isLoading && getSpinner(spinnerType);
 
         return (
-            <div style={isLoading ? hiddenContainer : {}}>
+            <div
+                className={parent_className}
+                style={
+                    isLoading
+                        ? mergeRight(hiddenContainer, parent_style)
+                        : parent_style
+                }
+            >
                 {this.props.children}
                 <div style={isLoading ? coveringSpinner : {}}>
                     {isLoading && (
@@ -117,11 +127,21 @@ Loading.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     *  Additional CSS class for the outermost dcc.Loading parent div DOM node
+     */
+    parent_className: PropTypes.string,
+
     /**
      * Additional CSS styling for the spinner root DOM node
      */
     style: PropTypes.object,
 
+    /**
+     * Additional CSS styling for the outermost dcc.Loading parent div DOM node
+     */
+    parent_style: PropTypes.object,
+
     /**
      * Primary colour used for the loading spinners
      */
diff --git a/tests/integration/loading/test_loading_component.py b/tests/integration/loading/test_loading_component.py
@@ -278,3 +278,88 @@ def get_graph_visibility():
     assert len(dash_dcc.find_elements(".js-plotly-plot .bars path")) == 4
     assert dash_dcc.driver.execute_script(test_identity)
     assert get_graph_visibility() == "visible"
+
+
+def test_ldcp007_class_and_style_props(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            html.Button("click", id="btn"),
+            dcc.Loading(
+                id="loading",
+                className="spinner-class",
+                parent_className="parent-class",
+                style={"background-color": "rgb(255,192,203)"},
+                # rgb(240, 248, 255) = aliceblue
+                parent_style={"border": "3px solid rgb(240, 248, 255)"},
+                children=html.Div(id="loading-child"),
+            ),
+        ]
+    )
+
+    @app.callback(Output("loading-child", "children"), [Input("btn", "n_clicks")])
+    def updateDiv(n_clicks):
+        if n_clicks is None:
+            return
+
+        with lock:
+            return "sample text content"
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_style_to_equal(
+        ".parent-class", "border-color", "rgb(240, 248, 255)"
+    )
+
+    with lock:
+        button = dash_dcc.find_element("#btn")
+        button.click()
+        dash_dcc.wait_for_style_to_equal(
+            ".spinner-class", "background-color", "rgba(255, 192, 203, 1)"
+        )
+
+    assert not dash_dcc.get_logs()
+
+
+def test_ldcp008_graph_in_loading_fits_container_height(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div(
+        className="outer-container",
+        children=[
+            html.Div(
+                dcc.Loading(
+                    parent_style={"height": "100%"},
+                    children=dcc.Graph(
+                        style={"height": "100%"},
+                        figure={
+                            "data": [
+                                {
+                                    "x": [1, 2, 3, 4],
+                                    "y": [4, 1, 6, 9],
+                                    "line": {"shape": "spline"},
+                                }
+                            ]
+                        },
+                    ),
+                ),
+            )
+        ],
+        style={"display": "flex", "height": "300px"},
+    )
+
+    dash_dcc.start_server(app)
+
+    with lock:
+        dash_dcc.wait_for_style_to_equal(".js-plotly-plot", "height", "300px")
+
+        assert dash_dcc.wait_for_element(".js-plotly-plot").size.get(
+            "height"
+        ) == dash_dcc.wait_for_element(".outer-container").size.get("height")
+
+    assert not dash_dcc.get_logs()
diff --git a/tests/test_integration_1.py b/tests/test_integration_1.py
