From 6b671c6d31f546a0954f9c722a12efaed18575f5 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 17 Aug 2020 22:57:03 -0700 Subject: [PATCH 01/11] colors corrected, hover/cursory only change if there's an onClick --- .../src/components/Label/index.tsx | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx index 58c336e1884d8..56d949d3d96f8 100644 --- a/superset-frontend/src/components/Label/index.tsx +++ b/superset-frontend/src/components/Label/index.tsx @@ -34,40 +34,40 @@ export interface LabelProps { } const SupersetLabel = styled(BootstrapLabel)` - &.supersetLabel { - border-radius: ${({ theme }) => theme.borderRadius}px; - border: none; - color: ${({ theme }) => theme.colors.secondary.light5}; - font-size: ${({ theme }) => theme.typography.sizes.s}; - font-weight: ${({ theme }) => theme.typography.weights.bold}; - min-width: ${({ theme }) => theme.gridUnit * 36}px; - min-height: ${({ theme }) => theme.gridUnit * 8}px; - text-transform: uppercase; - margin-left: ${({ theme }) => theme.gridUnit * 4}px; - &:first-of-type { - margin-left: 0; - } - - i { - padding: 0 ${({ theme }) => theme.gridUnit * 2}px 0 0; + cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')}; + &.label-warning { + background-color: ${({ theme }) => theme.colors.warning.base}; + &:hover { + background-color: ${({ theme, onClick }) => + onClick ? theme.colors.warning.dark1 : theme.colors.warning.base}; } - - &.primary { - background-color: ${({ theme }) => theme.colors.primary.base}; + } + &.label-error { + background-color: ${({ theme }) => theme.colors.error.base}; + &:hover { + background-color: ${({ theme, onClick }) => + onClick ? theme.colors.error.dark1 : theme.colors.error.base}; } - &.secondary { - color: ${({ theme }) => theme.colors.primary.base}; - background-color: ${({ theme }) => theme.colors.primary.light4}; + } + &.label-success { + background-color: ${({ theme }) => theme.colors.success.base}; + &:hover { + background-color: ${({ theme, onClick }) => + onClick ? theme.colors.success.dark1 : theme.colors.success.base}; } - &.danger { - background-color: ${({ theme }) => theme.colors.error.base}; + } + &.label-default { + background-color: ${({ theme }) => theme.colors.grayscale.base}; + &:hover { + background-color: ${({ theme, onClick }) => + onClick ? theme.colors.grayscale.dark1 : theme.colors.grayscale.base}; } } - - &.secondaryLabel { - background-color: ${({ theme }) => theme.colors.secondary.base}; + &.label-info { + background-color: ${({ theme }) => theme.colors.info}; &:hover { - background-color: ${({ theme }) => theme.colors.secondary.base}; + background-color: ${({ theme, onClick }) => + onClick ? theme.colors.info.dark1 : theme.colors.info.base}; } } `; From a22f9edaa410acf31d4527ba5c4ae9641ce6eb8a Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 17 Aug 2020 22:57:22 -0700 Subject: [PATCH 02/11] adding info label, breaking gallery out to its own story --- .../src/components/Label/label.stories.jsx | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/superset-frontend/src/components/Label/label.stories.jsx b/superset-frontend/src/components/Label/label.stories.jsx index a9627498475b0..1004e01e53b86 100644 --- a/superset-frontend/src/components/Label/label.stories.jsx +++ b/superset-frontend/src/components/Label/label.stories.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { withKnobs, select, text } from '@storybook/addon-knobs'; +import { withKnobs, select, boolean, text } from '@storybook/addon-knobs'; import Label from './index'; export default { @@ -33,25 +33,14 @@ const bsStyleKnob = { danger: 'danger', warning: 'warning', success: 'success', + info: 'info', default: 'default', }, defaultValue: 'default', }; -export const SupersetLabel = () => ( + +export const LabelGallery = () => (
-

Interactive

- -

Gallery

{Object.values(bsStyleKnob.options).map(opt => (
); + +export const InteractiveLabel = () => ( +
+ +
+); \ No newline at end of file From 589c9e8bcfa100b602a1fe0d626dc23630b09d35 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Mon, 17 Aug 2020 23:01:10 -0700 Subject: [PATCH 03/11] linting --- superset-frontend/src/components/Label/label.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Label/label.stories.jsx b/superset-frontend/src/components/Label/label.stories.jsx index 1004e01e53b86..ae8abefccae4a 100644 --- a/superset-frontend/src/components/Label/label.stories.jsx +++ b/superset-frontend/src/components/Label/label.stories.jsx @@ -67,4 +67,4 @@ export const InteractiveLabel = () => ( {text('Label', 'Label!')} -); \ No newline at end of file +); From 8739553b12558cf8cd98f0a73b8f8df5c568e8cb Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 18 Aug 2020 13:35:41 -0700 Subject: [PATCH 04/11] fixing bad class name --- superset-frontend/src/components/Label/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx index 56d949d3d96f8..df00e815c3ea9 100644 --- a/superset-frontend/src/components/Label/index.tsx +++ b/superset-frontend/src/components/Label/index.tsx @@ -42,7 +42,7 @@ const SupersetLabel = styled(BootstrapLabel)` onClick ? theme.colors.warning.dark1 : theme.colors.warning.base}; } } - &.label-error { + &.label-danger { background-color: ${({ theme }) => theme.colors.error.base}; &:hover { background-color: ${({ theme, onClick }) => From 723c40c6b8145f7d0716fd0b0650e39e6188c4de Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 18 Aug 2020 14:59:31 -0700 Subject: [PATCH 05/11] now with fading! --- superset-frontend/src/components/Label/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx index df00e815c3ea9..289827f79d092 100644 --- a/superset-frontend/src/components/Label/index.tsx +++ b/superset-frontend/src/components/Label/index.tsx @@ -35,6 +35,7 @@ export interface LabelProps { const SupersetLabel = styled(BootstrapLabel)` cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')}; + transition: background-color ${({ theme }) => theme.transitionTiming}s; &.label-warning { background-color: ${({ theme }) => theme.colors.warning.base}; &:hover { From ec32ed604755c31c3004b389b120d7f1dee89fa1 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 18 Aug 2020 14:59:59 -0700 Subject: [PATCH 06/11] now supporting additional (non-bootstrap) label styles --- .../src/components/Label/index.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx index 289827f79d092..4047427870245 100644 --- a/superset-frontend/src/components/Label/index.tsx +++ b/superset-frontend/src/components/Label/index.tsx @@ -71,12 +71,30 @@ const SupersetLabel = styled(BootstrapLabel)` onClick ? theme.colors.info.dark1 : theme.colors.info.base}; } } + &.label-primary { + background-color: ${({ theme }) => theme.colors.primary.base}; + &:hover { + background-color: ${({ theme, onClick }) => + onClick ? theme.colors.primary.dark1 : theme.colors.primary.base}; + } + } + /* note this is NOT a supported bootstrap label Style... this overrides default */ + &.label-secondary { + background-color: ${({ theme }) => theme.colors.secondary.base}; + &:hover { + background-color: ${({ theme, onClick }) => + onClick ? theme.colors.secondary.dark1 : theme.colors.secondary.base}; + } + } `; export default function Label(props: LabelProps) { + const officialBootstrapStyles = ["success", "warning", "danger", "info", "default", "primary"] const labelProps = { ...props, placement: props.placement || 'top', + bsStyle: officialBootstrapStyles.includes(props.bsStyle) ? props.bsStyle : 'default'; + className: officialBootstrapStyles.includes(props.bsStyle) ? null : `label-${props.bsStyle}`; }; return {props.children}; } From 26e8818326caa56ae1dc329e71d52819a4c3f6ea Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 18 Aug 2020 15:00:24 -0700 Subject: [PATCH 07/11] adding new secondary/primary labels to gallery --- .../src/components/Label/label.stories.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/components/Label/label.stories.jsx b/superset-frontend/src/components/Label/label.stories.jsx index ae8abefccae4a..c0c9365ec9b97 100644 --- a/superset-frontend/src/components/Label/label.stories.jsx +++ b/superset-frontend/src/components/Label/label.stories.jsx @@ -30,11 +30,13 @@ export default { const bsStyleKnob = { label: 'Types', options: { - danger: 'danger', - warning: 'warning', - success: 'success', - info: 'info', default: 'default', + info: 'info', + success: 'success', + warning: 'warning', + danger: 'danger', + secondary: 'secondary', + primary: 'primary', }, defaultValue: 'default', }; From aedd1449eb3b77378698b128595544852899cecf Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Tue, 18 Aug 2020 15:00:34 -0700 Subject: [PATCH 08/11] fixing map key react warning --- superset-frontend/src/components/Label/label.stories.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/superset-frontend/src/components/Label/label.stories.jsx b/superset-frontend/src/components/Label/label.stories.jsx index c0c9365ec9b97..be1153f2832ef 100644 --- a/superset-frontend/src/components/Label/label.stories.jsx +++ b/superset-frontend/src/components/Label/label.stories.jsx @@ -45,6 +45,7 @@ export const LabelGallery = () => (
{Object.values(bsStyleKnob.options).map(opt => (