clickable labels have outlines, storybook shows them (#11034)

apache · Sep 25, 2020 · d056e3d · d056e3d
1 parent 66e4980
commit d056e3d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git 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
@@ -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'};
     }
   }
 `;