@tactics/toddle-styleguide 5.4.47 → 5.4.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.4.47",
+  "version": "5.4.49",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/paragraph-components/paragraph-text.styles.d.ts

@@ -10,6 +10,8 @@ export function Stylesheet(
         width: string;
         textAlign: any;
         color: any;
+        includeFontPadding: boolean;
+        textAlignVertical: string;
       };
       paragraph: {
         fontFamily: string;

package/src/components/atoms/paragraph-components/paragraph-text.styles.js

@@ -10,6 +10,8 @@ export const Stylesheet = (Context, bold, textColor, textAlign) =>
       color: !textColor
         ? Context.colors.ui.black
         : HexColor.of(textColor).toString(),
+      includeFontPadding: false,
+      textAlignVertical: 'center',
     },
     paragraph: [
       !bold

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -14,6 +14,7 @@ type PopoverModalProps = {
   isVisible: boolean;
   children: React.ReactNode;
   windowHeight: number;
+  bottomInset?: number;
   disableScrollContent?: boolean;
 };
 
@@ -24,6 +25,7 @@ const Modal = ({
   onClose,
   children,
   windowHeight,
+  bottomInset = 0,
   disableScrollContent,
 }: PopoverModalProps) => {
   // Keep element and window size in local state.
@@ -36,7 +38,11 @@ const Modal = ({
   const elementHeight = Math.round(elementSize.height);
 
   const maxHeight = Math.round(windowHeight / 100) * 90;
-  const translateYStartingPoint = windowHeight;
+  // windowHeight already reflects the full edge-to-edge screen height on
+  // Android, but it excludes the space behind the navigation bar, so the
+  // sheet's rest/closed position needs bottomInset added or its top edge
+  // peeks out from behind the nav bar when closed (see PopoverAction).
+  const translateYStartingPoint = windowHeight + bottomInset;
 
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
 

package/src/components/templates/popover/popover.component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {useEffect, useState} from 'react';
-import {Dimensions, Platform, StatusBar, View} from 'react-native';
+import {Dimensions, Platform, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Stylesheet} from './popover.styles';
 import {Backdrop} from '../../atoms/backdrop/backdrop.component';
 import {Modal, Foreground} from './components';
@@ -23,17 +24,14 @@ const Popover = ({
   disableScrollContent,
 }: PopoverProps) => {
   const styles = Stylesheet();
+  const insets = useSafeAreaInsets();
   const [windowHeight, setWindowHeight] = useState(
     Dimensions.get('window').height
   );
 
   useEffect(() => {
     const updateWindowHeight = () => {
-      let availableHeight = Dimensions.get('window').height;
-      if (Platform.OS === 'android') {
-        availableHeight += StatusBar.currentHeight ?? 0;
-      }
-      setWindowHeight(availableHeight);
+      setWindowHeight(Dimensions.get('window').height);
     };
 
     updateWindowHeight();
@@ -52,6 +50,7 @@ const Popover = ({
       <Foreground>
         <Modal
           windowHeight={windowHeight}
+          bottomInset={Platform.OS === 'android' ? insets.bottom : 0}
           isVisible={isVisible}
           onClose={onClose}
           title={title}

package/src/components/templates/popover-action/popover-action.component.tsx

@@ -12,7 +12,6 @@ import {
   Dimensions,
   LayoutChangeEvent,
   Platform,
-  StatusBar,
   View,
   ViewProps,
 } from 'react-native';
@@ -20,6 +19,7 @@ import { Backdrop } from '../../atoms/backdrop/backdrop.component';
 import { Stylesheet } from './popover-action.styles';
 import { Swipe } from '../../molecules/swipe/swipe.component';
 import { ThemeCtx } from '../../../context/theme.context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type PopOverActionProps = {
   isVisible: boolean;
@@ -51,18 +51,29 @@ export const PopOverAction = ({
   ) => {
     // Ignore zero-height layouts which can occur before content renders,
     // otherwise the sheet may collapse and appear to lose content.
-    if (layout?.height && layout.height > 0) {
-      setChildDimensions((prev) => {
-        const updated = [...prev];
-        updated[index] = layout;
-        return updated;
-      });
+    if (!layout?.height || layout.height <= 0) return;
+
+    setChildDimensions((prev) => {
+      const existing = prev[index];
+      // Some children mount their real content a tick after an initial empty
+      // render (e.g. TimePicker), so a later layout call can briefly report a
+      // smaller height than what was already measured. Keep the tallest
+      // measurement seen instead of last-write-wins, otherwise the sheet can
+      // settle on a stale, too-small height and clip content.
+      if (existing && existing.height >= layout.height) return prev;
+      const updated = [...prev];
+      updated[index] = layout;
+      return updated;
+    });
 
-      // Ensure element size is known for the currently visible child so the animation can open
-      // even if Swipe never emits onIndexChange (e.g., only one child or Swipe not implemented yet).
-      if (index === currentChildIndex) {
-        setElementSize({ width: layout.width, height: layout.height });
-      }
+    // Ensure element size is known for the currently visible child so the animation can open
+    // even if Swipe never emits onIndexChange (e.g., only one child or Swipe not implemented yet).
+    if (index === currentChildIndex) {
+      setElementSize((prev) =>
+        prev.height >= layout.height
+          ? prev
+          : { width: layout.width, height: layout.height }
+      );
     }
   };
 
@@ -102,11 +113,7 @@ export const PopOverAction = ({
 
   useEffect(() => {
     const updateWindowHeight = () => {
-      let availableHeight = Dimensions.get('window').height;
-      if (Platform.OS === 'android') {
-        availableHeight += StatusBar.currentHeight ?? 0;
-      }
-      setWindowHeight(availableHeight);
+      setWindowHeight(Dimensions.get('window').height);
     };
 
     updateWindowHeight();
@@ -117,10 +124,16 @@ export const PopOverAction = ({
 
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
+  const insets = useSafeAreaInsets();
 
   const elementHeight = Math.round(elementSize.height);
   const maxHeight = Math.round(windowHeight * 0.9);
-  const translateYStartingPoint = windowHeight;
+  // On Android, Dimensions.get('window') excludes the space behind the
+  // navigation bar, but the sheet's container renders behind it (edge-to-edge).
+  // Without this, the sheet doesn't travel far enough down when closed and its
+  // top edge peeks out from behind the navigation bar.
+  const translateYStartingPoint =
+    windowHeight + (Platform.OS === 'android' ? insets.bottom : 0);
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
 
   const translateY = React.useRef(new Animated.Value(translateYStartingPoint)).current;
@@ -166,15 +179,28 @@ export const PopOverAction = ({
       <Backdrop isVisible={isVisible} touchBackDrop={touchBackDrop} />
       <Animated.View
         style={[styles.slidePanelContainer, {maxHeight: maxHeight}, {transform: transform}]}
-        onLayout={(event) => {
-          const {width, height} = event.nativeEvent.layout;
-          setElementSize({width: width, height: height});
-        }}
       >
         <Swipe onIndexChange={handleChildIndexChange}>
           {renderChildrenWithLayout(children, handleChildLayout)}
         </Swipe>
       </Animated.View>
+      {/* Hidden pass so every child's height is measured up front, regardless of
+          which pages the Swipe pager actually keeps mounted (it doesn't guarantee
+          all of them are laid out ahead of time). Without this, swiping to a page
+          that hasn't been measured yet leaves the sheet at the previous page's height.
+          Height is fixed to maxHeight (rather than left to shrink-wrap) so that a child
+          using a percentage height (e.g. height: '100%') resolves against a real value
+          instead of collapsing to 0, which otherwise leaves the sheet stuck fully closed. */}
+      <View
+        style={[
+          styles.slidePanelContainer,
+          styles.measurementContainer,
+          {height: maxHeight},
+        ]}
+        pointerEvents="none"
+      >
+        {renderChildrenWithLayout(children, handleChildLayout)}
+      </View>
     </View>
   );
 };

package/src/components/templates/popover-action/popover-action.preview.tsx

@@ -5,12 +5,135 @@ import {PopOverAction} from './popover-action.component';
 import {Heading2} from '../../atoms/heading-components';
 import {Icon} from '../../../icons/index';
 import {Paragraph} from '../../atoms/paragraph-components';
-import {TimePicker} from '../../molecules/time-picker/time-picker.component';
+import {MoreInfoButton} from '../../molecules/more-info-button/more-info-button.component';
+import {BareTimePicker} from '../../molecules/bare-time-picker/bare-time-picker.component';
+import {Scale} from '../../../theme/scale/index';
+
+// Mirrors Toddle-For-Daycares' src/modals/actions-single-child/actions-single-child.modal.tsx,
+// which renders this exact shape as the two PopOverAction pages shown when a caregiver taps a
+// child in the home list. Each page root uses height:'100%'/width:'100%' (actions-single-child's
+// and action-content's `rootContainer`), and the time picker is `BareTimePicker`, not `TimePicker`
+// - both details matter for reproducing the sizing bug reported in production.
+// Called as a plain function (not JSX) so the View it returns is the direct child of
+// PopOverAction - PopOverAction measures each direct child via cloneElement(child, {onLayout}),
+// which only reaches a real host View, not a custom component placed between them.
+const renderActionContent = ({
+  pageKey,
+  actionLabel,
+  childDisplayName,
+  buttonLabel,
+  secondaryButtonLabel,
+  hours,
+  minutes,
+  setHours,
+  setMinutes,
+}: {
+  pageKey: string;
+  actionLabel: string;
+  childDisplayName: string;
+  buttonLabel: string;
+  secondaryButtonLabel: string;
+  hours: string;
+  minutes: string;
+  setHours: (value: string) => void;
+  setMinutes: (value: string) => void;
+}) => (
+  <View key={pageKey} style={{height: '100%', width: '100%'}}>
+    <View style={{alignItems: 'center', marginBottom: Scale.s}}>
+      <Heading2 bold={true} textAlign={'center'}>
+        {actionLabel}
+      </Heading2>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingTop: Scale.xs,
+          paddingBottom: Scale.xs,
+        }}
+      >
+        <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+        <View style={{marginLeft: Scale.xs}}>
+          <Paragraph>17 Jan 2021</Paragraph>
+        </View>
+      </View>
+    </View>
+
+    <View style={{justifyContent: 'center'}}>
+      <View
+        style={{
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: Scale.l,
+        }}
+      >
+        <View
+          style={{
+            borderRadius: 50,
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 40,
+            maxHeight: 40,
+            paddingLeft: Scale.s,
+            paddingTop: Scale.xs,
+            paddingRight: Scale.s,
+            paddingBottom: Scale.xs,
+            backgroundColor: '#E5E5E5',
+          }}
+        >
+          <Paragraph
+            bold={true}
+            textAlign={'center'}
+            ellipsizeMode={'tail'}
+            numberOfLines={1}
+          >
+            {childDisplayName}
+          </Paragraph>
+        </View>
+      </View>
+
+      <View
+        style={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: Scale.m,
+        }}
+      >
+        <BareTimePicker
+          initialHours={hours}
+          initialMinutes={minutes}
+          onChangeHours={setHours}
+          onChangeMinutes={setMinutes}
+        />
+      </View>
+
+      <View
+        style={{
+          alignItems: 'center',
+          marginBottom: Scale.m * 3.75,
+          gap: Scale.m * 1.25,
+        }}
+      >
+        <Button label={buttonLabel} onPress={() => console.log('pressed')} />
+        <MoreInfoButton
+          label={secondaryButtonLabel}
+          textColor={'#000000'}
+          onPress={() => console.log('secondary pressed')}
+        />
+      </View>
+    </View>
+  </View>
+);
 
 export const PopOverActionPreview = () => {
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const [checkInHours, setCheckInHours] = useState('09');
   const [checkInMinutes, setCheckInMinutes] = useState('06');
+  const [messageHours, setMessageHours] = useState('09');
+  const [messageMinutes, setMessageMinutes] = useState('06');
 
   return (
     <View style={{width: '100%', height: '100%', zIndex: 10000}}>
@@ -22,120 +145,31 @@ export const PopOverActionPreview = () => {
       </View>
 
       <PopOverAction isVisible={isVisible} touchBackDrop={setIsVisible}>
-        {/*FIRST CHILD*/}
-        <View
-          style={{
-            alignItems: 'center',
-            gap: 60,
-            height: 460,
-          }}
-          key={1}
-        >
-          <View style={{gap: 10}}>
-            <Heading2 bold={true} textAlign={'center'}>
-              Uurregistratie
-            </Heading2>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 16,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
-              <View>
-                <Paragraph>17 Jan 2021</Paragraph>
-              </View>
-            </View>
-          </View>
-          <TimePicker
-            initialHours={checkInHours}
-            initialMinutes={checkInMinutes}
-            onChangeHours={setCheckInHours}
-            onChangeMinutes={setCheckInMinutes}
-          />
-        </View>
-
-        {/*SECOND CHILD*/}
-
-        <View
-          style={{
-            alignItems: 'center',
-            gap: 60,
-            height: 400,
-          }}
-          key={2}
-        >
-          <View style={{gap: 12}}>
-            <Heading2 bold={true} textAlign={'center'}>
-              Uurregistratie
-            </Heading2>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 16,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
-              <View>
-                <Paragraph>17 Jan 2021</Paragraph>
-              </View>
-            </View>
-          </View>
-
-          <TimePicker
-            initialHours={checkInHours}
-            initialMinutes={checkInMinutes}
-            onChangeHours={setCheckInHours}
-            onChangeMinutes={setCheckInMinutes}
-          />
+        {/* CHECK IN / OUT - matches the modal's incomplete-presence branch */}
+        {renderActionContent({
+          pageKey: 'checkin',
+          actionLabel: 'Uurregistratie',
+          childDisplayName: 'Nora',
+          buttonLabel: 'Check in',
+          secondaryButtonLabel: 'View registrations',
+          hours: checkInHours,
+          minutes: checkInMinutes,
+          setHours: setCheckInHours,
+          setMinutes: setCheckInMinutes,
+        })}
 
-          <Button
-            label={'Test button'}
-            onPress={() => console.log('pressed')}
-          />
-        </View>
-
-        {/*Third CHILD*/}
-
-        <View
-          style={{
-            alignItems: 'center',
-            gap: 60,
-            height: 600,
-          }}
-          key={3}
-        >
-          <View style={{gap: 12}}>
-            <Heading2 bold={true} textAlign={'center'}>
-              Uurregistratie
-            </Heading2>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 16,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
-              <View>
-                <Paragraph>17 Jan 2021</Paragraph>
-              </View>
-            </View>
-          </View>
-
-          <Button
-            label={'Test button'}
-            onPress={() => console.log('pressed')}
-          />
-        </View>
+        {/* ADD A MESSAGE - matches the modal's second PopOverAction page */}
+        {renderActionContent({
+          pageKey: 'message',
+          actionLabel: 'Add a message',
+          childDisplayName: 'Nora',
+          buttonLabel: 'Custom message',
+          secondaryButtonLabel: 'Standard messages',
+          hours: messageHours,
+          minutes: messageMinutes,
+          setHours: setMessageHours,
+          setMinutes: setMessageMinutes,
+        })}
       </PopOverAction>
     </View>
   );

package/src/components/templates/popover-action/popover-action.styles.d.ts

@@ -25,4 +25,10 @@ export function Stylesheet(context: any): {
     zIndex: number;
     backgroundColor: any;
   };
+  measurementContainer: {
+    position: 'absolute';
+    top: number;
+    opacity: number;
+    flex: number;
+  };
 };

package/src/components/templates/popover-action/popover-action.styles.js

@@ -30,4 +30,10 @@ export const Stylesheet = (context) =>
       zIndex: 1004,
       backgroundColor: context.colors.ui.white,
     },
+    measurementContainer: {
+      position: 'absolute',
+      top: 0,
+      opacity: 0,
+      flex: 0,
+    },
   });