Merge pull request #1888 from gluestack/fix/nativewind-input

fix: input component nativewind
gluestack · Mar 11, 2024 · 7c36bc5 · 7c36bc5
2 parents dfa0dc7 + b73e151
commit 7c36bc5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 47 deletions.
diff --git a/example/storybook-nativewind/src/components/Input/Input.tsx b/example/storybook-nativewind/src/components/Input/Input.tsx
@@ -1,18 +1,6 @@
 import React from 'react';
-import {
-  Button,
-  ButtonText,
-  Box,
-  Heading,
-  Icon,
-  FormControl,
-} from '@gluestack-ui/themed';
 import { Input, InputField, InputIcon, InputSlot } from '@/components/ui/input';
-import { Center } from '@/components/ui/center';
-import { VStack } from '@/components/ui/vstack';
-import { Text } from '@/components/ui/text';
-import { EyeIcon, EyeOffIcon, SearchIcon } from 'lucide-react-native';
-import { useState } from 'react';
+import { SearchIcon } from '@/components/ui/icon';
 
 const InputBasic = ({ ...props }: any) => {
   const [value, setValue] = React.useState('');
@@ -37,22 +25,3 @@ InputBasic.description =
   'This is a basic Input component example. Inputs are used to capture data from users.';
 
 export default InputBasic;
-
-export {
-  Input,
-  InputField,
-  InputIcon,
-  Center,
-  Button,
-  ButtonText,
-  Box,
-  VStack,
-  Text,
-  Heading,
-  useState,
-  Icon,
-  EyeIcon,
-  EyeOffIcon,
-  FormControl,
-  InputSlot,
-};
diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -27,9 +27,9 @@ import {
   Box,
   FormControl,
   Heading,
-  Icon,
+  Icon, SearchIcon
 } from '../../core-components/nativewind';
-import { SearchIcon, EyeIcon, EyeOffIcon } from '../../core-components/nativewind';
+import { EyeIcon, EyeOffIcon } from 'lucide-react-native';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -426,7 +426,7 @@ We have outlined the various features that ensure the Input component is accessi
 
 ### Props
 
-Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
+Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below.
 
 #### Input
 
@@ -516,14 +516,14 @@ The Input component integrates with an icon and a button, providing users with a
           };
           return (
             <FormControl
-              className='p-4 border-1 rounded-lg ring-borderLight300 dark:border-1 dark:rounded-lg dark:ring-borderDark800'
+              className='p-4 border rounded-lg border-outline-300'
             >
               <VStack space='xl'>
-                <Heading className='color-text-900 leading-3'>
+                <Heading className='text-typography-900 leading-3'>
                   Login
                 </Heading>
                 <VStack space='xs'>
-                  <Text className='color-text-500 leading-1'>
+                  <Text className='text-typography-500 leading-1'>
                     Email
                   </Text>
                   <Input>
@@ -533,7 +533,7 @@ The Input component integrates with an icon and a button, providing users with a
                   </Input>
                 </VStack>
                 <VStack space='xs'>
-                  <Text className='color-text-500 leading-1'>
+                  <Text className='text-typography-500 leading-1'>
                     Password
                   </Text>
                   <Input className='text-center'>
@@ -542,7 +542,7 @@ The Input component integrates with an icon and a button, providing users with a
                     />
                     <InputSlot className='pr-3' onPress={handleState}>
                       {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */}
-                      <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} className='color-darkBlue-500' />
+                      <InputIcon as={showPassword ? EyeIcon : EyeOffIcon} className='text-darkBlue-500' />
                     </InputSlot>
                   </Input>
                 </VStack>
@@ -552,7 +552,7 @@ The Input component integrates with an icon and a button, providing users with a
                     setShowModal(false);
                   }}
                 >
-                  <ButtonText className='color-white'>
+                  <ButtonText className='text-typography-0'>
                     Save
                   </ButtonText>
                 </Button>

diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -23,7 +23,7 @@ const UIInput = createInput({
 });
 
 const inputStyle = tva({
-  base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-border-400 data-[focus=true]:border-primary-700 focus:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300',
+  base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300',
 
   variants: {
     size: {
@@ -35,25 +35,25 @@ const inputStyle = tva({
 
     variant: {
       underlined:
-        'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
+        'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
 
       outline:
-        'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
+        'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
 
       rounded:
-        'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:focus:border-error-700 data-[invalid=true]:focus:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 focus:web:ring-1 focus:web:ring-inset focus:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:focus:hover:web:ring-1 data-[invalid=true]:focus:hover:web:ring-inset data-[invalid=true]:focus:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
+        'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
     },
   },
 });
 
 const inputIconStyle = tva({
-  base: 'text-typography-400 fill-none',
+  base: 'text-typography-400',
   parentVariants: {
     size: {
       '2xs': 'h-3 w-3',
       'xs': 'h-3.5 w-3.5',
       'sm': 'h-4 w-4',
-      'md': 'h-4.5 w-4.5',
+      'md': 'h-[18px] w-[18px]',
       'lg': 'h-5 w-5',
       'xl': 'h-6 w-6',
     },