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/chart/chart.scss

@@ -29,7 +29,7 @@
   }
 
   .legend {
-    .Badge {
+    .LegendBadge {
       background: transparent;
       transition: background-color 250ms;
       white-space: normal;

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

src/renderer/components/chart/pie-chart.scss

@@ -30,7 +30,7 @@
     flex-direction: column;
 
     > * {
-      &.Badge:hover {
+      &.LegendBadge:hover {
         background-color: transparent;
       }