@utilitywarehouse/hearth-react-native 0.22.1 → 0.23.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.22.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.23.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.22.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.23.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -31,8 +31,8 @@
   78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   73:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  269:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+   74:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  274:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
   66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
@@ -60,13 +60,13 @@
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1480.154 |    63.5%
-no-global-assign                          |    86.111 |     3.7%
-react-hooks/exhaustive-deps               |    81.893 |     3.5%
-react-hooks/rules-of-hooks                |    58.807 |     2.5%
-no-misleading-character-class             |    53.302 |     2.3%
-@typescript-eslint/ban-ts-comment         |    49.364 |     2.1%
-no-unexpected-multiline                   |    36.564 |     1.6%
-no-fallthrough                            |    32.890 |     1.4%
-@typescript-eslint/triple-slash-reference |    30.004 |     1.3%
-no-regex-spaces                           |    26.454 |     1.1%
+@typescript-eslint/no-unused-vars         |  2022.725 |    59.1%
+react-hooks/exhaustive-deps               |   192.308 |     5.6%
+no-global-assign                          |   140.412 |     4.1%
+react-hooks/rules-of-hooks                |   101.894 |     3.0%
+@typescript-eslint/ban-ts-comment         |    78.579 |     2.3%
+no-misleading-character-class             |    64.143 |     1.9%
+no-unexpected-multiline                   |    47.419 |     1.4%
+@typescript-eslint/triple-slash-reference |    40.424 |     1.2%
+no-loss-of-precision                      |    39.686 |     1.2%
+no-regex-spaces                           |    38.266 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.23.0
+
+### Minor Changes
+
+- [#975](https://github.com/utilitywarehouse/hearth/pull/975) [`102f04e`](https://github.com/utilitywarehouse/hearth/commit/102f04e0d560cf0faa21da5020c230e88e857251) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add a `background` option for Modal when used inside navigation modals
+
+  Modal now supports a `background` prop with `default` and `brand` values. When `background="brand"` is used in a navigation modal, the buttons and close icon invert for contrast, and the content area is scrollable.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required. To opt in to the brand background:
+
+  ```tsx
+  <Modal background="brand" inNavModal>
+    ...
+  </Modal>
+  ```
+
 ## 0.22.1
 
 ### Patch Changes

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -13,7 +13,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -105,9 +105,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         noButtons,
         stickyFooter,
         showHandle: props.showHandle,
+        background: background === 'brand' ? 'brand' : 'primary',
     });
-    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
+    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: background === 'brand' && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: background === 'brand' && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: background === 'brand' && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, inNavModal ? _jsx(ScrollView, { style: { flex: 1 }, children: children }) : children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -116,7 +117,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         primaryButtonProps,
         secondaryButtonProps,
     ]);
-    return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
+    return inNavModal ? (_jsxs(View, { style: {
+            flex: 1,
+            backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+        }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     modal: {
@@ -225,6 +229,14 @@ const styles = StyleSheet.create((theme, rt) => ({
         gap: theme.components.modal.gap,
         padding: theme.components.modal.padding,
         paddingBottom: theme.components.modal.padding + rt.insets.bottom,
+        variants: {
+            background: {
+                primary: {},
+                brand: {
+                    backgroundColor: theme.color.background.brand,
+                },
+            },
+        },
     },
     androidContainer: {
         height: rt.insets.top + 18,

package/build/components/Modal/Modal.props.d.ts

@@ -24,5 +24,6 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+    background?: 'default' | 'brand';
 }
 export default ModalProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,8 +56,8 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },

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

@@ -109,6 +109,7 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `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`        |
 | `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
+| `background`                  | `'default' \| 'brand'`                                             | Sets the modal background. Only applies when `inNavModal` is `true`                                           | `'default'`    |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 

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

@@ -25,6 +25,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+  background?: 'default' | 'brand';
 }
 
 export default ModalProps;

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

@@ -66,6 +66,7 @@ const meta = {
     onPressCloseButton: () => null,
     onPressPrimaryButton: () => null,
     onPressSecondaryButton: () => null,
+    background: 'brand',
   },
 } satisfies Meta<typeof Modal>;
 

package/src/components/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import {
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -50,6 +50,7 @@ const Modal = ({
   closeButtonProps,
   inNavModal = false,
   stickyFooter = true,
+  background = 'default',
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -170,6 +171,7 @@ const Modal = ({
     noButtons,
     stickyFooter,
     showHandle: props.showHandle,
+    background: background === 'brand' ? 'brand' : 'primary',
   });
 
   const footer = (
@@ -178,6 +180,7 @@ const Modal = ({
         <Button
           onPress={handlePrimaryButtonPress}
           text={primaryButtonText}
+          inverted={background === 'brand' && inNavModal}
           {...primaryButtonProps}
           variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
           colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
@@ -187,6 +190,7 @@ const Modal = ({
         <Button
           onPress={handleSecondaryButtonPress}
           text={secondaryButtonText}
+          inverted={background === 'brand' && inNavModal}
           {...secondaryButtonProps}
           variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
           colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
@@ -232,6 +236,7 @@ const Modal = ({
                 icon={CloseMediumIcon}
                 onPress={handleCloseButtonPress}
                 accessibilityLabel="Close modal"
+                inverted={background === 'brand' && inNavModal}
                 {...closeButtonProps}
               />
             ) : null}
@@ -253,7 +258,7 @@ const Modal = ({
               </View>
             </View>
           ) : null}
-          {children}
+          {inNavModal ? <ScrollView style={{ flex: 1 }}>{children}</ScrollView> : children}
           {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
         </View>
       )}
@@ -277,7 +282,12 @@ const Modal = ({
   );
 
   return inNavModal ? (
-    <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+      }}
+    >
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
           <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
@@ -420,6 +430,14 @@ const styles = StyleSheet.create((theme, rt) => ({
     gap: theme.components.modal.gap,
     padding: theme.components.modal.padding,
     paddingBottom: theme.components.modal.padding + rt.insets.bottom,
+    variants: {
+      background: {
+        primary: {},
+        brand: {
+          backgroundColor: theme.color.background.brand,
+        },
+      },
+    },
   },
   androidContainer: {
     height: rt.insets.top + 18,