mirror of https://github.com/apache/superset.git
fix(Explore): fixes broken layout of tooltips (#14529)
* fix: moves LESS styles into Emotion, fixes broken layout of tooltips * fix: tests * style: linting * style: better styling location
This commit is contained in:
parent
5e95d4638c
commit
c2bd684454
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { styledShallow as shallow } from 'spec/helpers/theming';
|
||||
import {
|
||||
DatasourceType,
|
||||
getChartControlPanelRegistry,
|
||||
|
@ -29,7 +29,6 @@ import {
|
|||
ControlPanelsContainer,
|
||||
ControlPanelsContainerProps,
|
||||
} from 'src/explore/components/ControlPanelsContainer';
|
||||
import Collapse from 'src/components/Collapse';
|
||||
|
||||
describe('ControlPanelsContainer', () => {
|
||||
let wrapper;
|
||||
|
@ -98,6 +97,8 @@ describe('ControlPanelsContainer', () => {
|
|||
|
||||
it('renders ControlPanelSections', () => {
|
||||
wrapper = shallow(<ControlPanelsContainer {...getDefaultProps()} />);
|
||||
expect(wrapper.find(Collapse.Panel)).toHaveLength(5);
|
||||
expect(
|
||||
wrapper.find('[data-test="collapsible-control-panel"]'),
|
||||
).toHaveLength(5);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { t } from '@superset-ui/core';
|
||||
import { t, css } from '@superset-ui/core';
|
||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { FormLabel } from 'src/components/Form';
|
||||
|
@ -49,7 +49,16 @@ export default class ControlHeader extends React.Component {
|
|||
renderOptionalIcons() {
|
||||
if (this.props.hovered) {
|
||||
return (
|
||||
<span>
|
||||
<span
|
||||
css={theme => css`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
padding-left: ${theme.gridUnit}px;
|
||||
transform: translate(100%, -50%);
|
||||
white-space: nowrap;
|
||||
`}
|
||||
>
|
||||
{this.props.description && (
|
||||
<span>
|
||||
<InfoTooltipWithTrigger
|
||||
|
@ -85,7 +94,13 @@ export default class ControlHeader extends React.Component {
|
|||
return (
|
||||
<div className="ControlHeader" data-test={`${this.props.name}-header`}>
|
||||
<div className="pull-left">
|
||||
<FormLabel css={{ marginBottom: 0 }}>
|
||||
<FormLabel
|
||||
css={{
|
||||
marginBottom: 0,
|
||||
position: 'relative',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{this.props.leftNode && <span>{this.props.leftNode}</span>}
|
||||
<span
|
||||
role="button"
|
||||
|
|
|
@ -27,6 +27,7 @@ import {
|
|||
getChartControlPanelRegistry,
|
||||
QueryFormData,
|
||||
DatasourceType,
|
||||
css,
|
||||
} from '@superset-ui/core';
|
||||
import {
|
||||
ControlPanelSectionConfig,
|
||||
|
@ -314,7 +315,24 @@ export class ControlPanelsContainer extends React.Component<
|
|||
|
||||
return (
|
||||
<Collapse.Panel
|
||||
className="control-panel-section"
|
||||
data-test="collapsible-control-panel"
|
||||
css={theme => css`
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: ${theme.gridUnit * 10}px;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
margin-left: ${theme.gridUnit * 4}px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
span.label {
|
||||
display: inline-block;
|
||||
}
|
||||
`}
|
||||
header={PanelHeader()}
|
||||
key={sectionId}
|
||||
>
|
||||
|
|
|
@ -47,34 +47,10 @@
|
|||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.control-panel-section {
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.background-transparent {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.control-panel-section {
|
||||
.panel-body {
|
||||
margin-left: 15px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
span.label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.fa.expander {
|
||||
width: 15px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue