diff --git a/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.scss b/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.scss index 7d9a62388d..b5f108a4ce 100644 --- a/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.scss +++ b/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.scss @@ -4,6 +4,8 @@ // into Blueprint and @box/threaded-annotations components, breaking their // styling. This file resets those rules within the v2 adapter boundary. +@import '../../common/variables'; + .bcs-NewActivityFeed { display: flex; flex-direction: column; @@ -52,6 +54,20 @@ &-mentionEmpty { padding: var(--bp-space-030) var(--bp-space-040); } + + // Wrapper is transparent to layout; serves only as a DOM hook for the + // focused descendant selector below. The visible focus chrome (border, + // background) is painted directly onto the vendor's threaded-annotation + // card so its own border-radius, padding, and position are reused. + // Class name is CSS-modules-hashed; substring match survives bumps. + &-threadRow { + display: contents; + + &.is-focused [class*='threadedAnnotations'] { + border-color: $bdl-box-blue-80; + background-color: rgba($bdl-box-blue, 0.04); + } + } } // Lets inner ellipsis truncation resolve against the sidebar width. diff --git a/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx b/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx index 7c0d9b0e96..ddfea741ef 100644 --- a/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx +++ b/src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx @@ -361,6 +361,7 @@ const ActivityFeedV2 = ({ {filteredItems.map(item => ( { + const threadRowClassName = classNames('bcs-NewActivityFeed-threadRow', { + 'is-focused': item.id === activeFeedEntryId, + }); + switch (item.type) { case 'comment': { const { permissions } = item; @@ -145,27 +152,28 @@ const FeedItemRow = ({ ? { ...item.annotationTarget, timestamp: formatByTimeFormat(timestampMs, timeFormat, fps) } : item.annotationTarget; return ( - onCommentCopyLink({ id }) : undefined} - onDelete={handleDelete} - onEdit={handleEdit} - onEditError={logEditError} - onPost={buildReplyPost(item.id, FEED_ITEM_TYPE_COMMENT, isDisabled, onReplyCreate)} - onResolve={handleStatusChange('resolved')} - onThreadDelete={() => handleDelete(item.id)} - onUnresolve={handleStatusChange('open')} - resolvedAt={item.resolvedAt} - resolvedBy={item.resolvedBy} - userSelectorProps={userSelectorProps} - /> +
+ onCommentCopyLink({ id }) : undefined} + onDelete={handleDelete} + onEdit={handleEdit} + onEditError={logEditError} + onPost={buildReplyPost(item.id, FEED_ITEM_TYPE_COMMENT, isDisabled, onReplyCreate)} + onResolve={handleStatusChange('resolved')} + onThreadDelete={() => handleDelete(item.id)} + onUnresolve={handleStatusChange('open')} + resolvedAt={item.resolvedAt} + resolvedBy={item.resolvedBy} + userSelectorProps={userSelectorProps} + /> +
); } @@ -209,31 +217,32 @@ const FeedItemRow = ({ } : badgeTarget; return ( - onAnnotationSelect?.(item.annotation)} - onAvatarClick={noop} - onCopyLink={ - onAnnotationCopyLink && fileVersionId - ? () => onAnnotationCopyLink({ annotationId: item.id, fileVersionId }) - : undefined - } - onDelete={handleDelete} - onEdit={handleEdit} - onEditError={logEditError} - onPost={buildReplyPost(item.id, FEED_ITEM_TYPE_ANNOTATION, isDisabled, onReplyCreate)} - onResolve={handleStatusChange('resolved')} - onThreadDelete={() => handleDelete(item.id)} - onUnresolve={handleStatusChange('open')} - resolvedAt={item.resolvedAt} - resolvedBy={item.resolvedBy} - userSelectorProps={userSelectorProps} - /> +
+ onAnnotationSelect?.(item.annotation)} + onAvatarClick={noop} + onCopyLink={ + onAnnotationCopyLink && fileVersionId + ? () => onAnnotationCopyLink({ annotationId: item.id, fileVersionId }) + : undefined + } + onDelete={handleDelete} + onEdit={handleEdit} + onEditError={logEditError} + onPost={buildReplyPost(item.id, FEED_ITEM_TYPE_ANNOTATION, isDisabled, onReplyCreate)} + onResolve={handleStatusChange('resolved')} + onThreadDelete={() => handleDelete(item.id)} + onUnresolve={handleStatusChange('open')} + resolvedAt={item.resolvedAt} + resolvedBy={item.resolvedBy} + userSelectorProps={userSelectorProps} + /> +
); }