From 132a30f2b64ff977e33f3a247a3667f8512ce4b3 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 30 Jul 2020 11:02:30 +0200
Subject: [PATCH] Fix tooltip overflow in checkbox and radio context

---
 .../src/__snapshots__/storyshots.test.ts.snap | 104 ++++++++++++++++++
 .../src/forms/Checkbox.stories.tsx            |  11 ++
 scm-ui/ui-components/src/forms/Checkbox.tsx   |   2 +-
 .../ui-components/src/forms/Radio.stories.tsx |  19 ++++
 scm-ui/ui-components/src/forms/Radio.tsx      |   2 +-
 5 files changed, 136 insertions(+), 2 deletions(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 58725b1514..2a9907906d 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -38549,6 +38549,65 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
+<div
+  className="Checkboxstories__Spacing-sc-1bg8q8e-0 kJtXav"
+>
+  <div
+    className="field"
+  >
+    <div
+      className="control"
+      onClick={[Function]}
+    >
+      <label
+        className="checkbox"
+      >
+        <i
+          className="is-outlined fa-square has-text-black far"
+        />
+         
+        Classic helpText
+        <span
+          className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
+          data-tooltip="This is a classic help text."
+        >
+          <i
+            className="fas fa-question-circle has-text-blue-light"
+          />
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    className="field"
+  >
+    <div
+      className="control"
+      onClick={[Function]}
+    >
+      <label
+        className="checkbox"
+      >
+        <i
+          className="is-outlined fa-check-square has-text-link fa"
+        />
+         
+        Long helpText
+        <span
+          className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
+          data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+        >
+          <i
+            className="fas fa-question-circle has-text-blue-light"
+          />
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Forms|DropDown Default 1`] = `
 <div
   className="select"
@@ -38658,6 +38717,51 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Radio With HelpText 1`] = `
+<div
+  className="Radiostories__RadioList-sc-18hvwhd-1 fSTSuW"
+>
+  <label
+    className="Radio__StyledRadio-ays4vp-0 hrHCWE radio"
+  >
+    <input
+      checked={false}
+      onChange={[Function]}
+      type="radio"
+    />
+     
+    Classic helpText
+    <span
+      className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
+      data-tooltip="This is a classic help text."
+    >
+      <i
+        className="fas fa-question-circle has-text-blue-light"
+      />
+    </span>
+  </label>
+  <label
+    className="Radio__StyledRadio-ays4vp-0 hrHCWE radio"
+  >
+    <input
+      checked={true}
+      onChange={[Function]}
+      type="radio"
+    />
+     
+    Long helpText
+    <span
+      className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
+      data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+    >
+      <i
+        className="fas fa-question-circle has-text-blue-light"
+      />
+    </span>
+  </label>
+</div>
+`;
+
 exports[`Storyshots Forms|Textarea OnCancel 1`] = `
 <div
   className="Textareastories__Spacing-lk5v3m-0 hldael"
diff --git a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
index c83252aaa5..24dc31d4de 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
@@ -25,6 +25,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import Checkbox from "./Checkbox";
 import styled from "styled-components";
+import Radio from "./Radio";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -42,4 +43,14 @@ storiesOf("Forms|Checkbox", module)
     <Spacing>
       <Checkbox label="Checked but disabled" checked={true} disabled={true} />
     </Spacing>
+  ))
+  .add("With HelpText", () => (
+    <Spacing>
+      <Checkbox label="Classic helpText" checked={false} helpText="This is a classic help text." />
+      <Checkbox
+        label="Long helpText"
+        checked={true}
+        helpText="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      />
+    </Spacing>
   ));
diff --git a/scm-ui/ui-components/src/forms/Checkbox.tsx b/scm-ui/ui-components/src/forms/Checkbox.tsx
index 52321fd37f..291e8f7e30 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.tsx
@@ -47,7 +47,7 @@ export default class Checkbox extends React.Component<Props> {
   renderHelp = () => {
     const { title, helpText } = this.props;
     if (helpText && !title) {
-      return <Help message={helpText} />;
+      return <Help message={helpText} className="has-tooltip-multiline" />;
     }
   };
 
diff --git a/scm-ui/ui-components/src/forms/Radio.stories.tsx b/scm-ui/ui-components/src/forms/Radio.stories.tsx
index fd457c66a3..aef1bfe29d 100644
--- a/scm-ui/ui-components/src/forms/Radio.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.stories.tsx
@@ -30,6 +30,15 @@ const Spacing = styled.div`
   padding: 2em;
 `;
 
+const RadioList = styled.div`
+  display: flex;
+  flex-direction: column;
+  > label:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+  padding: 2em;
+`;
+
 storiesOf("Forms|Radio", module)
   .add("Default", () => (
     <Spacing>
@@ -41,4 +50,14 @@ storiesOf("Forms|Radio", module)
     <Spacing>
       <Radio label="Checked but disabled" checked={true} disabled={true} />
     </Spacing>
+  ))
+  .add("With HelpText", () => (
+    <RadioList>
+      <Radio label="Classic helpText" checked={false} helpText="This is a classic help text." />
+      <Radio
+        label="Long helpText"
+        checked={true}
+        helpText="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      />
+    </RadioList>
   ));
diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx
index fe6a35f4a6..3599d5a29d 100644
--- a/scm-ui/ui-components/src/forms/Radio.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.tsx
@@ -43,7 +43,7 @@ class Radio extends React.Component<Props> {
   renderHelp = () => {
     const helpText = this.props.helpText;
     if (helpText) {
-      return <Help message={helpText} />;
+      return <Help message={helpText} className="has-tooltip-multiline" />;
     }
   };