Skip to content

Commit 88c3b4b

Browse files
Rajat ChaudharyRajat Chaudhary
Rajat Chaudhary
authored and
Rajat Chaudhary
committed
Merge branch 'patch' of github.com:gluestack/gluestack-ui into feat/modal
2 parents c9d58f0 + 4d25996 commit 88c3b4b

File tree

35 files changed

+106
-85
lines changed

35 files changed

+106
-85
lines changed

‎example/storybook-nativewind/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@gluestack-style/animation-resolver": "^1.0.4",
3333
"@gluestack-style/react": "^1.0.57",
3434
"@gluestack-ui/config": "^1.1.19",
35-
"@gluestack-ui/themed": "^1.1.38",
35+
"@gluestack-ui/themed": "^1.1.39",
3636
"@gluestack/design-system": "^0.5.36",
3737
"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
3838
"@legendapp/motion": "^2.2.0",

‎example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ This is an illustration of **Accordion** component.
5656
}}
5757
metaData={{
5858
code: `
59-
<Accordion {...props} className="m-5 w-[90%]">
59+
<Accordion {...props} className="m-5 w-[90%] border border-outline-200">
6060
<AccordionItem value="a">
6161
<AccordionHeader>
6262
<AccordionTrigger>

‎example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
540540
const handleClose = () => setShowActionsheet(false);
541541
return (
542542
<>
543-
<Button onPress={handleClose}>
543+
<Button onPress={() => setShowActionsheet(true)}>
544544
<ButtonText>Open</ButtonText>
545545
</Button>
546546
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
@@ -642,7 +642,7 @@ Demonstrates a common UI pattern known as keyboard handling or keyboard scrollin
642642
const handleClose = () => setShowActionsheet(false);
643643
return (
644644
<>
645-
<Button onPress={handleClose}>
645+
<Button onPress={() => setShowActionsheet(true)}>
646646
<ButtonText>Open</ButtonText>
647647
</Button>
648648
<Actionsheet
@@ -754,7 +754,7 @@ The Actionsheet with Icons is a variation of the Actionsheet component that disp
754754
const handleClose = () => setShowActionsheet(false);
755755
return (
756756
<>
757-
<Button onPress={handleClose}>
757+
<Button onPress={() => setShowActionsheet(true)}>
758758
<ButtonText>Open</ButtonText>
759759
</Button>
760760
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -843,7 +843,7 @@ The Actionsheet with Virtualized List includes a virtualized list for better per
843843
);
844844
return (
845845
<>
846-
<Button onPress={handleClose}>
846+
<Button onPress={() => setShowActionsheet(true)}>
847847
<ButtonText>Open</ButtonText>
848848
</Button>
849849
<Actionsheet isOpen={showActionsheet} onClose={handleClose} snapPoints={[50]}>
@@ -924,7 +924,7 @@ The Actionsheet with Flat List is a variation of the Actionsheet component that
924924
);
925925
return (
926926
<>
927-
<Button onPress={handleClose}>
927+
<Button onPress={() => setShowActionsheet(true)}>
928928
<ButtonText>Open</ButtonText>
929929
</Button>
930930
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -985,7 +985,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
985985
];
986986
return (
987987
<>
988-
<Button onPress={handleClose}>
988+
<Button onPress={() => setShowActionsheet(true)}>
989989
<ButtonText>Open</ButtonText>
990990
</Button>
991991
<Actionsheet isOpen={showActionsheet} onClose={handleClose} snapPoints={[35]}>
@@ -1050,7 +1050,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
10501050
const handleClose = () => setShowActionsheet(false);
10511051
return (
10521052
<>
1053-
<Button onPress={handleClose}>
1053+
<Button onPress={() => setShowActionsheet(true)}>
10541054
<ButtonText>Open</ButtonText>
10551055
</Button>
10561056
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -1141,7 +1141,7 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
11411141
const handleClose = () => setShowActionsheet(false);
11421142
return (
11431143
<>
1144-
<Button onPress={handleClose}>
1144+
<Button onPress={() => setShowActionsheet(true)}>
11451145
<ButtonText>Open</ButtonText>
11461146
</Button>
11471147
<Actionsheet isOpen={showActionsheet} onClose={handleClose}>
@@ -1248,4 +1248,4 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
12481248
argsType: {},
12491249
}}
12501250
/>
1251-
</Wrapper> */}
1251+
</Wrapper> */}

‎example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -503,11 +503,11 @@ The Examples section provides visual representations of the different variants o
503503
</Button>
504504
<AlertDialog isOpen={showAlertDialog} onClose={handleClose}>
505505
<AlertDialogBackdrop />
506-
<AlertDialogContent className="p-0 max-w-[590px] sm:flex-row border-blue-800 rounded-xl">
507-
<Box className="bg-blue-800 min-w-[123px] items-center justify-center py-4 sm:py-0">
506+
<AlertDialogContent className="p-0 max-w-[590px] sm:flex-row border-primary-800 rounded-xl">
507+
<Box className="bg-primary-600 min-w-[123px] items-center justify-center py-4 sm:py-0">
508508
<Image
509509
source={{
510-
uri: 'https://s3-alpha-sig.figma.com/img/e102/c0d3/7d9780cf2bbdcce3142cbe98fb9c6d6e?Expires=1721001600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=F1KwdVpm2K7MrffLuDxQzJlkfPWe6E3HADIeukZKEtUJmkMVQcRlmRrY~Q5M0U1o5MYNLA0WbQYLnMar6649gglOHnA1yksN8RbLuD3rg5m3m9sPpRmaxmW7eSKnVVCpyMJ4JeJ2EcjChTWRpaZjVDtJ9yUf5y~Ki-2rgFu1ORK3wgV-endPreugSGcknsvdBSvqT5IW7VwtybYPelxc0lG2vp5QiCIZ1Qiwls7atKY5dZC12E2ToBUEhV1l5N657MDWyFY3CsyJ2ZcnJFkSCldP6Ab4fUAHy43G2TAm4dKAsLbQAEY95m5iMmpTVjJq~Z4R6pvZjbF4TYUmguYaTA__',
510+
uri: 'https://s3-alpha-sig.figma.com/img/e102/c0d3/7d9780cf2bbdcce3142cbe98fb9c6d6e?Expires=1722211200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dcv50VxIIiZhgk7eFIXeeXuIB8IvftOJ6AmQNB0aDmgTXSH3Ph1vQHftectHl91sTPpuGXPWh~B0yVfarBPjq8E-m1o4XqGE4E5EMoSraKMLpWbmkbqeHrI43wt1qQPZIy91~VvJnh~j4Srb8SIpVyKUfJ7rGWfn~umxyBBH7C-04kXgt7RYswh61lswlKugYb8BmO7VYijmjcqTHvnnajNGdjCJM9GH5AaZVGjnQaJfY6whJpjbvpu7qjWQwh2NUh6OlBQz74kUVEg8OeuUcwAA5dd6HIY0plf7o3q7Cq5x35J6oUN30HY1TZ9l2b9fg14~EUkA8apLV1XM3Lad-Q__',
511511
}}
512512
alt="image"
513513
className="h-[95px] w-[95px]"

‎example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -242,8 +242,8 @@ An Avatar component with text displays a stylized representation of a user or en
242242
<VStack space="2xl">
243243
<HStack space="md">
244244
<Avatar className='bg-indigo-600'>
245-
<AvatarFallbackText>Ronald Richards</AvatarFallbackText>
246-
<AvatarBadge $dark-borderColor="$black"/>
245+
<AvatarFallbackText className="text-white">Ronald Richards</AvatarFallbackText>
246+
<AvatarBadge />
247247
</Avatar>
248248
<VStack>
249249
<Heading size="sm" >Ronald Richards</Heading>
@@ -252,7 +252,7 @@ An Avatar component with text displays a stylized representation of a user or en
252252
</HStack>
253253
<HStack space="md">
254254
<Avatar className='bg-orange-600'>
255-
<AvatarFallbackText>Arlene McCoy</AvatarFallbackText>
255+
<AvatarFallbackText className="text-white">Arlene McCoy</AvatarFallbackText>
256256
</Avatar>
257257
<VStack>
258258
<Heading size="sm" >Arlene McCoy</Heading>
@@ -294,7 +294,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
294294
<HStack space="md">
295295
<Avatar className='bg-indigo-600'>
296296
{/* User is imported from 'lucide-react-native' */}
297-
<Icon as={User} size="lg"/>
297+
<Icon as={User} size="lg" className="stroke-white" />
298298
</Avatar>
299299
<VStack >
300300
<Heading size="sm" >Ronald Richards</Heading>
@@ -304,7 +304,7 @@ An Avatar component with an icon combines a graphical symbol or icon with a user
304304
<HStack space="md">
305305
<Avatar className='bg-pink-600'>
306306
{/* User is imported from 'lucide-react-native' */}
307-
<Icon as={User} size="lg"/>
307+
<Icon as={User} size="lg" className="stroke-white" />
308308
</Avatar>
309309
<VStack >
310310
<Heading size="sm" >Kevin James</Heading>
@@ -422,7 +422,7 @@ The avatar group allows users to group avatars and display them in a horizontal
422422
{avatars.slice(0, 3).map((avatar, index) => {
423423
return (
424424
<Avatar key={index} size="lg" className={'border-2 border-outline-0 ' + avatar.color}>
425-
<AvatarFallbackText>{avatar.alt}</AvatarFallbackText>
425+
<AvatarFallbackText className="text-white">{avatar.alt}</AvatarFallbackText>
426426
</Avatar>
427427
);
428428
})}

‎example/storybook-nativewind/src/components/Box/index.nw.stories.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ pageTitle: Box
88
pageDescription: Flexible layout tool with customizable styles and props for simple to complex structures.
99

1010
showHeader: true
11+
12+
tag: RSC
1113
---
1214

1315
import { Meta } from '@storybook/addon-docs';

‎example/storybook-nativewind/src/components/Card/index.nw.stories.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ pageTitle: Card
88
pageDescription: A Card component serves as a visual container that groups related content and actions.
99

1010
showHeader: true
11+
12+
tag: RSC
1113
---
1214

1315
import { Meta } from '@storybook/addon-docs';

‎example/storybook-nativewind/src/components/Center/index.nw.stories.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ pageTitle: Center
88
pageDescription: Helps center-align content and can create complex layouts easily.
99

1010
showHeader: true
11+
12+
tag: RSC
1113
---
1214

1315
import { Meta } from '@storybook/addon-docs';

‎example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -446,7 +446,7 @@ A Fab component with an icon adds a visually striking and easily recognizable bu
446446
);
447447
})}
448448
</VStack>
449-
<Fab size='lg' className='bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800' >
449+
<Fab size='lg' className='bg-primary-600 hover:bg-primary-700 active:bg-primary-800' >
450450
{/* EditIcon is imported from 'lucide-react-native' */}
451451
<FabIcon as={EditIcon} color="white"/>
452452
</Fab>
@@ -489,13 +489,13 @@ A Fab component with an icon and text combines a visual icon with accompanying t
489489
<Box
490490
className='max-w-96 border rounded-lg border-outline-200 py-[56px] px-6 mx-5 bg-background-100'
491491
>
492-
<Fab className='top-4 h-9 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-900'>
492+
<Fab className='top-4 h-9 bg-primary-600 hover:bg-primary-700 active:bg-primary-900'>
493493
<FabIcon as={SearchIcon} className='stroke-white' />
494494
<FabLabel className='text-white'>Search</FabLabel>
495495
</Fab>
496496
<VStack space='lg'>
497497
<Box>
498-
<Text className='text-xs text-blue-600 font-bold'>
498+
<Text className='text-xs text-primary-600 font-bold'>
499499
HEALTH
500500
</Text>
501501
<Heading size='sm'>
@@ -524,7 +524,7 @@ A Fab component with an icon and text combines a visual icon with accompanying t
524524
</Box>
525525
<Divider />
526526
<Box>
527-
<Text className='text-xs text-blue-600 font-bold'>
527+
<Text className='text-xs text-primary-600 font-bold'>
528528
TECHNOLOGY
529529
</Text>
530530
<Heading size='sm' >
@@ -690,12 +690,12 @@ A Fab component with custom placement allows for flexible positioning of the but
690690
Oranges are a great source of vitamin C, which is essential for a healthy immune system. Oranges are a great source of vitamin C, which is important for maintaining a healthy immune system. Vitamin C also helps with the absorption of iron and the production of collagen, which supports healthy skin, teeth, and bones.
691691
</Text>
692692
<Link href="https://gluestack.io/" isExternal>
693-
<Text className='text-xs text-pink-600'>
693+
<Text className='text-xs text-primary-600'>
694694
READ MORE
695695
</Text>
696696
</Link>
697697
</VStack>
698-
<Fab size='lg' className='bg-pink-600 right-4 bottom-16 hover:bg-pink-700 active:bg-pink-800'>
698+
<Fab size='lg' className='bg-primary-600 right-4 bottom-16 hover:bg-primary-700 active:bg-primary-800'>
699699
{/* ShoppingCartIcon is imported from 'lucide-react-native' */}
700700
<FabIcon as={ShoppingCartIcon} className='h-4 w-4' color="white"/>
701701
</Fab>

‎example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -699,29 +699,23 @@ Error messages can be displayed using FormControl.
699699
<VStack space="sm">
700700
<Radio size="sm" value="Mango">
701701
<RadioIndicator>
702-
<RadioIcon>
703-
<CircleIcon/>
704-
</RadioIcon>
702+
<RadioIcon as={CircleIcon} />
705703
</RadioIndicator>
706704
<RadioLabel>
707705
Monday
708706
</RadioLabel>
709707
</Radio>
710708
<Radio size="sm" value="Apple">
711709
<RadioIndicator>
712-
<RadioIcon>
713-
<CircleIcon/>
714-
</RadioIcon>
710+
<RadioIcon as={CircleIcon} />
715711
</RadioIndicator>
716712
<RadioLabel>
717713
Tuesday
718714
</RadioLabel>
719715
</Radio>
720716
<Radio size="sm" value="Orange">
721717
<RadioIndicator>
722-
<RadioIcon>
723-
<CircleIcon/>
724-
</RadioIcon>
718+
<RadioIcon as={CircleIcon} />
725719
</RadioIndicator>
726720
<RadioLabel>
727721
Wednesday
@@ -730,7 +724,7 @@ Error messages can be displayed using FormControl.
730724
</VStack>
731725
</RadioGroup>
732726
<FormControlError>
733-
<FormControlErrorIcon size={10} as={AlertCircleIcon}/>
727+
<FormControlErrorIcon as={AlertCircleIcon}/>
734728
<FormControlErrorText>
735729
Choose one time slot for the meeting
736730
</FormControlErrorText>
@@ -786,7 +780,7 @@ Form Action Buttons can also be utilized in conjunction with FormControl.
786780
</FormControl>
787781
<FormControl>
788782
<Button action='negative' className='ml-4'>
789-
<ButtonText>
783+
<ButtonText className="text-white">
790784
Delete
791785
</ButtonText>
792786
</Button>

0 commit comments

Comments
 (0)