diff --git a/packages/doc/content/components/components/feedback/index.mdx b/packages/doc/content/components/components/feedback/index.mdx
index 341301f8a1..e655c374a6 100644
--- a/packages/doc/content/components/components/feedback/index.mdx
+++ b/packages/doc/content/components/components/feedback/index.mdx
@@ -72,6 +72,22 @@ This screen can be used to give feedback to the user of success, information, or
```
+### With Caption
+
+```javascript
+
+
+ Caption description here
+ Ok
+ Cancel
+
+
+```
+
### Only with primary button
```javascript
diff --git a/packages/yoga/src/Feedback/web/Feedback.jsx b/packages/yoga/src/Feedback/web/Feedback.jsx
index 2141922c80..2d6e607b09 100644
--- a/packages/yoga/src/Feedback/web/Feedback.jsx
+++ b/packages/yoga/src/Feedback/web/Feedback.jsx
@@ -12,6 +12,7 @@ import {
PrimaryButton,
SecondaryButton,
TextContainer,
+ Caption,
} from './StyledFeedback';
const ICON_SIZE = 64;
@@ -38,6 +39,7 @@ function Feedback({ variant, title, description, children, center, ...props }) {
const iconProps = VARIANT_ICONS[variant];
let primaryButton;
let secondaryButton;
+ let captionElement;
let titleElement =
{title};
function defineCompoundComponents() {
@@ -45,6 +47,7 @@ function Feedback({ variant, title, description, children, center, ...props }) {
if (isChildFromComponent(child, PrimaryButton)) primaryButton = child;
if (isChildFromComponent(child, SecondaryButton)) secondaryButton = child;
if (isChildFromComponent(child, Title)) titleElement = child;
+ if (isChildFromComponent(child, Caption)) captionElement = child;
});
}
@@ -75,6 +78,9 @@ function Feedback({ variant, title, description, children, center, ...props }) {
{description}
+
+ {captionElement ? {captionElement} : null}
+
{primaryButton}
{secondaryButton}
diff --git a/packages/yoga/src/Feedback/web/Feedback.test.jsx b/packages/yoga/src/Feedback/web/Feedback.test.jsx
index 42c0f8f4b3..b40a1b6c7b 100644
--- a/packages/yoga/src/Feedback/web/Feedback.test.jsx
+++ b/packages/yoga/src/Feedback/web/Feedback.test.jsx
@@ -9,6 +9,7 @@ function renderWithTheme(ui) {
const title = 'Welcome to Yoga';
const description = 'Enjoy your membership!';
+const caption = 'Caption Description here.';
describe('', () => {
it('should render the title and description', () => {
@@ -30,6 +31,16 @@ describe('', () => {
expect(getByRole('heading', { name: title })).toBeTruthy();
});
+ it('should render caption children', () => {
+ const { getByText } = renderWithTheme(
+
+ {caption}
+ ,
+ );
+
+ expect(getByText(caption)).toBeTruthy();
+ });
+
it('should render the buttons', () => {
const { getByRole } = renderWithTheme(
@@ -42,6 +53,20 @@ describe('', () => {
expect(getByRole('button', { name: 'Cancel' })).toBeTruthy();
});
+ it('should render title, description, buttons and caption', () => {
+ const { getByText, getByRole } = renderWithTheme(
+
+ {caption}
+ Ok
+ Cancel
+ ,
+ );
+
+ expect(getByText(caption)).toBeTruthy();
+ expect(getByRole('button', { name: 'Ok' })).toBeTruthy();
+ expect(getByRole('button', { name: 'Cancel' })).toBeTruthy();
+ });
+
it('should render correctly when not centered vertically', () => {
const { baseElement } = renderWithTheme(
({
+ as: 'p',
+ bold: true,
+}))`
+ ${({
+ theme: {
+ yoga: { colors },
+ },
+ }) =>
+ css`
+ color: ${colors.text.secondary};
+ `}}
+`;
+
Title.displayName = 'Feedback.Title';
PrimaryButton.displayName = 'Feedback.PrimaryButton';
SecondaryButton.displayName = 'Feedback.SecondaryButton';
+Caption.displayName = 'Feedback.Caption';
diff --git a/packages/yoga/src/Feedback/web/index.js b/packages/yoga/src/Feedback/web/index.js
index 99d912ef19..effe807c5c 100644
--- a/packages/yoga/src/Feedback/web/index.js
+++ b/packages/yoga/src/Feedback/web/index.js
@@ -1,8 +1,14 @@
import Feedback from './Feedback';
-import { Title, PrimaryButton, SecondaryButton } from './StyledFeedback';
+import {
+ Title,
+ PrimaryButton,
+ SecondaryButton,
+ Caption,
+} from './StyledFeedback';
Feedback.Title = Title;
Feedback.PrimaryButton = PrimaryButton;
Feedback.SecondaryButton = SecondaryButton;
+Feedback.Caption = Caption;
export default Feedback;