Merge pull request #1891 from gluestack/fix/textarea

fix/textarea
gluestack · Mar 4, 2024 · a672d44 · a672d44
2 parents 232d5d5 + 733bec1
commit a672d44
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx
@@ -35,7 +35,7 @@ const textareaStyle = tva({
 });
 
 const textareaInputStyle = tva({
-  base: 'p-3 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+  base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
   parentVariants: {
     size: {
       sm: 'text-sm',

diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
@@ -42,7 +42,7 @@ This is an illustration of **Textarea** component.
     showArgsController={true}
     metaData={{
       code: `
-        <Textarea {...props} w='$64'>
+        <Textarea {...props} className="w-64">
           <TextareaInput
             placeholder="Your text goes here..."
           />
@@ -354,19 +354,6 @@ Textarea component is created using TextInput component from react-native. It ex
   </TableContainer>
 </>
 
-## Spec Doc
-
-Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5262%253A23948%26type%3Ddesign%26node-id%3D5262-25827%26viewport%3D713%252C121%252C0.03%26t%3DKYZLJTBIKhIjLoLC-1%26scaling%3Dscale-down%26starting-point-node-id%3D5262%253A25827%26mode%3Ddesign"
-  allowfullscreen
-></iframe>
 
 ### Examples
 
@@ -416,3 +403,18 @@ The Textarea Component can be incorporated within the FormControl.
     }}
   />
 </AppProvider>
+
+## Spec Doc
+
+Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+
+<iframe
+  style={{
+    borderRadius: '8px',
+    border: ' 1px solid rgba(0, 0, 0, 0.1)',
+    aspectRatio: 736 / 585,
+  }}
+  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5262%253A23948%26type%3Ddesign%26node-id%3D5262-25827%26viewport%3D713%252C121%252C0.03%26t%3DKYZLJTBIKhIjLoLC-1%26scaling%3Dscale-down%26starting-point-node-id%3D5262%253A25827%26mode%3Ddesign"
+  allowfullscreen
+></iframe>
+