Remove Control less (#19415)

superset-frontend/src/explore/components/Control.less

@@ -1,21 +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.
- */
-.Control {
-  padding-bottom: 4px;
-}

superset-frontend/src/explore/components/Control.tsx

@@ -21,13 +21,11 @@ import {
   ControlType,
   ControlComponentProps as BaseControlComponentProps,
 } from '@superset-ui/chart-controls';
-import { JsonValue, QueryFormData } from '@superset-ui/core';
+import { styled, JsonValue, QueryFormData } from '@superset-ui/core';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import { ExploreActions } from 'src/explore/actions/exploreActions';
 import controlMap from './controls';
 
-import './Control.less';
-
 export type ControlProps = {
   // the actual action dispatcher (via bindActionCreators) has identical
   // signature to the original action factory.
@@ -52,6 +50,10 @@ export type ControlProps = {
 export type ControlComponentProps<ValueType extends JsonValue = JsonValue> =
   Omit<ControlProps, 'value'> & BaseControlComponentProps<ValueType>;
 
+const StyledControl = styled.div`
+  padding-bottom: ${({ theme }) => theme.gridUnit}px;
+`;
+
 export default function Control(props: ControlProps) {
   const {
     actions: { setControlValue },
@@ -76,7 +78,7 @@ export default function Control(props: ControlProps) {
   }
 
   return (
-    <div
+    <StyledControl
       className="Control"
       data-test={name}
       style={hidden ? { display: 'none' } : undefined}
@@ -86,6 +88,6 @@ export default function Control(props: ControlProps) {
       <ErrorBoundary>
         <ControlComponent onChange={onChange} hovered={hovered} {...props} />
       </ErrorBoundary>
-    </div>
+    </StyledControl>
   );
 }