From df78b993382d2ae5caf5259dc31e0f3ddef618d0 Mon Sep 17 00:00:00 2001
From: Matheus Silva <matheushds.br@gmail.com>
Date: Fri, 19 Sep 2025 14:39:18 -0300
Subject: [PATCH 1/3] feat(feedback): add multiple paragraphs in description

---
 .../components/components/feedback/index.mdx  | 21 ++++++++++++
 packages/yoga/src/Feedback/web/Feedback.jsx   | 21 +++++++++---
 .../yoga/src/Feedback/web/Feedback.test.jsx   | 20 +++++++++++
 .../web/__snapshots__/Feedback.test.jsx.snap  | 33 ++++++++++++++-----
 4 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/packages/doc/content/components/components/feedback/index.mdx b/packages/doc/content/components/components/feedback/index.mdx
index e655c374a6..95be85a5eb 100644
--- a/packages/doc/content/components/components/feedback/index.mdx
+++ b/packages/doc/content/components/components/feedback/index.mdx
@@ -145,6 +145,27 @@ This screen can be used to give feedback to the user of success, information, or
 </Box>
 ```
 
+### Multiple paragraphs in description
+
+Use an array of strings to render multiple paragraphs (each string becomes a separate Body1 block).
+
+```javascript
+<Box h={611} w="100%">
+  <Feedback
+    variant="success"
+    title="Welcome to Yoga, Feedback."
+    description={[
+      'Enjoy your membership! Access thousands of gyms, studios and wellness app.',
+      'Track your wellbeing journey and discover new activities every week.',
+      'Need help? Reach out to our support anytime.'
+    ]}
+  >
+    <Feedback.PrimaryButton>Ok</Feedback.PrimaryButton>
+    <Feedback.SecondaryButton>Cancel</Feedback.SecondaryButton>
+  </Feedback>
+</Box>
+```
+
 ## Props
 
 <PropsTable component="Feedback" platform="web" />
diff --git a/packages/yoga/src/Feedback/web/Feedback.jsx b/packages/yoga/src/Feedback/web/Feedback.jsx
index 07f476d5b8..427c338767 100644
--- a/packages/yoga/src/Feedback/web/Feedback.jsx
+++ b/packages/yoga/src/Feedback/web/Feedback.jsx
@@ -81,9 +81,22 @@ function Feedback({
         />
         <TextContainer>
           {titleElement}
-          <Text.Body1 mt="small" color="deep">
-            {description}
-          </Text.Body1>
+          <Box display="flex" flexDirection="column" gap="large" mt="small">
+            {Array.isArray(description) ? (
+              description.map(paragraph => (
+                <Text.Body1
+                  key={paragraph?.toString().slice(0, 10)}
+                  color="deep"
+                >
+                  {paragraph}
+                </Text.Body1>
+              ))
+            ) : (
+              <Text.Body1 mt="small" color="deep">
+                {description}
+              </Text.Body1>
+            )}
+          </Box>
         </TextContainer>
 
         {captionElement ? <Box mt="medium">{captionElement}</Box> : null}
@@ -100,7 +113,7 @@ function Feedback({
 Feedback.propTypes = {
   variant: oneOf(Object.keys(VARIANT_ICONS)).isRequired,
   title: string,
-  description: string.isRequired,
+  description: oneOfType([string, arrayOf(string)]).isRequired,
   children: oneOfType([arrayOf(node), node]),
   /** Center the component vertically */
   center: bool,
diff --git a/packages/yoga/src/Feedback/web/Feedback.test.jsx b/packages/yoga/src/Feedback/web/Feedback.test.jsx
index b40a1b6c7b..4e102df41d 100644
--- a/packages/yoga/src/Feedback/web/Feedback.test.jsx
+++ b/packages/yoga/src/Feedback/web/Feedback.test.jsx
@@ -115,4 +115,24 @@ describe('<Feedback />', () => {
 
     expect(getByTestId('feedback-icon-delayed')).toMatchSnapshot();
   });
+
+  it('should render multiple paragraphs when description is an array', () => {
+    const multiDescription = [
+      'First paragraph of the feedback description.',
+      'Second paragraph providing extra context.',
+      'Third paragraph with final details.',
+    ];
+
+    const { getByText } = renderWithTheme(
+      <Feedback
+        variant="success"
+        title={title}
+        description={multiDescription}
+      />,
+    );
+
+    multiDescription.forEach(text => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
 });
diff --git a/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap b/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
index d2d1061a80..ce29b45b5b 100644
--- a/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
+++ b/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
@@ -7,6 +7,18 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
   height: 64px;
 }
 
+.c5 {
+  margin-top: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 24px;
+}
+
 .c0 {
   background-color: #FFFFFF;
   width: 100%;
@@ -20,7 +32,7 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
   align-items: flex-end;
 }
 
-.c5 {
+.c6 {
   margin: 0;
   padding: 0;
   font-size: 16px;
@@ -50,7 +62,7 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
   font-weight: 500;
 }
 
-.c6 {
+.c7 {
   margin-top: 56px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -82,7 +94,7 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
 }
 
 @media (min-width:769px) {
-  .c6 {
+  .c7 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -117,15 +129,20 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
           >
             Welcome to Yoga
           </h1>
-          <p
+          <div
             class="c5"
-            color="deep"
+            display="flex"
           >
-            Enjoy your membership!
-          </p>
+            <p
+              class="c6"
+              color="deep"
+            >
+              Enjoy your membership!
+            </p>
+          </div>
         </div>
         <div
-          class="c6"
+          class="c7"
         />
       </div>
     </div>

From a33b3b280f560165d89e857955efa1c5061a827d Mon Sep 17 00:00:00 2001
From: Matheus Silva <matheushds.br@gmail.com>
Date: Mon, 6 Oct 2025 09:39:17 -0300
Subject: [PATCH 2/3] refactor(feedback): improve description array structure

---
 packages/yoga/src/Feedback/web/Feedback.jsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/yoga/src/Feedback/web/Feedback.jsx b/packages/yoga/src/Feedback/web/Feedback.jsx
index 427c338767..a2012ba1db 100644
--- a/packages/yoga/src/Feedback/web/Feedback.jsx
+++ b/packages/yoga/src/Feedback/web/Feedback.jsx
@@ -43,7 +43,11 @@ function Feedback({
   center = true,
   ...props
 }) {
+  const descriptionArray = Array.isArray(description)
+    ? description
+    : [description];
   const iconProps = VARIANT_ICONS[variant];
+
   let primaryButton;
   let secondaryButton;
   let captionElement;
@@ -82,20 +86,11 @@ function Feedback({
         <TextContainer>
           {titleElement}
           <Box display="flex" flexDirection="column" gap="large" mt="small">
-            {Array.isArray(description) ? (
-              description.map(paragraph => (
-                <Text.Body1
-                  key={paragraph?.toString().slice(0, 10)}
-                  color="deep"
-                >
-                  {paragraph}
-                </Text.Body1>
-              ))
-            ) : (
-              <Text.Body1 mt="small" color="deep">
-                {description}
+            {descriptionArray.map(paragraph => (
+              <Text.Body1 key={paragraph?.toString().slice(0, 10)} color="deep">
+                {paragraph}
               </Text.Body1>
-            )}
+            ))}
           </Box>
         </TextContainer>
 

From 824cecdc0d9c8546f3eba128e3c89989319cde6a Mon Sep 17 00:00:00 2001
From: Matheus Silva <matheushds.br@gmail.com>
Date: Mon, 6 Oct 2025 09:40:59 -0300
Subject: [PATCH 3/3] test(feedback): update snapshot

---
 .../yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap b/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
index ce29b45b5b..59847dbbcd 100644
--- a/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
+++ b/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
@@ -40,7 +40,6 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
   color: #231B22;
   font-family: Rubik;
   font-weight: 400;
-  margin-top: 16px;
   color: #6B6B78;
 }