chore(legacy-plugin-chart-markup): add emotion styling to Markup chart (

apache#567) * add emotion styling to Markup chart * Update package.json
zhaoyongjie · Nov 26, 2021 · 153cb2f · 153cb2f
1 parent 4b013c0
commit 153cb2f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 42 deletions.
diff --git a/...rontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-markup/package.json b/...rontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-markup/package.json
@@ -34,6 +34,7 @@
     "@superset-ui/chart": "^0.13.0",
     "@superset-ui/control-utils": "^0.13.9",
     "@superset-ui/translation": "^0.13.0",
+    "@superset-ui/style": "^0.13.26",
     "@superset-ui/validator": "^0.13.0",
     "react": "^15 || ^16"
   }

diff --git a/...ntend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-markup/src/Markup.css b/...ntend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-markup/src/Markup.css
diff --git a/...ntend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-markup/src/Markup.jsx b/...ntend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-markup/src/Markup.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import './Markup.css';
+import styled from '@superset-ui/style';
 
 const propTypes = {
   className: PropTypes.string,
@@ -42,7 +42,6 @@ const CONTAINER_STYLE = {
 class Markup extends React.PureComponent {
   render() {
     const { className, height, isSeparator, html, cssFiles } = this.props;
-
     return (
       <div className={className} style={CONTAINER_STYLE}>
         <iframe
@@ -68,4 +67,25 @@ class Markup extends React.PureComponent {
 Markup.propTypes = propTypes;
 Markup.defaultProps = defaultProps;
 
-export default Markup;
+export default styled(Markup)`
+  .markup.slice_container {
+    margin: 10px;
+  }
+  .separator {
+    background-color: transparent !important;
+  }
+  .separator hr {
+    border: 0;
+    height: 1px;
+    background-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 0)
+    );
+  }
+  .separator .chart-header {
+    border: none !important;
+  }
+`;