Skip to content

[RTN-2065] feat(feedback): add multiple paragraphs in description #900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
flaviafmoraes merged 3 commits into from
Oct 14, 2025
+78 −13
Merged

[RTN-2065] feat(feedback): add multiple paragraphs in description #900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df78b99
feat(feedback): add multiple paragraphs in description
matheushdsbr Sep 19, 2025
a33b3b2
refactor(feedback): improve description array structure
matheushdsbr Oct 6, 2025
824cecd
test(feedback): update snapshot
matheushdsbr Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions packages/doc/content/components/components/feedback/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
16 changes: 12 additions & 4 deletions packages/yoga/src/Feedback/web/Feedback.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -81,9 +85,13 @@ function Feedback({
/>
<TextContainer>
{titleElement}
<Text.Body1 mt="small" color="deep">
{description}
</Text.Body1>
<Box display="flex" flexDirection="column" gap="large" mt="small">
{descriptionArray.map(paragraph => (
<Text.Body1 key={paragraph?.toString().slice(0, 10)} color="deep">
{paragraph}
</Text.Body1>
))}
</Box>
</TextContainer>

{captionElement ? <Box mt="medium">{captionElement}</Box> : null}
Expand All @@ -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,
Expand Down
20 changes: 20 additions & 0 deletions packages/yoga/src/Feedback/web/Feedback.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
});
34 changes: 25 additions & 9 deletions packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -20,15 +32,14 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
align-items: flex-end;
}

.c5 {
.c6 {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 24px;
color: #231B22;
font-family: Rubik;
font-weight: 400;
margin-top: 16px;
Copy link
Collaborator

@flaviafmoraes flaviafmoraes Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this old snap be changed? I imagine the change shouldn't change the old interface (with only 1 paragraph) to avoid the risk of changing what we already have currently 🤔

Copy link
Contributor Author

@matheushdsbr matheushdsbr Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @flaviafmoraes 👋
What happened is that there was originally only one <Text /> with that margin.
I added a <Box /> around it to allow rendering a list of <Text /> components.
So I removed the margin from the <Text /> and moved it to the <Box />, which is why there’s a style change in the <Text />.

color: #6B6B78;
}

Expand All @@ -50,7 +61,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;
Expand Down Expand Up @@ -82,7 +93,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;
Expand Down Expand Up @@ -117,15 +128,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>
Expand Down