@utilitywarehouse/hearth-react-native 0.30.4-testid-fix-2 → 0.31.0

package/src/components/Flex/Flex.props.ts

@@ -1,7 +1,21 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { FlexLayoutProps, GapProps, SpacingValues } from '../../types';
+import {
+  DisplayProps,
+  FlexLayoutProps,
+  GapProps,
+  MarginProps,
+  PaddingProps,
+  SpacingValues,
+} from '../../types';
 
-interface FlexProps extends ViewProps, FlexLayoutProps, GapProps {
+interface FlexProps
+  extends
+    ViewProps,
+    MarginProps,
+    PaddingProps,
+    FlexLayoutProps,
+    GapProps,
+    Omit<DisplayProps, 'direction'> {
   direction?: ViewStyle['flexDirection'];
   align?: FlexAlignType;
   justify?: ViewStyle['justifyContent'];

package/src/components/FormField/FormField.tsx

@@ -1,6 +1,7 @@
 import { createFormControl } from '@gluestack-ui/form-control';
 import { useMemo, useState } from 'react';
 import { View } from 'react-native';
+import { BodyText } from '../BodyText';
 import { HelperIcon, HelperText } from '../Helper';
 import { FormFieldContext } from './FormField.context';
 import FormFieldProps from './FormField.props';
@@ -94,7 +95,7 @@ const FormField = ({
                 accessibilityElementsHidden={shouldHandleAccessibility}
               >
                 {label}
-                {!required ? ` (Optional)` : ''}
+                {!required ? <BodyText weight="regular"> (Optional)</BodyText> : ''}
               </FormFieldLabelText>
             )}
             {!!helperText && (

package/src/components/List/List.stories.tsx

@@ -10,6 +10,7 @@ import {
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
+import { FlatList } from 'react-native';
 import { List, ListAction, ListItem, ListItemIcon, ListItemTrailingIcon } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Badge } from '../Badge';
@@ -398,6 +399,40 @@ export const Loading: Story = {
   ),
 };
 
+export const WithFlatList: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const listData = Array.from({ length: 200 }).map((_, index) => ({
+      id: index.toString(),
+      heading: `List Item ${index + 1}`,
+      helperText: `Supporting Text ${index + 1}`,
+    }));
+
+    return (
+      <List
+        container="subtleWhite"
+        heading="FlatList Example"
+        helperText="This list is rendered using FlatList for performance"
+      >
+        <FlatList
+          data={listData}
+          keyExtractor={item => item.id}
+          renderItem={({ item }) => (
+            <ListItem
+              heading={item.heading}
+              helperText={item.helperText}
+              leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
+              onPress={() => console.log(`${item.heading} pressed`)}
+            />
+          )}
+        />
+      </List>
+    );
+  },
+};
+
 export const KitchenSink: Story = {
   parameters: {
     controls: { include: [] },

package/src/components/Modal/Modal.docs.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, BottomSheetModal, Box, Button, Center, Heading, Modal } from '../../';
+import { BodyText, BottomSheetModal, Box, Button, Center, Flex, Heading, Modal } from '../../';
 import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Modal.stories';
@@ -28,6 +28,7 @@ If you need a modal layout inside a React Navigation modal screen, use <Storyboo
   - [Modal with Image](#modal-with-image)
   - [Fullscreen Modal](#fullscreen-modal)
   - [Modal with Custom Content](#modal-with-custom-content)
+  - [Sticky Custom Footer](#sticky-custom-footer)
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
@@ -107,9 +108,13 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                        | -              |
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')           | -              |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline')      | -              |
+| `footer`                      | `ReactNode`                                                        | Custom footer content that replaces the built-in action buttons                                                    | -              |
+| `footerStyle`                 | `StyleProp<ViewStyle>`                                             | Styles applied to the footer container, useful for sticky footer shadows or custom spacing                         | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                       | -              |
 | `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                            | `false`        |
 
+When `footer` is provided, the primary and secondary button props are not available. Build your footer actions directly inside the custom footer content instead.
+
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 
 ### `ModalImage` Props
@@ -371,6 +376,52 @@ const CustomContentModal = () => {
 };
 ```
 
+### Sticky Custom Footer
+
+Replace the built-in buttons with a custom sticky footer when you need custom layouts or button arrangements:
+
+<Canvas of={Stories.StickyCustomFooter} />
+
+```tsx
+const StickyCustomFooterModal = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  return (
+    <>
+      <Button onPress={() => modalRef.current?.present()}>Show Custom Footer Modal</Button>
+
+      <Modal
+        ref={modalRef}
+        heading="Update billing details"
+        description="Use a custom sticky footer when you need horizontal actions or extra decoration."
+        footer={
+          <Flex direction="row" spacing="md" pt="250">
+            <Button
+              variant="outline"
+              colorScheme="functional"
+              onPress={() => modalRef.current?.dismiss()}
+              style={{ flex: 1 }}
+            >
+              Cancel
+            </Button>
+            <Button onPress={() => modalRef.current?.dismiss()} style={{ flex: 1 }}>
+              Save changes
+            </Button>
+          </Flex>
+        }
+        footerStyle={{
+          boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+        }}
+      >
+        <Box gap="200">
+          <BodyText>Review the changes before saving.</BodyText>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+```
+
 ### Loading State
 
 Show a loading spinner while processing:

package/src/components/Modal/Modal.props.ts

@@ -1,10 +1,25 @@
 import { BottomSheetProps } from '../BottomSheet';
-import { ModalCommonProps } from './Modal.shared.types';
+import {
+  ModalButtonFooterProps,
+  ModalCommonBaseProps,
+  ModalCustomFooterProps,
+} from './Modal.shared.types';
 
-interface ModalProps extends Omit<BottomSheetProps, 'children'>, ModalCommonProps {
-  fullscreen?: boolean;
-  closeOnPrimaryButtonPress?: boolean;
-  closeOnSecondaryButtonPress?: boolean;
-}
+type ModalBaseProps = Omit<BottomSheetProps, 'children'> &
+  ModalCommonBaseProps & {
+    fullscreen?: boolean;
+  };
+
+type ModalProps =
+  | (ModalBaseProps &
+      ModalButtonFooterProps & {
+        closeOnPrimaryButtonPress?: boolean;
+        closeOnSecondaryButtonPress?: boolean;
+      })
+  | (ModalBaseProps &
+      ModalCustomFooterProps & {
+        closeOnPrimaryButtonPress?: never;
+        closeOnSecondaryButtonPress?: never;
+      });
 
 export default ModalProps;

package/src/components/Modal/Modal.shared.types.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 
-export interface ModalCommonProps {
+export interface ModalCommonBaseProps {
   loading?: boolean;
   image?: ReactNode;
   showCloseButton?: boolean;
@@ -13,12 +13,31 @@ export interface ModalCommonProps {
   description?: string;
   stickyFooter?: boolean;
   children?: ViewProps['children'];
+  onPressCloseButton?: () => void;
+  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+}
+
+export interface ModalButtonFooterProps {
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;
   onPressSecondaryButton?: () => void;
   secondaryButtonText?: string;
-  onPressCloseButton?: () => void;
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+  footer?: never;
+  footerStyle?: StyleProp<ViewStyle>;
+}
+
+export interface ModalCustomFooterProps {
+  footer: ReactNode;
+  footerStyle?: StyleProp<ViewStyle>;
+  onPressPrimaryButton?: never;
+  primaryButtonText?: never;
+  onPressSecondaryButton?: never;
+  secondaryButtonText?: never;
+  primaryButtonProps?: never;
+  secondaryButtonProps?: never;
 }
+
+export type ModalCommonProps = ModalCommonBaseProps &
+  (ModalButtonFooterProps | ModalCustomFooterProps);

package/src/components/Modal/Modal.stories.tsx

@@ -5,9 +5,10 @@ import { Modal, ModalImage } from '.';
 import pigs from '../../../docs/assets/pigs.png';
 import { ViewWrap } from '../../../docs/components';
 import { BodyText } from '../BodyText';
-import { BottomSheetModal } from '../BottomSheet';
+import { BottomSheetModal, BottomSheetModalProvider } from '../BottomSheet';
 import { Box } from '../Box';
 import { Button } from '../Button';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Modal',
@@ -164,6 +165,56 @@ export const WithCustomContent = () => {
   );
 };
 
+export const StickyCustomFooter = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  const openModal = () => {
+    modalRef.current?.present();
+  };
+
+  const closeModal = () => {
+    modalRef.current?.dismiss();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <Button onPress={openModal}>Open Modal</Button>
+
+        <Modal
+          ref={modalRef}
+          heading="Update billing details"
+          description="Review the changes below, then save or discard them using a custom sticky footer."
+          onPressCloseButton={closeModal}
+          footer={
+            <Flex direction="row" spacing="md" pt="250">
+              <Button
+                variant="outline"
+                colorScheme="functional"
+                onPress={closeModal}
+                style={{ flex: 1 }}
+              >
+                Cancel
+              </Button>
+              <Button onPress={closeModal} style={{ flex: 1 }}>
+                Save changes
+              </Button>
+            </Flex>
+          }
+          footerStyle={{
+            boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+          }}
+        >
+          <Box gap="200">
+            <BodyText>Billing address: 14 Park Street, Bristol</BodyText>
+            <BodyText>Preferred payment day: 15th of each month</BodyText>
+          </Box>
+        </Modal>
+      </ViewWrap>
+    </View>
+  );
+};
+
 export const Loading = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -239,3 +290,116 @@ export const FullscreenModal: Story = {
     );
   },
 };
+
+export const NoStickyFooter: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Modal Heading"
+            description="This is a modal description without a sticky footer."
+            onPressCloseButton={closeModal}
+            primaryButtonText="Primary"
+            onPressPrimaryButton={closeModal}
+            secondaryButtonText="Cancel"
+            onPressSecondaryButton={closeModal}
+            stickyFooter={false}
+          >
+            <Box gap="200">
+              <BodyText>This is a modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const NoFooter: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Modal Heading"
+            description="This is a modal description without a footer."
+            onPressCloseButton={closeModal}
+          >
+            <Box gap="200">
+              <BodyText>This is a modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const NoSafeArea: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <BottomSheetModalProvider useSafeAreaInsets={false}>
+        <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+          <ViewWrap>
+            <Button onPress={openModal}>Open Modal</Button>
+
+            <Modal
+              ref={modalRef}
+              heading="Modal Heading"
+              description="This is a modal description without safe area insets."
+              onPressCloseButton={closeModal}
+              primaryButtonText="Primary"
+              onPressPrimaryButton={closeModal}
+              secondaryButtonText="Cancel"
+              onPressSecondaryButton={closeModal}
+            >
+              <Box gap="200">
+                <BodyText>This is a modal with content.</BodyText>
+                <BodyText>You can swipe it up and down to close.</BodyText>
+              </Box>
+            </Modal>
+          </ViewWrap>
+        </View>
+      </BottomSheetModalProvider>
+    );
+  },
+};