Merge pull request #1885 from gluestack/fix/button-nativewind

fix: button component nativewind
gluestack · Mar 11, 2024 · a4a177d · a4a177d
2 parents cf37b8b + c291242
commit a4a177d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -43,6 +43,7 @@ import {
 } from '@gluestack/design-system';
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import colors from 'tailwindcss/colors';
 
 This is an illustration of **Button** component.
 
@@ -466,14 +467,15 @@ A loading button is a type of button component that provides visual feedback to
     metaData={{
       code: `
         <Button className='p-3'>
-          <ButtonSpinner color="white" className='mr-1'/>
+        {/* colors is imported from tailwindcss/colors */}
+          <ButtonSpinner color={colors.gray[400]} className='mr-1'/>
           <ButtonText className='font-medium text-sm'>Please wait...</ButtonText>
         </Button>
       `,
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Button, ButtonText, Wrapper, ButtonSpinner },
+      scope: { Button, ButtonText, Wrapper, ButtonSpinner, colors },
       argsType: {},
     }}
   />
@@ -527,16 +529,10 @@ A button with a link combines the interactive behavior of a button component wit
       transformCode: (code) => {
         return transformedCode(code);
       },
-      scope: { Button, ButtonText, ButtonIcon, Wrapper, Icon, ArrowUpIcon 
-      },
-
-      argsType:
-       {},
-
+      scope: { Button, ButtonText, ButtonIcon, Wrapper, ArrowUpIcon },
+      argsType: {},
     }}
-
   />
-
 </AppProvider>
 
 #### Button With Icon

diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -37,17 +37,17 @@ cssInterop(UIButton.Spinner, { className: 'style' });
 cssInterop(UIButton.Icon, { className: 'style' });
 
 const buttonStyle = tva({
-  base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40',
+  base: 'group/button rounded-lg bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40',
   variants: {
     action: {
       primary:
-        'bg-primary-500 hover:bg-primary-600 active:bg-primary-700  border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-primary-500',
+        'bg-primary-500 hover:bg-primary-600 active:bg-primary-700  border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-primary-300',
       secondary:
-        'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-secondary-500',
+        'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-secondary-300',
       positive:
-        'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-success-500',
+        'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-success-300',
       negative:
-        'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-error-500',
+        'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-error-300',
       default: 'bg-transparent hover:bg-background-50 active:bg-transparent',
     },
     variant: {

diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -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: {