refactor: Removes the CSS files from the Horizon plugin (#19562)

* refactor: Removes the CSS files from the Horizon plugin

* Removes the CSS file

* Uses font-size from the theme

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

@@ -2,31 +2,25 @@
   "name": "@superset-ui/legacy-plugin-chart-horizon",
   "version": "0.18.25",
   "description": "Superset Legacy Chart - Horizon",
-  "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-array": "^2.0.3",
     "d3-scale": "^3.0.1",
@@ -36,5 +30,8 @@
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
     "react": "^15 || ^16"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.css

@@ -1,38 +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-horizon {
-  overflow: auto;
-  position: relative;
-}
-
-.superset-legacy-chart-horizon .horizon-row {
-  border-bottom: solid 1px #ddd;
-  border-top: 0px;
-  padding: 0px;
-  margin: 0px;
-}
-
-.superset-legacy-chart-horizon .horizon-row span.title {
-  position: absolute;
-  color: #333;
-  font-size: 0.8em;
-  margin: 0;
-  text-shadow: 1px 1px rgba(255, 255, 255, 0.75);
-}

superset-frontend/plugins/legacy-plugin-chart-horizon/src/HorizonChart.jsx

@@ -20,9 +20,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { extent as d3Extent } from 'd3-array';
-import { ensureIsArray } from '@superset-ui/core';
+import { ensureIsArray, styled } from '@superset-ui/core';
 import HorizonRow, { DEFAULT_COLORS } from './HorizonRow';
-import './HorizonChart.css';
 
 const propTypes = {
   className: PropTypes.string,
@@ -58,6 +57,29 @@ const defaultProps = {
   offsetX: 0,
 };
 
+const StyledDiv = styled.div`
+  ${({ theme }) => `
+    .superset-legacy-chart-horizon {
+      overflow: auto;
+      position: relative;
+    }
+
+    .superset-legacy-chart-horizon .horizon-row {
+      border-bottom: solid 1px ${theme.colors.grayscale.light2};
+      border-top: 0;
+      padding: 0;
+      margin: 0;
+    }
+
+    .superset-legacy-chart-horizon .horizon-row span.title {
+      position: absolute;
+      color: ${theme.colors.grayscale.dark1};
+      font-size: ${theme.typography.sizes.s}px;
+      margin: 0;
+    }
+  `}
+`;
+
 class HorizonChart extends React.PureComponent {
   render() {
     const {
@@ -83,26 +105,28 @@ class HorizonChart extends React.PureComponent {
     }
 
     return (
-      <div
+      <StyledDiv>
-        className={`superset-legacy-chart-horizon ${className}`}
+        <div
-        style={{ height }}
+          className={`superset-legacy-chart-horizon ${className}`}
-      >
+          style={{ height }}
-        {data.map(row => (
+        >
-          <HorizonRow
+          {data.map(row => (
-            key={row.key}
+            <HorizonRow
-            width={width}
+              key={row.key}
-            height={seriesHeight}
+              width={width}
-            title={ensureIsArray(row.key).join(', ')}
+              height={seriesHeight}
-            data={row.values}
+              title={ensureIsArray(row.key).join(', ')}
-            bands={bands}
+              data={row.values}
-            colors={colors}
+              bands={bands}
-            colorScale={colorScale}
+              colors={colors}
-            mode={mode}
+              colorScale={colorScale}
-            offsetX={offsetX}
+              mode={mode}
-            yDomain={yDomain}
+              offsetX={offsetX}
-          />
+              yDomain={yDomain}
-        ))}
+            />
-      </div>
+          ))}
+        </div>
+      </StyledDiv>
     );
   }
 }