feat: clickable badge style behavior (#529)

* looking good, alignment might still be messed up, need to verify

* focused

* more generla styling and added some variables as suggested

* made -height into a variable

* removed unecessary display style

* alpha to variable

* added pressed state styling

* lint fix

* renamed opacity

* added -height

* changed and tested labeltype names

* fixed other labelStyle instances

amundsen_application/static/css/_labels.scss

@@ -3,13 +3,13 @@
 
 @import 'variables';
 
-.label-danger {
-  background-color: $badge-danger-color;
+.label-negative {
+  background-color: $badge-negative-color;
   color: $badge-text-color;
 }
 
-.label-default {
-  background-color: $badge-default-color;
+.label-neutral {
+  background-color: $badge-neutral-color;
   color: $badge-text-color;
 }
 
@@ -18,8 +18,8 @@
   color: $badge-text-color;
 }
 
-.label-success {
-  background-color: $badge-success-color;
+.label-positive {
+  background-color: $badge-positive-color;
   color: $badge-text-color;
 }
 

amundsen_application/static/css/_variables-default.scss

@@ -56,12 +56,20 @@ $line-height-large: 1.5 !default;
 
 // Badges
 $badge-text-color: $text-primary;
-$badge-danger-color: $sunset20;
-$badge-default-color: $gray20;
+$badge-negative-color: $sunset20;
+$badge-neutral-color: $gray20;
 $badge-primary-color: $cyan10;
-$badge-success-color: $mint20;
+$badge-positive-color: $mint20;
 $badge-warning-color: $amber30;
 
+$badge-overlay: $gray100;
+$badge-opacity-light: 0.14;
+$badge-opacity-dark: 0.16;
+$badge-pressed-light: 0.21;
+$badge-pressed-dark: 0.22;
+
+$badge-height: 20px;
+
 // Buttons
 $btn-border-radius-base: 4px;
 

amundsen_application/static/js/components/ProfilePage/index.spec.tsx

@@ -20,6 +20,7 @@ import { ResourceType } from 'interfaces/Resources';
 import * as LogUtils from 'utils/logUtils';
 
 import { indexDashboardsEnabled } from 'config/config-utils';
+import { BadgeStyle } from 'config/config-types';
 import { AVATAR_SIZE } from './constants';
 import {
   mapDispatchToProps,
@@ -346,7 +347,7 @@ describe('ProfilePage', () => {
         wrapper.find('.header-title-text').find(Flag).props()
       ).toMatchObject({
         caseType: 'sentenceCase',
-        labelStyle: 'danger',
+        labelStyle: BadgeStyle.DANGER,
         text: 'Alumni',
       });
     });

amundsen_application/static/js/components/ProfilePage/index.tsx

@@ -11,6 +11,7 @@ import { bindActionCreators } from 'redux';
 import Breadcrumb from 'components/common/Breadcrumb';
 import Flag from 'components/common/Flag';
 import TabsComponent from 'components/common/TabsComponent';
+import { BadgeStyle } from 'config/config-types';
 
 import { GlobalState } from 'ducks/rootReducer';
 import { getUser, getUserOwn, getUserRead } from 'ducks/user/reducer';
@@ -215,7 +216,11 @@ export class ProfilePage extends React.Component<
         <h1 className="h3 header-title-text truncated">
           {user.display_name}
           {!user.is_active && (
-            <Flag caseType="sentenceCase" labelStyle="danger" text="Alumni" />
+            <Flag
+              caseType="sentenceCase"
+              labelStyle={BadgeStyle.DANGER}
+              text="Alumni"
+            />
           )}
         </h1>
       );

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -10,6 +10,7 @@ import { RouteComponentProps } from 'react-router';
 import { GlobalState } from 'ducks/rootReducer';
 import { getTableData } from 'ducks/tableMetadata/reducer';
 import { GetTableDataRequest } from 'ducks/tableMetadata/types';
+import { BadgeStyle } from 'config/config-types';
 
 import {
   getMaxLength,
@@ -222,7 +223,7 @@ export class TableDetail extends React.Component<
                 />
                 {data.badges.length > 0 && <BadgeList badges={data.badges} />}
                 {data.is_view && (
-                  <Flag text="table view" labelStyle="warning" />
+                  <Flag text="table view" labelStyle={BadgeStyle.WARNING} />
                 )}
               </div>
             </div>

amundsen_application/static/js/components/common/Badges/styles.scss

 // Copyright Contributors to the Amundsen project.
 // SPDX-License-Identifier: Apache-2.0
-
 @import 'variables';
-
 .clickable-badge {
   &:hover {
     cursor: pointer;
   }
+  .label {
+    padding: 0 0;
+  }
+
+  [class^='badge-overlay-'] {
+    font-size: $font-size-base;
+    text-align: center;
+    padding: 0.2em 0.6em 0.3em;
+
+    &:hover,
+    &:focus {
+      color: $badge-text-color;
+      height: $badge-height;
+      width: 100%;
+      border-radius: $badge-height;
+    }
+
+    &:focus {
+      // TODO verify if this is what it is supposed to look like
+      // more round?
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+  .badge-overlay-negative,
+  .badge-overlay-neutral,
+  .badge-overlay-positive,
+  .badge-overlay-primary {
+    &:hover,
+    &:focus {
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-opacity-light
+      );
+    }
+    &:active {
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-pressed-light
+      );
+    }
+  }
+  .badge-overlay-warning {
+    &:hover,
+    &:focus {
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-opacity-dark
+      );
+    }
+    &:active {
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-pressed-dark
+      );
+    }
+  }
 }

amundsen_application/static/js/components/common/Flag/index.spec.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import Flag, { CaseType, FlagProps, convertText } from '.';
+import { BadgeStyle } from 'config/config-types';
 
 describe('Flag', () => {
   let props: FlagProps;
@@ -21,15 +22,15 @@ describe('Flag', () => {
   describe('render', () => {
     it('renders span with correct default className', () => {
       expect(subject.find('span').props().className).toEqual(
-        'flag label label-default'
+        `flag label label-${BadgeStyle.DEFAULT}`
       );
     });
 
     it('renders span with correct custom className', () => {
-      props.labelStyle = 'primary';
+      props.labelStyle = BadgeStyle.PRIMARY;
       subject.setProps(props);
       expect(subject.find('span').props().className).toEqual(
-        'flag label label-primary'
+        `flag label label-${BadgeStyle.PRIMARY}`
       );
     });
 

amundsen_application/static/js/components/common/Flag/index.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 
 // TODO: Use css-modules instead of 'import'
 import './styles.scss';
+import { BadgeStyle } from 'config/config-types';
 
 export enum CaseType {
   LOWER_CASE = 'lowerCase',
@@ -41,7 +42,9 @@ const Flag: React.SFC<FlagProps> = ({
   // https://getbootstrap.com/docs/4.1/components/badge/
   return (
     <span className={`flag label label-${labelStyle}`}>
-      {convertText(text, caseType)}
+      <div className={`badge-overlay-${labelStyle}`}>
+        {convertText(text, caseType)}
+      </div>
     </span>
   );
 };
@@ -49,7 +52,7 @@ const Flag: React.SFC<FlagProps> = ({
 Flag.defaultProps = {
   caseType: null,
   text: '',
-  labelStyle: 'default',
+  labelStyle: BadgeStyle.DEFAULT,
 };
 
 export default Flag;

amundsen_application/static/js/components/common/Flag/styles.scss

@@ -6,8 +6,8 @@
 .flag {
   border-radius: 5px;
   display: inline-block;
-  font-size: 14px;
-  height: 20px;
+  font-size: $font-size-base;
+  height: $badge-height;
   margin: 0 0 0 $spacer-1;
 }
 

amundsen_application/static/js/components/common/ResourceListItem/UserListItem/index.spec.tsx

@@ -12,6 +12,8 @@ import { Link } from 'react-router-dom';
 import { ResourceType } from 'interfaces';
 import UserListItem, { UserListItemProps } from '.';
 
+import { BadgeStyle } from 'config/config-types';
+
 describe('UserListItem', () => {
   const setup = (propOverrides?: Partial<UserListItemProps>) => {
     const props: UserListItemProps = {
@@ -209,7 +211,7 @@ describe('UserListItem', () => {
         expect(flagComponent.exists()).toBe(true);
         expect(flagComponent.props()).toMatchObject({
           text: 'Alumni',
-          labelStyle: 'danger',
+          labelStyle: BadgeStyle.DANGER,
         });
       });
 

amundsen_application/static/js/components/common/ResourceListItem/UserListItem/index.tsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 
 import { UserResource } from 'interfaces';
 import Flag from 'components/common/Flag';
+import { BadgeStyle } from 'config/config-types';
 import { LoggingParams } from '../types';
 
 export interface UserListItemProps {
@@ -55,7 +56,9 @@ class UserListItem extends React.Component<UserListItemProps, {}> {
           </div>
           <div className="resource-type">User</div>
           <div className="resource-badges">
-            {!user.is_active && <Flag text="Alumni" labelStyle="danger" />}
+            {!user.is_active && (
+              <Flag text="Alumni" labelStyle={BadgeStyle.DANGER} />
+            )}
             <img className="icon icon-right" alt="" />
           </div>
         </Link>

amundsen_application/static/js/config/config-types.ts

@@ -134,11 +134,11 @@ interface BaseResourceConfig {
 }
 
 export enum BadgeStyle {
-  DANGER = 'danger',
-  DEFAULT = 'default',
+  DANGER = 'negative',
+  DEFAULT = 'neutral',
   INFO = 'info',
   PRIMARY = 'primary',
-  SUCCESS = 'success',
+  SUCCESS = 'positive',
   WARNING = 'warning',
 }