style: add maximum width to tooltips of form components and errors (#133

)
uzh-bf · Sep 9, 2024 · 8ff9e7b · 8ff9e7b
1 parent 9da4ff7
commit 8ff9e7b
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}