Merge pull request #281 from gluestack/release/@gluestack-ui/[email protected]

Release/@gluestack UI/[email protected]

Author: Viraj-10

example/storybook/src/components/Feedback/Alert/index.stories.mdx

@@ -110,6 +110,8 @@ The Examples section provides visual representations of the different variants o
 
 #### Alert Variants
 
+Alert allows you to show the type of variant such as `info`, `success`, `error`, `warning`, and `muted`.
+
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}

example/storybook/src/components/Overlay/Popover/index.stories.mdx

@@ -338,7 +338,8 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
           </Table.TD>
           <Table.TD>
             <Table.TText>
-              Determines whether menu content should overlap with the trigger.
+              Determines whether popover content should overlap with the
+              trigger.
             </Table.TText>
           </Table.TD>
         </Table.TR>

example/storybook/src/components/Overlay/Tooltip/Tooltip.stories.tsx

@@ -9,17 +9,17 @@ const MyTooltipMeta: ComponentMeta<typeof Tooltip> = {
       control: 'select',
       options: [
         'bottom',
-        'bottom-end',
-        'bottom-start',
+        'bottom left',
+        'bottom right',
         'top',
-        'top-end',
-        'top-start',
+        'top left',
+        'top right',
         'left',
-        'left-end',
-        'left-start',
+        'left top',
+        'left bottom',
         'right',
-        'right-end',
-        'right-start',
+        'right top',
+        'right bottom',
       ],
     },
   },

example/storybook/src/components/Overlay/Tooltip/Tooltip.tsx

@@ -8,31 +8,22 @@ export const TooltipStory = ({
 }: any) => {
   return (
     <Wrapper>
-      <Tooltip
-        placement={placement}
-        trigger={(triggerProps: any) => {
-          return (
-            <Center>
+      <Center w={500} h={500}>
+        <Tooltip
+          placement={placement}
+          trigger={(triggerProps: any) => {
+            return (
               <Button {...triggerProps}>
                 <Button.Text>More</Button.Text>
               </Button>
-            </Center>
-          );
-        }}
-      >
-        <Tooltip.Content>
-          <Text
-            sx={{
-              color: '$white',
-              px: '$2',
-              py: '$1',
-              fontSize: 12,
-            }}
-          >
-            {text}
-          </Text>
-        </Tooltip.Content>
-      </Tooltip>
+            );
+          }}
+        >
+          <Tooltip.Content>
+            <Text>{text}</Text>
+          </Tooltip.Content>
+        </Tooltip>
+      </Center>
     </Wrapper>
   );
 };