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

superset-frontend/src/SqlLab/components/LimitControl.tsx

@@ -141,7 +141,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

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)}

superset-frontend/src/components/Label/Label.stories.tsx

@@ -45,12 +45,7 @@ export const bsStyleKnob = {
 export const LabelGallery = () => (
   <>
     {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>
     ))}

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>;
 }

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>
     );

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>
   );

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;
     }
   }
 `;

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>

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>
           )}