From db75baf5f24f3681503adb0993c4f0536ad94dc2 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 17 May 2023 10:24:59 +0100 Subject: [PATCH 01/11] Because icons contain name data, deprecate avatarToolTips --- src/components/LHNOptionsList/OptionRowLHN.js | 2 - src/components/MultipleAvatars.js | 84 ++++++++++--------- src/components/OptionRow.js | 2 - src/components/ReportActionItem/IOUPreview.js | 1 - src/pages/home/HeaderView.js | 2 - .../home/report/ReportActionItemThread.js | 2 - .../workspace/WorkspaceInviteMessagePage.js | 1 - 7 files changed, 45 insertions(+), 49 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 8d063ea4a172..9976215e0f4d 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -77,7 +77,6 @@ const OptionRowLHN = (props) => { const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.sidebar; const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; - const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(optionItem.displayNamesWithTooltips, 'tooltip') : undefined; const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; const shouldShowGreenDotIndicator = !hasBrickError && (optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner)); @@ -138,7 +137,6 @@ const OptionRowLHN = (props) => { props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined, hovered && !props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined, ]} - avatarTooltips={optionItem.isPolicyExpenseChat ? [optionItem.subtitle] : avatarTooltips} /> ))} diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 31d4f9962b1f..00d803cd62d1 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -23,9 +23,6 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types secondAvatarStyle: PropTypes.arrayOf(PropTypes.object), - /** Tooltip for the Avatar */ - avatarTooltips: PropTypes.arrayOf(PropTypes.string), - /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */ fallbackIcon: PropTypes.func, @@ -49,7 +46,6 @@ const defaultProps = { icons: [], size: CONST.AVATAR_SIZE.DEFAULT, secondAvatarStyle: [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)], - avatarTooltips: [], fallbackIcon: undefined, shouldStackHorizontally: false, isHovered: false, @@ -70,7 +66,7 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( - + { {props.shouldStackHorizontally ? ( <> {_.map([...props.icons].splice(0, 4), (icon, index) => ( - - - + + + + ))} {props.icons.length > 4 && ( - - - {`+${props.icons.length - 4}`} + + + {`+${props.icons.length - 4}`} + - + )} ) : ( {/* View is necessary for tooltip to show for multiple avatars in LHN */} @@ -166,7 +172,7 @@ const MultipleAvatars = (props) => { {props.icons.length === 2 ? ( @@ -182,7 +188,7 @@ const MultipleAvatars = (props) => { ) : ( diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 2c4cc0d9e176..2ee842120a24 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -133,7 +133,6 @@ class OptionRow extends Component { // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((this.props.option.participantsList || []).slice(0, 10), isMultipleParticipant); - const avatarTooltips = this.props.showTitleTooltip && !this.props.option.isChatRoom && !this.props.option.isArchivedRoom ? _.pluck(displayNamesWithTooltips, 'tooltip') : undefined; let subscriptColor = themeColors.appBG; if (this.props.optionIsFocused) { @@ -197,7 +196,6 @@ class OptionRow extends Component { this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined, hovered && !this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined, ]} - avatarTooltips={this.props.option.isPolicyExpenseChat ? [this.props.option.subtitle] : avatarTooltips} /> ))} diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js index 0f538b74326a..2d56cdb69657 100644 --- a/src/components/ReportActionItem/IOUPreview.js +++ b/src/components/ReportActionItem/IOUPreview.js @@ -219,7 +219,6 @@ const IOUPreview = (props) => { )} diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 47d62048b980..134a266a41c1 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -116,7 +116,6 @@ const HeaderView = (props) => { } const shouldShowThreeDotsButton = !!threeDotMenuItems.length; - const avatarTooltip = isChatRoom ? undefined : _.pluck(displayNamesWithTooltips, 'tooltip'); const shouldShowSubscript = isPolicyExpenseChat && !props.report.isOwnPolicyExpenseChat && !ReportUtils.isArchivedRoom(props.report) && !isTaskReport; const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails); const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''; @@ -157,7 +156,6 @@ const HeaderView = (props) => { ) : ( )} diff --git a/src/pages/home/report/ReportActionItemThread.js b/src/pages/home/report/ReportActionItemThread.js index 07ab422b0586..24ad6e173a93 100644 --- a/src/pages/home/report/ReportActionItemThread.js +++ b/src/pages/home/report/ReportActionItemThread.js @@ -1,7 +1,6 @@ import React from 'react'; import {View, Pressable, Text} from 'react-native'; import PropTypes from 'prop-types'; -import _ from 'underscore'; import styles from '../../../styles/styles'; import * as Report from '../../../libs/actions/Report'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; @@ -49,7 +48,6 @@ const ReportActionItemThread = (props) => { size={CONST.AVATAR_SIZE.SMALL} icons={props.icons} shouldStackHorizontally - avatarTooltips={_.map(props.icons, (icon) => icon.name)} isHovered={props.isHovered} isInReportAction /> diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index b5e8714f1623..b90805a56ccc 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -168,7 +168,6 @@ class WorkspaceInviteMessagePage extends React.Component { icons={OptionsListUtils.getAvatarsForLogins(this.props.invitedMembersDraft, this.props.personalDetails)} shouldStackHorizontally secondAvatarStyle={[styles.secondAvatarInline]} - avatarTooltips={this.getAvatarTooltips()} /> From b44b0fbc780fb38d009c9cfa2697216c864b12e1 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 17 May 2023 11:14:49 +0100 Subject: [PATCH 02/11] prettier --- src/components/MultipleAvatars.js | 6 ++++-- src/components/Pressable/PressableWithFeedback.js | 7 +++---- src/pages/home/HeaderView.js | 4 +--- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 00d803cd62d1..23bbcf876eb3 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -129,7 +129,7 @@ const MultipleAvatars = (props) => { ))} {props.icons.length > 4 && ( { props.icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[3].type) : {}, ]} > - + {`+${props.icons.length - 4}`} diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 0f4c07c63f64..9e475b7169cf 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -46,10 +46,9 @@ const PressableWithFeedback = forwardRef((props, ref) => { setDisabled(props.disabled); return; } - onPress - .finally(() => { - setDisabled(props.disabled); - }); + onPress.finally(() => { + setDisabled(props.disabled); + }); }); }} > diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 134a266a41c1..b9276aa2171d 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -154,9 +154,7 @@ const HeaderView = (props) => { secondaryTooltip={subtitle} /> ) : ( - + )} Date: Wed, 17 May 2023 21:31:59 +0100 Subject: [PATCH 03/11] add shouldShowTooltip flag --- src/components/MultipleAvatars.js | 17 +++++++++++------ src/components/OptionRow.js | 2 +- .../workspace/WorkspaceInviteMessagePage.js | 6 ------ 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 23bbcf876eb3..5d8e74940e9b 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -40,6 +40,9 @@ const propTypes = { /** Whether avatars are displayed within a reportAction */ isInReportAction: PropTypes.bool, + + /** Whether to show the toolip text */ + shouldShowTooltip: PropTypes.bool, }; const defaultProps = { @@ -52,6 +55,7 @@ const defaultProps = { isPressed: false, isFocusMode: false, isInReportAction: false, + shouldShowTooltip: true, }; const MultipleAvatars = (props) => { @@ -66,7 +70,7 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( - + { <> {_.map([...props.icons].splice(0, 4), (icon, index) => ( { ))} {props.icons.length > 4 && ( { ) : ( {/* View is necessary for tooltip to show for multiple avatars in LHN */} @@ -174,7 +179,7 @@ const MultipleAvatars = (props) => { {props.icons.length === 2 ? ( @@ -190,7 +195,7 @@ const MultipleAvatars = (props) => { ) : ( diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 2ee842120a24..db5e6ca22b62 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -133,7 +133,6 @@ class OptionRow extends Component { // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((this.props.option.participantsList || []).slice(0, 10), isMultipleParticipant); - let subscriptColor = themeColors.appBG; if (this.props.optionIsFocused) { subscriptColor = focusedBackgroundColor; @@ -196,6 +195,7 @@ class OptionRow extends Component { this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined, hovered && !this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined, ]} + shouldShowTooltip={this.props.showTitleTooltip} /> ))} diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index b90805a56ccc..a83a43e07285 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import {Pressable, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import ScreenWrapper from '../../components/ScreenWrapper'; @@ -96,11 +95,6 @@ class WorkspaceInviteMessagePage extends React.Component { }); } - getAvatarTooltips() { - const filteredPersonalDetails = _.pick(this.props.personalDetails, this.props.invitedMembersDraft); - return _.map(filteredPersonalDetails, (personalDetail) => Str.removeSMSDomain(personalDetail.login)); - } - sendInvitation() { Policy.addMembersToWorkspace(this.props.invitedMembersDraft, this.state.welcomeNote, this.props.route.params.policyID, this.props.betas); Policy.setWorkspaceInviteMembersDraft(this.props.route.params.policyID, []); From 5f67530a34c6bc5b57f17f9e99877bff40d4f3f3 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Wed, 17 May 2023 21:45:49 +0100 Subject: [PATCH 04/11] rename to shouldShowTooltipText --- src/components/MultipleAvatars.js | 16 ++++++++-------- src/components/OptionRow.js | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 5d8e74940e9b..05a79e5f4b78 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -42,7 +42,7 @@ const propTypes = { isInReportAction: PropTypes.bool, /** Whether to show the toolip text */ - shouldShowTooltip: PropTypes.bool, + shouldShowTooltipText: PropTypes.bool, }; const defaultProps = { @@ -55,7 +55,7 @@ const defaultProps = { isPressed: false, isFocusMode: false, isInReportAction: false, - shouldShowTooltip: true, + shouldShowTooltipText: true, }; const MultipleAvatars = (props) => { @@ -70,7 +70,7 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( - + { <> {_.map([...props.icons].splice(0, 4), (icon, index) => ( { {props.icons.length > 4 && ( { ) : ( {/* View is necessary for tooltip to show for multiple avatars in LHN */} @@ -179,7 +179,7 @@ const MultipleAvatars = (props) => { {props.icons.length === 2 ? ( @@ -195,7 +195,7 @@ const MultipleAvatars = (props) => { ) : ( diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index db5e6ca22b62..c99c2baea4a8 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -195,7 +195,7 @@ class OptionRow extends Component { this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined, hovered && !this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined, ]} - shouldShowTooltip={this.props.showTitleTooltip} + shouldShowTooltipText={this.props.showTitleTooltip} /> ))} From 4ca6eb9d71e1fb7a960b958fd8c52d850d0e5584 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 18 May 2023 11:28:51 +0100 Subject: [PATCH 05/11] Clean up --- src/components/MultipleAvatars.js | 17 +++++++++-------- src/components/OptionRow.js | 2 +- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 05a79e5f4b78..67279068d502 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -42,7 +42,7 @@ const propTypes = { isInReportAction: PropTypes.bool, /** Whether to show the toolip text */ - shouldShowTooltipText: PropTypes.bool, + shouldShowTooltip: PropTypes.bool, }; const defaultProps = { @@ -55,13 +55,14 @@ const defaultProps = { isPressed: false, isFocusMode: false, isInReportAction: false, - shouldShowTooltipText: true, + shouldShowTooltip: true, }; const MultipleAvatars = (props) => { let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin]; const singleAvatarStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar; const secondAvatarStyles = [props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, ...props.secondAvatarStyle]; + const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : []; if (!props.icons.length) { return null; @@ -70,7 +71,7 @@ const MultipleAvatars = (props) => { if (props.icons.length === 1 && !props.shouldStackHorizontally) { return ( - + { <> {_.map([...props.icons].splice(0, 4), (icon, index) => ( { {props.icons.length > 4 && ( { ) : ( {/* View is necessary for tooltip to show for multiple avatars in LHN */} @@ -179,7 +180,7 @@ const MultipleAvatars = (props) => { {props.icons.length === 2 ? ( @@ -195,7 +196,7 @@ const MultipleAvatars = (props) => { ) : ( diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index c99c2baea4a8..933946643a41 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -195,7 +195,7 @@ class OptionRow extends Component { this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined, hovered && !this.props.optionIsFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined, ]} - shouldShowTooltipText={this.props.showTitleTooltip} + shouldShowTooltip={this.props.showTitleTooltip && !this.props.option.isChatRoom && !this.props.option.isArchivedRoom} /> ))} From 718ae00366474c29110885c5b885a951f3eca855 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 18 May 2023 13:34:22 +0100 Subject: [PATCH 06/11] missed one use of tooltipTexts --- src/components/MultipleAvatars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 67279068d502..d716a666698a 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -180,7 +180,7 @@ const MultipleAvatars = (props) => { {props.icons.length === 2 ? ( From b39d48a1a068a1f6d7ebdce9cc7c361e8e93a422 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Thu, 18 May 2023 14:02:28 +0100 Subject: [PATCH 07/11] use toolTipTexts everywhere --- src/components/MultipleAvatars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index d716a666698a..88741076a6cd 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -109,7 +109,7 @@ const MultipleAvatars = (props) => { <> {_.map([...props.icons].splice(0, 4), (icon, index) => ( Date: Mon, 22 May 2023 10:51:54 +0100 Subject: [PATCH 08/11] add back conditionals for showing tooltips --- src/components/LHNOptionsList/OptionRowLHN.js | 1 + src/pages/home/HeaderView.js | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 9976215e0f4d..f3fdb7de5ff3 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -137,6 +137,7 @@ const OptionRowLHN = (props) => { props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined, hovered && !props.isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined, ]} + shouldShowTooltip={!optionItem.isChatRoom && !optionItem.isArchivedRoom} /> ))} diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index b9276aa2171d..020d1312e87b 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -154,7 +154,10 @@ const HeaderView = (props) => { secondaryTooltip={subtitle} /> ) : ( - + )} Date: Mon, 22 May 2023 11:06:37 +0100 Subject: [PATCH 09/11] prettier --- src/components/MultipleAvatars.js | 42 +++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 05311ffc1532..88b12116beb6 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -118,40 +118,40 @@ const MultipleAvatars = (props) => { absolute > - - + StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize, oneAvatarBorderWidth, oneAvatarSize.width), + icon.type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, icon.type) : {}, + ]} + > + + ))} {props.icons.length > 4 && ( - Date: Mon, 22 May 2023 12:16:54 +0100 Subject: [PATCH 10/11] tooltip comment for text proptype --- src/components/Tooltip/tooltipPropTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tooltip/tooltipPropTypes.js b/src/components/Tooltip/tooltipPropTypes.js index c52815901dfc..42b1acd5c115 100644 --- a/src/components/Tooltip/tooltipPropTypes.js +++ b/src/components/Tooltip/tooltipPropTypes.js @@ -7,7 +7,7 @@ const propTypes = { /** Enable support for the absolute positioned native(View|Text) children. It will only work for single native child */ absolute: PropTypes.bool, - /** The text to display in the tooltip. */ + /** The text to display in the tooltip. If text is ommitted, only children will be rendered. */ text: PropTypes.string, /** Maximum number of lines to show in tooltip */ From 95dca1a88d57feebaca405845c24514744137d8a Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 23 May 2023 12:05:07 +0100 Subject: [PATCH 11/11] update comment for shouldUseCardBackground prop --- src/components/MultipleAvatars.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 88b12116beb6..a84e78076fde 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -44,7 +44,7 @@ const propTypes = { /** Whether to show the toolip text */ shouldShowTooltip: PropTypes.bool, - /** Whether avatars are displayed within an IOUAction */ + /** Whether avatars are displayed with the highlighted background color instead of the app background color. This is primarily the case for IOU previews. */ shouldUseCardBackground: PropTypes.bool, };