Merge pull request #92 from helpwave/version-0.1.29

chore: update input styles and change focus behavior

Author: DasProffi

CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.29] - 2025-10-02
+
+### Added
+- HTML elements now use `color-scheme: dark` when in dark mode
+- Add invalid state styling to Selects
+- Add a placeholder color called `placeholder`
+- Add a hook for localized validation translation `useTranslatedValidators`
+
+### Changed
+- `disabled` and `required` are now optional in `FormElementWrapper`
+- changed focus to draw an outline instead of a ring
+
+### Removed
+- removed several typography entries that only change the `font-weight` (e.g. `typography-label-md-bold` -> `typography-label-md font-bold`)
+
+### Fix
+- Fix disabled color for `Select`
+
 ## [0.1.28] - 2025-10-02
 
 ### Added

package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "files": [
     "dist"
   ],

src/components/date/DatePicker.tsx

@@ -57,7 +57,7 @@ export const DatePicker = ({
       <div className="flex-row-2 items-center justify-between h-7">
         <TextButton
           className={clsx('flex-row-1 items-center cursor-pointer select-none', {
-            'text-disabled-text': displayMode !== 'day',
+            'text-disabled': displayMode !== 'day',
           })}
           onClick={() => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day')}
         >

src/components/date/DayPicker.tsx

@@ -60,7 +60,7 @@ export const DayPicker = ({
                     'text-button-solid-neutral-text bg-button-solid-neutral-background': !isSelected && isSameMonth && isDayValid,
                     'text-button-solid-primary-text bg-button-solid-primary-background': isSelected && isDayValid,
                     'hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text': isDayValid,
-                    'text-disabled-text bg-disabled-background cursor-not-allowed': !isDayValid,
+                    'text-disabled bg-disabled-background cursor-not-allowed': !isDayValid,
                     'border-secondary': isToday && markToday,
                     'border-transparent': !isToday || !markToday,
                   }

src/components/dialog/Dialog.tsx

@@ -96,7 +96,7 @@ export const Dialog = ({
         className
       )}
     >
-      <div className="typography-title-lg-semibold mr-8">
+      <div className="typography-title-lg mr-8">
         {titleElement}
       </div>
       <div className="text-description">

src/components/form/FormElementWrapper.tsx

@@ -1,11 +1,17 @@
 import type { HTMLAttributes, ReactNode } from 'react'
+import { useEffect } from 'react'
+import { useState } from 'react'
 import { useId } from 'react'
 import { clsx } from 'clsx'
 import type { BagFunction } from '@/src/utils/bagFunctions'
 import type { LabelProps } from '@/src/components/user-action/Label'
 import { Label } from '@/src/components/user-action/Label'
 
+type ErrorShowBehaviour = 'always' | 'whenTouched'
+
 type FormElementWrapperBag = {
+  'touched': boolean,
+  'onTouched': (isTouched?: boolean) => void,
   'invalid': boolean,
   'required': boolean,
   'disabled': boolean,
@@ -17,10 +23,12 @@ type FormElementWrapperBag = {
 export type FormElementWrapperProps = {
   children: BagFunction<FormElementWrapperBag>,
   id?: string,
-  required: boolean,
-  disabled: boolean,
+  required?: boolean,
+  disabled?: boolean,
+  isTouched?: boolean,
   label?: ReactNode,
   labelProps?: Omit<LabelProps, 'children'>,
+  errorShowBehaviour?: ErrorShowBehaviour,
   error?: ReactNode,
   errorProps?: Omit<HTMLAttributes<HTMLParagraphElement>, 'children'>,
   description?: ReactNode,
@@ -33,49 +41,60 @@ export const FormElementWrapper = ({
                                      id,
                                      required = false,
                                      disabled = false,
+                                     isTouched: initialIsTouched = false,
                                      label,
                                      labelProps,
+                                     errorShowBehaviour = 'whenTouched',
                                      error,
                                      errorProps,
                                      description,
                                      descriptionProps,
                                      containerClassName,
                                    }: FormElementWrapperProps) => {
+  const [touched, setTouched] = useState(initialIsTouched)
   const generatedId = useId()
   const usedId = id ?? generatedId
 
+  useEffect(() => {
+    setTouched(initialIsTouched)
+  }, [initialIsTouched])
+
   const describedBy: string = [
     description ? `${usedId}-description` : undefined,
     error ? `${usedId}-error` : undefined,
   ].filter(Boolean).join(' ')
 
   const labeledBy = label ? `${usedId}-label` : undefined
 
+  const isShowingError = errorShowBehaviour === 'always' || (touched)
+
   const bag: FormElementWrapperBag = {
+    'touched': touched,
+    'onTouched': (isTouched) => setTouched(isTouched ?? true),
     'disabled': disabled,
-    'invalid': !!error,
+    'invalid': !!error && isShowingError,
     'required': required,
     'id': usedId,
     'aria-describedby': describedBy,
     'aria-labelby': labeledBy
   }
 
   return (
-    <div className={clsx('flex flex-col gap-y-1', containerClassName)}>
+    <div className={clsx('relative flex flex-col gap-y-1', containerClassName)}>
       {label && (
-        <Label htmlFor={usedId} className={clsx('typography-label-md', labelProps?.className)}>
+        <Label htmlFor={usedId} size="lg" className={clsx('flex-row-1 items-start', labelProps?.className)}>
           {label}
-          {required && <span role="none" className="text-primary font-bold">*</span>}
+          {required && <div role="none" className="bg-primary w-2 h-2 rounded-full"/>}
         </Label>
       )}
       {description && (
-        <p {...descriptionProps} className={clsx('text-description text-xs', descriptionProps?.className)}>
+        <p {...descriptionProps} className={clsx('text-description text-sm', descriptionProps?.className)}>
           {description}
         </p>
       )}
       {children(bag)}
-      {error && (
-        <p {...errorProps} role="alert" className={clsx('text-negative text-sm font-medium', errorProps)}>
+      {error && isShowingError && (
+        <p {...errorProps} role="alert" className={clsx('absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium', errorProps)}>
           {error}
         </p>
       )}

src/components/layout/FAQSection.tsx

@@ -38,7 +38,7 @@ export const FAQSection = ({
           <ExpandableUncontrolled
             key={id}
             {...restProps}
-            label={(<h3 id={id} className="typography-title-md-semibold">{title}</h3>)}
+            label={(<span id={id} className="typography-title-md">{title}</span>)}
             clickOnlyOnHeader={false}
             icon={(expanded) => (<ExpansionIcon isExpanded={expanded} className="text-primary"/>)}
             className={clsx('rounded-xl', expandableClassName)}

src/components/layout/TextImage.tsx

@@ -63,7 +63,7 @@ export const TextImage = ({
           </div>
         )}
         <div className="flex-col-1 overflow-hidden">
-          <span className="typography-title-lg-semibold">{title}</span>
+          <span className="typography-title-lg">{title}</span>
           <span className="text-ellipsis overflow-hidden">{description}</span>
         </div>
         {onShowMoreClicked && (

src/components/table/FillerRowElement.tsx

@@ -7,7 +7,7 @@ export const FillerRowElement = ({
                                    className
                                  }: FillerRowElementProps) => {
   return (
-    <div className={clsx('flex flex-row items-center w-1/2 h-4 text-disabled-text font-bold', className)}>
+    <div className={clsx('flex flex-row items-center w-1/2 h-4 text-disabled font-bold', className)}>
       -
     </div>
   )

src/components/user-action/Button.tsx

@@ -35,9 +35,9 @@ export type IconButtonColor = typeof IconButtonUtil.icon[number]
 /**
  * The different sizes for a button
  */
-type ButtonSizes = 'small' | 'medium' | 'large'
+type ButtonSizes = 'small' | 'medium' | 'large' | 'none'
 
-type IconButtonSize = 'tiny' | 'small' | 'medium' | 'large'
+type IconButtonSize = 'tiny' | 'small' | 'medium' | 'large' | 'none'
 
 /**
  * The shard properties between all button types
@@ -50,12 +50,14 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 }
 
 const paddingMapping: Record<ButtonSizes, string> = {
+  none: '',
   small: 'btn-sm',
   medium: 'btn-md',
   large: 'btn-lg'
 }
 
 const iconPaddingMapping: Record<IconButtonSize, string> = {
+  none: '',
   tiny: 'icon-btn-xs',
   small: 'icon-btn-sm',
   medium: 'icon-btn-md',
@@ -137,7 +139,7 @@ export const SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(funct
         'group font-semibold',
         colorClasses,
         'not-disabled:hover:brightness-90',
-        'disabled:text-disabled-text disabled:bg-disabled-background',
+        'disabled:text-disabled disabled:bg-disabled-background',
         ButtonUtil.paddingMapping[size],
         className
       )}
@@ -195,7 +197,7 @@ export const OutlineButton = ({
         'group font-semibold bg-transparent border-2 ',
         'not-disabled:hover:brightness-80',
         colorClasses,
-        'disabled:text-disabled-text disabled:border-disabled-outline',
+        'disabled:text-disabled disabled:border-disabled-outline',
         ButtonUtil.paddingMapping[size],
         className
       )}
@@ -241,9 +243,9 @@ export const TextButton = ({
                       ...restProps
                     }: TextButtonProps) => {
   const colorClasses = {
-    primary: 'not-disabled:bg-transparent not-disabled:text-button-text-primary-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-primary-text',
-    negative: 'not-disabled:bg-transparent not-disabled:text-button-text-negative-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-negative-text',
-    neutral: 'not-disabled:bg-transparent not-disabled:text-button-text-neutral-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-neutral-text',
+    primary: 'not-disabled:bg-transparent not-disabled:text-button-text-primary-text not-disabled:focus-visible:outline-button-text-primary-text',
+    negative: 'not-disabled:bg-transparent not-disabled:text-button-text-negative-text not-disabled:focus-visible:outline-button-text-negative-text',
+    neutral: 'not-disabled:bg-transparent not-disabled:text-button-text-neutral-text not-disabled:focus-visible:outline-button-text-neutral-text',
   }[color]
 
   const backgroundColor = {
@@ -263,7 +265,7 @@ export const TextButton = ({
       onClick={onClick}
       className={clsx(
         'group font-semibold',
-        'disabled:text-disabled-text',
+        'disabled:text-disabled',
         colorClasses,
         {
           [backgroundColor]: coloredHoverBackground,
@@ -328,7 +330,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       className={clsx(
         colorClasses,
         'not-disabled:hover:brightness-90',
-        'disabled:text-disabled-text',
+        'disabled:text-disabled',
         {
           'disabled:bg-disabled-background': color !== 'transparent',
           'disabled:opacity-70': color === 'transparent',