refactor: define unified form labels for all new formik fields

uzh-bf · Aug 15, 2024 · fab4d83 · fab4d83
1 parent 9b60880
commit fab4d83
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 105 deletions.
diff --git a/packages/design-system/src/ColorPicker.tsx b/packages/design-system/src/ColorPicker.tsx
@@ -142,7 +142,7 @@ export function ColorPicker({
                 label={colorLabel}
                 className={{
                   root: twMerge(
-                    'my-auto -mb-1 min-w-max text-base font-bold leading-6 text-gray-600',
+                    'my-auto -mb-0.5 min-w-max text-base font-bold leading-6 text-gray-600',
                     className?.inputLabel
                   ),
                   tooltip: twMerge(

diff --git a/packages/design-system/src/DateChanger.tsx b/packages/design-system/src/DateChanger.tsx
@@ -8,7 +8,7 @@ import dayjs from 'dayjs'
 import React, { useEffect, useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import Button from './Button'
-import Label from './forms/Label'
+import FormLabel from './FormLabel'
 import { Tooltip } from './Tooltip'
 
 export interface DateChangerClassName {
@@ -77,7 +77,7 @@ export function DateChanger({
   data,
   dataButton,
   label = '',
-  labelType = 'large',
+  labelType = 'small',
   tooltip,
   required = false,
   disabled = false,
@@ -110,22 +110,13 @@ export function DateChanger({
       )}
     >
       {label && (
-        <Label
-          forId={id}
+        <FormLabel
+          id={id}
           required={required}
           label={label}
-          className={{
-            root: twMerge(
-              'my-auto mr-2 min-w-max font-bold',
-              labelType === 'small' &&
-                '-mb-1 mt-1 text-sm leading-6 text-gray-600',
-              className?.label
-            ),
-            tooltip: twMerge('text-sm font-normal', className?.tooltip),
-            tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
-          }}
+          labelType={labelType}
           tooltip={tooltip}
-          showTooltipSymbol={typeof tooltip !== 'undefined'}
+          className={className}
         />
       )}
 

diff --git a/packages/design-system/src/FormLabel.tsx b/packages/design-system/src/FormLabel.tsx
@@ -0,0 +1,44 @@
+import { twMerge } from 'tailwind-merge'
+import { Label } from './forms/Label'
+
+export interface FormLabelProps {
+  id?: string
+  required: boolean
+  label: string
+  labelType: 'small' | 'large'
+  className?: {
+    label?: string
+    tooltip?: string
+  }
+  tooltip?: string | React.ReactNode
+}
+
+export function FormLabel({
+  id,
+  required,
+  label,
+  labelType = 'small',
+  className,
+  tooltip,
+}: FormLabelProps) {
+  return (
+    <Label
+      forId={id}
+      required={required}
+      label={label}
+      className={{
+        root: twMerge(
+          'my-auto mr-2 min-w-max font-bold',
+          labelType === 'small' && '-mb-0.5 mt-1 leading-6 text-gray-600',
+          className?.label
+        ),
+        tooltip: twMerge('text-sm font-normal', className?.tooltip),
+        tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
+      }}
+      tooltip={tooltip}
+      showTooltipSymbol={typeof tooltip !== 'undefined'}
+    />
+  )
+}
+
+export default FormLabel
diff --git a/packages/design-system/src/forms/NewFormikColorPicker.tsx b/packages/design-system/src/forms/NewFormikColorPicker.tsx
@@ -5,8 +5,8 @@ import { useField } from 'formik'
 import React, { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 import ColorPicker, { ColorPickerClassName } from '../ColorPicker'
+import FormLabel from '../FormLabel'
 import { Tooltip } from '../Tooltip'
-import { Label } from './Label'
 
 export interface FormikColorPickerProps {
   name: string
@@ -48,7 +48,7 @@ export function FormikColorPicker({
   labelType = 'small',
   validateForm,
   tooltip,
-  required,
+  required = false,
   disabled,
   triggerIcon,
   presetColors,
@@ -77,21 +77,12 @@ export function FormikColorPicker({
       )}
     >
       {label && (
-        <Label
+        <FormLabel
           required={required}
           label={label}
-          className={{
-            root: twMerge(
-              'my-auto mr-2 min-w-max font-bold',
-              labelType === 'small' &&
-                '-mb-1 mt-1 text-sm leading-6 text-gray-600',
-              className?.label
-            ),
-            tooltip: twMerge('text-sm font-normal', className?.tooltip),
-            tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
-          }}
+          labelType={labelType}
           tooltip={tooltip}
-          showTooltipSymbol={typeof tooltip !== 'undefined'}
+          className={className}
         />
       )}
       <div className="flex flex-row items-center gap-2">

diff --git a/packages/design-system/src/forms/NewFormikDateField.tsx b/packages/design-system/src/forms/NewFormikDateField.tsx
@@ -3,8 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useField } from 'formik'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
+import FormLabel from '../FormLabel'
 import { Tooltip } from '../Tooltip'
-import Label from './Label'
 
 export interface NewFormikDateFieldProps {
   id?: string
@@ -77,21 +77,13 @@ export function NewFormikDateField({
         )}
       >
         {label && (
-          <Label
+          <FormLabel
+            id={id}
             required={required}
             label={label}
-            className={{
-              root: twMerge(
-                'my-auto mr-2 min-w-max font-bold',
-                labelType === 'small' &&
-                  '-mb-1 mt-1 text-sm leading-6 text-gray-600',
-                className?.label
-              ),
-              tooltip: twMerge('text-sm font-normal', className?.tooltip),
-              tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
-            }}
+            labelType={labelType}
             tooltip={tooltip}
-            showTooltipSymbol={typeof tooltip !== 'undefined'}
+            className={className}
           />
         )}
         <div className="flex flex-row items-center gap-2">

diff --git a/packages/design-system/src/forms/NumberField.tsx b/packages/design-system/src/forms/NumberField.tsx
@@ -2,8 +2,8 @@ import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
+import FormLabel from '../FormLabel'
 import { Tooltip } from '../Tooltip'
-import Label from './Label'
 
 export interface NumberFieldClassName {
   field?: string
@@ -65,13 +65,13 @@ export function NumberField({
   value,
   onChange,
   label,
-  labelType,
+  labelType = 'small',
   placeholder,
   precision,
   min,
   max,
   tooltip,
-  required,
+  required = false,
   hideError,
   error,
   isTouched,
@@ -97,22 +97,13 @@ export function NumberField({
       )}
     >
       {label && (
-        <Label
-          forId={id}
+        <FormLabel
+          id={id}
           required={required}
           label={label}
-          className={{
-            root: twMerge(
-              'my-auto mr-2 min-w-max font-bold',
-              labelType === 'small' &&
-                '-mb-1 mt-1 text-sm leading-6 text-gray-600',
-              className?.label
-            ),
-            tooltip: twMerge('text-sm font-normal', className?.tooltip),
-            tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
-          }}
+          labelType={labelType}
           tooltip={tooltip}
-          showTooltipSymbol={typeof tooltip !== 'undefined'}
+          className={className}
         />
       )}
 

diff --git a/packages/design-system/src/forms/SelectField.tsx b/packages/design-system/src/forms/SelectField.tsx
@@ -2,9 +2,9 @@ import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
+import FormLabel from '../FormLabel'
 import Select, { SelectClassName, SelectGroup, SelectItem } from '../Select'
 import { Tooltip } from '../Tooltip'
-import Label from './Label'
 
 interface SelectFieldProps {
   id?: string
@@ -98,22 +98,13 @@ export function SelectField({
         )}
       >
         {label && (
-          <Label
-            forId={id}
+          <FormLabel
+            id={id}
             required={required}
             label={label}
-            className={{
-              root: twMerge(
-                'my-auto mr-2 min-w-max font-bold',
-                labelType === 'small' &&
-                  '-mb-1 mt-1 text-sm leading-6 text-gray-600',
-                className?.label
-              ),
-              tooltip: twMerge('text-sm font-normal', className?.tooltip),
-              tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
-            }}
+            labelType={labelType}
             tooltip={tooltip}
-            showTooltipSymbol={typeof tooltip !== 'undefined'}
+            className={className}
           />
         )}
 

diff --git a/packages/design-system/src/forms/TextField.tsx b/packages/design-system/src/forms/TextField.tsx
@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { FieldInputProps } from 'formik'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
+import FormLabel from '../FormLabel'
 import { Tooltip } from '../Tooltip'
-import Label from './Label'
 
 export interface TextFieldClassName {
   field?: string
@@ -88,10 +88,10 @@ export function TextField({
   value,
   onChange,
   label,
-  labelType = 'large',
+  labelType = 'small',
   placeholder,
   tooltip,
-  required,
+  required = false,
   isTouched,
   hideError,
   error,
@@ -112,22 +112,13 @@ export function TextField({
       )}
     >
       {label && (
-        <Label
-          forId={id}
+        <FormLabel
+          id={id}
           required={required}
           label={label}
-          className={{
-            root: twMerge(
-              'my-auto mr-2 min-w-max font-bold',
-              labelType === 'small' &&
-                '-mb-1 mt-1 text-sm leading-6 text-gray-600',
-              className?.label
-            ),
-            tooltip: twMerge('text-sm font-normal', className?.tooltip),
-            tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
-          }}
+          labelType={labelType}
           tooltip={tooltip}
-          showTooltipSymbol={typeof tooltip !== 'undefined'}
+          className={className}
         />
       )}
 

diff --git a/packages/design-system/src/forms/TextareaField.tsx b/packages/design-system/src/forms/TextareaField.tsx
@@ -3,8 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { FieldInputProps } from 'formik'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
+import FormLabel from '../FormLabel'
 import { Tooltip } from '../Tooltip'
-import Label from './Label'
 
 interface TextareaFieldProps {
   id?: string
@@ -82,13 +82,13 @@ export function TextareaField({
   value,
   onChange,
   label,
-  labelType = 'large',
+  labelType = 'small',
   placeholder,
   tooltip,
   maxLength,
   maxLengthUnit,
   hideMaxLength = false,
-  required,
+  required = false,
   isTouched,
   hideError,
   error,
@@ -106,22 +106,13 @@ export function TextareaField({
         )}
       >
         {label && (
-          <Label
-            forId={id}
+          <FormLabel
+            id={id}
             required={required}
             label={label}
-            className={{
-              root: twMerge(
-                'mr-2 min-w-max font-bold',
-                labelType === 'small' &&
-                  '-mb-1 mt-1 text-sm leading-6 text-gray-600',
-                className?.label
-              ),
-              tooltip: twMerge('text-sm font-normal', className?.tooltip),
-              tooltipSymbol: twMerge(labelType === 'small' && 'h-2 w-2'),
-            }}
+            labelType={labelType}
             tooltip={tooltip}
-            showTooltipSymbol={typeof tooltip !== 'undefined'}
+            className={className}
           />
         )}
 

diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
@@ -9,6 +9,7 @@ export * from './CycleCountdown'
 export * from './CycleProgress'
 export * from './DateChanger'
 export * from './Dropdown'
+export * from './FormLabel'
 export * from './Header'
 export * from './Modal'
 export * from './Navigation'