fix(input): input and addon hover styles issue

adevinta · Jul 13, 2023 · 854b0dc · 854b0dc
1 parent 2e46775
commit 854b0dc
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 22 deletions.
diff --git a/...ges/components/input/src/Input.styles.tsx → ...ages/components/input/src/Input.styles.ts b/...ges/components/input/src/Input.styles.tsx → ...ages/components/input/src/Input.styles.ts
diff --git a/packages/components/input/src/InputAddon.styles.ts b/packages/components/input/src/InputAddon.styles.ts
@@ -7,8 +7,8 @@ export const inputAddonStyles = cva(
     'ring-1 ring-inset',
     'min-w-fit',
     'overflow-hidden',
-    '!focus-visible:ring-0',
-    'focus-within:z-raised',
+    'focus-visible:relative',
+    'focus-visible:z-raised',
   ],
   {
     variants: {

diff --git a/packages/components/input/src/InputAddon.tsx b/packages/components/input/src/InputAddon.tsx
@@ -1,19 +1,16 @@
 import { Slot } from '@spark-ui/slot'
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
 
 import { inputAddonStyles, InputAddonStylesProps } from './InputAddon.styles'
 import { useInputGroup } from './InputGroupContext'
 
 export interface InputAddonProps
   extends ComponentPropsWithoutRef<'div'>,
-    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {
-  asChild?: boolean
-}
+    Omit<InputAddonStylesProps, 'intent' | 'disabled'> {}
 
-export const InputAddon = forwardRef<HTMLDivElement, PropsWithChildren<InputAddonProps>>(
+export const InputAddon = forwardRef<HTMLDivElement, InputAddonProps>(
   ({ asChild = false, className, children, ...others }, ref) => {
     const { state, disabled } = useInputGroup()
-
     const Component = asChild ? Slot : 'div'
 
     return (

diff --git a/packages/components/input/src/InputGroup.styles.ts b/packages/components/input/src/InputGroup.styles.ts
@@ -0,0 +1,11 @@
+import { cva, VariantProps } from 'class-variance-authority'
+
+export const inputGroupStyles = cva(['relative inline-flex w-full'], {
+  variants: {
+    disabled: {
+      true: 'cursor-not-allowed opacity-dim-3',
+    },
+  },
+})
+
+export type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>
diff --git a/packages/components/input/src/InputGroup.tsx b/packages/components/input/src/InputGroup.tsx
@@ -1,5 +1,4 @@
 import { useFormFieldControl } from '@spark-ui/form-field'
-import { cva } from 'class-variance-authority'
 import {
   Children,
   ComponentPropsWithoutRef,
@@ -11,26 +10,23 @@ import {
   useMemo,
 } from 'react'
 
+import { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'
 import { InputGroupContext } from './InputGroupContext'
 import { InputStateIndicator } from './InputStateIndicator'
-export interface InputGroupProps extends ComponentPropsWithoutRef<'div'> {
+
+export interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {
   state?: 'error' | 'alert' | 'success'
-  disabled?: boolean
 }
 
-const styles = cva(['relative inline-flex w-full'], {
-  variants: {
-    disabled: {
-      true: 'cursor-not-allowed opacity-dim-3',
-    },
-  },
-})
-
 export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGroupProps>>(
-  ({ className, children: childrenProp, state: stateProp, disabled, ...others }, ref) => {
+  (
+    { className, children: childrenProp, state: stateProp, disabled: disabledProp, ...others },
+    ref
+  ) => {
     const field = useFormFieldControl()
     const children = Children.toArray(childrenProp).filter(isValidElement)
     const state = field.state ?? stateProp
+    const disabled = !!disabledProp
 
     const getDisplayName = (element?: ReactElement) => {
       return element ? (element.type as FC).displayName : ''
@@ -55,7 +51,7 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
     const value = useMemo(() => {
       return {
         state,
-        disabled: !!disabled,
+        disabled,
         hasLeadingIcon,
         hasTrailingIcon,
         hasLeadingAddon,
@@ -65,7 +61,7 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
 
     return (
       <InputGroupContext.Provider value={value}>
-        <div ref={ref} className={styles({ disabled, className })} {...others}>
+        <div ref={ref} className={inputGroupStyles({ disabled, className })} {...others}>
           {hasLeadingAddon && leadingAddon}
 
           <div className="relative w-full">