From 8ff9e7bb03d8291272a625f8250f5809788c2d9b Mon Sep 17 00:00:00 2001
From: Julius Schlapbach <80708107+sjschlapbach@users.noreply.github.com>
Date: Mon, 9 Sep 2024 21:01:29 +0200
Subject: [PATCH] style: add maximum width to tooltips of form components and
 errors (#133)

---
 packages/design-system/src/ColorPicker.tsx           | 6 +++++-
 packages/design-system/src/DateChanger.tsx           | 6 +++++-
 packages/design-system/src/FormLabel.tsx             | 5 ++++-
 packages/design-system/src/Switch.tsx                | 6 +++++-
 packages/design-system/src/Workflow.tsx              | 2 +-
 packages/design-system/src/forms/FormikDateField.tsx | 2 +-
 packages/design-system/src/forms/NumberField.tsx     | 6 +++++-
 packages/design-system/src/forms/SelectField.tsx     | 2 +-
 packages/design-system/src/forms/TextField.tsx       | 6 +++++-
 packages/design-system/src/forms/TextareaField.tsx   | 2 +-
 10 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/src/ColorPicker.tsx b/packages/design-system/src/ColorPicker.tsx
index 582e97c5..ffc35d08 100644
--- a/packages/design-system/src/ColorPicker.tsx
+++ b/packages/design-system/src/ColorPicker.tsx
@@ -229,7 +229,11 @@ export function ColorPicker({
           )}
         </div>
         {error && isTouched && (
-          <Tooltip tooltip={error} delay={0} className={{ tooltip: 'text-sm' }}>
+          <Tooltip
+            tooltip={error}
+            delay={0}
+            className={{ tooltip: 'max-w-[30rem] text-sm' }}
+          >
             <FontAwesomeIcon
               icon={faCircleExclamation}
               className="mr-1 text-red-600"
diff --git a/packages/design-system/src/DateChanger.tsx b/packages/design-system/src/DateChanger.tsx
index 57c16956..c04088f5 100644
--- a/packages/design-system/src/DateChanger.tsx
+++ b/packages/design-system/src/DateChanger.tsx
@@ -181,7 +181,11 @@ export function DateChanger({
           </div>
         )}
         {error && !hideError && isTouched && (
-          <Tooltip tooltip={error} delay={0} className={{ tooltip: 'text-sm' }}>
+          <Tooltip
+            tooltip={error}
+            delay={0}
+            className={{ tooltip: 'max-w-[30rem] text-sm' }}
+          >
             <FontAwesomeIcon
               icon={faCircleExclamation}
               className="mr-1 text-red-600"
diff --git a/packages/design-system/src/FormLabel.tsx b/packages/design-system/src/FormLabel.tsx
index aa6f2d84..ad4162e0 100644
--- a/packages/design-system/src/FormLabel.tsx
+++ b/packages/design-system/src/FormLabel.tsx
@@ -32,7 +32,10 @@ export function FormLabel({
           labelType === 'small' && '-mb-0.5 mt-1 leading-6 text-gray-600',
           className?.label
         ),
-        tooltip: twMerge('text-sm font-normal', className?.tooltip),
+        tooltip: twMerge(
+          'max-w-[30rem] text-sm font-normal',
+          className?.tooltip
+        ),
         tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
       }}
       tooltip={tooltip}
diff --git a/packages/design-system/src/Switch.tsx b/packages/design-system/src/Switch.tsx
index 8b0a407c..b4ea129d 100644
--- a/packages/design-system/src/Switch.tsx
+++ b/packages/design-system/src/Switch.tsx
@@ -158,7 +158,11 @@ export function Switch({
         />
       )}
       {error && !hideError && (
-        <Tooltip tooltip={error} delay={0} className={{ tooltip: 'text-sm' }}>
+        <Tooltip
+          tooltip={error}
+          delay={0}
+          className={{ tooltip: 'max-w-[30rem] text-sm' }}
+        >
           <FontAwesomeIcon
             icon={faCircleExclamation}
             className="-mx-2 text-red-600"
diff --git a/packages/design-system/src/Workflow.tsx b/packages/design-system/src/Workflow.tsx
index 2aaaa51a..2fafbf24 100644
--- a/packages/design-system/src/Workflow.tsx
+++ b/packages/design-system/src/Workflow.tsx
@@ -256,7 +256,7 @@ export function WorkflowItem({
           tooltip={tooltip}
           delay={1500}
           className={{
-            tooltip: 'z-20',
+            tooltip: 'z-20 max-w-[30rem]',
             trigger: '!w-full',
           }}
         >
diff --git a/packages/design-system/src/forms/FormikDateField.tsx b/packages/design-system/src/forms/FormikDateField.tsx
index effb5a53..5ccfe3d3 100644
--- a/packages/design-system/src/forms/FormikDateField.tsx
+++ b/packages/design-system/src/forms/FormikDateField.tsx
@@ -117,7 +117,7 @@ export function FormikDateField({
             <Tooltip
               tooltip={meta.error}
               delay={0}
-              className={{ tooltip: 'text ml-3' }}
+              className={{ tooltip: 'text ml-3 max-w-[30rem]' }}
             >
               <FontAwesomeIcon
                 icon={faCircleExclamation}
diff --git a/packages/design-system/src/forms/NumberField.tsx b/packages/design-system/src/forms/NumberField.tsx
index 7223a17f..faed0c26 100644
--- a/packages/design-system/src/forms/NumberField.tsx
+++ b/packages/design-system/src/forms/NumberField.tsx
@@ -143,7 +143,11 @@ export function NumberField({
           {...props}
         />
         {error && !hideError && isTouched && (
-          <Tooltip tooltip={error} delay={0} className={{ tooltip: 'text-sm' }}>
+          <Tooltip
+            tooltip={error}
+            delay={0}
+            className={{ tooltip: 'max-w-[30rem] text-sm' }}
+          >
             <FontAwesomeIcon
               icon={faCircleExclamation}
               className="mr-1 text-red-600"
diff --git a/packages/design-system/src/forms/SelectField.tsx b/packages/design-system/src/forms/SelectField.tsx
index a6bc155d..fdb31538 100644
--- a/packages/design-system/src/forms/SelectField.tsx
+++ b/packages/design-system/src/forms/SelectField.tsx
@@ -154,7 +154,7 @@ export function SelectField({
             <Tooltip
               tooltip={error}
               delay={0}
-              className={{ tooltip: 'text-sm' }}
+              className={{ tooltip: 'max-w-[30rem] text-sm' }}
             >
               <FontAwesomeIcon
                 icon={faCircleExclamation}
diff --git a/packages/design-system/src/forms/TextField.tsx b/packages/design-system/src/forms/TextField.tsx
index 0b083328..098cdb61 100644
--- a/packages/design-system/src/forms/TextField.tsx
+++ b/packages/design-system/src/forms/TextField.tsx
@@ -191,7 +191,11 @@ export function TextField({
           )}
         </div>
         {error && !hideError && isTouched && (
-          <Tooltip tooltip={error} delay={0} className={{ tooltip: 'text-sm' }}>
+          <Tooltip
+            tooltip={error}
+            delay={0}
+            className={{ tooltip: 'max-w-[30rem] text-sm' }}
+          >
             <FontAwesomeIcon
               icon={faCircleExclamation}
               className="mr-1 text-red-600"
diff --git a/packages/design-system/src/forms/TextareaField.tsx b/packages/design-system/src/forms/TextareaField.tsx
index 875c3256..cdf8b2fc 100644
--- a/packages/design-system/src/forms/TextareaField.tsx
+++ b/packages/design-system/src/forms/TextareaField.tsx
@@ -158,7 +158,7 @@ export function TextareaField({
             <Tooltip
               tooltip={error}
               delay={0}
-              className={{ tooltip: 'text-sm' }}
+              className={{ tooltip: 'max-w-[30rem] text-sm' }}
             >
               <FontAwesomeIcon
                 icon={faCircleExclamation}