From 6c323165952eaf4a98206dbd5c2d2625fd8eabef Mon Sep 17 00:00:00 2001 From: Nick Funk Date: Tue, 11 Aug 2020 14:13:11 -0600 Subject: [PATCH] 6.3.2 mobile and responsive UI fixes (#3096) * Remove vertical padding and line height on badges Allows them to align with the time and user name text elements. * Hide report button text on mobile screens * Allow read more links to wrap text on mobile * Wrap comment tags when on mobile screens * Fix collapse alignment on mobile screens * Update top bar responsive scaling * Use MatchMedia inside ReportButton * Fix justification on comment TopBarRight --- .../Comment/AuthorBadgesContainer.tsx | 28 +- .../stream/tabs/Comments/Comment/Comment.css | 19 +- .../tabs/Comments/Comment/Comment.spec.tsx | 2 + .../stream/tabs/Comments/Comment/Comment.tsx | 40 +- .../Comments/Comment/CommentContainer.css | 2 + .../Comments/Comment/CommentContainer.tsx | 125 +- .../tabs/Comments/Comment/CommentToggle.css | 4 + .../tabs/Comments/Comment/CommentToggle.tsx | 19 +- .../tabs/Comments/Comment/IndentedComment.tsx | 4 +- .../Comment/ReportFlow/ReportButton.tsx | 85 +- .../Comments/Comment/ShowConversationLink.css | 4 +- .../Comments/Comment/UserTagsContainer.tsx | 38 +- .../__snapshots__/Comment.spec.tsx.snap | 24 +- .../CommentContainer.spec.tsx.snap | 1290 +++++------------ .../IndentedComment.spec.tsx.snap | 2 +- .../renderFeaturedStream.spec.tsx.snap | 12 +- .../__snapshots__/permalinkView.spec.tsx.snap | 85 +- ...permalinkViewLoadMoreParents.spec.tsx.snap | 123 +- .../__snapshots__/editComment.spec.tsx.snap | 68 +- .../__snapshots__/loadMore.spec.tsx.snap | 34 +- .../__snapshots__/postComment.spec.tsx.snap | 17 +- .../postLocalReply.spec.tsx.snap | 102 +- .../__snapshots__/postReply.spec.tsx.snap | 34 +- .../renderCommunityGuidelines.spec.tsx.snap | 34 +- .../__snapshots__/renderReplies.spec.tsx.snap | 68 +- .../__snapshots__/renderStream.spec.tsx.snap | 53 +- .../__snapshots__/reportComment.spec.tsx.snap | 17 +- .../showAllReplies.spec.tsx.snap | 17 +- .../showConversation.spec.tsx.snap | 17 +- .../__snapshots__/sortStream.spec.tsx.snap | 34 +- .../test/comments/stream/ignoreUser.spec.tsx | 1 + .../components/v2/MatchMedia/MatchMedia.tsx | 1 + src/core/client/ui/components/v2/Tag/Tag.css | 6 +- src/core/client/ui/theme/breakpoints.ts | 1 + 34 files changed, 943 insertions(+), 1467 deletions(-) diff --git a/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx index 5bc0b8767..f6ba625ff 100644 --- a/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx @@ -11,20 +11,36 @@ interface Props { className?: string; } +// The comment param is `any` because relay isn't +// smart enough to see that the nested fragments +// on the comment container are compatible. +export function authorHasBadges(comment: any) { + return ( + comment && + comment.author && + comment.author.badges && + comment.author.badges.length !== 0 + ); +} + const AuthorBadgesContainer: FunctionComponent = ({ comment, className, }) => { - if (!comment.author || !comment.author.badges) { + const hasBadges = authorHasBadges(comment); + + if (!hasBadges) { return null; } return ( <> - {comment.author.badges.map((badge) => ( - - {badge} - - ))} + {comment.author && + comment.author.badges && + comment.author.badges.map((badge) => ( + + {badge} + + ))} ); }; diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.css b/src/core/client/stream/tabs/Comments/Comment/Comment.css index 97648307b..b16324c15 100644 --- a/src/core/client/stream/tabs/Comments/Comment/Comment.css +++ b/src/core/client/stream/tabs/Comments/Comment/Comment.css @@ -21,6 +21,23 @@ $commentTimestampColor: var(--palette-grey-500); font-style: normal; font-weight: var(--font-weight-primary-semi-bold); font-size: var(--font-size-2); - line-height: 1.14; color: $commentTimestampColor; + + margin-right: var(--spacing-1); +} + +.tags { + margin-right: var(--spacing-1); +} + +.badges { + margin-right: var(--spacing-1); +} + +.username { + margin-right: var(--spacing-2); +} + +.usernameFullRow { + flex-basis: 100%; } diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/Comment.spec.tsx index 0190b1515..d8f0e3625 100644 --- a/src/core/client/stream/tabs/Comments/Comment/Comment.spec.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/Comment.spec.tsx @@ -8,6 +8,8 @@ import Comment from "./Comment"; it("renders username and body", () => { const props: PropTypesOf = { username: "Marvin", + tags: "", + badges: "", body: "Woof", createdAt: "1995-12-17T03:24:00.000Z", topBarRight: "topBarRight", diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx index 298f8c655..5e7d0aa21 100644 --- a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx @@ -4,11 +4,10 @@ import React, { FunctionComponent } from "react"; import CLASSES from "coral-stream/classes"; import HTMLContent from "coral-stream/common/HTMLContent"; import Timestamp from "coral-stream/common/Timestamp"; -import { Flex, HorizontalGutter } from "coral-ui/components/v2"; +import { Flex, HorizontalGutter, MatchMedia } from "coral-ui/components/v2"; import EditedMarker from "./EditedMarker"; import InReplyTo from "./InReplyTo"; -import TopBarLeft from "./TopBarLeft"; import styles from "./Comment.css"; @@ -22,7 +21,8 @@ export interface CommentProps { showEditedMarker?: boolean; highlight?: boolean; parentAuthorName?: string | null; - userTags?: React.ReactNode; + tags?: React.ReactNode | null; + badges?: React.ReactNode | null; collapsed?: boolean; media?: React.ReactNode; } @@ -39,15 +39,35 @@ const Comment: FunctionComponent = (props) => { > - - - {props.username && props.username} - {props.userTags} - - + + {props.username && ( + + {(matches) => ( +
+ {props.username} +
+ )} + + )} + + {props.tags && ( + + {props.tags} + + )} + {props.badges && ( + + {props.badges} + + )} @@ -57,7 +77,7 @@ const Comment: FunctionComponent = (props) => { )} - + {props.topBarRight &&
{props.topBarRight}
} diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css index 631b6ac1d..04b6e9630 100644 --- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css +++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css @@ -50,4 +50,6 @@ $commenterActionEditColorActive: var(--palette-primary-300); .staticUsername { color: var(--palette-text-100); + + margin-right: var(--spacing-2); } diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx index de9ec9eac..268b5a88a 100644 --- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx @@ -37,6 +37,7 @@ import { } from "coral-stream/mutations"; import { Ability, can } from "coral-stream/permissions"; import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2"; +import MatchMedia from "coral-ui/components/v2/MatchMedia"; import { CommentContainer_comment as CommentData } from "coral-stream/__generated__/CommentContainer_comment.graphql"; import { CommentContainer_settings as SettingsData } from "coral-stream/__generated__/CommentContainer_settings.graphql"; @@ -45,7 +46,7 @@ import { CommentContainer_viewer as ViewerData } from "coral-stream/__generated_ import { isPublished } from "../helpers"; import AnsweredTag from "./AnsweredTag"; -import UserBadgesContainer from "./AuthorBadgesContainer"; +import UserBadgesContainer, { authorHasBadges } from "./AuthorBadgesContainer"; import ButtonsBar from "./ButtonsBar"; import EditCommentFormContainer from "./EditCommentForm"; import FeaturedTag from "./FeaturedTag"; @@ -61,7 +62,7 @@ import ReplyCommentFormContainer from "./ReplyCommentForm"; import ReportFlowContainer, { ReportButton } from "./ReportFlow"; import ShowConversationLink from "./ShowConversationLink"; import { UsernameContainer, UsernameWithPopoverContainer } from "./Username"; -import UserTagsContainer from "./UserTagsContainer"; +import UserTagsContainer, { commentHasTags } from "./UserTagsContainer"; import styles from "./CommentContainer.css"; @@ -301,6 +302,9 @@ export const CommentContainer: FunctionComponent = ({ ); } + const hasTags = commentHasTags(story, comment); + const hasBadges = authorHasBadges(comment); + // Comment is not published after viewer rejected it. if (comment.lastViewerAction === "REJECT" && comment.status === "REJECTED") { return ; @@ -334,7 +338,7 @@ export const CommentContainer: FunctionComponent = ({ parentAuthorName={comment.parent?.author?.username} staticUsername={ comment.author && ( - <> + = ({ className={CLASSES.comment.topBar.userBadge} comment={comment} /> - + ) } username={ comment.author && ( - <> - - - - + + ) + } + tags={ + comment.author && + hasTags && ( + + ) + } + badges={ + comment.author && + hasBadges && ( + ) } staticTopBarRight={commentTags} topBarRight={ - - {commentTags} - {editable && ( - - )} - {showModerationCaret && ( - - )} - + <> + + {(matches) => ( + <> + + {matches ? commentTags : null} + {editable && ( + + )} + {showModerationCaret && ( + + )} + + {!matches ? commentTags : null} + + )} + + } media={ = (props) => { - - + + {props.username && props.username} {props.userTags} - + = (props) => { )} - + {props.topBarRight &&
{props.topBarRight}
} diff --git a/src/core/client/stream/tabs/Comments/Comment/IndentedComment.tsx b/src/core/client/stream/tabs/Comments/Comment/IndentedComment.tsx index e42e2d270..a5f4ea32d 100644 --- a/src/core/client/stream/tabs/Comments/Comment/IndentedComment.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/IndentedComment.tsx @@ -19,6 +19,8 @@ export interface IndentedCommentProps toggleCollapsed?: () => void; staticUsername: React.ReactNode; staticTopBarRight: React.ReactNode; + tags?: React.ReactNode | null; + badges?: React.ReactNode | null; } const IndentedComment: FunctionComponent = ({ @@ -50,7 +52,7 @@ const IndentedComment: FunctionComponent = ({ topBarRight={staticTopBarRight} /> ) : ( - + {toggleCollapsed && ( = ({ }) => { const onClickReport = useCallback(() => { onClick(); - }, []); + }, [onClick]); const isLoggedIn = useMemo(() => { return Boolean(viewer); @@ -55,42 +56,62 @@ const ReportButton: FunctionComponent = ({ if (isReported) { return ( -
- - - flag - - Reported - -
+
+ + + flag + + + {(matches) => + matches ? ( + + Reported + + ) : null + } + + +
+ ); } return ( - + + ); }; diff --git a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css index 7aaac42f3..fbd760d47 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css +++ b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css @@ -5,8 +5,10 @@ $commentsConversationLinkColorActive: var(--palette-primary-800); .conversationLink { overflow: hidden; display: block; - text-overflow: ellipsis; text-align: left; + white-space: break-spaces; + line-height: 1rem; + &.sizeRegular { padding: 0; } diff --git a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx index cc7f86e04..9ba36463f 100644 --- a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx @@ -20,15 +20,47 @@ interface Props { className?: string; } +function storyIsInQAMode(story: UserTagsContainer_story) { + return story.settings.mode === GQLSTORY_MODE.QA; +} + +function hasStaffTag(comment: UserTagsContainer_comment) { + return comment.tags.find((t) => t.code === "STAFF"); +} + +function hasExpertTag( + story: UserTagsContainer_story, + comment: UserTagsContainer_comment +) { + const isQA = storyIsInQAMode(story); + return isQA && comment.tags.find((t) => t.code === "EXPERT"); +} + +// The comment and story params are `any` because relay +// isn't smart enough to see that the nested fragments +// on the comment container are compatible. +export function commentHasTags(story: any, comment: any) { + const staffTag = hasStaffTag(comment); + const expertTag = hasExpertTag(story, comment); + const hasTags = staffTag || expertTag; + + return hasTags; +} + const UserTagsContainer: FunctionComponent = ({ story, settings, comment, className, }) => { - const isQA = story.settings.mode === GQLSTORY_MODE.QA; - const staffTag = comment.tags.find((t) => t.code === "STAFF"); - const expertTag = isQA && comment.tags.find((t) => t.code === "EXPERT"); + const staffTag = hasStaffTag(comment); + const expertTag = hasExpertTag(story, comment); + const hasTags = commentHasTags(story, comment); + + if (!hasTags) { + return null; + } + return ( {expertTag && ( diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap index 806650b1e..2939ba2a9 100644 --- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap +++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap @@ -7,23 +7,27 @@ exports[`renders username and body 1`] = ` size="half" > - + + + [Function] + - Marvin - - + + @@ -33,7 +37,7 @@ exports[`renders username and body 1`] = ` className="coral coral-comment-edited" /> - +
topBarRight
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap index 232b9b295..7a816e656 100644 --- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap @@ -7,6 +7,7 @@ exports[`hide reply button 1`] = ` > } staticUsername={ - + - - } - toggleCollapsed={[Function]} - topBarRight={ - - } - username={ + tags={false} + toggleCollapsed={[Function]} + topBarRight={ - - - + + [Function] + } + username={ + + } /> @@ -437,6 +355,7 @@ exports[`renders body only 1`] = ` > } staticUsername={ - + - - } - toggleCollapsed={[Function]} - topBarRight={ - - } - username={ + tags={false} + toggleCollapsed={[Function]} + topBarRight={ - - - + + [Function] + } + username={ + + } /> @@ -874,6 +710,7 @@ exports[`renders disabled reply when commenting has been disabled 1`] = ` > } staticUsername={ - + - - } - toggleCollapsed={[Function]} - topBarRight={ - - } - username={ + tags={false} + toggleCollapsed={[Function]} + topBarRight={ - - - + + [Function] + } + username={ + + } /> @@ -1311,6 +1065,7 @@ exports[`renders disabled reply when story is closed 1`] = ` > } staticUsername={ - + - - } - toggleCollapsed={[Function]} - topBarRight={ - - } - username={ + tags={false} + toggleCollapsed={[Function]} + topBarRight={ - - - + + [Function] + } + username={ + + } /> @@ -1748,6 +1420,7 @@ exports[`renders in reply to 1`] = ` > } staticUsername={ - + - - } - toggleCollapsed={[Function]} - topBarRight={ - - } - username={ + tags={false} + toggleCollapsed={[Function]} + topBarRight={ - - - + + [Function] + } + username={ + + } /> @@ -2222,6 +1804,7 @@ exports[`renders username and body 1`] = ` > } staticUsername={ - + - - } - toggleCollapsed={[Function]} - topBarRight={ - - } - username={ + tags={false} + toggleCollapsed={[Function]} + topBarRight={ - - - + + [Function] + } + username={ + + } /> @@ -2668,6 +2168,7 @@ exports[`shows conversation link 1`] = ` > } staticUsername={ - + - - } - toggleCollapsed={[Function]} - topBarRight={ - - } - username={ + tags={false} + toggleCollapsed={[Function]} + topBarRight={ - - - + + [Function] + } + username={ + + } /> diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap index 144df58ec..7c4a63fe7 100644 --- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap +++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/IndentedComment.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`renders correctly 1`] = ` level={1} > -
- + />
@@ -606,11 +602,7 @@ exports[`renders comment stream 1`] = `
-
- + />
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap index 8e03e1dc5..d0d21a6d5 100644 --- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap @@ -132,20 +132,20 @@ exports[`renders permalink view 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
@@ -407,20 +404,20 @@ exports[`renders permalink view 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
@@ -679,20 +673,20 @@ exports[`renders permalink view 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
@@ -943,7 +934,7 @@ exports[`renders permalink view 1`] = ` className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded" >
@@ -1243,7 +1231,7 @@ exports[`renders permalink view 1`] = ` className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded" >
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap index a1df1c085..371d27d6a 100644 --- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap +++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap @@ -43,20 +43,20 @@ exports[`renders conversation thread 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
- - Staff - -
+
+
+ + Staff + +
+
@@ -357,20 +361,20 @@ exports[`renders conversation thread 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
@@ -650,20 +651,20 @@ exports[`shows more of this conversation 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
@@ -925,20 +923,20 @@ exports[`shows more of this conversation 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
- - Staff - -
+
+
+ + Staff + +
+
@@ -1203,20 +1205,20 @@ exports[`shows more of this conversation 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
-
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap index 7c044f5a0..407f988e5 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap @@ -15,7 +15,7 @@ exports[`cancel edit 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -897,7 +894,7 @@ exports[`edit a comment: render comment with edit button 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -1191,7 +1185,7 @@ exports[`edit a comment: server response 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -1494,7 +1485,7 @@ exports[`shows expiry message: edit form closed 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap index df4bec239..d722b8bc9 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap @@ -25,7 +25,7 @@ exports[`renders comment stream with load more button 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -298,7 +295,7 @@ exports[`renders comment stream with load more button 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap index 236a9249a..0adc8a33d 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap @@ -15,7 +15,7 @@ exports[`post a comment: optimistic response 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap index c07d8af97..4dce20d75 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap @@ -15,7 +15,7 @@ exports[`post a reply: open reply form 1`] = ` className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded" >
@@ -502,7 +499,7 @@ exports[`post a reply: optimistic response 1`] = ` className="Indent-level4 coral coral-indent coral-indent-4 Indent-open Indent-openPadded" >
@@ -811,7 +805,7 @@ exports[`renders comment stream 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -1089,7 +1080,7 @@ exports[`renders comment stream 1`] = ` className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded" >
@@ -1394,7 +1382,7 @@ exports[`renders comment stream 1`] = ` className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded" >
@@ -1699,7 +1684,7 @@ exports[`renders comment stream 1`] = ` className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap index f51fe5671..19c03a83c 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap @@ -15,7 +15,7 @@ exports[`post a reply: open reply form 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -459,7 +456,7 @@ exports[`post a reply: optimistic response 1`] = ` className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap index f5ae3270e..b2a952146 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap @@ -313,7 +313,7 @@ exports[`renders comment stream with community guidelines 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -586,7 +583,7 @@ exports[`renders comment stream with community guidelines 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap index 288b0ec22..b2c79556e 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap @@ -24,7 +24,7 @@ exports[`renders reply list 1`] = ` className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded" >
@@ -329,7 +326,7 @@ exports[`renders reply list 1`] = ` className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded" >
@@ -629,7 +623,7 @@ exports[`renders reply list 1`] = ` className="Indent-level2 coral coral-indent coral-indent-2 Indent-open Indent-openPadded" >
@@ -932,7 +923,7 @@ exports[`renders reply list 1`] = ` className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap index 9fab2b33e..da2359eab 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap @@ -351,7 +351,7 @@ exports[`renders comment stream 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -624,7 +621,7 @@ exports[`renders comment stream 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap index 762b62908..1e50c006d 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap @@ -459,7 +459,7 @@ exports[`report comment as offensive 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap index 40b5d1c96..c0f8edd9a 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap @@ -24,7 +24,7 @@ exports[`renders comment stream 1`] = ` className="Indent-level1 coral coral-indent coral-indent-1 Indent-open Indent-openPadded" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap index 5abe16754..3cc779b15 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap @@ -15,7 +15,7 @@ exports[`renders deepest comment with link 1`] = ` className="Indent-level3 coral coral-indent coral-indent-3 Indent-open Indent-openPadded" >
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap index 10ed6983c..3f88d629b 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap @@ -25,7 +25,7 @@ exports[`renders app with comment stream 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
@@ -298,7 +295,7 @@ exports[`renders app with comment stream 1`] = ` className="coral coral-indent coral-indent-0 Indent-open" >
diff --git a/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx b/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx index 37cfba7c5..528f2b160 100644 --- a/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx +++ b/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx @@ -178,6 +178,7 @@ it("render stream with regular comments, ignore user button should be present", await waitForElement(() => within(testRenderer.root).getByTestID("comments-allComments-log") ); + const commenter = commenters[0]; const username = within(tabPane).getByText(commenter.username!, { selector: "button", diff --git a/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx index 5d34dc46c..95a49af39 100644 --- a/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx +++ b/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx @@ -19,6 +19,7 @@ interface Props { /** less than equals width. */ ltWidth?: Breakpoints; + children: ReactNode | ((matches: boolean) => React.ReactNode); className?: string; component?: diff --git a/src/core/client/ui/components/v2/Tag/Tag.css b/src/core/client/ui/components/v2/Tag/Tag.css index 82e739f07..6eb86a5ae 100644 --- a/src/core/client/ui/components/v2/Tag/Tag.css +++ b/src/core/client/ui/components/v2/Tag/Tag.css @@ -14,8 +14,8 @@ $tag-pill-bg: inherit; font-family: var(--font-family-primary); font-weight: var(--font-weight-primary-semi-bold); color: $tag-text-color; - line-height: 1.14; - padding: var(--spacing-1); + padding-left: var(--spacing-1); + padding-right: var(--spacing-1); white-space: nowrap; border-radius: 2px; display: inline-block; @@ -43,7 +43,7 @@ $tag-pill-bg: inherit; .variantPill { border-radius: 20px; - padding: 2px 10px; + padding: 0px 10px; background-color: $tag-pill-bg; &.colorGrey { border: 1px solid $tag-color-grey; diff --git a/src/core/client/ui/theme/breakpoints.ts b/src/core/client/ui/theme/breakpoints.ts index 22dca2c24..068292d2d 100644 --- a/src/core/client/ui/theme/breakpoints.ts +++ b/src/core/client/ui/theme/breakpoints.ts @@ -1,5 +1,6 @@ const breakpoints = { xs: 320, + mobile: 400, sm: 640, md: 1024, lg: 1400,