From ca1ad425ab5b47992e02a695cb83a0dbcf90f12e Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Tue, 13 Jul 2021 17:00:11 +0300
Subject: [PATCH] Badge: option to show short/full versions of contents (#1397)

* add button to expand and view whole badge contents

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* revert font changes due to update elsewhere already existing

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* make expanding icon smaller and not focusable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* extended badge content by click, selecting text from label doesn't trigger auto-closing

Signed-off-by: Roman <ixrock@gmail.com>

* fix: hover only intercative badges (with extra content)

Signed-off-by: Roman <ixrock@gmail.com>

* added common document/selectionchange watcher

Signed-off-by: Roman <ixrock@gmail.com>

* lint fixes

Signed-off-by: Roman <ixrock@gmail.com>

* Convert Badge to CSS Modules

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align Badge styles across components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Not closing badge if user started to select text

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+apps-releases/release-details.scss       |  8 +--
 .../+apps-releases/release-details.tsx        |  2 +-
 .../+catalog/catalog-entity.store.tsx         |  1 +
 .../+config-autoscalers/hpa-details.scss      |  2 +-
 .../+config-autoscalers/hpa-details.tsx       |  2 +-
 .../components/+config-autoscalers/hpa.scss   |  5 +-
 .../components/+config-autoscalers/hpa.tsx    |  1 +
 .../components/+config-secrets/secrets.tsx    |  2 +-
 .../+custom-resources/crd-details.scss        | 19 +----
 .../+custom-resources/crd-details.tsx         |  4 +-
 .../crd-resource-details.scss                 | 10 +--
 .../crd-resource-details.tsx                  |  3 +-
 .../+custom-resources/crd.mixins.scss         |  2 +-
 .../components/+nodes/node-details.scss       |  5 +-
 .../components/+nodes/nodes-mixins.scss       |  2 +-
 .../+workloads-cronjobs/cronjob-details.scss  |  4 +-
 .../deployment-details.scss                   | 24 +++----
 .../deployment-details.tsx                    |  4 +-
 .../+workloads-jobs/job-details.scss          |  4 +-
 .../pod-details-container.scss                |  4 --
 .../+workloads-pods/pod-details.tsx           |  2 +-
 .../components/+workloads-pods/pods.tsx       |  4 +-
 .../+workloads/workloads-mixins.scss          |  2 +-
 .../badge/{badge.scss => badge.module.css}    | 50 ++++++++-----
 src/renderer/components/badge/badge.tsx       | 71 ++++++++++++++++---
 src/renderer/components/chart/chart.scss      |  2 +-
 src/renderer/components/chart/chart.tsx       |  3 +-
 src/renderer/components/chart/pie-chart.scss  |  2 +-
 .../components/cluster-show-metrics.tsx       |  3 +-
 src/renderer/components/dock/info-panel.scss  |  4 --
 .../components/drawer/drawer-item.scss        |  2 +-
 .../components/hotbar/hotbar-selector.scss    |  2 +-
 .../components/hotbar/hotbar-selector.tsx     |  1 +
 src/renderer/components/icon/icon.scss        |  2 +-
 .../item-object-list/page-filters-list.tsx    |  2 +-
 .../components/table/table.mixins.scss        |  4 --
 36 files changed, 146 insertions(+), 118 deletions(-)
 rename src/renderer/components/badge/{badge.scss => badge.module.css} (75%)

diff --git a/src/renderer/components/+apps-releases/release-details.scss b/src/renderer/components/+apps-releases/release-details.scss
index 3afe13961c..a4bd53610c 100644
--- a/src/renderer/components/+apps-releases/release-details.scss
+++ b/src/renderer/components/+apps-releases/release-details.scss
@@ -27,13 +27,7 @@
   }
 
   .status {
-    .Badge {
-      @include release-status-bgs;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
+    @include release-status-bgs;
   }
 
   .chart {
diff --git a/src/renderer/components/+apps-releases/release-details.tsx b/src/renderer/components/+apps-releases/release-details.tsx
index e5bda1f873..fae2e3ba71 100644
--- a/src/renderer/components/+apps-releases/release-details.tsx
+++ b/src/renderer/components/+apps-releases/release-details.tsx
@@ -272,7 +272,7 @@ export class ReleaseDetails extends Component<Props> {
         <DrawerItem name="Status" className="status" labelsOnly>
           <Badge
             label={release.getStatus()}
-            className={cssNames("status", kebabCase(release.getStatus()))}
+            className={kebabCase(release.getStatus())}
           />
         </DrawerItem>
         {this.renderValues()}
diff --git a/src/renderer/components/+catalog/catalog-entity.store.tsx b/src/renderer/components/+catalog/catalog-entity.store.tsx
index fea9e5e6ba..b606d54c1a 100644
--- a/src/renderer/components/+catalog/catalog-entity.store.tsx
+++ b/src/renderer/components/+catalog/catalog-entity.store.tsx
@@ -88,6 +88,7 @@ export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
             onClick?.(event);
             event.stopPropagation();
           }}
+          expandable={false}
         />
       ));
   }
diff --git a/src/renderer/components/+config-autoscalers/hpa-details.scss b/src/renderer/components/+config-autoscalers/hpa-details.scss
index ef9506976f..c1c6e930fc 100644
--- a/src/renderer/components/+config-autoscalers/hpa-details.scss
+++ b/src/renderer/components/+config-autoscalers/hpa-details.scss
@@ -22,7 +22,7 @@
 @import "autoscaler.mixins";
 
 .HpaDetails {
-  .Badge {
+  .status {
     @include hpa-status-bgc;
   }
 
diff --git a/src/renderer/components/+config-autoscalers/hpa-details.tsx b/src/renderer/components/+config-autoscalers/hpa-details.tsx
index 1a6db54e78..cf56b2c35c 100644
--- a/src/renderer/components/+config-autoscalers/hpa-details.tsx
+++ b/src/renderer/components/+config-autoscalers/hpa-details.tsx
@@ -125,7 +125,7 @@ export class HpaDetails extends React.Component<Props> {
           {hpa.getReplicas()}
         </DrawerItem>
 
-        <DrawerItem name="Status" labelsOnly>
+        <DrawerItem name="Status" className="status" labelsOnly>
           {hpa.getConditions().map(({ type, tooltip, isReady }) => {
             if (!isReady) return null;
 
diff --git a/src/renderer/components/+config-autoscalers/hpa.scss b/src/renderer/components/+config-autoscalers/hpa.scss
index 41fa3f6d08..dc79016fcf 100644
--- a/src/renderer/components/+config-autoscalers/hpa.scss
+++ b/src/renderer/components/+config-autoscalers/hpa.scss
@@ -38,10 +38,7 @@
     &.status {
       flex: 1.5;
       @include table-cell-labels-offsets;
-
-      .Badge {
-        @include hpa-status-bgc;
-      }
+      @include hpa-status-bgc;
     }
 
     &.age {
diff --git a/src/renderer/components/+config-autoscalers/hpa.tsx b/src/renderer/components/+config-autoscalers/hpa.tsx
index eca60e8c63..539bbb18d7 100644
--- a/src/renderer/components/+config-autoscalers/hpa.tsx
+++ b/src/renderer/components/+config-autoscalers/hpa.tsx
@@ -104,6 +104,7 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
                 label={type}
                 tooltip={tooltip}
                 className={cssNames(type.toLowerCase())}
+                expandable={false}
               />
             );
           })
diff --git a/src/renderer/components/+config-secrets/secrets.tsx b/src/renderer/components/+config-secrets/secrets.tsx
index d74305a499..3bfeada163 100644
--- a/src/renderer/components/+config-secrets/secrets.tsx
+++ b/src/renderer/components/+config-secrets/secrets.tsx
@@ -79,7 +79,7 @@ export class Secrets extends React.Component<Props> {
             secret.getName(),
             <KubeObjectStatusIcon key="icon" object={secret} />,
             secret.getNs(),
-            secret.getLabels().map(label => <Badge key={label} label={label}/>),
+            secret.getLabels().map(label => <Badge key={label} label={label} expandable={false}/>),
             secret.getKeys().join(", "),
             secret.type,
             secret.getAge(),
diff --git a/src/renderer/components/+custom-resources/crd-details.scss b/src/renderer/components/+custom-resources/crd-details.scss
index e5d016bb30..8e969a580b 100644
--- a/src/renderer/components/+custom-resources/crd-details.scss
+++ b/src/renderer/components/+custom-resources/crd-details.scss
@@ -23,11 +23,9 @@
 
 .CRDDetails {
   .conditions {
-    .Badge {
-      @include crd-condition-bgc;
-    }
+    @include crd-condition-bgc;
   }
-  
+
   .Table {
     margin-left: -$margin * 2;
     margin-right: -$margin * 2;
@@ -41,21 +39,8 @@
         flex: 0.5;
       }
 
-      .description {
-        flex: 1.5;
-
-        .Badge {
-          background: transparent;
-        }
-      }
-
       .json-path {
         flex: 3;
-
-        .Badge {
-          white-space: pre-line;
-          text-overflow: initial;
-        }
       }
     }
   }
diff --git a/src/renderer/components/+custom-resources/crd-details.tsx b/src/renderer/components/+custom-resources/crd-details.tsx
index 146c299884..bef1dc6f67 100644
--- a/src/renderer/components/+custom-resources/crd-details.tsx
+++ b/src/renderer/components/+custom-resources/crd-details.tsx
@@ -25,7 +25,6 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import type { CustomResourceDefinition } from "../../api/endpoints/crd.api";
-import { cssNames } from "../../utils";
 import { AceEditor } from "../ace-editor";
 import { Badge } from "../badge";
 import { DrawerItem, DrawerTitle } from "../drawer";
@@ -86,7 +85,8 @@ export class CRDDetails extends React.Component<Props> {
                 <Badge
                   key={type}
                   label={type}
-                  className={cssNames({ disabled: status === "False" }, type)}
+                  disabled={status === "False"}
+                  className={type}
                   tooltip={(
                     <>
                       <p>{message}</p>
diff --git a/src/renderer/components/+custom-resources/crd-resource-details.scss b/src/renderer/components/+custom-resources/crd-resource-details.scss
index af2c36ef2c..b7e57a0295 100644
--- a/src/renderer/components/+custom-resources/crd-resource-details.scss
+++ b/src/renderer/components/+custom-resources/crd-resource-details.scss
@@ -21,13 +21,9 @@
 
 .CrdResourceDetails {
   .status {
-    .value {
-      .Badge {
-        &.ready {
-          color: white;
-          background-color: $colorOk;
-        }
-      }
+    .ready {
+      color: white;
+      background-color: $colorOk;
     }
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+custom-resources/crd-resource-details.tsx b/src/renderer/components/+custom-resources/crd-resource-details.tsx
index f7305788eb..dc6181c63c 100644
--- a/src/renderer/components/+custom-resources/crd-resource-details.tsx
+++ b/src/renderer/components/+custom-resources/crd-resource-details.tsx
@@ -90,7 +90,8 @@ export class CrdResourceDetails extends React.Component<Props> {
       .map(({ kind, message, status }, index) => (
         <Badge
           key={kind + index} label={kind}
-          className={cssNames({ disabled: status === "False" }, kind.toLowerCase())}
+          disabled={status === "False"}
+          className={kind.toLowerCase()}
           tooltip={message}
         />
       ));
diff --git a/src/renderer/components/+custom-resources/crd.mixins.scss b/src/renderer/components/+custom-resources/crd.mixins.scss
index 62a160b1ff..89c7c86acc 100644
--- a/src/renderer/components/+custom-resources/crd.mixins.scss
+++ b/src/renderer/components/+custom-resources/crd.mixins.scss
@@ -30,7 +30,7 @@ $crd-condition-colors: (
 
 @mixin crd-condition-bgc {
   @each $status, $color in $crd-condition-colors {
-    &.#{$status} {
+    .#{$status} {
       background: $color;
       color: white;
     }
diff --git a/src/renderer/components/+nodes/node-details.scss b/src/renderer/components/+nodes/node-details.scss
index 895fdadfee..8d7672fde5 100644
--- a/src/renderer/components/+nodes/node-details.scss
+++ b/src/renderer/components/+nodes/node-details.scss
@@ -24,9 +24,6 @@
   --status-default-bg: #{$colorError};
 
   .conditions {
-    .Badge {
-      cursor: default;
-      @include node-status-bgs;
-    }
+    @include node-status-bgs;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+nodes/nodes-mixins.scss b/src/renderer/components/+nodes/nodes-mixins.scss
index 5ac0e4400a..74979c7a9f 100644
--- a/src/renderer/components/+nodes/nodes-mixins.scss
+++ b/src/renderer/components/+nodes/nodes-mixins.scss
@@ -33,7 +33,7 @@ $node-status-color-list: (
 
 @mixin node-status-bgs {
   @each $status, $color in $node-status-color-list {
-    &.#{$status} {
+    .#{$status} {
       background: $color;
       color: white;
     }
diff --git a/src/renderer/components/+workloads-cronjobs/cronjob-details.scss b/src/renderer/components/+workloads-cronjobs/cronjob-details.scss
index 513afd4273..f5e3c76ec8 100644
--- a/src/renderer/components/+workloads-cronjobs/cronjob-details.scss
+++ b/src/renderer/components/+workloads-cronjobs/cronjob-details.scss
@@ -33,8 +33,6 @@
   }
 
   .conditions {
-    .Badge {
-      @include job-condition-bgs;
-    }
+    @include job-condition-bgs;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+workloads-deployments/deployment-details.scss b/src/renderer/components/+workloads-deployments/deployment-details.scss
index 75ff19bbd4..490edf169f 100644
--- a/src/renderer/components/+workloads-deployments/deployment-details.scss
+++ b/src/renderer/components/+workloads-deployments/deployment-details.scss
@@ -21,21 +21,19 @@
 
 .DeploymentDetails {
   .conditions {
-    .Badge {
-      &.available {
-        color: white;
-        background-color: $deployment-available;
-      }
+    .available {
+      color: white;
+      background-color: $deployment-available;
+    }
 
-      &.progressing {
-        color: white;
-        background-color: $deployment-progressing;
-      }
+    .progressing {
+      color: white;
+      background-color: $deployment-progressing;
+    }
 
-      &.replica-failure {
-        color: white;
-        background-color: $deployment-replicafailure;
-      }
+    .replica-failure {
+      color: white;
+      background-color: $deployment-replicafailure;
     }
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+workloads-deployments/deployment-details.tsx b/src/renderer/components/+workloads-deployments/deployment-details.tsx
index acd514749f..87f4e08378 100644
--- a/src/renderer/components/+workloads-deployments/deployment-details.tsx
+++ b/src/renderer/components/+workloads-deployments/deployment-details.tsx
@@ -27,7 +27,6 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import type { Deployment } from "../../api/endpoints";
-import { cssNames } from "../../utils";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
 import { podsStore } from "../+workloads-pods/pods.store";
@@ -118,7 +117,8 @@ export class DeploymentDetails extends React.Component<Props> {
                 <Badge
                   key={type}
                   label={type}
-                  className={cssNames({ disabled: status === "False" }, kebabCase(type))}
+                  disabled={status === "False"}
+                  className={kebabCase(type)}
                   tooltip={(
                     <>
                       <p>{message}</p>
diff --git a/src/renderer/components/+workloads-jobs/job-details.scss b/src/renderer/components/+workloads-jobs/job-details.scss
index ffd78bc791..8ac3a66a93 100644
--- a/src/renderer/components/+workloads-jobs/job-details.scss
+++ b/src/renderer/components/+workloads-jobs/job-details.scss
@@ -22,8 +22,6 @@
 
 .JobDetails {
   .conditions {
-    .Badge {
-      @include job-condition-bgs;
-    }
+    @include job-condition-bgs;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+workloads-pods/pod-details-container.scss b/src/renderer/components/+workloads-pods/pod-details-container.scss
index dc670c4c09..fca42c9433 100644
--- a/src/renderer/components/+workloads-pods/pod-details-container.scss
+++ b/src/renderer/components/+workloads-pods/pod-details-container.scss
@@ -58,8 +58,4 @@
 
     @include pod-status-colors;
   }
-
-  .Badge {
-    white-space: normal;
-  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+workloads-pods/pod-details.tsx b/src/renderer/components/+workloads-pods/pod-details.tsx
index 2a7516b816..2bb08deeff 100644
--- a/src/renderer/components/+workloads-pods/pod-details.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details.tsx
@@ -142,7 +142,7 @@ export class PodDetails extends React.Component<Props> {
                 <Badge
                   key={type}
                   label={type}
-                  className={cssNames({ disabled: status === "False" })}
+                  disabled={status === "False"}
                   tooltip={`Last transition time: ${lastTransitionTime}`}
                 />
               );
diff --git a/src/renderer/components/+workloads-pods/pods.tsx b/src/renderer/components/+workloads-pods/pods.tsx
index 807d531b20..d7ef7175e8 100644
--- a/src/renderer/components/+workloads-pods/pods.tsx
+++ b/src/renderer/components/+workloads-pods/pods.tsx
@@ -127,7 +127,7 @@ export class Pods extends React.Component<Props> {
           { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
         ]}
         renderTableContents={(pod: Pod) => [
-          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} />,
+          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} expandable={false} />,
           <KubeObjectStatusIcon key="icon" object={pod} />,
           pod.getNs(),
           this.renderContainersStatus(pod),
@@ -145,7 +145,7 @@ export class Pods extends React.Component<Props> {
             );
           }),
           pod.getNodeName() ?
-            <Badge flat key="node" className="node" tooltip={pod.getNodeName()}>
+            <Badge flat key="node" className="node" tooltip={pod.getNodeName()} expandable={false}>
               <Link to={getDetailsUrl(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
                 {pod.getNodeName()}
               </Link>
diff --git a/src/renderer/components/+workloads/workloads-mixins.scss b/src/renderer/components/+workloads/workloads-mixins.scss
index 61a56f03f8..03c05c2d48 100644
--- a/src/renderer/components/+workloads/workloads-mixins.scss
+++ b/src/renderer/components/+workloads/workloads-mixins.scss
@@ -98,7 +98,7 @@ $cronjob-condition-color-list: (
 
 @mixin job-condition-bgs {
   @each $condition, $color in $job-condition-color-list {
-    &.#{$condition} {
+    .#{$condition} {
       color: white;
       background: $color;
     }
diff --git a/src/renderer/components/badge/badge.scss b/src/renderer/components/badge/badge.module.css
similarity index 75%
rename from src/renderer/components/badge/badge.scss
rename to src/renderer/components/badge/badge.module.css
index 23f8e99ff0..19dc8c7631 100644
--- a/src/renderer/components/badge/badge.scss
+++ b/src/renderer/components/badge/badge.module.css
@@ -19,25 +19,41 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.Badge {
+.badge {
+  position: relative;
   display: inline-block;
-  white-space: nowrap;
   max-width: 100%;
+}
+
+.badge + .badge {
+  margin-left: 8px;
+}
+
+.badge.interactive:hover {
+  background-color: var(--mainBackground);
+  cursor: pointer;
+}
+
+.badge:not(.isExpanded) {
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  &:not(.flat) {
-    background: $colorVague;
-    color: $textColorSecondary;
-    border-radius: $radius;
-    padding: .2em .4em;
-  }
-
-  &.small {
-    font-size: $font-size-small;
-  }
-
-  &.clickable {
-    cursor: pointer;
-  }
+}
+
+.badge:not(.flat) {
+  background: var(--colorVague);
+  border-radius: 3px;
+  padding: .2em .4em;
+}
+
+.small {
+  font-size: var(--font-size-small);
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.disabled {
+  opacity: 0.5;
 }
diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx
index 14959b04d1..a16b5482c0 100644
--- a/src/renderer/components/badge/badge.tsx
+++ b/src/renderer/components/badge/badge.tsx
@@ -19,29 +19,84 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./badge.scss";
+import styles from "./badge.module.css";
 
 import React from "react";
+import { computed, makeObservable, observable } from "mobx";
+import { observer } from "mobx-react";
 import { cssNames } from "../../utils/cssNames";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
+import { boundMethod } from "../../utils";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
   flat?: boolean;
   label?: React.ReactNode;
+  expandable?: boolean;
+  disabled?: boolean;
 }
 
+// Common handler for all Badge instances
+document.addEventListener("selectionchange", () => {
+  Badge.badgeMeta.hasTextSelected ||= window.getSelection().toString().trim().length > 0;
+});
+
 @withTooltip
+@observer
 export class Badge extends React.Component<BadgeProps> {
-  render() {
-    const { className, label, small, flat, children, ...elemProps } = this.props;
-    const clickable = Boolean(this.props.onClick);
+  static defaultProps: Partial<BadgeProps> = {
+    expandable: true
+  };
 
-    return <>
-      <span className={cssNames("Badge", { small, flat, clickable }, className)} {...elemProps}>
+  static badgeMeta = observable({
+    hasTextSelected: false
+  });
+
+  @observable.ref elem: HTMLElement;
+  @observable isExpanded = false;
+
+  constructor(props: BadgeProps) {
+    super(props);
+    makeObservable(this);
+  }
+
+  @computed get isExpandable() {
+    if (!this.props.expandable) return false;
+
+    return this.elem?.clientWidth < this.elem?.scrollWidth;
+  }
+
+  @boundMethod
+  onMouseUp() {
+    if (!this.isExpandable || Badge.badgeMeta.hasTextSelected) {
+      Badge.badgeMeta.hasTextSelected = false;
+    } else {
+      this.isExpanded = !this.isExpanded;
+    }
+  }
+
+  @boundMethod
+  bindRef(elem: HTMLElement) {
+    this.elem = elem;
+  }
+
+  render() {
+    const { className, label, disabled, small, children, flat, expandable, ...elemProps } = this.props;
+    const clickable = Boolean(this.props.onClick) || this.isExpandable;
+    const classNames = cssNames(styles.badge, className, {
+      [styles.small]: small,
+      [styles.flat]: flat,
+      [styles.clickable]: clickable,
+      [styles.interactive]: this.isExpandable,
+      [styles.isExpanded]: this.isExpanded,
+      [styles.disabled]: disabled
+    });
+
+    return (
+      <div {...elemProps} className={classNames} onMouseUp={this.onMouseUp} ref={this.bindRef}>
         {label}
         {children}
-      </span>
-    </>;
+      </div>
+    );
   }
 }
diff --git a/src/renderer/components/chart/chart.scss b/src/renderer/components/chart/chart.scss
index 3429b251f9..554d62b883 100644
--- a/src/renderer/components/chart/chart.scss
+++ b/src/renderer/components/chart/chart.scss
@@ -29,7 +29,7 @@
   }
 
   .legend {
-    .Badge {
+    .LegendBadge {
       background: transparent;
       transition: background-color 250ms;
       white-space: normal;
diff --git a/src/renderer/components/chart/chart.tsx b/src/renderer/components/chart/chart.tsx
index b68ece5523..d456c397d1 100644
--- a/src/renderer/components/chart/chart.tsx
+++ b/src/renderer/components/chart/chart.tsx
@@ -169,7 +169,7 @@ export class Chart extends React.Component<ChartProps> {
     const labelElem = (title: string, color: string, tooltip?: string) => (
       <Badge
         key={title}
-        className="flex gaps align-center"
+        className="LegendBadge flex gaps align-center"
         label={(
           <div>
             <StatusBrick style={{ backgroundColor: color }}/>
@@ -177,6 +177,7 @@ export class Chart extends React.Component<ChartProps> {
           </div>
         )}
         tooltip={tooltip}
+        expandable={false}
       />
     );
 
diff --git a/src/renderer/components/chart/pie-chart.scss b/src/renderer/components/chart/pie-chart.scss
index 7034ee28a1..76c098e39d 100644
--- a/src/renderer/components/chart/pie-chart.scss
+++ b/src/renderer/components/chart/pie-chart.scss
@@ -30,7 +30,7 @@
     flex-direction: column;
 
     > * {
-      &.Badge:hover {
+      &.LegendBadge:hover {
         background-color: transparent;
       }
 
diff --git a/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx b/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
index 6544f2325b..effdc16160 100644
--- a/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-show-metrics.tsx
@@ -69,13 +69,14 @@ export class ShowMetricsSetting extends React.Component<Props> {
         const tooltipId = `${name}`;
 
         return (
-          <Badge key={name} flat>
+          <Badge key={name} flat expandable={false}>
             <span id={tooltipId}>{name}</span>
             <Icon
               smallest
               material="clear"
               onClick={() => this.removeMetric(name)}
               tooltip="Remove"
+              className="mx-3"
             />
           </Badge>
         );
diff --git a/src/renderer/components/dock/info-panel.scss b/src/renderer/components/dock/info-panel.scss
index 24b727f5d8..0933b236c1 100644
--- a/src/renderer/components/dock/info-panel.scss
+++ b/src/renderer/components/dock/info-panel.scss
@@ -30,10 +30,6 @@
     margin-right: var(--padding);
   }
 
-  .Badge {
-    background-color: var(--dockBadgeBackground);
-  }
-
   > .controls {
     white-space: nowrap;
     flex: 1 1;
diff --git a/src/renderer/components/drawer/drawer-item.scss b/src/renderer/components/drawer/drawer-item.scss
index a884be9576..37ea87947b 100644
--- a/src/renderer/components/drawer/drawer-item.scss
+++ b/src/renderer/components/drawer/drawer-item.scss
@@ -67,7 +67,7 @@
         margin: 0;
       }
 
-      .Badge {
+      > div {
         float: left;
         margin: $spacing;
 
diff --git a/src/renderer/components/hotbar/hotbar-selector.scss b/src/renderer/components/hotbar/hotbar-selector.scss
index 4db5ae9900..d0fe3fa57c 100644
--- a/src/renderer/components/hotbar/hotbar-selector.scss
+++ b/src/renderer/components/hotbar/hotbar-selector.scss
@@ -33,7 +33,7 @@
     top: -20px;
   }
 
-  .Badge {
+  .SelectorIndex {
     cursor: pointer;
     background: var(--secondaryBackground);
     width: 100%;
diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx
index f0ca39d834..3bac4475fe 100644
--- a/src/renderer/components/hotbar/hotbar-selector.tsx
+++ b/src/renderer/components/hotbar/hotbar-selector.tsx
@@ -49,6 +49,7 @@ export function HotbarSelector({ hotbar }: Props) {
             preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT],
             children: hotbar.name
           }}
+          className="SelectorIndex"
         />
       </div>
       <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss
index b10eb3708b..02501b3716 100644
--- a/src/renderer/components/icon/icon.scss
+++ b/src/renderer/components/icon/icon.scss
@@ -153,4 +153,4 @@
       @extend .active;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/item-object-list/page-filters-list.tsx b/src/renderer/components/item-object-list/page-filters-list.tsx
index 1bee3be8ba..6620350b01 100644
--- a/src/renderer/components/item-object-list/page-filters-list.tsx
+++ b/src/renderer/components/item-object-list/page-filters-list.tsx
@@ -70,7 +70,7 @@ export class PageFiltersList extends React.Component<Props> {
               <Badge
                 key={`${type}-${value}`}
                 title={type}
-                className={cssNames("flex gaps filter align-center", type)}
+                className={cssNames("Badge flex gaps filter align-center", type)}
                 label={(
                   <>
                     <FilterIcon type={type}/>
diff --git a/src/renderer/components/table/table.mixins.scss b/src/renderer/components/table/table.mixins.scss
index 3f7a021aff..12e009631d 100644
--- a/src/renderer/components/table/table.mixins.scss
+++ b/src/renderer/components/table/table.mixins.scss
@@ -49,8 +49,4 @@
 @mixin table-cell-labels-offsets {
   padding-top: $padding / 2;
   padding-bottom: 0;
-
-  .Badge + .Badge {
-    margin-left: $padding / 2;
-  }
 }
\ No newline at end of file