add extra slot and deprecate children

src/__screenshot_tests__/feedback-screenshot-test.tsx

@@ -11,25 +11,41 @@ const feedbackTypes = [
     'infofeedbackscreen--info',
 ];
 
-const cases: Array<[string, string, Device]> = [];
-for (const skin of testableSkins) {
+const getCases = () => {
+    const cases: Array<[string, string, Device]> = [];
+    for (const skin of testableSkins) {
+        for (const device of testableDevices) {
+            for (const feedbackType of feedbackTypes) {
+                cases.push([feedbackType, skin, device]);
+            }
+        }
+    }
+    return cases;
+};
+
+const getExtraContentCases = () => {
+    const cases: Array<[string, Device]> = [];
     for (const device of testableDevices) {
         for (const feedbackType of feedbackTypes) {
-            cases.push([feedbackType, skin, device]);
+            cases.push([feedbackType, device]);
         }
     }
-}
+    return cases;
+};
 
-test.each(cases)('Feedback %s screen appears properly on %s and %s', async (feedbackType, skin, device) => {
-    const page = await openStoryPage({
-        id: `patterns-feedback-${feedbackType}`,
-        skin: skin as never,
-        device,
-    });
+test.each(getCases())(
+    'Feedback %s screen appears properly on %s and %s',
+    async (feedbackType, skin, device) => {
+        const page = await openStoryPage({
+            id: `patterns-feedback-${feedbackType}`,
+            skin: skin as never,
+            device,
+        });
 
-    const image = await page.screenshot();
-    expect(image).toMatchImageSnapshot();
-});
+        const image = await page.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);
 
 test('Feedback screen with large fontSize', async () => {
     const page = await openStoryPage({
@@ -55,3 +71,17 @@ test('Info feedback screen with custom icon', async () => {
     const image = await page.screenshot();
     expect(image).toMatchImageSnapshot();
 });
+
+test.each(getExtraContentCases())(
+    'Feedback %s screen with extra content appears properly on %s',
+    async (feedbackType, device) => {
+        const page = await openStoryPage({
+            id: `patterns-feedback-${feedbackType}`,
+            device,
+            args: {extra: true},
+        });
+
+        const image = await page.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);

src/__stories__/error-feedback-screen-story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {ErrorFeedbackScreen} from '../feedback';
 import {ButtonLink, ButtonPrimary} from '../button';
+import {Placeholder} from '../placeholder';
 
 export default {
     title: 'Patterns/Feedback/ErrorFeedbackScreen',
@@ -9,13 +10,22 @@ export default {
     },
 };
 
-export const Error: StoryComponent = () => (
+type Args = {
+    extra: boolean;
+};
+
+export const Error: StoryComponent<Args> = ({extra}) => (
     <ErrorFeedbackScreen
         title="I'm the title"
         description="I'm the description"
         primaryButton={<ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary>}
         link={<ButtonLink onPress={() => {}}>Action2</ButtonLink>}
         errorReference="Error reference: #95001"
+        extra={extra ? <Placeholder /> : undefined}
     />
 );
+
 Error.storyName = 'ErrorFeedbackScreen';
+Error.args = {
+    extra: false,
+};

src/__stories__/feedback-screen-story.tsx

@@ -117,16 +117,17 @@ export const FeedbackScreenStory: StoryComponent<FeedbackScreenArgs> = ({
                             ) : undefined
                         }
                         link={linkText ? <ButtonLink href="#">{linkText}</ButtonLink> : undefined}
-                    >
-                        <Stack space={16}>
-                            <Text2 regular as="p">
-                                Your content goes here.
-                            </Text2>
-                            <Text2 regular as="p">
-                                You can customize this story. Check the "Controls" tab.
-                            </Text2>
-                        </Stack>
-                    </FeedbackScreen>
+                        extra={
+                            <Stack space={16}>
+                                <Text2 regular as="p">
+                                    Your content goes here.
+                                </Text2>
+                                <Text2 regular as="p">
+                                    You can customize this story. Check the "Controls" tab.
+                                </Text2>
+                            </Stack>
+                        }
+                    />
                 </Box>
             </>
         )}

src/__stories__/info-feedback-screen-story.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {InfoFeedbackScreen} from '../feedback';
 import {ButtonPrimary} from '../button';
 import IconError from '../icons/icon-error';
+import {Placeholder} from '../placeholder';
 
 export default {
     title: 'Patterns/Feedback/InfoFeedbackScreen',
@@ -18,18 +19,21 @@ export default {
 
 type Args = {
     icon: string;
+    extra: boolean;
 };
 
-export const Info: StoryComponent<Args> = ({icon}) => (
+export const Info: StoryComponent<Args> = ({icon, extra}) => (
     <InfoFeedbackScreen
         title="I'm the title"
         description="I'm the description"
         primaryButton={<ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary>}
         Icon={icon === 'custom' ? IconError : undefined}
+        extra={extra ? <Placeholder /> : undefined}
     />
 );
 
 Info.storyName = 'InfoFeedbackScreen';
 Info.args = {
     icon: 'default',
+    extra: false,
 };

src/__stories__/success-feedback-screen-story.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {SuccessFeedbackScreen} from '../feedback';
 import {ButtonPrimary, ButtonSecondary} from '../button';
 import emptyStateImg from './images/empty-state.png';
+import {Placeholder} from '../placeholder';
 
 export default {
     title: 'Patterns/Feedback/SuccessFeedbackScreen',
@@ -16,11 +17,16 @@ export default {
     },
 };
 
-type SuccessArgs = {imageUrl: string | null; imageFit: 'fit' | 'fill'; multipleParagraphs: boolean};
+type SuccessArgs = {
+    imageUrl: string | null;
+    imageFit: 'fit' | 'fill';
+    multipleParagraphs: boolean;
+    extra: boolean;
+};
 
 const defaultDescription = "I'm the description";
 
-export const Success: StoryComponent<SuccessArgs> = ({imageUrl, imageFit, multipleParagraphs}) => (
+export const Success: StoryComponent<SuccessArgs> = ({imageUrl, imageFit, multipleParagraphs, extra}) => (
     <SuccessFeedbackScreen
         title="I'm the title"
         description={
@@ -30,7 +36,8 @@ export const Success: StoryComponent<SuccessArgs> = ({imageUrl, imageFit, multip
         secondaryButton={<ButtonSecondary onPress={() => {}}>Action2</ButtonSecondary>}
         imageUrl={imageUrl ?? undefined}
         imageFit={imageFit}
+        extra={extra ? <Placeholder /> : undefined}
     />
 );
 Success.storyName = 'SuccessFeedbackScreen';
-Success.args = {imageUrl: emptyStateImg, imageFit: 'fit', multipleParagraphs: false};
+Success.args = {imageUrl: emptyStateImg, imageFit: 'fit', multipleParagraphs: false, extra: false};

src/__stories__/success-feedback-story.tsx

@@ -25,6 +25,7 @@ type SuccessArgs = {
     imageFit: 'fit' | 'fill';
     multipleParagraphs: boolean;
     withButtons: boolean;
+    extra?: boolean;
 };
 
 const primaryButton = <ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary>;
@@ -39,6 +40,7 @@ export const Success: StoryComponent<SuccessArgs> = ({
     imageFit,
     multipleParagraphs,
     withButtons,
+    extra,
 }) => (
     <SuccessFeedback
         title={defaultTitle}
@@ -49,6 +51,7 @@ export const Success: StoryComponent<SuccessArgs> = ({
         secondaryButton={withButtons ? secondaryButton : undefined}
         imageUrl={imageUrl ?? undefined}
         imageFit={imageFit}
+        extra={extra ? <Placeholder /> : undefined}
     />
 );
 Success.storyName = 'SuccessFeedback';
@@ -57,13 +60,15 @@ Success.args = {
     imageFit: 'fit',
     multipleParagraphs: false,
     withButtons: true,
+    extra: false,
 };
 
 export const SuccessAsHeader: StoryComponent<SuccessArgs> = ({
     imageUrl,
     imageFit,
     multipleParagraphs,
     withButtons,
+    extra,
 }) => {
     const {isTabletOrSmaller} = useScreenSize();
     const successFeedback = (
@@ -76,6 +81,7 @@ export const SuccessAsHeader: StoryComponent<SuccessArgs> = ({
             secondaryButton={withButtons ? secondaryButton : undefined}
             imageUrl={imageUrl ?? undefined}
             imageFit={imageFit}
+            extra={extra ? <Placeholder /> : undefined}
         />
     );
     return (
@@ -96,4 +102,5 @@ SuccessAsHeader.args = {
     imageFit: 'fit',
     multipleParagraphs: false,
     withButtons: true,
+    extra: false,
 };

src/feedback.tsx

@@ -91,7 +91,8 @@ const renderFeedbackBody = (
         title,
         description,
         children,
-    }: Pick<FeedbackScreenProps, 'icon' | 'title' | 'description' | 'children'>,
+        extra,
+    }: Pick<FeedbackScreenProps, 'icon' | 'title' | 'description' | 'children' | 'extra'>,
     animateText: boolean,
     appear: boolean
 ) => {
@@ -122,7 +123,7 @@ const renderFeedbackBody = (
                         {normalizedDescription}
                     </Text3>
                 )}
-                {children}
+                {extra ?? children}
             </Stack>
         </Stack>
     );
@@ -175,7 +176,11 @@ type FeedbackButtonsProps = ButtonGroupProps;
 interface FeedbackProps extends FeedbackButtonsProps {
     title: string;
     description?: string | Array<string>;
+    /**
+     * @deprecated This field is deprecated, please use extra instead.
+     */
     children?: React.ReactNode;
+    extra?: React.ReactNode;
     unstable_inlineInDesktop?: boolean;
     dataAttributes?: DataAttributes;
 }
@@ -196,6 +201,7 @@ export const FeedbackScreen: React.FC<FeedbackScreenProps> = ({
     title,
     description,
     children,
+    extra,
     primaryButton,
     secondaryButton,
     link,
@@ -228,7 +234,7 @@ export const FeedbackScreen: React.FC<FeedbackScreenProps> = ({
     }, []);
 
     const feedbackBody = renderFeedbackBody(
-        {icon, title, description, children},
+        {icon, title, description, children, extra},
         animateText && areAnimationsSupported(platformOverrides),
         appear
     );
@@ -321,6 +327,7 @@ interface ErrorFeedbackScreenProps extends FeedbackProps {
 
 export const ErrorFeedbackScreen: React.FC<ErrorFeedbackScreenProps> = ({
     children,
+    extra,
     errorReference,
     dataAttributes,
     ...otherProps
@@ -332,14 +339,17 @@ export const ErrorFeedbackScreen: React.FC<ErrorFeedbackScreenProps> = ({
             icon={<IconError size="100%" />}
             animateText
             dataAttributes={{'component-name': 'ErrorFeedbackScreen', ...dataAttributes}}
-        >
-            {children}
-            {errorReference && (
-                <Text2 color={vars.colors.textSecondary} regular>
-                    {errorReference}
-                </Text2>
-            )}
-        </FeedbackScreen>
+            extra={
+                <Stack space={16}>
+                    {extra ?? children}
+                    {errorReference && (
+                        <Text2 color={vars.colors.textSecondary} regular>
+                            {errorReference}
+                        </Text2>
+                    )}
+                </Stack>
+            }
+        ></FeedbackScreen>
     );
 };
 
@@ -365,6 +375,7 @@ export const SuccessFeedback: React.FC<AssetFeedbackProps> = ({
     title,
     description,
     children,
+    extra,
     primaryButton,
     secondaryButton,
     link,
@@ -380,7 +391,7 @@ export const SuccessFeedback: React.FC<AssetFeedbackProps> = ({
 
     const icon = skinName === VIVO_SKIN ? <IconSuccessVivo size="100%" /> : <IconSuccess size="100%" />;
     const feedbackBody = renderFeedbackBody(
-        {icon, title, description, children},
+        {icon, title, description, children, extra},
         areAnimationsSupported(platformOverrides),
         appear
     );