Design follow up to Tag and Category lists

src/components/CategoryPicker/index.js

@@ -69,6 +69,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
     return (
         <OptionsSelector
             optionHoveredStyle={styles.hoveredComponentBG}
+            sectionHeaderStyle={styles.mt5}
             sections={sections}
             selectedOptions={selectedOptions}
             value={searchValue}

src/components/MoneyRequestConfirmationList.js

@@ -700,6 +700,7 @@ function MoneyRequestConfirmationList(props) {
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouCategory}
                             description={translate('common.category')}
+                            numberOfLinesTitle={2}
                             onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_CATEGORY.getRoute(props.iouType, props.reportID))}
                             style={[styles.moneyRequestMenuItem]}
                             titleStyle={styles.flex1}
@@ -712,6 +713,7 @@ function MoneyRequestConfirmationList(props) {
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouTag}
                             description={policyTagListName}
+                            numberOfLinesTitle={2}
                             onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID))}
                             style={[styles.moneyRequestMenuItem]}
                             disabled={didConfirm}

src/components/OptionRow.js

@@ -109,9 +109,20 @@ function OptionRow(props) {
         setIsDisabled(props.isDisabled);
     }, [props.isDisabled]);
 
+    const text = lodashGet(props.option, 'text', '');
+    const fullTitle = props.isMultilineSupported ? text.trimStart() : text;
+    const indentsLength = text.length - fullTitle.length;
+    const paddingLeft = Math.floor(indentsLength / CONST.INDENTS.length) * styles.ml3.marginLeft;
     const textStyle = props.optionIsFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
     const textUnreadStyle = props.boldStyle || props.option.boldStyle ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
-    const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, props.style, styles.pre, isDisabled ? styles.optionRowDisabled : {});
+    const displayNameStyle = StyleUtils.combineStyles(
+        styles.optionDisplayName,
+        textUnreadStyle,
+        props.style,
+        styles.pre,
+        isDisabled ? styles.optionRowDisabled : {},
+        props.isMultilineSupported ? {paddingLeft} : {},
+    );
     const alternateTextStyle = StyleUtils.combineStyles(
         textStyle,
         styles.optionAlternateText,
@@ -204,7 +215,7 @@ function OptionRow(props) {
                                 <View style={contentContainerStyles}>
                                     <DisplayNames
                                         accessibilityLabel={props.translate('accessibilityHints.chatUserDisplayNames')}
-                                        fullTitle={props.option.text}
+                                        fullTitle={fullTitle}
                                         displayNamesWithTooltips={displayNamesWithTooltips}
                                         tooltipEnabled={props.showTitleTooltip}
                                         numberOfLines={props.isMultilineSupported ? 2 : 1}

src/components/OptionsList/BaseOptionsList.js

@@ -51,6 +51,7 @@ function BaseOptionsList({
     showTitleTooltip,
     optionHoveredStyle,
     contentContainerStyles,
+    sectionHeaderStyle,
     showScrollIndicator,
     listContainerStyles,
     shouldDisableRowInnerPadding,
@@ -227,13 +228,17 @@ function BaseOptionsList({
      * @return {Component}
      */
     const renderSectionHeader = ({section: {title, shouldShow}}) => {
+        if (!title && shouldShow && !hideSectionHeaders && sectionHeaderStyle) {
+            return <View style={sectionHeaderStyle} />;
+        }
+
         if (title && shouldShow && !hideSectionHeaders) {
             return (
                 // Note: The `optionsListSectionHeader` style provides an explicit height to section headers.
                 // We do this so that we can reference the height in `getItemLayout` –
                 // we need to know the heights of all list items up-front in order to synchronously compute the layout of any given list item.
                 // So be aware that if you adjust the content of the section header (for example, change the font size), you may need to adjust this explicit height as well.
-                <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter]}>
+                <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter, sectionHeaderStyle]}>
                     <Text style={[styles.ph5, styles.textLabelSupporting]}>{title}</Text>
                 </View>
             );

src/components/OptionsList/optionsListPropTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import SectionList from '@components/SectionList';
+import stylePropTypes from '@styles/stylePropTypes';
 import styles from '@styles/styles';
 
 const propTypes = {
@@ -14,6 +15,9 @@ const propTypes = {
     /** Extra styles for the section list container */
     contentContainerStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Style for section headers */
+    sectionHeaderStyle: stylePropTypes,
+
     /** Sections for the section list */
     sections: PropTypes.arrayOf(
         PropTypes.shape({
@@ -101,6 +105,7 @@ const propTypes = {
 const defaultProps = {
     optionHoveredStyle: undefined,
     contentContainerStyles: [],
+    sectionHeaderStyle: undefined,
     listContainerStyles: [styles.flex1],
     sections: [],
     focusedIndex: 0,

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -427,6 +427,7 @@ class BaseOptionsSelector extends Component {
                     }
                 }}
                 contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]}
+                sectionHeaderStyle={this.props.sectionHeaderStyle}
                 listContainerStyles={this.props.listContainerStyles}
                 listStyles={this.props.listStyles}
                 isLoading={!this.props.shouldShowOptions}

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
+import stylePropTypes from '@styles/stylePropTypes';
 import styles from '@styles/styles';
 import CONST from '@src/CONST';
 
@@ -108,6 +109,9 @@ const propTypes = {
     /** Hover style for options in the OptionsList */
     optionHoveredStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
+    /** Style for section headers */
+    sectionHeaderStyle: stylePropTypes,
+
     /** Whether to show options list */
     shouldShowOptions: PropTypes.bool,
 
@@ -159,6 +163,7 @@ const defaultProps = {
     shouldTextInputAppearBelowOptions: false,
     footerContent: undefined,
     optionHoveredStyle: styles.hoveredComponentBG,
+    sectionHeaderStyle: undefined,
     shouldShowOptions: true,
     disableArrowKeysActions: false,
     isDisabled: false,

src/components/TagPicker/index.js

@@ -58,6 +58,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
     return (
         <OptionsSelector
             optionHoveredStyle={styles.hoveredComponentBG}
+            sectionHeaderStyle={styles.mt5}
             sections={sections}
             selectedOptions={selectedOptions}
             headerMessage={headerMessage}

src/libs/OptionsListUtils.js

@@ -833,7 +833,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
         categorySections.push({
             // "Search" section
             title: '',
-            shouldShow: false,
+            shouldShow: true,
             indexOffset,
             data: getCategoryOptionTree(searchCategories, true),
         });
@@ -857,7 +857,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
         categorySections.push({
             // "Selected" section
             title: '',
-            shouldShow: false,
+            shouldShow: true,
             indexOffset,
             data: getCategoryOptionTree(selectedOptions, true),
         });
@@ -962,7 +962,7 @@ function getTagListSections(tags, recentlyUsedTags, selectedOptions, searchInput
         tagSections.push({
             // "Search" section
             title: '',
-            shouldShow: false,
+            shouldShow: true,
             indexOffset,
             data: getTagsOptions(searchTags),
         });
@@ -1004,7 +1004,7 @@ function getTagListSections(tags, recentlyUsedTags, selectedOptions, searchInput
         tagSections.push({
             // "Selected" section
             title: '',
-            shouldShow: false,
+            shouldShow: true,
             indexOffset,
             data: getTagsOptions(selectedTagOptions),
         });

tests/unit/OptionsListUtilsTest.js

@@ -729,7 +729,7 @@ describe('OptionsListUtils', () => {
         const smallSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [
                     {
@@ -752,7 +752,7 @@ describe('OptionsListUtils', () => {
         const smallWrongSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [],
             },
@@ -818,7 +818,7 @@ describe('OptionsListUtils', () => {
         const largeResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [
                     {
@@ -932,7 +932,7 @@ describe('OptionsListUtils', () => {
         const largeSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [
                     {
@@ -962,7 +962,7 @@ describe('OptionsListUtils', () => {
         const largeWrongSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [],
             },
@@ -1105,7 +1105,7 @@ describe('OptionsListUtils', () => {
         const smallSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [
                     {
@@ -1121,7 +1121,7 @@ describe('OptionsListUtils', () => {
         const smallWrongSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [],
             },
@@ -1175,7 +1175,7 @@ describe('OptionsListUtils', () => {
         const largeResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [
                     {
@@ -1261,7 +1261,7 @@ describe('OptionsListUtils', () => {
         const largeSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [
                     {
@@ -1284,7 +1284,7 @@ describe('OptionsListUtils', () => {
         const largeWrongSearchResultList = [
             {
                 title: '',
-                shouldShow: false,
+                shouldShow: true,
                 indexOffset: 0,
                 data: [],
             },