This is an automated email from the ASF dual-hosted git repository. maximebeauchemin 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 ea3c3bb style: SIP-34 labels (#10403) ea3c3bb is described below commit ea3c3bbae4d5e6f9ef0ca3f66b7e8ed67367d614 Author: Maxime Beauchemin <maximebeauche...@gmail.com> AuthorDate: Fri Jul 24 18:03:38 2020 -0700 style: SIP-34 labels (#10403) * style: SIP-34 labels Aligning with SIP-34 designs for labels/pills. Going uppercase fixes the padding issues we had before, and the rounder pills look better. Cleaning up some CSS in the process * lint --- superset-frontend/src/components/CachedLabel.jsx | 3 +-- superset-frontend/src/components/Timer.jsx | 9 ++++++--- .../src/explore/components/ExploreChartHeader.jsx | 1 - .../src/explore/components/RowCountLabel.jsx | 5 +---- superset-frontend/src/explore/main.less | 14 -------------- .../stylesheets/less/cosmo/bootswatch.less | 18 ++++++++++++++++-- .../stylesheets/less/cosmo/variables.less | 4 ++-- superset-frontend/stylesheets/superset.less | 4 ---- 8 files changed, 26 insertions(+), 32 deletions(-) diff --git a/superset-frontend/src/components/CachedLabel.jsx b/superset-frontend/src/components/CachedLabel.jsx index 2faf9af..6876e24 100644 --- a/superset-frontend/src/components/CachedLabel.jsx +++ b/superset-frontend/src/components/CachedLabel.jsx @@ -70,9 +70,8 @@ class CacheLabel extends React.PureComponent { return ( <TooltipWrapper tooltip={this.state.tooltipContent} label="cache-desc"> <Label - className={this.props.className} + className={`${this.props.className} m-r-5 pointer`} bsStyle={labelStyle} - style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }} onClick={this.props.onClick} onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)} diff --git a/superset-frontend/src/components/Timer.jsx b/superset-frontend/src/components/Timer.jsx index 8f77797..8bbd89f 100644 --- a/superset-frontend/src/components/Timer.jsx +++ b/superset-frontend/src/components/Timer.jsx @@ -18,6 +18,8 @@ */ import React from 'react'; import PropTypes from 'prop-types'; +import { Label } from 'react-bootstrap'; + import { now, fDuration } from '../modules/dates'; const propTypes = { @@ -76,12 +78,13 @@ export default class Timer extends React.PureComponent { let timerSpan = null; if (this.props) { timerSpan = ( - <span - className={`inlineBlock m-r-5 label label-${this.props.status}`} + <Label + className="m-r-5" style={this.props.style} + bsStyle={this.props.status} > {this.state.clockStr} - </span> + </Label> ); } return timerSpan; diff --git a/superset-frontend/src/explore/components/ExploreChartHeader.jsx b/superset-frontend/src/explore/components/ExploreChartHeader.jsx index 4c38315..d2c7403 100644 --- a/superset-frontend/src/explore/components/ExploreChartHeader.jsx +++ b/superset-frontend/src/explore/components/ExploreChartHeader.jsx @@ -163,7 +163,6 @@ export class ExploreChartHeader extends React.PureComponent { endTime={chartUpdateEndTime} isRunning={chartStatus === 'loading'} status={CHART_STATUS_MAP[chartStatus]} - style={{ fontSize: '10px', marginRight: '5px' }} /> <ExploreActionButtons actions={this.props.actions} diff --git a/superset-frontend/src/explore/components/RowCountLabel.jsx b/superset-frontend/src/explore/components/RowCountLabel.jsx index 0794627..64cc8d7 100644 --- a/superset-frontend/src/explore/components/RowCountLabel.jsx +++ b/superset-frontend/src/explore/components/RowCountLabel.jsx @@ -47,10 +47,7 @@ export default function RowCountLabel({ rowcount, limit, suffix }) { ); return ( <TooltipWrapper label="tt-rowcount" tooltip={tooltip}> - <Label - bsStyle={bsStyle} - style={{ fontSize: '10px', marginRight: '5px', cursor: 'pointer' }} - > + <Label bsStyle={bsStyle} className="m-r-5 pointer"> {formattedRowCount} {suffix} </Label> </TooltipWrapper> diff --git a/superset-frontend/src/explore/main.less b/superset-frontend/src/explore/main.less index c1ea116..856258e 100644 --- a/superset-frontend/src/explore/main.less +++ b/superset-frontend/src/explore/main.less @@ -210,19 +210,6 @@ border: @gray-light solid thin; } -.label-default { - background-color: @gray; - font-weight: @font-weight-normal; -} - -.btn.label-btn { - background-color: @gray; - font-weight: @font-weight-normal; - color: @lightest; - padding: 5px 4px 4px; - border: 0; -} - .label-dropdown ul.dropdown-menu { position: fixed; top: auto; @@ -233,7 +220,6 @@ .label-btn:hover, .label-btn-label:hover { background-color: @gray-dark; - color: @lightest; } .label-btn-label { diff --git a/superset-frontend/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/stylesheets/less/cosmo/bootswatch.less index 9b0ebd7..057fa7e 100644 --- a/superset-frontend/stylesheets/less/cosmo/bootswatch.less +++ b/superset-frontend/stylesheets/less/cosmo/bootswatch.less @@ -280,9 +280,23 @@ table, } .label { - border-radius: @border-radius-normal; - padding: 0.3em 0.6em 0.2em; + border-radius: 21px; + padding: 0.35em 0.8em 0.35em; font-weight: @font-weight-normal; + text-transform: uppercase; + font-size: @font-size-s; +} +.label-default:hover { + background-color: darken(@label-default-bg, 5%); +} +.label-warning:hover { + background-color: darken(@label-warning-bg, 5%); +} +.label-danger:hover { + background-color: darken(@label-danger-bg, 5%); +} +.label-primary:hover { + background-color: darken(@label-primary-bg, 5%); } label { diff --git a/superset-frontend/stylesheets/less/cosmo/variables.less b/superset-frontend/stylesheets/less/cosmo/variables.less index 4380548..8f13ac3 100644 --- a/superset-frontend/stylesheets/less/cosmo/variables.less +++ b/superset-frontend/stylesheets/less/cosmo/variables.less @@ -28,7 +28,7 @@ @gray-darker: lighten(@gray-base, 13.5%); @gray-dark: lighten(@gray-base, 20%); @bs-gray: lighten(@gray-base, 33.5%); -@bs-gray-light: lighten(@gray-base, 70%); +@bs-gray-light: lighten(@gray-base, 60%); @gray-lighter: lighten(@gray-base, 95%); @brand-primary: @primary-color; // superset-var @@ -568,7 +568,7 @@ // ** Info label background color @label-info-bg: @brand-info; // ** Warning label background color -@label-warning-bg: @brand-warning; +@label-warning-bg: darken(@brand-warning, 6%); // ** Danger label background color @label-danger-bg: @brand-danger; diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less index 16ee9a9..3b7b452 100644 --- a/superset-frontend/stylesheets/superset.less +++ b/superset-frontend/stylesheets/superset.less @@ -26,10 +26,6 @@ color: @danger; } -.label { - font-size: 100%; -} - .no-wrap { white-space: nowrap; }