refactor: Removes the CSS files from the Treemap plugin (#19486)

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

@@ -2,31 +2,25 @@
   "name": "@superset-ui/legacy-plugin-chart-treemap",
   "version": "0.18.25",
   "description": "Superset Legacy Chart - Treemap",
-  "sideEffects": [
+  "keywords": [
-    "*.css"
+    "superset"
   ],
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "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"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/apache-superset/superset-ui.git"
-  },
-  "keywords": [
-    "superset"
-  ],
-  "author": "Superset",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/apache-superset/superset-ui/issues"
-  },
-  "homepage": "https://github.com/apache-superset/superset-ui#readme",
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
     "d3-hierarchy": "^1.1.8",
     "d3-selection": "^1.4.0",
@@ -34,6 +28,10 @@
   },
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
-    "@superset-ui/core": "*"
+    "@superset-ui/core": "*",
+    "react": "^16.13.1"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

superset-frontend/plugins/legacy-plugin-chart-treemap/src/ReactTreemap.jsx

@@ -16,7 +16,36 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { reactify } from '@superset-ui/core';
+import React from 'react';
+import { reactify, styled } from '@superset-ui/core';
 import Component from './Treemap';
 
-export default reactify(Component);
+const ReactComponent = reactify(Component);
+
+const Treemap = ({ className, ...otherProps }) => (
+  <div className={className}>
+    <ReactComponent {...otherProps} />
+  </div>
+);
+
+export default styled(Treemap)`
+  ${({ theme }) => `
+    .superset-legacy-chart-treemap text {
+      font-size: ${theme.typography.sizes.s}px;
+      pointer-events: none;
+    }
+
+    .superset-legacy-chart-treemap tspan:last-child {
+      font-size: ${theme.typography.sizes.xs}px;
+      fill-opacity: 0.8;
+    }
+
+    .superset-legacy-chart-treemap .node rect {
+      shape-rendering: crispEdges;
+    }
+
+    .superset-legacy-chart-treemap .node--hover rect {
+      stroke: ${theme.colors.grayscale.dark2};
+    }
+  `}
+`;

superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.css

@@ -1,36 +0,0 @@
-/**
- * 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.
- */
-
-.superset-legacy-chart-treemap text {
-  font-size: 11px;
-  pointer-events: none;
-}
-
-.superset-legacy-chart-treemap tspan:last-child {
-  font-size: 9px;
-  fill-opacity: 0.8;
-}
-
-.superset-legacy-chart-treemap .node rect {
-  shape-rendering: crispEdges;
-}
-
-.superset-legacy-chart-treemap .node--hover rect {
-  stroke: #000;
-}

superset-frontend/plugins/legacy-plugin-chart-treemap/src/Treemap.js

@@ -29,7 +29,6 @@ import {
   getNumberFormatter,
   CategoricalColorNamespace,
 } from '@superset-ui/core';
-import './Treemap.css';
 
 // Declare PropTypes for recursive data structures
 // https://github.com/facebook/react/issues/5676