From 285d29ee6ddaa53e120ff475c51fe12afbc5c595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= <vinicius.lagedo@vtex.com>
Date: Thu, 26 Sep 2024 23:55:09 -0300
Subject: [PATCH 1/2] fix(textarea): remove max width css prop

fix #1962
---
 packages/shoreline/src/themes/sunrise/components/textarea.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/shoreline/src/themes/sunrise/components/textarea.css b/packages/shoreline/src/themes/sunrise/components/textarea.css
index 692a5a8cc0..68fcee2b98 100644
--- a/packages/shoreline/src/themes/sunrise/components/textarea.css
+++ b/packages/shoreline/src/themes/sunrise/components/textarea.css
@@ -1,6 +1,5 @@
 [data-sl-textarea] {
   width: 100%;
-  max-width: 20rem;
 }
 
 [data-sl-textarea-input] {

From b01d4e9a3c5e7bb85468df031e32146fa5ad2cda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= <vinicius.lagedo@vtex.com>
Date: Thu, 26 Sep 2024 23:56:58 -0300
Subject: [PATCH 2/2] test(textarea/stories): improve stacked textaread
 visualization

---
 .../textarea/stories/examples.stories.tsx     | 65 +++----------------
 .../textarea/stories/show.stories.tsx         | 53 +++------------
 .../src/components/textarea/stories/style.css |  3 -
 3 files changed, 20 insertions(+), 101 deletions(-)
 delete mode 100644 packages/shoreline/src/components/textarea/stories/style.css

diff --git a/packages/shoreline/src/components/textarea/stories/examples.stories.tsx b/packages/shoreline/src/components/textarea/stories/examples.stories.tsx
index b5879dca91..07485add81 100644
--- a/packages/shoreline/src/components/textarea/stories/examples.stories.tsx
+++ b/packages/shoreline/src/components/textarea/stories/examples.stories.tsx
@@ -1,8 +1,7 @@
-import './style.css'
 import React from 'react'
 
-import { Textarea } from '../index'
 import { Stack } from '../../stack'
+import { Textarea } from '../index'
 
 export default {
   title: 'components/textarea',
@@ -15,63 +14,30 @@ export function NoResize() {
   const [value, setValue] = React.useState('')
 
   return (
-    <>
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        resizable={false}
-        optional
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        resizable={false}
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        error
-        resizable={false}
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        disabled
-        resizable={false}
-      />
+    <Stack>
+      <Textarea value={value} onChange={setValue} resizable={false} optional />
+      <Textarea value={value} onChange={setValue} resizable={false} />
+      <Textarea value={value} onChange={setValue} error resizable={false} />
+      <Textarea value={value} onChange={setValue} disabled resizable={false} />
       <Textarea
         value="The quick brown fox is tired right now"
-        className="textarea-container"
         disabled
         resizable={false}
       />
       <Textarea
         value={value}
         onChange={setValue}
-        className="textarea-container"
         maxLength={120}
         resizable={false}
       />
-    </>
+    </Stack>
   )
 }
 
 export function FormField() {
   const [value, setValue] = React.useState('')
 
-  return (
-    <Textarea
-      error
-      className="textarea-container"
-      value={value}
-      onChange={setValue}
-      maxLength={120}
-    />
-  )
+  return <Textarea error value={value} onChange={setValue} maxLength={120} />
 }
 
 export function LongText() {
@@ -79,20 +45,9 @@ export function LongText() {
 
   return (
     <Stack>
-      <Textarea
-        error
-        className="textarea-container"
-        value={value}
-        onChange={setValue}
-        maxLength={120}
-      />
+      <Textarea error value={value} onChange={setValue} maxLength={120} />
 
-      <Textarea
-        error
-        className="textarea-container"
-        value={value}
-        onChange={setValue}
-      />
+      <Textarea error value={value} onChange={setValue} />
     </Stack>
   )
 }
diff --git a/packages/shoreline/src/components/textarea/stories/show.stories.tsx b/packages/shoreline/src/components/textarea/stories/show.stories.tsx
index 980fb94a8d..27be57eb3f 100644
--- a/packages/shoreline/src/components/textarea/stories/show.stories.tsx
+++ b/packages/shoreline/src/components/textarea/stories/show.stories.tsx
@@ -1,6 +1,6 @@
-import './style.css'
 import React from 'react'
 
+import { Stack } from '../../stack'
 import { Textarea } from '../index'
 
 export default {
@@ -11,47 +11,14 @@ export function Show() {
   const [value, setValue] = React.useState('')
 
   return (
-    <>
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        maxLength={120}
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        optional
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        error
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        disabled
-      />
-      <Textarea
-        value="The quick brown fox is tired right now"
-        className="textarea-container"
-        disabled
-      />
-      <Textarea
-        value={value}
-        onChange={setValue}
-        className="textarea-container"
-        maxLength={120}
-      />
-    </>
+    <Stack>
+      <Textarea value={value} onChange={setValue} maxLength={120} />
+      <Textarea value={value} onChange={setValue} optional />
+      <Textarea value={value} onChange={setValue} />
+      <Textarea value={value} onChange={setValue} error />
+      <Textarea value={value} onChange={setValue} disabled />
+      <Textarea value="The quick brown fox is tired right now" disabled />
+      <Textarea value={value} onChange={setValue} maxLength={120} />
+    </Stack>
   )
 }
diff --git a/packages/shoreline/src/components/textarea/stories/style.css b/packages/shoreline/src/components/textarea/stories/style.css
deleted file mode 100644
index f2d024ef54..0000000000
--- a/packages/shoreline/src/components/textarea/stories/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.textarea-container {
-  margin: 1.625rem;
-}