fixes issues where side by side button text is cut off in different l…

…anguages and large font sizes. Refactor to use ButtonBar in all places with side by side buttons. Truncates header in ObsEdit when language text exeeds space to not push kebab menu off screen. Closes #2500.
inaturalist · Dec 17, 2024 · b38cbc1 · b38cbc1
1 parent 58e892f
commit b38cbc1
Show file tree

Hide file tree

Showing 10 changed files with 366 additions and 257 deletions.
diff --git a/src/components/Explore/SearchScreens/ExploreLocationSearch.js b/src/components/Explore/SearchScreens/ExploreLocationSearch.js
@@ -3,7 +3,7 @@
 import fetchSearchResults from "api/search.ts";
 import {
   Body1,
-  Button,
+  ButtonBar,
   List2,
   SearchBar,
   ViewWrapper
@@ -128,6 +128,21 @@ const ExploreLocationSearch = ( {
 
   const renderFooter = ( ) => <View className="h-[336px]" />;
 
+  const buttons = [
+    {
+      title: t( "NEARBY" ),
+      onPress: onNearbyPressed,
+      isPrimary: false,
+      className: "w-1/2 mx-6"
+    },
+    {
+      title: t( "WORLDWIDE" ),
+      onPress: resetPlace,
+      isPrimary: false,
+      className: "w-1/2 mx-6"
+    }
+  ];
+
   return (
     <ViewWrapper testID="explore-location-search">
       <ExploreSearchHeader
@@ -137,7 +152,7 @@ const ExploreLocationSearch = ( {
         testID="ExploreLocationSearch.close"
       />
       <View
-        className="bg-white pt-2 pb-4"
+        className="bg-white pt-2"
         style={DROP_SHADOW}
       >
         <View className="px-6">
@@ -146,19 +161,7 @@ const ExploreLocationSearch = ( {
             value={locationName}
             testID="ExploreLocationSearch.locationSearch"
           />
-        </View>
-        <View className="flex-row px-6 mt-5 justify-around">
-          <Button
-            className="w-1/2"
-            onPress={onNearbyPressed}
-            text={t( "NEARBY" )}
-          />
-          <View className="px-5" />
-          <Button
-            className="w-1/2"
-            onPress={resetPlace}
-            text={t( "WORLDWIDE" )}
-          />
+          <ButtonBar buttonConfiguration={buttons} containerClass="justify-center p-[15px]" />
         </View>
       </View>
       <FlatList

diff --git a/src/components/ObsDetails/ActivityTab/FloatingButtons.js b/src/components/ObsDetails/ActivityTab/FloatingButtons.js
@@ -1,6 +1,6 @@
 // @flow
 import {
-  Button
+  ButtonBar
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
@@ -28,26 +28,35 @@ const FloatingButtons = ( {
 }: Props ): Node => {
   const { t } = useTranslation( );
 
+  const buttons = [
+    {
+      title: t( "COMMENT" ),
+      onPress: openAddCommentSheet,
+      isPrimary: false,
+      testID: "ObsDetail.commentButton",
+      disabled: showAddCommentSheet,
+      accessibilityHint: "Opens-add-comment-form",
+      className: "w-1/2 mx-6"
+    },
+    {
+      title: t( "SUGGEST-ID" ),
+      onPress: navToSuggestions,
+      isPrimary: false,
+      testID: "ObsDetail.cvSuggestionsButton",
+      accessibilityHint: "Shows-identification-suggestions",
+      accessibilityRole: "link",
+      className: "w-1/2 mx-6"
+    }
+  ];
+
   return (
     <View
-      className="flex-row justify-evenly bg-white pt-4 pb-4 px-6"
+      className="bg-white"
       style={DROP_SHADOW}
     >
-      <Button
-        text={t( "COMMENT" )}
-        onPress={openAddCommentSheet}
-        className="w-1/2 mx-6"
-        testID="ObsDetail.commentButton"
-        disabled={showAddCommentSheet}
-        accessibilityHint={t( "Opens-add-comment-form" )}
-      />
-      <Button
-        text={t( "SUGGEST-ID" )}
-        onPress={navToSuggestions}
-        className="w-1/2 mx-6"
-        testID="ObsDetail.cvSuggestionsButton"
-        accessibilityRole="link"
-        accessibilityHint={t( "Shows-identification-suggestions" )}
+      <ButtonBar
+        buttonConfiguration={buttons}
+        containerClass="justify-evenly p-[15px]"
       />
     </View>
   );

diff --git a/src/components/ObsDetails/Sheets/AgreeWithIDSheet.js b/src/components/ObsDetails/Sheets/AgreeWithIDSheet.js
@@ -1,7 +1,7 @@
 // @flow
 import {
   BottomSheet,
-  Button,
+  ButtonBar,
   DisplayTaxon,
   INatIcon,
   List2
@@ -41,66 +41,71 @@ const AgreeWithIDSheet = ( {
   identification,
   onAgree,
   onPressClose
-}: Props ): Node => (
-  <BottomSheet
-    headerText={t( "AGREE-WITH-ID" )}
-    hidden={hidden}
-    onPressClose={onPressClose}
-  >
-    <View
-      className="mx-[26px] space-y-[11px] my-[15px]"
+}: Props ): Node => {
+  const buttons = [
+    {
+      title: t( "AGREE" ),
+      isPrimary: true,
+      onPress: ( ) => onAgree( identification ),
+      className: "mx-2 flex-1",
+      testID: "ObsDetail.AgreeId.cvSuggestionsButton",
+      accessibilityRole: "link",
+      accessibilityHint: t( "Navigates-to-suggest-identification" ),
+      level: "primary"
+    }
+  ];
+
+  if ( identification.body ) {
+    buttons.unshift( {
+      title: t( "EDIT-COMMENT" ),
+      isPrimary: false,
+      onPress: ( ) => {
+        editIdentBody( );
+      },
+      className: "mx-2 flex-1",
+      testID: "ObsDetail.AgreeId.EditCommentButton",
+      accessibilityHint: t( "Opens-edit-comment-form" )
+    } );
+  } else {
+    buttons.unshift( {
+      title: t( "ADD-COMMENT" ),
+      isPrimary: false,
+      onPress: ( ) => {
+        editIdentBody( );
+      },
+      className: "mx-2 flex-1",
+      testID: "ObsDetail.AgreeId.commentButton",
+      accessibilityHint: t( "Opens-add-comment-form" )
+    } );
+  }
+
+  return (
+    <BottomSheet
+      headerText={t( "AGREE-WITH-ID" )}
+      hidden={hidden}
+      onPressClose={onPressClose}
     >
-      <List2 className="text-darkGray">
-        {t( "Agree-with-ID-description" )}
-      </List2>
-      { identification.body && (
-        <View
-          className=" flex-row items-center bg-lightGray p-[15px] rounded"
-        >
-          <INatIcon name="add-comment-outline" size={22} />
-          <List2 className="ml-[7px] text-darkGray">
-            {identification.body}
-          </List2>
-        </View>
-      )}
-      {showTaxon( identification.taxon )}
-    </View>
-    <View className="flex-row mx-3 mb-3">
-      {identification.body
-        ? (
-          <Button
-            text={t( "EDIT-COMMENT" )}
-            onPress={( ) => {
-              editIdentBody( );
-            }}
-            className="mx-2 flex-1"
-            testID="ObsDetail.AgreeId.EditCommentButton"
-            accessibilityHint={t( "Opens-edit-comment-form" )}
-          />
-        )
-        : (
-          <Button
-            text={t( "ADD-COMMENT" )}
-            onPress={( ) => {
-              editIdentBody( );
-            }}
-            className="mx-2 flex-1"
-            testID="ObsDetail.AgreeId.commentButton"
-            accessibilityHint={t( "Opens-add-comment-form" )}
-          />
+      <View
+        className="mx-[26px] space-y-[11px] my-[15px]"
+      >
+        <List2 className="text-darkGray">
+          {t( "Agree-with-ID-description" )}
+        </List2>
+        { identification.body && (
+          <View
+            className=" flex-row items-center bg-lightGray p-[15px] rounded"
+          >
+            <INatIcon name="add-comment-outline" size={22} />
+            <List2 className="ml-[7px] text-darkGray">
+              {identification.body}
+            </List2>
+          </View>
         )}
-
-      <Button
-        text={t( "AGREE" )}
-        onPress={( ) => onAgree( identification )}
-        className="mx-2 flex-1"
-        testID="ObsDetail.AgreeId.cvSuggestionsButton"
-        accessibilityRole="link"
-        accessibilityHint={t( "Navigates-to-suggest-identification" )}
-        level="primary"
-      />
-    </View>
-  </BottomSheet>
-);
+        {showTaxon( identification.taxon )}
+      </View>
+      <ButtonBar buttonConfiguration={buttons} containerClass="px-[15px] pb-[15px]" />
+    </BottomSheet>
+  );
+};
 
 export default AgreeWithIDSheet;