This is an automated email from the ASF dual-hosted git repository. villebro pushed a commit to branch 0.38 in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit d410b8bbe522127f415b0c044459ceca40fc8b3a Author: Evan Rusackas <[email protected]> AuthorDate: Wed Sep 2 23:13:58 2020 -0700 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 +- superset-frontend/src/components/CachedLabel.jsx | 2 +- .../src/components/Label/Label.stories.tsx | 7 +------ superset-frontend/src/components/Label/index.tsx | 19 ++++++++++++++++--- superset-frontend/src/components/TableSelector.jsx | 4 +--- superset-frontend/src/components/Timer.tsx | 4 ++-- .../src/explore/components/ExploreChartHeader.jsx | 3 ++- .../src/explore/components/RowCountLabel.jsx | 2 +- .../components/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 9b55dce..0bc35ef 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 1a9e450..bb0d46f 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 143e2c8..8a61d0d 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 = () => ( <> {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 dfed494..f4dcfed 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 a76ae04..95b1689 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 ece45e0..7daedef 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 48ffdf1..ff0e85b 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 4831190..29c0ab8 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 891913e..2999608 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> )}
