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
```
+### Multiple paragraphs in description
+
+Use an array of strings to render multiple paragraphs (each string becomes a separate Body1 block).
+
+```javascript
+
+
+ Ok
+ Cancel
+
+
+```
+
## Props
diff --git a/packages/yoga/src/Feedback/web/Feedback.jsx b/packages/yoga/src/Feedback/web/Feedback.jsx
index 07f476d5b8..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;
@@ -81,9 +85,13 @@ function Feedback({
/>
{titleElement}
-
- {description}
-
+
+ {descriptionArray.map(paragraph => (
+
+ {paragraph}
+
+ ))}
+
{captionElement ? {captionElement} : null}
@@ -100,7 +108,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('', () => {
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(
+ ,
+ );
+
+ 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..59847dbbcd 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[` 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[` should render correctly when not centered vertically 1`] =
align-items: flex-end;
}
-.c5 {
+.c6 {
margin: 0;
padding: 0;
font-size: 16px;
@@ -28,7 +40,6 @@ exports[` should render correctly when not centered vertically 1`] =
color: #231B22;
font-family: Rubik;
font-weight: 400;
- margin-top: 16px;
color: #6B6B78;
}
@@ -50,7 +61,7 @@ exports[` should render correctly when not centered vertically 1`] =
font-weight: 500;
}
-.c6 {
+.c7 {
margin-top: 56px;
display: -webkit-box;
display: -webkit-flex;
@@ -82,7 +93,7 @@ exports[` 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 +128,20 @@ exports[` should render correctly when not centered vertically 1`] =
>
Welcome to Yoga
-
- Enjoy your membership!
-
+
+ Enjoy your membership!
+
+