From 3487d16fda9091af6894fe26095677d5e5ff96df Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Wed, 2 Sep 2020 23:13:58 -0700
Subject: [PATCH] More Label touchups (margins) (#10722)

* labels with onClick don't need .pointer. No labels need `m-r-5`

* making Timer a proper Label

* a little linting

* addresing (helpful, thanks) comment
---
 .../src/SqlLab/components/LimitControl.tsx    |  2 +-
 .../src/components/CachedLabel.jsx            |  2 +-
 .../src/components/Label/Label.stories.tsx    |  7 +------
 .../src/components/Label/index.tsx            | 19 ++++++++++++++++---
 .../src/components/TableSelector.jsx          |  4 +---
 superset-frontend/src/components/Timer.tsx    |  4 ++--
 .../explore/components/ExploreChartHeader.jsx |  3 ++-
 .../src/explore/components/RowCountLabel.jsx  |  2 +-
 .../controls/FixedOrMetricControl.jsx         |  2 +-
 9 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/LimitControl.tsx b/superset-frontend/src/SqlLab/components/LimitControl.tsx
index 9b55dce9e08ec..0bc35efa05ac9 100644
--- a/superset-frontend/src/SqlLab/components/LimitControl.tsx
+++ b/superset-frontend/src/SqlLab/components/LimitControl.tsx
@@ -146,7 +146,7 @@ export default class LimitControl extends React.PureComponent<
   render() {
     return (
       <div>
-        <Label className="pointer" onClick={this.handleToggle}>
+        <Label onClick={this.handleToggle}>
           LIMIT {this.props.value || this.props.maxRow}
         </Label>
         <Overlay
diff --git a/superset-frontend/src/components/CachedLabel.jsx b/superset-frontend/src/components/CachedLabel.jsx
index 1a9e4505b88c6..bb0d46f2e46e8 100644
--- a/superset-frontend/src/components/CachedLabel.jsx
+++ b/superset-frontend/src/components/CachedLabel.jsx
@@ -71,7 +71,7 @@ class CacheLabel extends React.PureComponent {
     return (
       <TooltipWrapper tooltip={this.state.tooltipContent} label="cache-desc">
         <Label
-          className={`${this.props.className} m-r-5 pointer`}
+          className={`${this.props.className}`}
           bsStyle={labelStyle}
           onClick={this.props.onClick}
           onMouseOver={this.mouseOver.bind(this)}
diff --git a/superset-frontend/src/components/Label/Label.stories.tsx b/superset-frontend/src/components/Label/Label.stories.tsx
index 35ab1b997f9ef..7e53318246fa9 100644
--- a/superset-frontend/src/components/Label/Label.stories.tsx
+++ b/superset-frontend/src/components/Label/Label.stories.tsx
@@ -45,12 +45,7 @@ export const bsStyleKnob = {
 export const LabelGallery = () => (
   <div style={{ padding: '10px' }}>
     {Object.values(bsStyleKnob.options).map(opt => (
-      <Label
-        key={opt}
-        bsStyle={opt}
-        style={{ marginRight: '10px' }}
-        onClick={action('clicked')}
-      >
+      <Label key={opt} bsStyle={opt} onClick={action('clicked')}>
         {`style: "${opt}"`}
       </Label>
     ))}
diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx
index dfed494115493..f4dcfed8af8a1 100644
--- a/superset-frontend/src/components/Label/index.tsx
+++ b/superset-frontend/src/components/Label/index.tsx
@@ -19,12 +19,14 @@
 import React from 'react';
 import { Label as BootstrapLabel } from 'react-bootstrap';
 import styled from '@superset-ui/style';
+import cx from 'classnames';
 
 export type OnClickHandler = React.MouseEventHandler<BootstrapLabel>;
 
 export interface LabelProps {
   key?: string;
   className?: string;
+  id?: string;
   tooltip?: string;
   placement?: string;
   onClick?: OnClickHandler;
@@ -34,6 +36,15 @@ export interface LabelProps {
 }
 
 const SupersetLabel = styled(BootstrapLabel)`
+  /* un-bunch them! */
+  margin-right: ${({ theme }) => theme.gridUnit}px;
+  &:first-of-type {
+    margin-left: 0;
+  }
+  &:last-of-type {
+    margin-right: 0;
+  }
+
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
   transition: background-color ${({ theme }) => theme.transitionTiming}s;
   &.label-warning {
@@ -103,9 +114,11 @@ export default function Label(props: LabelProps) {
     bsStyle: officialBootstrapStyles.includes(props.bsStyle || '')
       ? props.bsStyle
       : 'default',
-    className: officialBootstrapStyles.includes(props.bsStyle || '')
-      ? undefined
-      : `label-${props.bsStyle}`,
+    className: cx(props.className, {
+      [`label-${props.bsStyle}`]: !officialBootstrapStyles.includes(
+        props.bsStyle || '',
+      ),
+    }),
   };
   return <SupersetLabel {...labelProps}>{props.children}</SupersetLabel>;
 }
diff --git a/superset-frontend/src/components/TableSelector.jsx b/superset-frontend/src/components/TableSelector.jsx
index a76ae04049aa8..95b1689ef059c 100644
--- a/superset-frontend/src/components/TableSelector.jsx
+++ b/superset-frontend/src/components/TableSelector.jsx
@@ -247,9 +247,7 @@ export default class TableSelector extends React.PureComponent {
   renderDatabaseOption(db) {
     return (
       <span title={db.database_name}>
-        <Label bsStyle="default" className="m-r-5">
-          {db.backend}
-        </Label>
+        <Label bsStyle="default">{db.backend}</Label>
         {db.database_name}
       </span>
     );
diff --git a/superset-frontend/src/components/Timer.tsx b/superset-frontend/src/components/Timer.tsx
index ece45e0940c2f..7daedef31b8a6 100644
--- a/superset-frontend/src/components/Timer.tsx
+++ b/superset-frontend/src/components/Timer.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { Label } from 'react-bootstrap';
+import Label from 'src/components/Label';
 
 import { now, fDuration } from '../modules/dates';
 
@@ -73,7 +73,7 @@ export default function Timer({
   });
 
   return (
-    <Label id="timer" className="m-r-5" bsStyle={status}>
+    <Label id="timer" bsStyle={status}>
       {clockStr}
     </Label>
   );
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
index 48ffdf1b098d2..ff0e85b14b939 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader.jsx
@@ -72,8 +72,9 @@ const StyledHeader = styled.div`
     align-items: center;
     justify-content: flex-end;
 
-    .btn-group {
+    > .btn-group {
       flex: 0 0 auto;
+      margin-left: ${({ theme }) => theme.gridUnit}px;
     }
   }
 `;
diff --git a/superset-frontend/src/explore/components/RowCountLabel.jsx b/superset-frontend/src/explore/components/RowCountLabel.jsx
index 48311901176cc..29c0ab8384d6f 100644
--- a/superset-frontend/src/explore/components/RowCountLabel.jsx
+++ b/superset-frontend/src/explore/components/RowCountLabel.jsx
@@ -47,7 +47,7 @@ export default function RowCountLabel({ rowcount, limit, suffix }) {
   );
   return (
     <TooltipWrapper label="tt-rowcount" tooltip={tooltip}>
-      <Label bsStyle={bsStyle} className="m-r-5 pointer">
+      <Label bsStyle={bsStyle}>
         {formattedRowCount} {suffix}
       </Label>
     </TooltipWrapper>
diff --git a/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx b/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx
index 891913e95e5b6..2999608566eee 100644
--- a/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx
+++ b/superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx
@@ -104,7 +104,7 @@ export default class FixedOrMetricControl extends React.Component {
     return (
       <div>
         <ControlHeader {...this.props} />
-        <Label className="pointer" onClick={this.toggle}>
+        <Label onClick={this.toggle}>
           {this.state.type === controlTypes.fixed && (
             <span>{this.state.fixedValue}</span>
           )}