Merge remote-tracking branch 'remote/dev' into performance-adjust

# Conflicts:
#	CHANGELOG.md

Author: BSd3v

CHANGELOG.md

@@ -8,6 +8,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3113](https://github.com/plotly/dash/pull/3113) Adjusted background polling requests to strip the data from the request, this allows for context to flow as normal. This addresses issue [#3111](https://github.com/plotly/dash/pull/3111)
 - [#3248] changes to the rendering logic
 
+## Fixed
+- [#3251](https://github.com/plotly/dash/pull/3251). Prevented default styles from overriding `className_*` props in `dcc.Upload` component.
+
+
 ## [3.0.1] - 2025-03-24
 
 ## Fixed

components/dash-core-components/src/fragments/Upload.react.js

@@ -64,6 +64,11 @@ export default class Upload extends Component {
             style_reject,
             style_disabled,
         } = this.props;
+
+        const activeStyle = className_active ? undefined : style_active;
+        const disabledStyle = className_disabled ? undefined : style_disabled;
+        const rejectStyle = className_reject ? undefined : style_reject;
+
         return (
             <LoadingElement id={id}>
                 <Dropzone
@@ -79,9 +84,9 @@ export default class Upload extends Component {
                     rejectClassName={className_reject}
                     disabledClassName={className_disabled}
                     style={style}
-                    activeStyle={style_active}
-                    rejectStyle={style_reject}
-                    disabledStyle={style_disabled}
+                    activeStyle={activeStyle}
+                    rejectStyle={rejectStyle}
+                    disabledStyle={disabledStyle}
                 >
                     {children}
                 </Dropzone>

components/dash-core-components/tests/integration/upload/test_children_accept_any_component.py

@@ -28,10 +28,32 @@ def test_upca001_upload_children_gallery(dash_dcc):
                     "textAlign": "center",
                 },
             ),
+            dcc.Upload(
+                "upload",
+                disabled=True,
+                className_disabled="upload-disabled",
+                id="upload",
+            ),
+            dcc.Upload("upload", disabled=True, id="upload-no-className"),
         ]
     )
     dash_dcc.start_server(app)
     time.sleep(0.5)
     dash_dcc.percy_snapshot("upca001 children gallery")
 
+    first_child = dash_dcc.find_element("#upload").find_element_by_css_selector(
+        ":first-child"
+    )
+    # Check that there is no default style since className is specified
+    style = first_child.get_attribute("style")
+    assert "opacity: 0.5" not in style
+
+    first_child = dash_dcc.find_element(
+        "#upload-no-className"
+    ).find_element_by_css_selector(":first-child")
+
+    # Check that there is default style since no className is specified
+    style = first_child.get_attribute("style")
+    assert "opacity: 0.5" in style
+
     assert dash_dcc.get_logs() == []

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css

@@ -8,8 +8,7 @@
     background: #ffffff;
     display: inline-block;
     /* shadow-1 */
-    box-shadow:
-        0px 6px 16px rgba(80, 103, 132, 0.165),
+    box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
         0px 2px 6px rgba(80, 103, 132, 0.12),
         0px 0px 1px rgba(80, 103, 132, 0.32);
 }

dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css

@@ -124,7 +124,7 @@
 }
 
 .dash-be-error__str {
-    background-color: #F5F6FA;
+    background-color: #f5f6fa;
     min-width: 386px;
     width: 100%;
     overflow: auto;
@@ -177,8 +177,7 @@
     background-color: white;
     overflow: auto;
     border-radius: 6px;
-    box-shadow:
-        0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
+    box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
         0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
         0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
 }

dash/dash-renderer/src/components/error/icons/Expand.svg

@@ -25,7 +25,14 @@
     font-size: 14px;
     border-radius: 0px;
     letter-spacing: normal;
+    white-space: nowrap;
     gap: 6px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    outline: none;
+    display: flex;
+    align-items: center;
 }
 
 .dash-debug-menu__popup {
@@ -52,8 +59,7 @@
     align-self: flex-end;
     position: relative;
     /* Shadow/Small */
-    box-shadow:
-        0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
+    box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
         0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
         0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
 }
@@ -113,30 +119,28 @@
     transition: 0.3s;
     box-sizing: border-box;
     position: fixed;
-    bottom: 8px;
-    right: 8px;
+    bottom: -1px;
+    right: -1px;
     display: flex;
     color: black;
-    flex-direction: column;
+    flex-direction: row;
     font-family: Verdana, sans-serif !important;
     font-size: 14px;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     z-index: 10000;
-    border-radius: 5px;
-    padding: 5px;
+    border-radius: 5px 0 0 0;
+    padding: 15px 0;
     background-color: #f5f6fa;
-    box-shadow:
-        0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04),
+    box-shadow: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04),
         0px 2.3px 2px 0px rgba(0, 0, 0, 0.03);
     border: 1px solid rgba(0, 24, 102, 0.1);
 }
-.dash-debug-menu__outer--closed {
-    height: 60px;
-    width: 60px;
-    bottom: 37px;
-    right: 37px;
-    padding: 0;
+.dash-debug-menu__outer.dash-debug-menu__outer--collapsed {
+    max-width: 50px;
+}
+.dash-debug-menu__outer.dash-debug-menu__outer--expanded {
+    max-width: 682px;
 }
 
 .dash-debug-menu__upgrade-tooltip {
@@ -153,6 +157,22 @@
     z-index: 1200;
 }
 
+.dash-debug-menu__toggle {
+    color: #7f4bc4;
+    transition: 0.3s;
+}
+.dash-debug-menu__toggle--expanded {
+    transform: rotate(180deg);
+}
+.dash-debug-menu__error-indicator {
+    width: 8px;
+    height: 8px;
+    background-color: #DC3E42;
+    border-radius: 100%;
+    position: absolute;
+    right: 3px;
+    top: 13px;
+}
 .dash-debug-menu__status {
     display: flex;
     align-items: center;
@@ -162,7 +182,8 @@
 .dash-debug-menu__content {
     display: flex;
     align-items: stretch;
-    margin: 10px;
+    margin-left: 15px;
+    transition: all 0.5s ease;
 }
 
 .dash-debug-menu__version {
@@ -186,7 +207,6 @@
     justify-content: center;
     align-items: center;
     transition: background-color 0.2s;
-    cursor: pointer;
     font-family: Verdana, sans-serif !important;
     font-weight: bold;
     color: black;
@@ -213,8 +233,7 @@
     right: 29px;
     z-index: 10002;
     cursor: pointer;
-    box-shadow:
-        0px 0px 1px rgba(0, 0, 0, 0.25),
+    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
         0px 1px 3px rgba(162, 177, 198, 0.32);
     border-radius: 32px;
     background-color: white;