mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
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.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { styledShallow as shallow } from 'spec/helpers/theming';
|
||||||
import {
|
import {
|
||||||
DatasourceType,
|
DatasourceType,
|
||||||
getChartControlPanelRegistry,
|
getChartControlPanelRegistry,
|
||||||
@ -29,7 +29,6 @@ import {
|
|||||||
ControlPanelsContainer,
|
ControlPanelsContainer,
|
||||||
ControlPanelsContainerProps,
|
ControlPanelsContainerProps,
|
||||||
} from 'src/explore/components/ControlPanelsContainer';
|
} from 'src/explore/components/ControlPanelsContainer';
|
||||||
import Collapse from 'src/components/Collapse';
|
|
||||||
|
|
||||||
describe('ControlPanelsContainer', () => {
|
describe('ControlPanelsContainer', () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
@ -98,6 +97,8 @@ describe('ControlPanelsContainer', () => {
|
|||||||
|
|
||||||
it('renders ControlPanelSections', () => {
|
it('renders ControlPanelSections', () => {
|
||||||
wrapper = shallow(<ControlPanelsContainer {...getDefaultProps()} />);
|
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 React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
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 { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import { FormLabel } from 'src/components/Form';
|
import { FormLabel } from 'src/components/Form';
|
||||||
@ -49,7 +49,16 @@ export default class ControlHeader extends React.Component {
|
|||||||
renderOptionalIcons() {
|
renderOptionalIcons() {
|
||||||
if (this.props.hovered) {
|
if (this.props.hovered) {
|
||||||
return (
|
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 && (
|
{this.props.description && (
|
||||||
<span>
|
<span>
|
||||||
<InfoTooltipWithTrigger
|
<InfoTooltipWithTrigger
|
||||||
@ -85,7 +94,13 @@ export default class ControlHeader extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div className="ControlHeader" data-test={`${this.props.name}-header`}>
|
<div className="ControlHeader" data-test={`${this.props.name}-header`}>
|
||||||
<div className="pull-left">
|
<div className="pull-left">
|
||||||
<FormLabel css={{ marginBottom: 0 }}>
|
<FormLabel
|
||||||
|
css={{
|
||||||
|
marginBottom: 0,
|
||||||
|
position: 'relative',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
{this.props.leftNode && <span>{this.props.leftNode}</span>}
|
{this.props.leftNode && <span>{this.props.leftNode}</span>}
|
||||||
<span
|
<span
|
||||||
role="button"
|
role="button"
|
||||||
|
@ -27,6 +27,7 @@ import {
|
|||||||
getChartControlPanelRegistry,
|
getChartControlPanelRegistry,
|
||||||
QueryFormData,
|
QueryFormData,
|
||||||
DatasourceType,
|
DatasourceType,
|
||||||
|
css,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
ControlPanelSectionConfig,
|
ControlPanelSectionConfig,
|
||||||
@ -314,7 +315,24 @@ export class ControlPanelsContainer extends React.Component<
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Collapse.Panel
|
<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()}
|
header={PanelHeader()}
|
||||||
key={sectionId}
|
key={sectionId}
|
||||||
>
|
>
|
||||||
|
@ -47,34 +47,10 @@
|
|||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-panel-section {
|
|
||||||
margin-bottom: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-bottom: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-transparent {
|
.background-transparent {
|
||||||
background-color: transparent !important;
|
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 {
|
.fa.expander {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user