chore: made input border offset optional (#38)

daisyui · Mar 15, 2022 · e67ae52 · e67ae52
1 parent c5d8ad0
commit e67ae52
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -7,6 +7,7 @@ import { IComponentBaseProps, ComponentColor, ComponentSize } from '../types'
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> &
   IComponentBaseProps & {
     bordered?: boolean
+    borderOffset?: boolean
     size?: ComponentSize
     color?: ComponentColor
   }
@@ -16,7 +17,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     {
       value,
       placeholder,
-      bordered,
+      bordered = true,
+      borderOffset,
       size,
       color,
       dataTheme,
@@ -31,6 +33,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       clsx({
         [`input-${size}`]: size,
         [`input-${color}`]: color,
+        [`focus:outline-offset-0`]: !borderOffset,
         'input-bordered': bordered,
       })
     )

diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
@@ -24,6 +24,7 @@ export type SelectProps<T> = Omit<
     size?: ComponentSize
     color?: ComponentColor
     bordered?: boolean
+    borderOffset?: boolean
   }
 
 const Select = <T extends string | number | undefined>({
@@ -35,6 +36,7 @@ const Select = <T extends string | number | undefined>({
   size,
   color,
   bordered = true,
+  borderOffset,
   dataTheme,
   className,
   ...props
@@ -45,6 +47,7 @@ const Select = <T extends string | number | undefined>({
     clsx({
       [`select-${size}`]: size,
       [`select-${color}`]: color,
+      [`focus:outline-offset-0`]: !borderOffset,
       'select-bordered': bordered,
     })
   )

diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
@@ -10,10 +10,12 @@ export type TextareaProps =
   & {
     color?: ComponentColor
     bordered?: boolean
+    borderOffset?: boolean
   }
 
 const Textarea = ({
-  bordered,
+  bordered = true,
+  borderOffset,
   color,
   dataTheme,
   className,
@@ -24,6 +26,7 @@ const Textarea = ({
     className,
     clsx({
       [`textarea-${color}`]: color,
+      [`focus:outline-offset-0`]: !borderOffset,
       'textarea-bordered': bordered,
     })
   )