[incubator-superset] branch master updated: clickable labels have outlines, storybook shows them (#11034)

[maximebeauchemin]

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 d056e3d  clickable labels have outlines, storybook shows them (#11034)
d056e3d is described below

commit d056e3dfd3a2dc4844f836979eb474abbbce4632
Author: Evan Rusackas <e...@preset.io>
AuthorDate: Thu Sep 24 20:50:44 2020 -0700

    clickable labels have outlines, storybook shows them (#11034)
---
 .../src/components/Label/Label.stories.tsx         |  8 +++++
 superset-frontend/src/components/Label/index.tsx   | 41 +++++++++++++++++++---
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/components/Label/Label.stories.tsx 
b/superset-frontend/src/components/Label/Label.stories.tsx
index 4c3286e..fe5dfdb 100644
--- a/superset-frontend/src/components/Label/Label.stories.tsx
+++ b/superset-frontend/src/components/Label/Label.stories.tsx
@@ -44,6 +44,14 @@ export const bsStyleKnob = {
 
 export const LabelGallery = () => (
   <>
+    <h4>Non-interactive</h4>
+    {Object.values(bsStyleKnob.options).map(opt => (
+      <Label key={opt} bsStyle={opt}>
+        {`style: "${opt}"`}
+      </Label>
+    ))}
+    <br />
+    <h4>Interactive</h4>
     {Object.values(bsStyleKnob.options).map(opt => (
       <Label key={opt} bsStyle={opt} onClick={action('clicked')}>
         {`style: "${opt}"`}
diff --git a/superset-frontend/src/components/Label/index.tsx 
b/superset-frontend/src/components/Label/index.tsx
index 7eecf75..e552096 100644
--- a/superset-frontend/src/components/Label/index.tsx
+++ b/superset-frontend/src/components/Label/index.tsx
@@ -44,57 +44,90 @@ const SupersetLabel = styled(BootstrapLabel)`
   &:last-of-type {
     margin-right: 0;
   }
-
+  border-width: 1px;
+  border-style: solid;
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
   transition: background-color ${({ theme }) => theme.transitionTiming}s;
   &.label-warning {
     background-color: ${({ theme }) => theme.colors.warning.base};
+    border-color: ${({ theme, onClick }) =>
+      onClick ? theme.colors.warning.dark1 : 'transparent'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
         onClick ? theme.colors.warning.dark1 : theme.colors.warning.base};
+      border-color: ${({ theme, onClick }) =>
+        onClick ? theme.colors.warning.dark2 : 'transparent'};
     }
   }
   &.label-danger {
     background-color: ${({ theme }) => theme.colors.error.base};
+    border-color: ${({ theme, onClick }) =>
+      onClick ? theme.colors.error.dark1 : 'transparent'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
         onClick ? theme.colors.error.dark1 : theme.colors.error.base};
+      border-color: ${({ theme, onClick }) =>
+        onClick ? theme.colors.error.dark2 : 'transparent'};
     }
   }
   &.label-success {
     background-color: ${({ theme }) => theme.colors.success.base};
+    border-color: ${({ theme, onClick }) =>
+      onClick ? theme.colors.success.dark1 : 'transparent'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
         onClick ? theme.colors.success.dark1 : theme.colors.success.base};
+      border-color: ${({ theme, onClick }) =>
+        onClick ? theme.colors.success.dark2 : 'transparent'};
     }
   }
   &.label-default {
-    background-color: ${({ theme }) => theme.colors.grayscale.base};
+    background-color: ${({ theme }) => theme.colors.grayscale.light3};
+    color: ${({ theme }) => theme.colors.grayscale.dark1};
+    border-color: ${({ theme, onClick }) =>
+      onClick ? theme.colors.grayscale.light1 : 'transparent'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
-        onClick ? theme.colors.grayscale.dark1 : theme.colors.grayscale.base};
+        onClick ? theme.colors.primary.light2 : theme.colors.grayscale.light3};
+      border-color: ${({ theme, onClick }) =>
+        onClick ? theme.colors.primary.light1 : 'transparent'};
     }
   }
   &.label-info {
     background-color: ${({ theme }) => theme.colors.info};
+    border-color: ${({ theme, onClick }) =>
+      onClick ? theme.colors.info.dark1 : 'transparent'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
         onClick ? theme.colors.info.dark1 : theme.colors.info.base};
+      border-color: ${({ theme, onClick }) =>
+        onClick ? theme.colors.info.dark2 : 'transparent'};
     }
   }
   &.label-primary {
     background-color: ${({ theme }) => theme.colors.primary.base};
+    border-color: ${({ theme, onClick }) =>
+      onClick ? theme.colors.primary.dark1 : 'transparent'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
-        onClick ? theme.colors.primary.dark1 : theme.colors.primary.base};
+        onClick ? theme.colors.primary.dark2 : theme.colors.primary.base};
+      border-color: ${({ theme, onClick }) =>
+        onClick
+          ? theme.colors.primary.dark2
+          : 'transparent'}; /* would be nice if we had a darker color, but 
that's the floor! */
     }
   }
   /* note this is NOT a supported bootstrap label Style... this overrides 
default */
   &.label-secondary {
     background-color: ${({ theme }) => theme.colors.secondary.base};
+    color: ${({ theme }) => theme.colors.grayscale.light4};
+    border-color: ${({ theme, onClick }) =>
+      onClick ? theme.colors.secondary.dark1 : 'inherit'};
     &:hover {
       background-color: ${({ theme, onClick }) =>
         onClick ? theme.colors.secondary.dark1 : theme.colors.secondary.base};
+      border-color: ${({ theme, onClick }) =>
+        onClick ? theme.colors.secondary.dark2 : 'inherit'};
     }
   }
 `;