This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 824cea2 More Label touchups (margins) (#10722)
824cea2 is described below
commit 824cea24bad8aa330f288142cab989407577e3af
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 ee2750b..d939288 100644
--- a/superset-frontend/src/SqlLab/components/LimitControl.tsx
+++ b/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
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 89b36e2..4c3286e 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>
)}
