@planningcenter/chat-react-native 3.9.0-rc.0 → 3.9.0-rc.2

package/src/components/primitive/form_sheet.tsx

@@ -12,7 +12,8 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import { PlatformPressable, useHeaderHeight } from '@react-navigation/elements'
-import { Heading, Icon, IconString, Text } from '../display'
+import { Heading, Icon, IconString, Text, Button, TextButton } from '../display'
+import type { ButtonProps, TextButtonProps } from '../display'
 
 // =================================
 // ====== Exports ==================
@@ -43,16 +44,32 @@ const FormSheet = {
   Root: FormSheetRoot,
   Action: FormSheetAction,
   Header: FormSheetHeader,
+  HeaderTitle: FormSheetHeaderTitle,
+  HeaderActions: FormSheetHeaderActions,
+  HeaderSecondaryButton: FormSheetHeaderSecondaryButton,
+  HeaderPrimaryButton: FormSheetHeaderPrimaryButton,
 } as const
 
 type FormSheetComponents = {
   Root: React.FC<FormSheetRootProps>
   Action: React.FC<FormSheetActionProps>
   Header: React.FC<FormSheetHeaderProps>
+  HeaderTitle: React.FC<FormSheetHeaderTitleProps>
+  HeaderActions: React.FC<FormSheetHeaderActionsProps>
+  HeaderSecondaryButton: React.FC<FormSheetHeaderSecondaryButtonProps>
+  HeaderPrimaryButton: React.FC<FormSheetHeaderPrimaryButtonProps>
 }
 
 export default FormSheet as FormSheetComponents
-export type { FormSheetRootProps, FormSheetActionProps, FormSheetHeaderProps }
+export type {
+  FormSheetRootProps,
+  FormSheetActionProps,
+  FormSheetHeaderProps,
+  FormSheetHeaderTitleProps,
+  FormSheetHeaderActionsProps,
+  FormSheetHeaderSecondaryButtonProps,
+  FormSheetHeaderPrimaryButtonProps,
+}
 
 // ====================================
 // ====== ActionsFormSheetRoot ========
@@ -95,30 +112,77 @@ function AndroidSheetGrabber() {
 // ====================================
 
 interface FormSheetHeaderProps {
-  title: string
-  secondaryButton?: ReactNode
-  primaryButton?: ReactNode
+  children: ReactNode
+}
+
+function FormSheetHeader({ children }: FormSheetHeaderProps) {
+  const styles = useStyles()
+
+  return <View style={styles.header}>{children}</View>
+}
+
+FormSheetHeader.displayName = 'FormSheet.Header'
+
+// ====================================
+// ====== FormSheetHeaderTitle ========
+// ====================================
+
+interface FormSheetHeaderTitleProps {
+  children: ReactNode
 }
-function FormSheetHeader({ title, secondaryButton, primaryButton }: FormSheetHeaderProps) {
+
+function FormSheetHeaderTitle({ children }: FormSheetHeaderTitleProps) {
   const styles = useStyles()
-  const hasActions = Boolean(secondaryButton) || Boolean(primaryButton)
 
   return (
-    <View style={styles.header}>
-      <Heading variant="h3" style={styles.headerTitle}>
-        {title}
-      </Heading>
-      {hasActions && (
-        <View style={styles.headerActions}>
-          {secondaryButton}
-          {primaryButton}
-        </View>
-      )}
-    </View>
+    <Heading variant="h3" style={styles.headerTitle} maxFontSizeMultiplier={1}>
+      {children}
+    </Heading>
   )
 }
 
-FormSheetHeader.displayName = 'FormSheet.Header'
+FormSheetHeaderTitle.displayName = 'FormSheet.HeaderTitle'
+
+// ====================================
+// ====== FormSheetHeaderActions ======
+// ====================================
+
+interface FormSheetHeaderActionsProps {
+  children: ReactNode
+}
+
+function FormSheetHeaderActions({ children }: FormSheetHeaderActionsProps) {
+  const styles = useStyles()
+
+  return <View style={styles.headerActions}>{children}</View>
+}
+
+FormSheetHeaderActions.displayName = 'FormSheet.HeaderActions'
+
+// ===========================================
+// ====== FormSheetHeaderSecondaryButton ====
+// ===========================================
+
+interface FormSheetHeaderSecondaryButtonProps
+  extends Omit<TextButtonProps, 'maxFontSizeMultiplier'> {}
+
+function FormSheetHeaderSecondaryButton(props: FormSheetHeaderSecondaryButtonProps) {
+  return <TextButton {...props} maxFontSizeMultiplier={1} />
+}
+
+FormSheetHeaderSecondaryButton.displayName = 'FormSheet.HeaderSecondaryButton'
+
+// =========================================
+// ====== FormSheetHeaderPrimaryButton ====
+// =========================================
+
+interface FormSheetHeaderPrimaryButtonProps extends Omit<ButtonProps, 'maxFontSizeMultiplier'> {}
+
+function FormSheetHeaderPrimaryButton(props: FormSheetHeaderPrimaryButtonProps) {
+  return <Button {...props} maxFontSizeMultiplier={1} />
+}
+
+FormSheetHeaderPrimaryButton.displayName = 'FormSheet.HeaderPrimaryButton'
 
 // ====================================
 // ====== ActionsFormSheetAction ======

package/src/screens/conversation/message_read_receipts_screen.tsx

@@ -2,7 +2,7 @@ import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { memo } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Avatar, Text, TextButton } from '../../components'
+import { Avatar, Text } from '../../components'
 import { useReadReceipts } from '../../hooks/use_read_receipts'
 import { FlatList } from 'react-native-gesture-handler'
 import { ReadReceiptResource } from '../../types/resources/read_receipt'
@@ -35,10 +35,14 @@ export function MessageReadReceiptsScreen({ route }: MessageReadReceiptsScreenPr
 
   return (
     <FormSheet.Root>
-      <FormSheet.Header
-        title={`Read receipts (${totalCount})`}
-        secondaryButton={<TextButton onPress={() => navigation.goBack()}>Close</TextButton>}
-      />
+      <FormSheet.Header>
+        <FormSheet.HeaderTitle>Read receipts ({totalCount})</FormSheet.HeaderTitle>
+        <FormSheet.HeaderActions>
+          <FormSheet.HeaderSecondaryButton onPress={() => navigation.goBack()}>
+            Close
+          </FormSheet.HeaderSecondaryButton>
+        </FormSheet.HeaderActions>
+      </FormSheet.Header>
       <FlatList
         data={receipts}
         contentContainerStyle={styles.contentContainer}

package/src/screens/conversation_details_screen.tsx

@@ -176,13 +176,14 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     (props: HeaderTitleProps) => {
       return (
         <View style={styles.headerTitleContainer}>
-          <ElementsHeaderTitle {...props} />
+          <ElementsHeaderTitle maxFontSizeMultiplier={1} {...props} />
           <Badge
             variant="metaSubtle"
             label={resourceType}
             metaLabel={name}
             style={styles.headerTitleBadge}
             productLogoName={productName}
+            maxFontSizeMultiplier={1}
           />
         </View>
       )

package/src/screens/conversation_filter_recipients/conversation_filter_recipients_screen.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react'
 import { Platform, StyleSheet } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FlatList } from 'react-native-gesture-handler'
-import { Button, Heading, TextButton } from '../../components'
+import { Heading } from '../../components'
 import { useTheme } from '../../hooks'
 import { useFlattenedArrayOfServiceTypesWithTeams } from './hooks/use_flattened_array_of_service_types_with_teams'
 import { ConversationFilterRecipientsScreenProps, SectionTypes } from './types'
@@ -63,25 +63,24 @@ export const ConversationFilterRecipientsScreen = ({
 
   return (
     <FormSheet.Root>
-      <FormSheet.Header
-        title="Teams I lead"
-        secondaryButton={
-          <TextButton
+      <FormSheet.Header>
+        <FormSheet.HeaderTitle>Teams I lead</FormSheet.HeaderTitle>
+        <FormSheet.HeaderActions>
+          <FormSheet.HeaderSecondaryButton
             onPress={resetTeamFilters}
             accessibilityHint="Cancels any selected teams and closes this modal."
           >
             Cancel
-          </TextButton>
-        }
-        primaryButton={
-          <Button
+          </FormSheet.HeaderSecondaryButton>
+          <FormSheet.HeaderPrimaryButton
             title="Apply"
             accessibilityHint={applyButtonAccessibilityHint}
             onPress={applyTeamFilters}
             disabled={noTeamsSelected}
           />
-        }
-      />
+        </FormSheet.HeaderActions>
+      </FormSheet.Header>
+
       <FlatList
         data={data}
         ListHeaderComponent={

package/src/screens/conversation_filters_screen.tsx

@@ -23,7 +23,11 @@ import { TeamFilters } from './conversation_filters/team_filters'
 
 const FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {
   const styles = useStyles()
-  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Filters</HeaderTitle>
+  return (
+    <HeaderTitle maxFontSizeMultiplier={1} style={[styles.headerTitle, { color: tintColor }]}>
+      Filters
+    </HeaderTitle>
+  )
 }
 
 const HeaderRight = () => {
@@ -33,8 +37,10 @@ const HeaderRight = () => {
 
   return (
     <View style={styles.headerRight}>
-      <TextButton onPress={resetFilter}>Reset</TextButton>
-      <Button title="Apply" onPress={() => applyFilters(route.params)} />
+      <TextButton maxFontSizeMultiplier={1} onPress={resetFilter}>
+        Reset
+      </TextButton>
+      <Button maxFontSizeMultiplier={1} title="Apply" onPress={() => applyFilters(route.params)} />
     </View>
   )
 }

package/src/screens/conversation_screen.tsx

@@ -267,7 +267,9 @@ export const ConversationScreenTitle = ({
       }}
     >
       <View style={styles.titleWrapper}>
-        <HeaderTitle style={style}>{children}</HeaderTitle>
+        <HeaderTitle maxFontSizeMultiplier={1} style={style}>
+          {children}
+        </HeaderTitle>
         {!deleted && <Icon name="general.downChevron" size={12} />}
       </View>
       <Badge
@@ -276,6 +278,7 @@ export const ConversationScreenTitle = ({
         label={resourceType}
         metaLabel={name}
         style={styles.badge}
+        maxFontSizeMultiplier={1}
       />
     </PlatformPressable>
   )