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>

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>
         );