From 008a525100f9fdc82ad185fbbd0825a30627bd07 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 4 Mar 2024 17:18:43 +0530 Subject: [PATCH 1/2] fix: input component nativewind --- .../components-example/nativewind/Icon/index.tsx | 2 +- .../components-example/nativewind/Input/index.tsx | 6 +++--- .../src/components/Input/Input.tsx | 15 ++++++--------- .../src/components/Input/index.nw.stories.mdx | 15 ++++++++------- 4 files changed, 18 insertions(+), 20 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx index dce8e1c00f..aef1528a1b 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Icon/index.tsx @@ -8,7 +8,7 @@ export const UIIcon = createIcon({ }); const iconStyle = tva({ - base: 'text-typography-0 fill-none', + base: 'text-typography-900 fill-none', variants: { size: { '2xs': 'h-3 w-3', diff --git a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx index ab20694599..a0ce780e1a 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx @@ -47,13 +47,13 @@ const inputStyle = tva({ }); 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', }, @@ -65,7 +65,7 @@ const inputSlotStyle = tva({ }); const inputFieldStyle = tva({ - base: 'flex-1 text-text-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500', + base: 'flex-1 text-typography-900 web:cursor-text web:data-[disabled=true]:cursor-not-allowed py-auto px-3 placeholder:text-typography-500', parentVariants: { variant: { diff --git a/example/storybook-nativewind/src/components/Input/Input.tsx b/example/storybook-nativewind/src/components/Input/Input.tsx index 743be8c2a4..09cb507e8c 100644 --- a/example/storybook-nativewind/src/components/Input/Input.tsx +++ b/example/storybook-nativewind/src/components/Input/Input.tsx @@ -1,17 +1,14 @@ 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 { Button, ButtonText } from '@/components/ui/Button'; 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 { Icon, SearchIcon } from '@/components/ui/Icon'; +import { Box } from '@/components/ui/Box'; +import { Heading } from '@/components/ui/Heading'; +import { FormControl } from '@/components/ui/FormControl'; +import { EyeIcon, EyeOffIcon } from 'lucide-react-native'; import { useState } from 'react'; const InputBasic = ({ ...props }: any) => { diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx index 3a18d3ef87..ef2f98d0d6 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -28,8 +28,9 @@ import { FormControl, Heading, Icon, + SearchIcon, } from '../../components-example/nativewind'; -import { SearchIcon, EyeIcon, EyeOffIcon } from '../../components-example/nativewind'; +import { EyeIcon, EyeOffIcon } from 'lucide-react-native'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -512,14 +513,14 @@ The Input component integrates with an icon and a button, providing users with a }; return ( - + Login - + Email @@ -529,7 +530,7 @@ The Input component integrates with an icon and a button, providing users with a - + Password @@ -538,7 +539,7 @@ The Input component integrates with an icon and a button, providing users with a /> {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */} - + @@ -548,7 +549,7 @@ The Input component integrates with an icon and a button, providing users with a setShowModal(false); }} > - + Save From d0189384214716911ff1e76e58e89c44bed2b4b6 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 5 Mar 2024 11:55:43 +0530 Subject: [PATCH 2/2] fix: input focus --- .../src/components-example/nativewind/Input/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx index a0ce780e1a..8f15850a52 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx +++ b/example/storybook-nativewind/src/components-example/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,13 +35,13 @@ 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', }, }, });