fix: improve selection:

e-krebs · Oct 15, 2023 · 12edbaa · 12edbaa
1 parent 43fee6c
commit 12edbaa
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 16 deletions.
diff --git a/TODO.md b/TODO.md
@@ -13,6 +13,7 @@
   - [ ] one for ladle custom UI
 - [ ] update README by documenting how to theme
   - [ ] document group/??? on newly themed components when/if relevant (waiting for `tailwindcss-react-aria-components` update)
+- [ ] `Select`: don't rely on `errorMessage &&` but use custom `data-...` + `group-...` instead
 
 ## Tips
 

diff --git a/src/Button/index.tsx b/src/Button/index.tsx
@@ -38,12 +38,12 @@ export const Button: FC<ButtonProps> = ({
       variant === 'primary' &&
         `font-medium
         text-th-reversed border-primary ring-primary
-        bg-primary hover:enabled:bg-primary/95`,
+        bg-primary hover:enabled:bg-primary/95 selection:bg-gray-900 selection:dark:bg-gray-50`,
       variant === 'destructive' &&
         `font-medium
         text-destructive
         border-destructive
-        bg-th hover:enabled:bg-destructive/5
+        bg-th hover:enabled:bg-destructive/5 selection:bg-error
         ring-destructive`,
       className,
     )}

diff --git a/src/Inputs/NumberInput.tsx b/src/Inputs/NumberInput.tsx
@@ -33,16 +33,18 @@ export const NumberInput = ({
     {...numberFieldProps}
     isInvalid={numberFieldProps.isInvalid || !!errorMessage}
     className={twMerge(
-      'flex',
+      'flex group',
       flow === 'row' ? 'flex-row space-x-2' : 'flex-col w-fit',
       wrapperClassName,
     )}
   >
-    <Label className={twMerge('leading-th', labelClassName)}>{label}</Label>
+    <Label className={twMerge('leading-th group-invalid:selection:bg-error', labelClassName)}>
+      {label}
+    </Label>
     <Group
       className={twMerge(
         `flex group leading-th-input h-input
-          bg-th-light
+          bg-th-light invalid:selection:bg-error
           disabled:cursor-not-allowed disabled:opacity-disabled
           border-th-light
           invalid:border-error
@@ -102,12 +104,12 @@ export const NumberInput = ({
       </Button>
     </Group>
     {description && (
-      <Text slot="description" className="leading-th">
+      <Text slot="description" className="leading-th group-invalid:selection:bg-error">
         {description}
       </Text>
     )}
     {errorMessage && (
-      <Text slot="errorMessage" className="leading-th text-error">
+      <Text slot="errorMessage" className="leading-th text-error group-invalid:selection:bg-error">
         {errorMessage}
       </Text>
     )}

diff --git a/src/Inputs/TextInput.tsx b/src/Inputs/TextInput.tsx
@@ -33,12 +33,14 @@ export const TextInput: FC<TextInputProps> = ({
     {...textFieldProps}
     isInvalid={textFieldProps.isInvalid || !!errorMessage}
     className={twMerge(
-      'flex',
+      'group flex',
       flow === 'row' ? 'flex-row space-x-2' : 'flex-col w-fit',
       wrapperClassName,
     )}
   >
-    <Label className={twMerge('leading-th', labelClassName)}>{label}</Label>
+    <Label className={twMerge('leading-th group-invalid:selection:bg-error', labelClassName)}>
+      {label}
+    </Label>
     <Input
       className={twMerge(
         inputClassName,
@@ -53,7 +55,7 @@ export const TextInput: FC<TextInputProps> = ({
         ring-primary
         invalid:ring-error
         caret-primary
-        invalid:caret-error`,
+        invalid:caret-error invalid:selection:bg-error`,
         border !== 'bottom' ? 'rounded-md' : 'rounded-none', // rounded-none is necessary for iPad
         border === 'bottom' &&
           `border-b focus:border-b-transparent focus:dark:border-b-transparent
@@ -62,12 +64,12 @@ export const TextInput: FC<TextInputProps> = ({
       )}
     />
     {description && (
-      <Text slot="description" className="leading-th">
+      <Text slot="description" className="leading-th group-invalid:bg-error">
         {description}
       </Text>
     )}
     {errorMessage && (
-      <Text slot="errorMessage" className="leading-th text-error">
+      <Text slot="errorMessage" className="leading-th text-error selection:bg-error">
         {errorMessage}
       </Text>
     )}

diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
@@ -48,7 +48,9 @@ export const Select = <T extends Key>({
     {...props}
     className={twMerge('flex', flow === 'row' ? 'flex-row space-x-2' : 'w-fit flex-col', flowClassName)}
   >
-    <Label className={twMerge('leading-th', labelClassName)}>{label}</Label>
+    <Label className={twMerge('leading-th', errorMessage && 'selection:bg-error', labelClassName)}>
+      {label}
+    </Label>
     <Button
       className={twMerge(
         `group flex items-center leading-th-input
@@ -64,6 +66,7 @@ export const Select = <T extends Key>({
         border === 'bottom' && `border-b focus:border-b-transparent focus:dark:border-b-transparent`,
         border === 'rounded' && 'border',
       )}
+      data-error={Boolean(errorMessage)}
     >
       <SelectValue
         className={twMerge(
@@ -75,6 +78,7 @@ export const Select = <T extends Key>({
             after:group-focus:bg-primary
             before:absolute before:-top-px before:-right-px before:w-px before:h-px
             before:group-focus:bg-primary`,
+          errorMessage && 'selection:bg-error',
         )}
       />
       <ChevronDown
@@ -88,12 +92,15 @@ export const Select = <T extends Key>({
       />
     </Button>
     {description && (
-      <Text slot="description" className="leading-th">
+      <Text slot="description" className={twMerge('leading-th', errorMessage && 'selection:bg-error')}>
         {description}
       </Text>
     )}
     {errorMessage && (
-      <Text slot="errorMessage" className="leading-th text-destructive">
+      <Text
+        slot="errorMessage"
+        className={twMerge('leading-th text-destructive', errorMessage && 'selection:bg-error')}
+      >
         {errorMessage}
       </Text>
     )}

diff --git a/src/tailwind.css b/src/tailwind.css
@@ -26,6 +26,10 @@
   .bg-primary\/95 {
     @apply bg-primary-500/95 dark:bg-primary-400/95;
   }
+  .bg-destructive,
+  .bg-error {
+    @apply bg-red-600 dark:bg-red-500;
+  }
   .bg-destructive\/5 {
     @apply bg-red-600/5 dark:bg-red-500/5;
   }
@@ -104,6 +108,6 @@
   }
   .caret-destructive,
   .caret-error {
-    @apply caret-primary-600 dark:caret-primary-500;
+    @apply caret-red-600 dark:caret-red-500;
   }
 }