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

* add emotion styling to Markup chart

* Update package.json
This commit is contained in:
Phillip Kelley-Dotson 2020-06-05 12:01:59 -07:00 committed by Yongjie Zhao
parent 4b013c08df
commit 153cb2f851
3 changed files with 24 additions and 42 deletions

View File

@ -34,6 +34,7 @@
"@superset-ui/chart": "^0.13.0", "@superset-ui/chart": "^0.13.0",
"@superset-ui/control-utils": "^0.13.9", "@superset-ui/control-utils": "^0.13.9",
"@superset-ui/translation": "^0.13.0", "@superset-ui/translation": "^0.13.0",
"@superset-ui/style": "^0.13.26",
"@superset-ui/validator": "^0.13.0", "@superset-ui/validator": "^0.13.0",
"react": "^15 || ^16" "react": "^15 || ^16"
} }

View File

@ -1,39 +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.
*/
.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;
}

View File

@ -18,7 +18,7 @@
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './Markup.css'; import styled from '@superset-ui/style';
const propTypes = { const propTypes = {
className: PropTypes.string, className: PropTypes.string,
@ -42,7 +42,6 @@ const CONTAINER_STYLE = {
class Markup extends React.PureComponent { class Markup extends React.PureComponent {
render() { render() {
const { className, height, isSeparator, html, cssFiles } = this.props; const { className, height, isSeparator, html, cssFiles } = this.props;
return ( return (
<div className={className} style={CONTAINER_STYLE}> <div className={className} style={CONTAINER_STYLE}>
<iframe <iframe
@ -68,4 +67,25 @@ class Markup extends React.PureComponent {
Markup.propTypes = propTypes; Markup.propTypes = propTypes;
Markup.defaultProps = defaultProps; 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;
}
`;