Merge pull request #2262 from gluestack/feat/popover

Feat/popover
gluestack · Jul 9, 2024 · ea4ef96 · ea4ef96
2 parents 680c4c1 + d1c6055
commit ea4ef96
Show file tree

Hide file tree

Showing 13 changed files with 652 additions and 31,212 deletions.
diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
@@ -78,6 +78,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/popover/src'
             ),
+            '@react-native-aria/overlays': path.resolve(
+              __dirname,
+              '../../packages/react-native-aria/overlays/src'
+            ),
             '@gluestack-style/react': path.resolve(
               __dirname,
               '../../packages/styled/react/src'

diff --git a/example/storybook-nativewind/src/components/Popover/Popover.stories.tsx b/example/storybook-nativewind/src/components/Popover/Popover.stories.tsx
@@ -26,7 +26,7 @@ const PopoverMeta: ComponentMeta<typeof Popover> = {
         'top right',
         'left',
         'left bottom',
-        'left right',
+        'left top',
         'right',
         'right bottom',
         'right top',

diff --git a/example/storybook-nativewind/src/components/Popover/Popover.tsx b/example/storybook-nativewind/src/components/Popover/Popover.tsx
@@ -11,10 +11,7 @@ import {
 } from '@/components/ui/popover';
 import { Button, ButtonText } from '@/components/ui/button';
 import { Text } from '@/components/ui/text';
-import { Heading } from '@/components/ui/heading';
 import { Box } from '@/components/ui/box';
-import { X } from 'lucide-react-native';
-import { Icon } from '@/components/ui/icon';
 
 const PopoverBasic = (props: any) => {
   const [showPopover, setShowPopover] = React.useState(false);
@@ -39,43 +36,14 @@ const PopoverBasic = (props: any) => {
       }}
     >
       <PopoverBackdrop />
-      <PopoverContent className="max-w-[400]">
+      <PopoverContent>
         <PopoverArrow />
-        <PopoverHeader>
-          <Heading>Welcome!</Heading>
-          <PopoverCloseButton>
-            <Icon as={X} size="lg" />
-          </PopoverCloseButton>
-        </PopoverHeader>
         <PopoverBody>
-          <Text>
-            Join the product tour and start creating your own checklist. Are you
-            ready to jump in?
+          <Text size={props.size} className="text-typography-900">
+            Alex, Annie and many others are already enjoying the Pro features,
+            don't miss out on the fun!
           </Text>
         </PopoverBody>
-        <PopoverFooter>
-          <Text size="xs" className="flex-1">
-            Step 2 of 3
-          </Text>
-          {/* @ts-ignore */}
-          <Button
-            variant="outline"
-            action="secondary"
-            className="mr-3"
-            onPress={() => {
-              setShowPopover(false);
-            }}
-          >
-            <ButtonText>Back</ButtonText>
-          </Button>
-          <Button
-            onPress={() => {
-              setShowPopover(false);
-            }}
-          >
-            <ButtonText>Next</ButtonText>
-          </Button>
-        </PopoverFooter>
       </PopoverContent>
     </Popover>
   );