Enhance icons UI consistency

contributingGuides/SELECTION_LIST.md

@@ -8,7 +8,7 @@ This doc explains when and how to use the `SelectionList` and `SelectionListWith
 There are two main components:
 
 - [**`SelectionList`**](../src/components/SelectionList/BaseSelectionList.tsx) - For displaying a single array of data (no sections)
-- [**`SelectionListWithSections`**](../src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx) - For displaying data organized into multiple sections
+- [**`SelectionListWithSections`**](../src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx) - For displaying data organized into multiple sections
 
 ## When to Use Each Component
 
@@ -59,13 +59,18 @@ There are two main components:
 ```tsx
 <SelectionListWithSections
     sections={[
-        { title: 'Recent', data: recentContacts },
-        { title: 'All Contacts', data: allContacts },
+        { title: 'Recent', data: recentContacts, sectionIndex: 0 },
+        { title: 'All Contacts', data: allContacts, sectionIndex: 1 },
     ]}
     ListItem={UserListItem}
     onSelectRow={handleSelectContact}
     shouldShowTextInput
-    textInputLabel="Search contacts"
+    textInputOptions={{
+        label: "Search items",
+        value: searchText,
+        onChangeText: setSearchText,
+        headerMessage
+    }}
 />
 ```
 

eslint.config.mjs

@@ -132,14 +132,6 @@ const restrictedImportPaths = [
         name: '@src/utils/findNodeHandle',
         message: "Do not use 'findNodeHandle' as it is no longer supported on web.",
     },
-    {
-        name: './SelectionListWithSections',
-        message: 'Use `SelectionList` for flat data. Only use `SelectionListWithSection` when data is actually sectioned. See contributingGuides/SELECTION_LIST.md for details',
-    },
-    {
-        name: '@components/SelectionListWithSections',
-        message: 'Use `SelectionList` for flat data. Only use `SelectionListWithSection` when data is actually sectioned. See contributingGuides/SELECTION_LIST.md for details',
-    },
 ];
 
 const restrictedImportPatterns = [

src/CONST/index.ts

@@ -142,7 +142,9 @@ const signupQualifiers = {
     SMB: 'smb',
 } as const;
 
-type OnboardingAccounting = keyof typeof CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY | null;
+type NoneAccountingKey = 'none';
+
+type OnboardingAccounting = keyof typeof CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY | NoneAccountingKey | null;
 
 const onboardingInviteTypes = {
     IOU: 'iou',
@@ -8637,6 +8639,7 @@ const CONST = {
             GROUP_EXPAND_TOGGLE: 'Search-GroupExpandToggle',
             GROUP_SELECT_ALL_CHECKBOX: 'Search-GroupSelectAllCheckbox',
             SORTABLE_HEADER: 'Search-SortableHeader',
+            UNREPORTED_EXPENSE_LIST_ITEM: 'UnreportedExpenseListItem',
         },
         REPORT: {
             FLOATING_MESSAGE_COUNTER: 'Report-FloatingMessageCounter',

src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx

@@ -6,7 +6,7 @@ import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
@@ -132,14 +132,12 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
         <View style={[styles.mh5, styles.flexGrow1]}>
             <SelectionList
                 data={currencyOptions}
-                ListItem={RadioListItem}
+                ListItem={SingleSelectListItem}
                 onSelectRow={(option) => {
                     selectCurrency(option.value);
                 }}
                 style={{containerStyle: styles.mhn5}}
-                initiallyFocusedItemKey={currency}
                 customListHeader={<PaymentCardCurrencyHeader isSectionList />}
-                shouldStopPropagation
             />
         </View>
     );

src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx

@@ -4,7 +4,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -67,11 +67,10 @@ function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONS
                 />
                 <SelectionList
                     data={currencyOptions}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     onSelectRow={(option) => {
                         onCurrencyChange(option.value);
                     }}
-                    initiallyFocusedItemKey={currentCurrency}
                     showScrollIndicator
                 />
             </ScreenWrapper>

src/components/AddPlaidBankAccount.tsx

@@ -251,9 +251,11 @@ function AddPlaidBankAccount({
 
     return (
         <FullPageOfflineBlockingView>
-            <Text style={[styles.mb3, styles.textHeadlineLineHeightXXL]}>{translate(isDisplayedInWalletFlow ? 'walletPage.chooseYourBankAccount' : 'bankAccount.chooseAnAccount')}</Text>
-            {!!text && <Text style={[styles.mb6, styles.textSupporting]}>{text}</Text>}
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
+            <Text style={[styles.mh5, styles.mb3, styles.textHeadlineLineHeightXXL]}>
+                {translate(isDisplayedInWalletFlow ? 'walletPage.chooseYourBankAccount' : 'bankAccount.chooseAnAccount')}
+            </Text>
+            {!!text && <Text style={[styles.mh5, styles.mb6, styles.textSupporting]}>{text}</Text>}
+            <View style={[styles.mh5, styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
                 <Icon
                     src={icon}
                     height={iconSize}
@@ -267,12 +269,12 @@ function AddPlaidBankAccount({
                     )}
                 </View>
             </View>
-            <Text style={[styles.textLabelSupporting]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
+            <Text style={[styles.textLabelSupporting, styles.mh5]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
             <RadioButtons
                 items={options}
                 defaultCheckedValue={defaultSelectedPlaidAccountID}
                 onPress={handleSelectingPlaidAccount}
-                radioButtonStyle={[styles.mb6]}
+                radioButtonStyle={[styles.optionRowCompact, styles.ph5]}
             />
             <FormHelpMessage message={errorText} />
         </FullPageOfflineBlockingView>

src/components/ApproverSelectionList.tsx

@@ -168,6 +168,7 @@ function ApproverSelectionList({
                     shouldUpdateFocusedIndex={shouldUpdateFocusedIndex}
                     showScrollIndicator
                     isRowMultilineSupported
+                    shouldShowRadioButton
                 />
             </FullPageNotFoundView>
         </ScreenWrapper>

src/components/AvatarWithDisplayName.tsx

@@ -44,7 +44,7 @@ import Icon from './Icon';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import ReportActionAvatars from './ReportActionAvatars';
-import type {TransactionListItemType} from './SelectionListWithSections/types';
+import type {TransactionListItemType} from './Search/SearchList/ListItem/types';
 import Text from './Text';
 
 type AvatarWithDisplayNameProps = {

src/components/BaseVacationDelegateSelectionComponent.tsx

@@ -187,6 +187,7 @@ function BaseVacationDelegateSelectionComponent({
                         onEndReached={onListEndReached}
                         shouldSingleExecuteRowSelect
                         shouldShowTextInput
+                        shouldShowRadioButton
                     />
                 </View>
             )}

src/components/CategoryPicker.tsx

@@ -11,7 +11,7 @@ import {getHeaderMessageForNonUserList} from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import RadioListItem from './SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from './SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from './SelectionList/SelectionListWithSections';
 import type {ListItem} from './SelectionList/types';
 
@@ -80,7 +80,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeArea
         <SelectionListWithSections
             sections={sections}
             onSelectRow={onSubmit}
-            ListItem={RadioListItem}
+            ListItem={SingleSelectListItem}
             shouldShowTextInput={categoriesCount >= CONST.STANDARD_LIST_ITEM_LIMIT}
             textInputOptions={textInputOptions}
             initiallyFocusedItemKey={selectedOptionKey}

src/components/CategorySelector/CategorySelectorModal.tsx

@@ -3,7 +3,7 @@ import CategoryPicker from '@components/CategoryPicker';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
-import type {ListItem} from '@components/SelectionListWithSections/types';
+import type {ListItem} from '@components/SelectionList/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 

src/components/CategorySelector/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import type {ListItem} from '@components/SelectionListWithSections/types';
+import type {ListItem} from '@components/SelectionList/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getDecodedCategoryName} from '@libs/CategoryUtils';
 import CONST from '@src/CONST';

src/components/Checkbox.tsx

@@ -66,6 +66,9 @@ type CheckboxProps = Partial<ChildrenProps> &
         /** Reference to the outer element */
         ref?: ForwardedRef<View>;
 
+        /** Whether this Checkbox should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. */
+        focusable?: boolean;
+
         /** Tab index for the checkbox */
         tabIndex?: 0 | -1;
     };
@@ -89,6 +92,7 @@ function Checkbox({
     wrapperStyle,
     testID,
     ref,
+    focusable = true,
     sentryLabel,
     tabIndex,
 }: CheckboxProps) {
@@ -147,6 +151,7 @@ function Checkbox({
             accessibilityLabel={accessibilityLabel}
             pressDimmingValue={1}
             wrapperStyle={wrapperStyle}
+            focusable={focusable}
             sentryLabel={sentryLabel}
             shouldUseAutoHitSlop
         >

src/components/ColumnsSettingsList.tsx

@@ -13,8 +13,8 @@ import Icon from './Icon';
 import ScreenWrapper from './ScreenWrapper';
 import ScrollView from './ScrollView';
 import type {SearchCustomColumnIds} from './Search/types';
+import MultiSelectListItem from './SelectionList/ListItem/MultiSelectListItem';
 import type {ListItem} from './SelectionList/types';
-import MultiSelectListItem from './SelectionListWithSections/MultiSelectListItem';
 import Text from './Text';
 import TextLink from './TextLink';
 
@@ -217,6 +217,7 @@ function ColumnsSettingsList({allColumns, defaultSelectedColumns, currentColumns
         return (
             <MultiSelectListItem
                 item={item}
+                keyForList={item.keyForList}
                 isFocused={isFocused}
                 showTooltip={false}
                 onSelectRow={onSelectItem}

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -3,7 +3,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -90,7 +90,7 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
                     data={searchResults}
                     textInputOptions={textInputOptions}
                     onSelectRow={onCountrySelected}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     initiallyFocusedItemKey={currentCountry}
                     shouldSingleExecuteRowSelect
                     shouldStopPropagation

src/components/CurrencySelectionList/index.tsx

@@ -1,9 +1,10 @@
 import {Str} from 'expensify-common';
 import React, {useState} from 'react';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
 import {useCurrencyListActions, useCurrencyListState} from '@hooks/useCurrencyList';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getMatchScore from '@libs/getMatchScore';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {CurrencyListItem, CurrencySelectionListProps} from './types';
@@ -22,6 +23,7 @@ function CurrencySelectionList({
     const {getCurrencySymbol} = useCurrencyListActions();
     const [searchValue, setSearchValue] = useState('');
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
     const getUnselectedOptions = (options: CurrencyListItem[]) => options.filter((option) => !option.isSelected);
 
     const currencyOptions: CurrencyListItem[] = Object.entries(currencyList).reduce((acc, [currencyCode, currencyInfo]) => {
@@ -101,8 +103,11 @@ function CurrencySelectionList({
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...restProps}
             sections={sections}
-            ListItem={RadioListItem}
+            ListItem={SingleSelectListItem}
             onSelectRow={onSelect}
+            style={{
+                listItemWrapperStyle: styles.optionRow,
+            }}
             textInputOptions={textInputOptions}
             shouldShowTextInput={!!searchInputLabel}
             shouldSingleExecuteRowSelect

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -4,7 +4,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -81,7 +81,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
                 />
                 <SelectionList
                     data={data}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     onSelectRow={(option) => {
                         Keyboard.dismiss();
                         onYearChange?.(option.value);

src/components/DestinationPicker.tsx

@@ -10,7 +10,7 @@ import type {Destination} from '@libs/PerDiemRequestUtils';
 import {getPerDiemCustomUnit} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import RadioListItem from './SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from './SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from './SelectionList/SelectionListWithSections';
 import type {ListItem, SelectionListWithSectionsHandle} from './SelectionList/types';
 
@@ -80,7 +80,7 @@ function DestinationPicker({selectedDestination, policyID, onSubmit, ref}: Desti
             shouldShowTextInput={shouldShowTextInput}
             textInputOptions={textInputOptions}
             onSelectRow={onSubmit}
-            ListItem={RadioListItem}
+            ListItem={SingleSelectListItem}
             initiallyFocusedItemKey={selectedOptionKey}
             shouldHideKeyboardOnScroll={false}
             shouldUpdateFocusedIndex

src/components/EReceipt.tsx

@@ -22,7 +22,7 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import EReceiptBody from './EReceiptBody';
 import Icon from './Icon';
 import ImageSVG from './ImageSVG';
-import type {TransactionListItemType} from './SelectionListWithSections/types';
+import type {TransactionListItemType} from './Search/SearchList/ListItem/types';
 import Text from './Text';
 
 type OverrideThemeProps = {

src/components/EReceiptWithSizeCalculation.tsx

@@ -7,7 +7,7 @@ import type {Transaction} from '@src/types/onyx';
 import EReceipt from './EReceipt';
 import type {OverrideThemeProps} from './EReceipt';
 import PerDiemEReceipt from './PerDiemEReceipt';
-import type {TransactionListItemType} from './SelectionListWithSections/types';
+import type {TransactionListItemType} from './Search/SearchList/ListItem/types';
 
 type EReceiptWithSizeCalculationProps = {
     /* TransactionID of the transaction this EReceipt corresponds to */

src/components/FeedbackSurvey.tsx

@@ -108,19 +108,21 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
             isSubmitButtonVisible={false}
             enabledWhenOffline={enabledWhenOffline}
         >
-            <View style={styles.mh5}>
-                <Text style={styles.textHeadline}>{title}</Text>
-                <Text style={[styles.mt1, styles.mb3, styles.textNormalThemeText]}>{description}</Text>
+            <View>
+                <View style={styles.mh5}>
+                    <Text style={styles.textHeadline}>{title}</Text>
+                    <Text style={[styles.mt1, styles.textNormalThemeText]}>{description}</Text>
+                </View>
                 <InputWrapper
                     InputComponent={RadioButtons}
                     inputID={INPUT_IDS.REASON}
                     items={options}
-                    radioButtonStyle={[styles.mb7, optionRowStyles]}
+                    radioButtonStyle={[styles.optionRowCompact, styles.ph5, optionRowStyles]}
                     onPress={handleOptionSelect}
                     shouldSaveDraft
                 />
                 {!!reason && (
-                    <>
+                    <View style={[styles.mh5, styles.mt4]}>
                         <Text style={[styles.textNormalThemeText, styles.mb3]}>{translate('feedbackSurvey.additionalInfoTitle')}</Text>
                         <InputWrapper
                             InputComponent={TextInput}
@@ -131,7 +133,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
                             onChangeText={handleSetNote}
                             shouldSaveDraft
                         />
-                    </>
+                    </View>
                 )}
             </View>
             <FixedFooter style={styles.pb0}>