feat(InfoSheet): update styles and allow adding a button to the content

src/__private_stories__/sheet-presets-story.tsx

@@ -215,13 +215,15 @@ ActionsList.argTypes = {
 
 type InfoSheetArgs = SheetArgs & {
     numItems: number;
+    buttonText: string;
     iconType: 'bullet' | 'regular' | 'small';
 };
 
 export const Info: StoryComponent<InfoSheetArgs> = ({
     title,
     subtitle,
     description,
+    buttonText,
     multiparagraphDescription,
     numItems,
     iconType,
@@ -246,6 +248,7 @@ export const Info: StoryComponent<InfoSheetArgs> = ({
                     onClose={() => {
                         setOpen(false);
                     }}
+                    button={buttonText ? {text: buttonText} : undefined}
                     title={title}
                     subtitle={subtitle}
                     description={
@@ -276,6 +279,7 @@ Info.storyName = 'InfoSheet';
 Info.args = {
     title: 'Title',
     subtitle: 'Subtitle',
+    buttonText: '',
     description: 'Description',
     numItems: 5,
     iconType: 'bullet',

src/__screenshot_tests__/sheet-screenshot-test.tsx

@@ -87,6 +87,23 @@ test('InfoSheet with multiple description paragraphs', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(TESTABLE_DEVICES)('InfoSheet with dismiss button in %s', async (device) => {
+    const page = await openStoryPage({
+        id: 'private-sheet-presets--info',
+        device,
+        args: {buttonText: 'Dismiss'},
+    });
+
+    const button = await screen.findByRole('button', {name: 'Open'});
+    await button.click();
+
+    await screen.findByRole('dialog');
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test.each(TESTABLE_DEVICES_WITH_LARGE_DESKTOP)('ActionsSheet in %s', async (device) => {
     const page = await openStoryPage({
         id: 'private-sheet-presets--actions',

src/__stories__/sheet-story.tsx

@@ -124,6 +124,7 @@ export const ShowSheet: StoryComponent<ShowSheetArgs> = ({
                                             },
                                         },
                                     ],
+                                    button: {text: 'Dismiss'},
                                 },
                             }).then((response) => {
                                 setOpenDialogType(undefined);

src/sheet-info.css.ts

@@ -5,3 +5,15 @@ export const infoItemIcon = sprinkles({
     alignItems: 'center',
     height: 24,
 });
+
+export const infoItemIconContainer = sprinkles({
+    height: '100%',
+    display: 'flex',
+});
+
+export const itemContainer = sprinkles({
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: 72,
+    paddingY: 16,
+});

src/sheet-info.tsx

@@ -10,6 +10,7 @@ import {Text3, Text2} from './text';
 import {vars as skinVars} from './skins/skin-contract.css';
 import * as styles from './sheet-info.css';
 import Image from './image';
+import {ButtonPrimary} from './button';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, IconProps} from './utils/types';
@@ -38,47 +39,67 @@ type InfoSheetProps = {
     }>;
     onClose?: () => void;
     dataAttributes?: DataAttributes;
+    button?: {
+        text: string;
+    };
 };
 
 const InfoSheet = React.forwardRef<HTMLDivElement, InfoSheetProps>(
-    ({title, subtitle, description, items, onClose, dataAttributes}, ref) => {
+    ({title, subtitle, description, items, onClose, button, dataAttributes}, ref) => {
         const {isDarkMode} = useTheme();
         return (
             <Sheet
                 onClose={onClose}
                 ref={ref}
                 dataAttributes={{'component-name': 'InfoSheet', ...dataAttributes}}
             >
-                {({modalTitleId}) => (
+                {({closeModal, modalTitleId}) => (
                     <SheetBody
                         title={title}
                         subtitle={subtitle}
                         description={description}
                         modalTitleId={modalTitleId}
+                        button={
+                            button ? (
+                                <ButtonPrimary onPress={closeModal}>{button.text}</ButtonPrimary>
+                            ) : undefined
+                        }
                     >
-                        <Box paddingBottom={16}>
-                            <Stack space={16} role="list">
-                                {items.map((item, idx) => (
-                                    <Inline key={item.id || idx} space={8}>
-                                        <div className={styles.infoItemIcon}>
-                                            {item.icon.type === 'bullet' ? (
-                                                <Circle
-                                                    size={8}
-                                                    backgroundColor={skinVars.colors.textPrimary}
-                                                />
-                                            ) : item.icon.Icon ? (
-                                                <item.icon.Icon size={item.icon.type === 'small' ? 16 : 24} />
-                                            ) : (
-                                                <Image
-                                                    src={
-                                                        isDarkMode && item.icon.urlDark
-                                                            ? item.icon.urlDark
-                                                            : item.icon.url
-                                                    }
-                                                    width={item.icon.type === 'small' ? 16 : 24}
-                                                    height={item.icon.type === 'small' ? 16 : 24}
-                                                />
-                                            )}
+                        <Box paddingBottom={16} role="list">
+                            {items.map((item, idx) => (
+                                <div key={item.id || idx} className={styles.itemContainer} role="listitem">
+                                    <Inline space={8}>
+                                        <div
+                                            className={styles.infoItemIconContainer}
+                                            style={{
+                                                alignItems:
+                                                    item.icon.type !== 'bullet' && !item.description
+                                                        ? 'center'
+                                                        : undefined,
+                                            }}
+                                        >
+                                            <div className={styles.infoItemIcon}>
+                                                {item.icon.type === 'bullet' ? (
+                                                    <Circle
+                                                        size={8}
+                                                        backgroundColor={skinVars.colors.textPrimary}
+                                                    />
+                                                ) : item.icon.Icon ? (
+                                                    <item.icon.Icon
+                                                        size={item.icon.type === 'small' ? 16 : 24}
+                                                    />
+                                                ) : (
+                                                    <Image
+                                                        src={
+                                                            isDarkMode && item.icon.urlDark
+                                                                ? item.icon.urlDark
+                                                                : item.icon.url
+                                                        }
+                                                        width={item.icon.type === 'small' ? 16 : 24}
+                                                        height={item.icon.type === 'small' ? 16 : 24}
+                                                    />
+                                                )}
+                                            </div>
                                         </div>
                                         <Stack space={2}>
                                             <Text3 regular>{item.title}</Text3>
@@ -89,8 +110,8 @@ const InfoSheet = React.forwardRef<HTMLDivElement, InfoSheetProps>(
                                             )}
                                         </Stack>
                                     </Inline>
-                                ))}
-                            </Stack>
+                                </div>
+                            ))}
                         </Box>
                     </SheetBody>
                 )}

src/sheet-native.tsx

@@ -88,25 +88,36 @@ const showActionsListNativeSheet = (
 
 const showInfoNativeSheet = async (
     nativeSheetImplementation: NativeSheetImplementation,
-    {title, subtitle, description, items}: SheetPropsByType['INFO']
+    {title, subtitle, description, items, button}: SheetPropsByType['INFO']
 ): Promise<SheetResultByType['INFO']> => {
-    // nothing to return, this is an informative sheet
-    await (nativeSheetImplementation as NativeSheetImplementation)({
+    const infoSheetContent = {
+        type: 'LIST' as const,
+        id: 'list-0',
+        listType: 'INFORMATIVE' as const,
+        autoSubmit: false,
+        selectedIds: [],
+        items,
+    };
+
+    return await (nativeSheetImplementation as NativeSheetImplementation)({
         title,
         subtitle,
         // TODO: add multiline support to native sheet
         description: normalizeDescriptionForNative(description),
-        content: [
-            {
-                type: 'LIST',
-                id: 'list-0',
-                listType: 'INFORMATIVE',
-                autoSubmit: false,
-                selectedIds: [],
-                items,
-            },
-        ],
-    });
+        content: button
+            ? [
+                  infoSheetContent,
+                  {
+                      type: 'BOTTOM_ACTIONS',
+                      id: 'bottom-actions-0',
+                      button,
+                  },
+              ]
+            : [infoSheetContent],
+    }).then(() => ({
+        // this is an informative sheet, it can only be dismissed
+        action: 'DISMISS',
+    }));
 };
 
 const showActionsNativeSheet = (

src/sheet-types.tsx

@@ -51,6 +51,9 @@ export type SheetPropsByType = {
             description?: string;
             icon: InfoIcon;
         }>;
+        button?: {
+            text: string;
+        };
     }>;
     ACTIONS: SheetProps<{
         button: {
@@ -71,7 +74,7 @@ export type SheetType = keyof SheetPropsByType;
 export type SheetResultByType = {
     RADIO_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
     ACTIONS_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
-    INFO: void;
+    INFO: {action: 'DISMISS'};
     ACTIONS: {action: 'PRIMARY' | 'SECONDARY' | 'LINK' | 'DISMISS'};
 };
 

src/sheet-web.tsx

@@ -55,7 +55,7 @@ const SheetWeb = ({sheetProps, onResolve}: SheetWebProps): JSX.Element => {
         }
         switch (sheetProps.type) {
             case 'INFO':
-                onResolve<'INFO'>(undefined);
+                onResolve<'INFO'>({action: 'DISMISS'});
                 break;
             case 'ACTIONS_LIST':
                 if (selectionRef.current) {