refactor: Removes the CSS files from the Partition plugin (apache#19521)

* refactor: Removes the CSS files from the Partition plugin

* Fixes bullet

* Always use the color of the partitions

superset-frontend/plugins/legacy-plugin-chart-partition/package.json

@@ -15,9 +15,6 @@
   },
   "license": "Apache-2.0",
   "author": "Superset",
-  "sideEffects": [
-    "*.css"
-  ],
   "main": "lib/index.js",
   "module": "esm/index.js",
   "files": [

superset-frontend/plugins/legacy-plugin-chart-partition/src/Partition.js

@@ -26,7 +26,6 @@ import {
   getTimeFormatter,
   CategoricalColorNamespace,
 } from '@superset-ui/core';
-import './Partition.css';
 
 // Compute dx, dy, x, y for each node and
 // return an array of nodes in breadth-first order
@@ -268,13 +267,12 @@ function Icicle(element, props) {
       if (useRichTooltip) {
         const nodes = getAncestors(d);
         nodes.reverse().forEach(n => {
-          const atNode = n.depth === d.depth;
           t += '<tbody>';
           t +=
             '<tr>' +
             '<td>' +
             '<div ' +
-            `style='border: 2px solid ${atNode ? 'black' : 'transparent'};` +
+            `style='border: 2px solid transparent;` +
             `background-color: ${n.color};'` +
             '></div>' +
             '</td>' +

superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx

@@ -0,0 +1,81 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { reactify, styled } from '@superset-ui/core';
+import Component from './Partition';
+
+const ReactComponent = reactify(Component);
+
+const Partition = ({ className, ...otherProps }) => (
+  <div className={className}>
+    <ReactComponent {...otherProps} />
+  </div>
+);
+
+export default styled(Partition)`
+  ${({ theme }) => `
+    .superset-legacy-chart-partition {
+      position: relative;
+    }
+
+    .superset-legacy-chart-partition .chart {
+      display: block;
+      margin: auto;
+      font-size: ${theme.typography.sizes.s}px;
+    }
+
+    .superset-legacy-chart-partition rect {
+      stroke: ${theme.colors.grayscale.light2};
+      fill: ${theme.colors.grayscale.light1};
+      fill-opacity: ${theme.opacity.heavy};
+      transition: fill-opacity 180ms linear;
+      cursor: pointer;
+    }
+
+    .superset-legacy-chart-partition rect:hover {
+      fill-opacity: 1;
+    }
+
+    .superset-legacy-chart-partition g text {
+      font-weight: ${theme.typography.weights.bold};
+      fill: ${theme.colors.grayscale.dark1};
+    }
+
+    .superset-legacy-chart-partition g:hover text {
+      fill: ${theme.colors.grayscale.dark2};
+    }
+
+    .superset-legacy-chart-partition .partition-tooltip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      padding: ${theme.gridUnit}px;
+      pointer-events: none;
+      background-color: ${theme.colors.grayscale.dark2};
+      border-radius: ${theme.gridUnit}px;
+    }
+
+    .partition-tooltip td {
+      padding-left: ${theme.gridUnit}px;
+      font-size: ${theme.typography.sizes.s}px;
+      color: ${theme.colors.grayscale.light5};
+    }
+  `}
+`;