Apply emotion templating to input/input labels

apache · Jun 6, 2022 · 110e39a · 110e39a
1 parent 09555b5
commit 110e39a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
@@ -518,17 +518,6 @@ tr.reactable-column-header th.reactable-header-sortable {
   padding-right: 17px;
 }
 
-.metric-edit-popover-label {
-  display: inline-block;
-  padding: 2px 0;
-}
-
-.metric-edit-popover-label-input {
-  border-radius: @border-radius-large;
-  height: 26px;
-  padding-left: 10px;
-}
-
 .align-right {
   text-align: right;
 }

diff --git a/...nd/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx b/...nd/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
@@ -17,10 +17,16 @@
  * under the License.
  */
 import React, { useCallback, useState } from 'react';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Tooltip } from 'src/components/Tooltip';
 
+const StyledInput = styled(Input)`
+  border-radius: ${({ theme }) => theme.borderRadius};
+  height: 26px;
+  padding-left: ${({ theme }) => theme.gridUnit * 2.5}px;
+`;
+
 export const DndColumnSelectPopoverTitle = ({
   title,
   onChange,
@@ -63,8 +69,7 @@ export const DndColumnSelectPopoverTitle = ({
   }
 
   return isEditMode ? (
-    <Input
-      className="metric-edit-popover-label-input"
+    <StyledInput
       type="text"
       placeholder={title}
       value={hasCustomLabel ? title : ''}

diff --git a/...et-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx b/...et-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx
@@ -23,10 +23,21 @@ import React, {
   useCallback,
   useState,
 } from 'react';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Tooltip } from 'src/components/Tooltip';
 
+const TitleLabel = styled.span`
+  display: inline-block;
+  padding: 2px 0;
+`;
+
+const StyledInput = styled(Input)`
+  border-radius: ${({ theme }) => theme.borderRadius};
+  height: 26px;
+  padding-left: ${({ theme }) => theme.gridUnit * 2.5}px;
+`;
+
 export interface AdhocMetricEditPopoverTitleProps {
   title?: {
     label?: string;
@@ -77,8 +88,7 @@ const AdhocMetricEditPopoverTitle: React.FC<AdhocMetricEditPopoverTitleProps> =
 
     if (isEditMode) {
       return (
-        <Input
-          className="metric-edit-popover-label-input"
+        <StyledInput
           type="text"
           placeholder={title?.label}
           value={title?.hasCustomLabel ? title.label : ''}
@@ -103,9 +113,7 @@ const AdhocMetricEditPopoverTitle: React.FC<AdhocMetricEditPopoverTitleProps> =
           role="button"
           tabIndex={0}
         >
-          <span className="metric-edit-popover-label">
-            {title?.label || defaultLabel}
-          </span>
+          <TitleLabel>{title?.label || defaultLabel}</TitleLabel>
           &nbsp;
           <i
             className="fa fa-pencil"