refactor: Removes the CSS files from the Paired T-Test plugin (#19563)

* refactor: Removes the CSS files from the Paired T Test plugin * Adjusts some colors
apache · Apr 7, 2022 · f91f83d · f91f83d
1 parent 38fbca1
commit f91f83d
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 120 deletions.
diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/package.json b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/package.json
@@ -2,31 +2,25 @@
   "name": "@superset-ui/legacy-plugin-chart-paired-t-test",
   "version": "0.18.25",
   "description": "Superset Legacy Chart - Paired T Test",
-  "sideEffects": [
-    "*.css"
-  ],
-  "main": "lib/index.js",
-  "module": "esm/index.js",
-  "files": [
-    "esm",
-    "lib"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/apache-superset/superset-ui.git"
-  },
   "keywords": [
     "superset"
   ],
-  "author": "Superset",
-  "license": "Apache-2.0",
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
   "bugs": {
     "url": "https://github.com/apache-superset/superset-ui/issues"
   },
-  "homepage": "https://github.com/apache-superset/superset-ui#readme",
-  "publishConfig": {
-    "access": "public"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui.git"
   },
+  "license": "Apache-2.0",
+  "author": "Superset",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
   "dependencies": {
     "distributions": "^1.0.0",
     "prop-types": "^15.6.2",
@@ -36,5 +30,8 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "react": "^15 || ^16"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }
diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.css b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.css
diff --git a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/src/PairedTTest.jsx
@@ -19,8 +19,8 @@
 /* eslint-disable react/no-array-index-key */
 import PropTypes from 'prop-types';
 import React from 'react';
+import { styled } from '@superset-ui/core';
 import TTestTable, { dataPropType } from './TTestTable';
-import './PairedTTest.css';
 
 const propTypes = {
   alpha: PropTypes.number,
@@ -39,29 +39,103 @@ const defaultProps = {
   pValPrec: 6,
 };
 
+const StyledDiv = styled.div`
+  ${({ theme }) => `
+    .superset-legacy-chart-paired_ttest .scrollbar-container {
+      overflow: auto;
+    }
+
+    .paired-ttest-table .scrollbar-content {
+      padding-left: ${theme.gridUnit}px;
+      padding-right: ${theme.gridUnit}px;
+      margin-bottom: 0;
+    }
+
+    .paired-ttest-table table {
+      margin-bottom: 0;
+    }
+
+    .paired-ttest-table h1 {
+      margin-left: ${theme.gridUnit}px;
+    }
+
+    .reactable-data tr,
+    .reactable-header-sortable {
+      -webkit-transition: ease-in-out 0.1s;
+      transition: ease-in-out 0.1s;
+    }
+
+    .reactable-data tr:hover {
+      background-color: ${theme.colors.grayscale.light3};
+    }
+
+    .reactable-data tr .false {
+      color: ${theme.colors.error.base};
+    }
+
+    .reactable-data tr .true {
+      color: ${theme.colors.success.base};
+    }
+
+    .reactable-data tr .control {
+      color: ${theme.colors.primary.base};
+    }
+
+    .reactable-data tr .invalid {
+      color: ${theme.colors.warning.base};
+    }
+
+    .reactable-data .control td {
+      background-color: ${theme.colors.grayscale.light3};
+    }
+
+    .reactable-header-sortable:hover,
+    .reactable-header-sortable:focus,
+    .reactable-header-sort-asc,
+    .reactable-header-sort-desc {
+      background-color: ${theme.colors.grayscale.light3};
+      position: relative;
+    }
+
+    .reactable-header-sort-asc:after {
+      content: '\\25bc';
+      position: absolute;
+      right: ${theme.gridUnit * 3}px;
+    }
+
+    .reactable-header-sort-desc:after {
+      content: '\\25b2';
+      position: absolute;
+      right: ${theme.gridUnit * 3}px;
+    }
+  `}
+`;
+
 class PairedTTest extends React.PureComponent {
   render() {
     const { className, metrics, groups, data, alpha, pValPrec, liftValPrec } =
       this.props;
 
     return (
-      <div className={`superset-legacy-chart-paired-t-test ${className}`}>
-        <div className="paired-ttest-table">
-          <div className="scrollbar-content">
-            {metrics.map((metric, i) => (
-              <TTestTable
-                key={i}
-                metric={metric}
-                groups={groups}
-                data={data[metric]}
-                alpha={alpha}
-                pValPrec={Math.min(pValPrec, 32)}
-                liftValPrec={Math.min(liftValPrec, 32)}
-              />
-            ))}
+      <StyledDiv>
+        <div className={`superset-legacy-chart-paired-t-test ${className}`}>
+          <div className="paired-ttest-table">
+            <div className="scrollbar-content">
+              {metrics.map((metric, i) => (
+                <TTestTable
+                  key={i}
+                  metric={metric}
+                  groups={groups}
+                  data={data[metric]}
+                  alpha={alpha}
+                  pValPrec={Math.min(pValPrec, 32)}
+                  liftValPrec={Math.min(liftValPrec, 32)}
+                />
+              ))}
+            </div>
           </div>
         </div>
-      </div>
+      </StyledDiv>
     );
   }
 }