Merge pull request #129 from GetLuko/hugo/fix/navigation-bar-trail-title

NavigationBarTrail: fix title overlapping
GetLuko · Oct 18, 2023 · 4e94267 · 4e94267
2 parents 9b6c88b + 38f159e
commit 4e94267
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 10 deletions.
diff --git a/packages/sandbox/e2e/android/screenshots/NavigationBarTrail.png b/packages/sandbox/e2e/android/screenshots/NavigationBarTrail.png
diff --git a/packages/sandbox/e2e/ios/screenshots/NavigationBarTrail.png b/packages/sandbox/e2e/ios/screenshots/NavigationBarTrail.png
diff --git a/packages/sandbox/src/app/sandbox/docs/navigation-bar-trail.doc.tsx b/packages/sandbox/src/app/sandbox/docs/navigation-bar-trail.doc.tsx
@@ -20,6 +20,10 @@ const right: NavigationBarTrailProps['right'] = {
   },
 };
 
+const title = 'Title';
+const longTitle =
+  'Super long title that should be truncated even when there is no other stuff';
+
 const action = {
   title: 'Action',
   onPress: async () => {
@@ -31,14 +35,14 @@ const docs: JSX.Element[] = [
     appearance="primary"
     left={{ ...left, type: 'close' }}
     right={right}
-    title="Title"
+    title={title}
     action={action}
   />,
 
   <NavigationBarTrail
     left={left}
     right={right}
-    title="Title"
+    title={title}
     action={action}
     appearance="dark"
   />,
@@ -47,7 +51,7 @@ const docs: JSX.Element[] = [
     left={left}
     right={right}
     backgroundColor="BLUKO_500"
-    title="Title"
+    title={title}
     action={action}
     appearance="light"
   />,
@@ -62,10 +66,32 @@ const docs: JSX.Element[] = [
     backgroundColor="ORANGE_700"
   />,
   <NavigationBarTrail
-    title="Title"
+    title={title}
     appearance="light"
     backgroundColor="ORANGE_700"
   />,
+  <NavigationBarTrail
+    title={longTitle}
+    left={left}
+    right={right}
+    action={action}
+    appearance="primary"
+  />,
+  <NavigationBarTrail
+    title={longTitle}
+    right={right}
+    action={action}
+    appearance="primary"
+  />,
+  <NavigationBarTrail
+    title={longTitle}
+    left={left}
+    action={action}
+    appearance="primary"
+  />,
+  <NavigationBarTrail title={longTitle} action={action} appearance="primary" />,
+  <NavigationBarTrail title={longTitle} right={right} appearance="primary" />,
+  <NavigationBarTrail title={longTitle} left={left} appearance="primary" />,
 ];
 
 export const NavigationBarTrailSandbox = () => <DocList docs={docs} />;
diff --git a/packages/streamline/src/components/navigation/navigation-bar-trail/navigation-bar-trail.tsx b/packages/streamline/src/components/navigation/navigation-bar-trail/navigation-bar-trail.tsx
@@ -1,13 +1,17 @@
-import { Pressable } from 'react-native';
+import { useState } from 'react';
+import { LayoutChangeEvent, Pressable } from 'react-native';
 
 import { AnimatedBox } from '../../../primitives/animated-box/animated-box';
 import { Box } from '../../../primitives/box/box';
 import { Text } from '../../../primitives/text/text';
-import { ColorTheme } from '../../../theme';
+import { ColorTheme, useStreamlineTheme } from '../../../theme';
 import ButtonIcon from '../../buttons/button-icon/button-icon';
 import { ButtonIconProps } from '../../buttons/button-icon/button-icon.types';
 import { getNavigationTrailTextColor } from './navigation-bar-trail.utils';
 
+const MIN_WIDTH = 40;
+const MIN_HEIGHT = 48;
+
 export interface NavigationBarTrailProps {
   title?: string;
   left?: {
@@ -38,6 +42,19 @@ export const NavigationBarTrail = ({
   const { titleColor, actionColor } = getNavigationTrailTextColor({
     appearance,
   });
+
+  const { spacing } = useStreamlineTheme();
+
+  const minWidth = left || right ? MIN_WIDTH + spacing.xs : spacing.md;
+
+  const [rightWidth, setRightWidth] = useState(minWidth);
+
+  const handleOnRightLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    const rightWidth = width ? width + spacing.xs : minWidth;
+    setRightWidth(rightWidth);
+  };
+
   return (
     <Box
       paddingHorizontal="xs"
@@ -46,11 +63,16 @@ export const NavigationBarTrail = ({
       flexDirection="row"
       alignItems="center"
       justifyContent="space-between"
-      minHeight={48}
+      minHeight={MIN_HEIGHT}
     >
-      <Box flex={1} position="absolute" left={0} right={0}>
+      <Box flex={1} position="absolute" left={minWidth} right={rightWidth}>
         <AnimatedBox style={textOpacityStyle}>
-          <Text variant="bodyBold" color={titleColor} textAlign="center">
+          <Text
+            variant="bodyBold"
+            color={titleColor}
+            textAlign="center"
+            numberOfLines={1}
+          >
             {title}
           </Text>
         </AnimatedBox>
@@ -69,7 +91,12 @@ export const NavigationBarTrail = ({
         <Box />
       )}
 
-      <Box flexDirection="row" alignItems="center">
+      <Box
+        flexDirection="row"
+        alignItems="center"
+        backgroundColor={backgroundColor}
+        onLayout={handleOnRightLayout}
+      >
         {action ? (
           <Pressable
             testID={action.testID}