Merge pull request #1876 from gluestack/feat/eg-pressable

feat: added nativewind pressable component examples
gluestack · Mar 11, 2024 · 6f3c62d · 6f3c62d
2 parents 02d0d42 + 5b68226
commit 6f3c62d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 16 deletions.
diff --git a/example/storybook-nativewind/src/components/Pressable/Pressable.tsx b/example/storybook-nativewind/src/components/Pressable/Pressable.tsx
@@ -5,20 +5,11 @@ import { Pressable } from '@/components/ui/pressable';
 const PressableBasic = ({ ...props }: any) => {
   return (
     <Pressable
-      // eslint-disable-next-line no-console
-      onPress={() => console.log('Hello')}
+      // onPress={() => console.log('Hello')}
       {...props}
-      sx={{ h: 100, w: 200 }}
+      className="p-5 bg-primary-500"
     >
-      <Center
-        sx={{
-          h: '100%',
-          w: '100%',
-          bg: '$primary500',
-        }}
-      >
-        <Text sx={{ color: '$white' }}>PRESSABLE</Text>
-      </Center>
+      <Text className="text-typography-0">PRESSABLE</Text>
     </Pressable>
   );
 };
@@ -28,4 +19,4 @@ PressableBasic.description =
 
 export default PressableBasic;
 
-export { Pressable, Center };
+export { Pressable, Center, Text };
diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -1,5 +1,5 @@
 ---
-title: Pressable | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Pressable Component | Installation, Usage, and API
 
 description: By providing access to hover, pressed, and focus events, Pressable serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.
 
@@ -31,7 +31,7 @@ This is an illustration of **Pressable** component.
     metaData={{
       code: `
  <Pressable
-  onPress={() => console.log('Hello')} className="p-5 bg-primary-500 hover:bg-primary-400">
+  onPress={() => console.log('Hello')} className="p-5 bg-primary-500">
   <Text className="text-typography-0">Press me</Text>
 </Pressable>
 `,
@@ -91,3 +91,41 @@ This section provides a comprehensive reference list for the component props, de
 #### Pressable
 
 It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Pressable child elements according to its states
+
+You can change the child elements according to the states of Pressable component.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+    <Pressable className="p-16 bg-primary-500">
+      {({ pressed }) => (
+        <Text className={pressed ? 'text-pink-400' : 'text-yellow-400'}>
+          PRESSABLE
+        </Text>
+      )}
+    </Pressable>
+    `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Pressable,
+        Text,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+Similarly, you can change the child elements according to other states of Pressable
+component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/pressable/index.tsx
@@ -3,7 +3,7 @@ import { tva } from '@gluestack-ui/nativewind-utils';
 import React from 'react';
 
 const pressableStyle = tva({
-  base: 'data-[focus-visible=true]:outline-2 outline-primary-700 outline-solid',
+  base: 'data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-primary-700 data-[focus-visible=true]:ring-2',
 });
 
 export const Pressable = React.forwardRef(