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

package/src/components/display/badge.tsx

@@ -91,6 +91,10 @@ export interface BadgeProps {
    * Callback function when the badge is pressed.
    */
   onPress?: () => void
+  /**
+   * Specifies the number of lines for the meta label before truncating.
+   */
+  numberOfLinesMetaLabel?: number
 }
 
 export function Badge({
@@ -103,6 +107,7 @@ export function Badge({
   productLogoName,
   variant = 'default',
   maxFontSizeMultiplier,
+  numberOfLinesMetaLabel = 1,
   onPress,
 }: BadgeProps) {
   const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
@@ -134,7 +139,7 @@ export function Badge({
         <Text
           variant="footnote"
           style={styles.metaLabel}
-          numberOfLines={1}
+          numberOfLines={numberOfLinesMetaLabel}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {metaLabel}

package/src/components/display/toggle_button.tsx

@@ -17,11 +17,20 @@ import { Icon, IconString } from './icon'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
 
+// =================================
+// ====== Constants ================
+// =================================
+
+// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
+// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
+// Triggering this prop will display an almost full screen iOS a11y button.
+type RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>
+
 // =================================
 // ====== Component ================
 // =================================
 
-export interface ToggleButtonProps extends PressableProps {
+export interface ToggleButtonProps extends RestrictedPressableProps {
   /**
    * Pressable container styles
    */
@@ -102,6 +111,8 @@ export function ToggleButton({
       accessibilityState={{ checked: active }}
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       onPress={handlePress}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={title}
       {...props}
     >
       {iconNameLeft && (

package/src/components/primitive/form_sheet.tsx

@@ -14,6 +14,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import type { ButtonProps, TextButtonProps } from '../display'
 import { Button, Heading, Icon, IconString, Text, TextButton } from '../display'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 
 // =================================
 // ====== Exports ==================
@@ -146,7 +147,11 @@ function FormSheetHeaderTitle({ children }: FormSheetHeaderTitleProps) {
   const styles = useStyles()
 
   return (
-    <Heading variant="h3" style={styles.headerTitle} maxFontSizeMultiplier={1}>
+    <Heading
+      variant="h3"
+      style={styles.headerTitle}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+    >
       {children}
     </Heading>
   )
@@ -174,10 +179,23 @@ FormSheetHeaderActions.displayName = 'FormSheet.HeaderActions'
 // ====== FormSheetHeaderTextButton ==========
 // ===========================================
 
-interface FormSheetHeaderTextButtonProps extends Omit<TextButtonProps, 'maxFontSizeMultiplier'> {}
+// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
+// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
+// Triggering this prop will display an almost full screen iOS a11y button.
+interface FormSheetHeaderTextButtonProps
+  extends Omit<TextButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {
+  children: string
+}
 
 function FormSheetHeaderTextButton(props: FormSheetHeaderTextButtonProps) {
-  return <TextButton {...props} maxFontSizeMultiplier={1} />
+  return (
+    <TextButton
+      {...props}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={props.children}
+    />
+  )
 }
 
 FormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'
@@ -186,10 +204,19 @@ FormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'
 // ====== FormSheetHeaderButton ============
 // =========================================
 
-interface FormSheetHeaderButtonProps extends Omit<ButtonProps, 'maxFontSizeMultiplier'> {}
+// Same `onLongPress`note as `FormSheetHeaderTextButtonProps`
+interface FormSheetHeaderButtonProps
+  extends Omit<ButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {}
 
 function FormSheetHeaderButton(props: FormSheetHeaderButtonProps) {
-  return <Button {...props} maxFontSizeMultiplier={1} />
+  return (
+    <Button
+      {...props}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={props.title}
+    />
+  )
 }
 
 FormSheetHeaderButton.displayName = 'FormSheet.HeaderButton'
@@ -324,6 +351,7 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
     },
     headerTitle: {
       textAlign: 'left',
+      flex: 1,
     },
     headerActions: {
       flexDirection: 'row',

package/src/hooks/index.ts

@@ -13,3 +13,4 @@ export * from './use_api_client'
 export * from './use_message_reaction_toggle'
 export * from './use_interaction_ghost_color'
 export * from './use_at_font_scale_breakpoint'
+export * from './use_scalable_number_of_lines'

package/src/hooks/use_scalable_number_of_lines.ts

@@ -0,0 +1,10 @@
+import { useAtFontScaleBreakpoint } from './use_at_font_scale_breakpoint'
+
+export const useScalableNumberOfLines = (numberOfLines?: number): number | undefined => {
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
+  if (!numberOfLines) return undefined
+
+  const numberOfLinesDoubled = numberOfLines + 1
+  return atFontScaleBreakpoint ? numberOfLinesDoubled : numberOfLines
+}

package/src/screens/conversations/components/list_header_component.tsx

@@ -68,6 +68,8 @@ export const ListHeaderComponent = () => {
           onPress={alertMarkAllRead}
           disabled={isPending}
           maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityShowsLargeContentViewer
+          accessibilityLargeContentTitle="Mark all read"
         >
           Mark all read
         </TextButton>
@@ -153,7 +155,7 @@ const useStyles = () => {
       rowGap: 8,
       columnGap: 16,
       paddingTop: 8,
-      paddingBottom: atFontScaleBreakpoint ? 8 : 0,
+      paddingBottom: atFontScaleBreakpoint ? 4 : 0,
       paddingHorizontal: ROW_PADDING_HORIZONTAL,
     },
     filterRow: {

package/src/screens/conversations/conversations_screen.tsx

@@ -73,6 +73,8 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
             variant="tertiary"
             onPress={reportABug}
             maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+            accessibilityShowsLargeContentViewer
+            accessibilityLargeContentTitle="Report a bug"
           >
             Report a bug
           </TextButton>

package/src/utils/styles.ts

@@ -2,7 +2,7 @@ import { Platform } from 'react-native'
 import { tokens } from '../vendor/tapestry/tokens'
 
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5
-export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers, toolbars, etc.
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created