Merge pull request #1932 from plotly/fix-ie11

Fix IE11

Author: alexcjohnson

CHANGELOG.md

@@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/).
   - Adds `ticklabelstep` to axes to reduce tick labels while still showing all ticks.
   - Displays the plotly.js version when hovering on the modebar. This helps debugging situations where there might be multiple sources of plotly.js, for example `/assets` vs the versions built into `dcc` or `ddk`.
 
+### Fixed
+- [#1932](https://github.com/plotly/dash/pull/1932) Fixes several bugs:
+  - Restores compatibility with IE11 [#1925](https://github.com/plotly/dash/issues/1925)
+  - Restores `style_header` text alignment in Dash Table [#1914](https://github.com/plotly/dash/issues/1914)
+  - Clears the unneeded `webdriver-manager` requirement from `dash[testing]` [#1919](https://github.com/plotly/dash/issues/1925)
+
 ## [2.1.0] - 2022-01-22
 
 ### Changed

components/dash-core-components/package-lock.json

@@ -36,9 +36,9 @@
   "maintainer": "Alex Johnson <alex@plotly.com>",
   "license": "MIT",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",
     "base64-js": "^1.5.1",
     "color": "^4.2.1",

components/dash-core-components/package.json

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
-import ResizeDetector from 'react-resize-detector';
+// /build/withPolyfill for IE11 support - https://github.com/maslianok/react-resize-detector/issues/144
+import ResizeDetector from 'react-resize-detector/build/withPolyfill';
 import {
     equals,
     filter,

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

@@ -48,9 +48,9 @@
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",
     "@percy/storybook": "^3.3.1",
     "@plotly/dash-component-plugins": "^1.2.2",

components/dash-table/package-lock.json

@@ -703,11 +703,10 @@
             }
             .column-actions {
                 display: flex;
-                flex-wrap: wrap;
             }
 
             .column-header-name {
-                margin-left: auto;
+                flex-grow: 1;
             }
 
             [class^='column-header--'], [class^='dash-filter--'] {

components/dash-table/package.json

@@ -1,3 +1,5 @@
+// NOTE: need to pin fontawesome-svg-core to <1.3 and free-*-svg-icons to <6
+// or we break IE11
 import {library} from '@fortawesome/fontawesome-svg-core';
 import {faEyeSlash, faTrashAlt} from '@fortawesome/free-regular-svg-icons';
 import {

components/dash-table/src/dash-table/components/Table/Table.less

@@ -20,6 +20,9 @@ def get_app(props=dict()):
     baseProps["filter_action"] = "native"
     baseProps["merge_duplicate_headers"] = True
 
+    # first col is normally only 60px, make it wider since we're adding
+    # all these actions and need to interact with them
+    baseProps["style_cell_conditional"][0].update(width=120, maxWidth=120, minWidth=120)
     baseProps.update(props)
 
     app.layout = DataTable(**baseProps)