Merge pull request #1862 from gluestack/feat/eg-fab

Feat/eg fab

Author: Viraj-10

example/storybook-nativewind/src/components-example/nativewind/Fab/index.tsx

@@ -6,9 +6,9 @@ import {
   withStyleContext,
   withStyleContextAndStates,
   useStyleContext,
+  cssInterop,
 } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
-import { cssInterop } from 'nativewind';
 
 export const UIFab = createFab({
   // @ts-ignore
@@ -26,7 +26,7 @@ cssInterop(UIFab.Label, { className: 'style' });
 cssInterop(UIFab.Icon, { className: 'style' });
 
 const fabStyle = tva({
-  base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-primary-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:outline-2 data-[focus=true]:outline-primary-700 data-[focus=true]:outline-solid',
+  base: 'group/fab bg-primary-500 rounded-full z-20 p-4 flex-row items-center justify-center absolute hover:bg-red-600 active:bg-primary-700 disabled:opacity-40 disabled:pointer-events-all disabled:cursor-not-allowed data-[focus=true]:outline-2 data-[focus=true]:outline-primary-700 data-[focus=true]:outline-solid',
   variants: {
     size: {
       sm: 'px-2.5 py-2.5 text-sm',

example/storybook-nativewind/src/components/Fab/Fab.stories.tsx

@@ -35,12 +35,18 @@ const FabMeta: ComponentMeta<typeof Fab> = {
       figmaIgnore: true,
       options: [true, false],
     },
+    isHovered: {
+      control: 'boolean',
+      figmaIgnore: true,
+      options: [true, false],
+    },
   },
   args: {
     placement: 'bottom right',
     showLabel: true,
     showIcon: true,
     size: 'md',
+    isHovered: false,
   },
 };
 

example/storybook-nativewind/src/components/Fab/Fab.tsx

@@ -1,62 +1,29 @@
 import React from 'react';
-
+import { Fab, FabIcon, FabLabel } from '@/components/ui/Fab';
+import { Avatar, AvatarImage } from '@/components/ui/Avatar';
+import { AddIcon, MenuIcon, SearchIcon, CheckIcon } from '@/components/ui/Icon';
+import { Box } from '@/components/ui/Box';
 import {
-  AddIcon,
-  Box,
-  MenuIcon,
   Checkbox,
   CheckboxIndicator,
   CheckboxLabel,
-  SearchIcon,
-  Link,
-  VStack,
-  HStack,
-  Avatar,
-  AvatarImage,
-  Heading,
-  Text,
-  Divider,
-  Image,
   CheckboxIcon,
-} from '@gluestack-ui/themed';
-
-import { Fab, FabIcon, FabLabel } from '@/components/ui/Fab';
-
-import { CheckIcon, EditIcon, ShoppingCartIcon } from 'lucide-react-native';
-
-const FabBasic = ({
-  placement = 'bottom right',
-  showLabel = true,
-  showIcon = true,
-  ...props
-}: any) => {
-  return (
-    <Box
-      position="relative"
-      bg="$trueGray200"
-      h="$full"
-      w="$full"
-      sx={{ _web: { w: 300, h: 300 } }}
-    >
-      <Fab placement={placement} gap="$1" {...props}>
-        {showIcon && <FabIcon as={MenuIcon} />}
-        {showLabel && <FabLabel>Menu</FabLabel>}
-      </Fab>
-    </Box>
-  );
-};
-
-const FigmaFabStory = ({
-  placement = 'bottom right',
-  showLabel = true,
-  _showIcon = true,
-  ...props
-}: any) => {
+} from '@/components/ui/Checkbox';
+import { Link } from '@/components/ui/Link';
+import { VStack } from '@/components/ui/VStack';
+import { HStack } from '@/components/ui/HStack';
+import { Heading } from '@/components/ui/Heading';
+import { Text } from '@/components/ui/Text';
+import { Divider } from '@/components/ui/Divider';
+import { Image } from '@/components/ui/Image';
+import { EditIcon, ShoppingCartIcon } from 'lucide-react-native';
+
+const FabBasic = (props: any) => {
   return (
-    <Box sx={{ _web: { w: 250, h: 80 } }}>
-      <Fab placement={placement} {...props} gap="$1">
-        <FabIcon as={MenuIcon} />
-        {showLabel && <Fab.Label>Menu</Fab.Label>}
+    <Box className="h-[300px] w-[300px] bg-background-200 rounded-md ">
+      <Fab placement={props.placement} {...props}>
+        {props.showIcon && <FabIcon as={MenuIcon} />}
+        {props.showLabel && <FabLabel>Menu</FabLabel>}
       </Fab>
     </Box>
   );
@@ -68,27 +35,27 @@ FabBasic.description =
 export default FabBasic;
 
 export {
-  FigmaFabStory,
   Fab,
   FabIcon,
   FabLabel,
-  SearchIcon,
-  EditIcon,
-  Box,
-  VStack,
-  HStack,
   Avatar,
   AvatarImage,
-  Heading,
-  Text,
-  Divider,
   AddIcon,
+  MenuIcon,
+  SearchIcon,
+  CheckIcon,
+  Box,
   Checkbox,
   CheckboxIndicator,
   CheckboxLabel,
   CheckboxIcon,
-  CheckIcon,
-  Image,
   Link,
+  VStack,
+  HStack,
+  Heading,
+  Text,
+  Divider,
+  Image,
+  EditIcon,
   ShoppingCartIcon,
 };