fix: More tweaks needed after adding Doctype tag (#10504)

* fixing last-of-type specificity

* Simplifying/consolidating styles

* fixing filterbox in explore

* linting

* adding some px to font sizes

* fixing in-dash overflow

* removing px for one special fontsize case

* simplifying, addressing comments

superset-frontend/src/chart/Chart.jsx

@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Alert } from 'react-bootstrap';
+import styled from '@superset-ui/style';
 
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger/LogUtils';
@@ -27,7 +28,6 @@ import RefreshChartOverlay from '../components/RefreshChartOverlay';
 import ErrorMessageWithStackTrace from '../components/ErrorMessage/ErrorMessageWithStackTrace';
 import ErrorBoundary from '../components/ErrorBoundary';
 import ChartRenderer from './ChartRenderer';
-import './chart.less';
 
 const propTypes = {
   annotationData: PropTypes.object,
@@ -80,6 +80,13 @@ const defaultProps = {
   chartStackTrace: null,
 };
 
+const Styles = styled.div`
+  .chart-tooltip {
+    opacity: 0.75;
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  }
+`;
+
 class Chart extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -180,8 +187,6 @@ class Chart extends React.PureComponent {
 
     const isLoading = chartStatus === 'loading';
 
-    // this allows <Loading /> to be positioned in the middle of the chart
-    const containerStyles = isLoading ? { height, width } : null;
     const isFaded = refreshOverlayVisible && !errorMessage;
     this.renderContainerStartTime = Logger.getTimestamp();
     if (chartStatus === 'failed') {
@@ -195,12 +200,9 @@ class Chart extends React.PureComponent {
         onError={this.handleRenderContainerFailure}
         showMessage={false}
       >
-        <div
-          className={`chart-container ${isLoading ? 'is-loading' : ''}`}
-          style={containerStyles}
-        >
+        <Styles className="chart-container">
           <div className={`slice_container ${isFaded ? ' faded' : ''}`}>
-            <ChartRenderer {...this.props} />
+            <ChartRenderer {...this.props} data-test={this.props.vizType} />
           </div>
 
           {!isLoading && !chartAlert && isFaded && (
@@ -212,7 +214,7 @@ class Chart extends React.PureComponent {
           )}
 
           {isLoading && <Loading />}
-        </div>
+        </Styles>
       </ErrorBoundary>
     );
   }

superset-frontend/src/chart/chart.less

@@ -1,24 +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.
- */
-@import '../../stylesheets/less/variables.less';
-
-.chart-tooltip {
-  opacity: 0.75;
-  font-size: @font-size-s;
-}

superset-frontend/src/components/Button/index.tsx

@@ -55,7 +55,7 @@ const SupersetButton = styled(BootstrapButton)`
     border-radius: ${({ theme }) => theme.borderRadius}px;
     border: none;
     color: ${({ theme }) => theme.colors.secondary.light5};
-    font-size: ${({ theme }) => theme.typography.sizes.s};
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
     font-weight: ${({ theme }) => theme.typography.weights.bold};
     min-width: ${({ theme }) => theme.gridUnit * 36}px;
     min-height: ${({ theme }) => theme.gridUnit * 8}px;

superset-frontend/src/components/Menu/SubMenu.tsx

@@ -37,7 +37,7 @@ const StyledHeader = styled.header`
   .navbar-nav {
     li {
       a {
-        font-size: ${({ theme }) => theme.typography.sizes.s};
+        font-size: ${({ theme }) => theme.typography.sizes.s}px;
         padding: ${({ theme }) => theme.gridUnit * 2}px;
         margin: ${({ theme }) => theme.gridUnit * 2}px;
         color: ${({ theme }) => theme.colors.secondary.dark1};

superset-frontend/src/components/TableSelector.jsx

@@ -33,7 +33,7 @@ import './TableSelector.less';
 
 const FieldTitle = styled.p`
   color: ${({ theme }) => theme.colors.secondary.light2};
-  font-size: ${({ theme }) => theme.typography.sizes.s};
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
   margin: 20px 0 10px 0;
   text-transform: uppercase;
 `;

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -56,7 +56,7 @@ const Styles = styled.div`
   flex-direction: column;
   align-items: stretch;
   align-content: stretch;
-  div:last-of-type {
+  & > div:last-of-type {
     flex-basis: 100%;
   }
 `;

superset-frontend/src/visualizations/FilterBox/FilterBox.jsx

@@ -24,6 +24,7 @@ import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
 import { Button } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
+import styled from '@superset-ui/style';
 
 import FormLabel from 'src/components/FormLabel';
 
@@ -99,6 +100,13 @@ const defaultProps = {
   instantFiltering: false,
 };
 
+const Styles = styled.div`
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: visible;
+`;
+
 class FilterBox extends React.Component {
   constructor(props) {
     super(props);
@@ -424,23 +432,21 @@ class FilterBox extends React.Component {
     const { instantFiltering } = this.props;
 
     return (
-      <div className="scrollbar-container">
-        <div className="scrollbar-content">
-          {this.renderDateFilter()}
-          {this.renderDatasourceFilters()}
-          {this.renderFilters()}
-          {!instantFiltering && (
-            <Button
-              bsSize="small"
-              bsStyle="primary"
-              onClick={this.clickApply.bind(this)}
-              disabled={!this.state.hasChanged}
-            >
-              {t('Apply')}
-            </Button>
-          )}
-        </div>
-      </div>
+      <Styles>
+        {this.renderDateFilter()}
+        {this.renderDatasourceFilters()}
+        {this.renderFilters()}
+        {!instantFiltering && (
+          <Button
+            bsSize="small"
+            bsStyle="primary"
+            onClick={this.clickApply.bind(this)}
+            disabled={!this.state.hasChanged}
+          >
+            {t('Apply')}
+          </Button>
+        )}
+      </Styles>
     );
   }
 }