You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2021/05/19 04:56:16 UTC
[superset] branch master updated: fix(Explore): fixes broken layout
of tooltips (#14529)
This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new c2bd684 fix(Explore): fixes broken layout of tooltips (#14529)
c2bd684 is described below
commit c2bd6844542ffe66aa72016052ab3308de9dd947
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Tue May 18 21:55:09 2021 -0700
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
---
.../components/ControlPanelsContainer_spec.tsx | 7 ++++---
.../src/explore/components/ControlHeader.jsx | 21 ++++++++++++++++---
.../explore/components/ControlPanelsContainer.tsx | 20 +++++++++++++++++-
superset-frontend/src/explore/main.less | 24 ----------------------
4 files changed, 41 insertions(+), 31 deletions(-)
diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
index 8bee3f3..f25793d 100644
--- a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
+++ b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx
@@ -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);
});
});
diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
index 3e0f912..64cc7c2 100644
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -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"
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index a0d1f44..161407a 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -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}
>
diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less
index 84ae27e..43de0da 100644
--- a/superset-frontend/src/explore/main.less
+++ b/superset-frontend/src/explore/main.less
@@ -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;
}