From 91b8eedb495856da08787d39b3be1795c8f289d8 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 7 May 2021 10:05:52 -0700 Subject: [PATCH 1/4] fix: moves LESS styles into Emotion, fixes broken layout of tooltips --- .../components/ControlPanelsContainer.tsx | 31 ++++++++++++++++++- superset-frontend/src/explore/main.less | 24 -------------- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx index 9181a568c7044..f6b9cc3015dbb 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx @@ -26,6 +26,7 @@ import { getChartControlPanelRegistry, QueryFormData, DatasourceType, + css, } from '@superset-ui/core'; import { ControlPanelSectionConfig, @@ -211,7 +212,35 @@ export class ControlPanelsContainer extends React.Component 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; + } + + .control-label { + margin-bottom: 0px; + position: relative; + span + span { + // this is targeting the little info icons + position: absolute; + top: 50%; + right: ${theme.gridUnit * -3}px; + transform: translateY(-50%); + } + } + + 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 84ae27ef805b9..43de0da2acc97 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; } From ebd78d73da0d469d6ab7780ec2e479ba75338a04 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 7 May 2021 12:55:46 -0700 Subject: [PATCH 2/4] fix: tests --- .../explore/components/ControlPanelsContainer_spec.tsx | 6 ++++-- .../src/explore/components/ControlPanelsContainer.tsx | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx index 8bee3f3cc6613..bbc01895524d2 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, @@ -98,6 +98,8 @@ describe('ControlPanelsContainer', () => { it('renders ControlPanelSections', () => { wrapper = shallow(); - 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/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx index f6b9cc3015dbb..827bb59ba0186 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx @@ -212,6 +212,7 @@ export class ControlPanelsContainer extends React.Component css` margin-bottom: 0; box-shadow: none; From dead6f5f1ab35a29f8fa5581c9917a954f775eb7 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Fri, 7 May 2021 14:43:19 -0700 Subject: [PATCH 3/4] style: linting --- .../explore/components/ControlPanelsContainer_spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx index bbc01895524d2..f25793dd5f3c1 100644 --- a/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx +++ b/superset-frontend/spec/javascripts/explore/components/ControlPanelsContainer_spec.tsx @@ -29,7 +29,6 @@ import { ControlPanelsContainer, ControlPanelsContainerProps, } from 'src/explore/components/ControlPanelsContainer'; -import Collapse from 'src/components/Collapse'; describe('ControlPanelsContainer', () => { let wrapper; From 2ad7a473082a702a17fd4433584e404b5cb7e312 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 12 May 2021 23:19:59 -0700 Subject: [PATCH 4/4] style: better styling location --- .../src/explore/components/ControlHeader.jsx | 21 ++++++++++++++++--- .../components/ControlPanelsContainer.tsx | 12 ----------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx index 3e0f912605a83..64cc7c205eeb4 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 ( - + css` + position: absolute; + top: 50%; + right: 0; + padding-left: ${theme.gridUnit}px; + transform: translate(100%, -50%); + white-space: nowrap; + `} + > {this.props.description && (
- + {this.props.leftNode && {this.props.leftNode}}