Merge pull request #33580 from dukenv0307/fix/33172

Remove tooltip of base section list
Expensify · Jan 12, 2024 · f6a2e78 · f6a2e78
2 parents 176fb00 + c7f49b2
commit f6a2e78
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 3 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
@@ -63,6 +63,7 @@ function BaseSelectionList({
     disableKeyboardShortcuts = false,
     children,
     shouldStopPropagation = false,
+    shouldShowTooltips = true,
     shouldUseDynamicMaxToRenderPerBatch = false,
     rightHandSideComponent,
 }) {
@@ -304,7 +305,7 @@ function BaseSelectionList({
         const isDisabled = section.isDisabled || item.isDisabled;
         const isItemFocused = !isDisabled && focusedIndex === normalizedIndex;
         // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
-        const showTooltip = normalizedIndex < 10;
+        const showTooltip = shouldShowTooltips && normalizedIndex < 10;
 
         return (
             <BaseListItem

diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
@@ -190,6 +190,9 @@ const propTypes = {
     /** Custom content to display in the footer */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
+    /** Whether to show the toolip text */
+    shouldShowTooltips: PropTypes.bool,
+
     /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
     shouldUseDynamicMaxToRenderPerBatch: PropTypes.bool,
 

diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js
@@ -26,6 +26,9 @@ const propTypes = {
 
     /** Function to call when the user closes the modal */
     onClose: PropTypes.func,
+
+    /** Whether to show the toolip text */
+    shouldShowTooltips: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -34,9 +37,10 @@ const defaultProps = {
     label: '',
     onClose: () => {},
     onItemSelected: () => {},
+    shouldShowTooltips: true,
 };
 
-function ValueSelectorModal({items, selectedItem, label, isVisible, onClose, onItemSelected}) {
+function ValueSelectorModal({items, selectedItem, label, isVisible, onClose, onItemSelected, shouldShowTooltips}) {
     const styles = useThemeStyles();
     const [sectionsData, setSectionsData] = useState([]);
 
@@ -69,6 +73,7 @@ function ValueSelectorModal({items, selectedItem, label, isVisible, onClose, onI
                     onSelectRow={onItemSelected}
                     initiallyFocusedOptionKey={selectedItem.value}
                     shouldStopPropagation
+                    shouldShowTooltips={shouldShowTooltips}
                 />
             </ScreenWrapper>
         </Modal>

diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js
@@ -34,6 +34,9 @@ const propTypes = {
 
     /** A ref to forward to MenuItemWithTopDescription */
     forwardedRef: refPropTypes,
+
+    /** Whether to show the toolip text */
+    shouldShowTooltips: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -45,9 +48,10 @@ const defaultProps = {
     errorText: '',
     furtherDetails: undefined,
     onInputChange: () => {},
+    shouldShowTooltips: true,
 };
 
-function ValuePicker({value, label, items, placeholder, errorText, onInputChange, furtherDetails, forwardedRef}) {
+function ValuePicker({value, label, items, placeholder, errorText, onInputChange, furtherDetails, shouldShowTooltips, forwardedRef}) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [isPickerVisible, setIsPickerVisible] = useState(false);
@@ -92,6 +96,7 @@ function ValuePicker({value, label, items, placeholder, errorText, onInputChange
                 items={items}
                 onClose={hidePickerModal}
                 onItemSelected={updateInput}
+                shouldShowTooltips={shouldShowTooltips}
             />
         </View>
     );

diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -96,6 +96,7 @@ function TimezoneSelectPage(props) {
                 sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]}
                 initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')}
                 showScrollIndicator
+                shouldShowTooltips={false}
             />
         </ScreenWrapper>
     );

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -320,6 +320,7 @@ function WorkspaceNewRoomPage(props) {
                                     onValueChange={setVisibility}
                                     value={visibility}
                                     furtherDetails={visibilityDescription}
+                                    shouldShowTooltips={false}
                                 />
                             </View>
                         </FormProvider>