wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-02 03:34:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into next-ui-select

Browse Source
This commit is contained in:
Kiwi
2018-10-19 20:42:56 +02:00
committed by GitHub
parent f5324f65bb b5e98d1025
commit cd2ccf8792
26 changed files with 331 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/comments/components/Comment/Comment.css
+1 -1
View File
@@ -4,7 +4,7 @@
background-color: var(--palette-primary-lightest);
padding: var(--spacing-unit);
}
.topBar {
.subBar {
margin-bottom: calc(0.5 * var(--spacing-unit));
}
.footer:not(:empty) {
src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
+9 -6
View File
@@ -7,6 +7,7 @@ import { Flex, HorizontalGutter } from "talk-ui/components";
import * as styles from "./Comment.css";
import EditedMarker from "./EditedMarker";
import InReplyTo from "./InReplyTo";
import TopBarLeft from "./TopBarLeft";
import Username from "./Username";
@@ -20,6 +21,7 @@ export interface CommentProps {
footer?: React.ReactNode;
showEditedMarker?: boolean;
highlight?: boolean;
parentAuthorName?: string | null;
}
const Comment: StatelessComponent<CommentProps> = props => {
@@ -28,12 +30,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
role="article"
className={cn(styles.root, { [styles.highlight]: props.highlight })}
>
<Flex
className={styles.topBar}
direction="row"
justifyContent="space-between"
id={props.id}
>
<Flex direction="row" justifyContent="space-between" id={props.id}>
<TopBarLeft>
{props.username && <Username>{props.username}</Username>}
<Flex direction="row" alignItems="baseline" itemGutter>
@@ -43,6 +40,12 @@ const Comment: StatelessComponent<CommentProps> = props => {
</TopBarLeft>
{props.topBarRight && <div>{props.topBarRight}</div>}
</Flex>
{props.parentAuthorName && (
<div className={styles.subBar}>
<InReplyTo username={props.parentAuthorName} />
</div>
)}
<HorizontalGutter>
<HTMLContent>{props.body || ""}</HTMLContent>
{props.footer}
src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css
+9
View File
@@ -0,0 +1,9 @@
.icon {
color: var(--palette-grey-light);
}
.inReplyTo {
color: var(--palette-grey-light);
}
.username {
color: var(--palette-grey-dark);
}
src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx
+14
View File
@@ -0,0 +1,14 @@
import { shallow } from "enzyme";
import React from "react";
import { PropTypesOf } from "talk-framework/types";
import InReplyTo from "./InReplyTo";
it("renders correctly", () => {
const props: PropTypesOf<typeof InReplyTo> = {
username: "Username",
};
const wrapper = shallow(<InReplyTo {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx
+34
View File
@@ -0,0 +1,34 @@
import { Localized } from "fluent-react/compat";
import React, { StatelessComponent } from "react";
import { Flex, Icon, Typography } from "talk-ui/components";
import styles from "./InReplyTo.css";
interface Props {
username: string;
}
const InReplyTo: StatelessComponent<Props> = ({ username }) => {
const Username = () => (
<Typography variant="heading5" container="span" className={styles.username}>
{username}
</Typography>
);
return (
<Flex alignItems="center">
<Icon className={styles.icon}>reply</Icon>{" "}
<Localized id="comments-inReplyTo" username={<Username />}>
<Typography
variant="timestamp"
container="span"
className={styles.inReplyTo}
>
{"In reply to <username><username>"}
</Typography>
</Localized>
</Flex>
);
};
export default InReplyTo;
src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
-1
View File
@@ -6,7 +6,6 @@ exports[`renders username and body 1`] = `
role="article"
>
<withPropsOnChange(Flex)
className="Comment-topBar"
direction="row"
id="comment-id"
justifyContent="space-between"
src/core/client/stream/tabs/comments/components/Comment/__snapshots__/InReplyTo.spec.tsx.snap
+26
View File
@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<withPropsOnChange(Flex)
alignItems="center"
>
<withPropsOnChange(Icon)
className="InReplyTo-icon"
>
reply
</withPropsOnChange(Icon)>
<Localized
id="comments-inReplyTo"
username={<Username />}
>
<withPropsOnChange(Typography)
className="InReplyTo-inReplyTo"
container="span"
variant="timestamp"
>
In reply to &lt;username&gt;&lt;username&gt;
</withPropsOnChange(Typography)>
</Localized>
</withPropsOnChange(Flex)>
`;
src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
+46
View File
@@ -22,6 +22,7 @@ it("renders username and body", () => {
id: "author-id",
username: "Marvin",
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -59,6 +60,7 @@ it("renders body only", () => {
id: "author-id",
username: null,
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -94,6 +96,7 @@ it("hide reply button", () => {
id: "author-id",
username: "Marvin",
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -138,6 +141,7 @@ it("shows conversation link", () => {
id: "author-id",
username: "Marvin",
},
parent: null,
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
@@ -157,3 +161,45 @@ it("shows conversation link", () => {
const wrapper = shallow(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders in reply to", () => {
const props: PropTypesOf<typeof CommentContainerN> = {
me: null,
asset: {
url: "http://localhost/asset",
},
comment: {
id: "comment-id",
author: {
id: "author-id",
username: "Marvin",
},
parent: {
author: {
username: "ParentAuthor",
},
},
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
editing: {
edited: false,
editableUntil: "1995-12-17T03:24:30.000Z",
},
pending: false,
},
settings: {
reaction: {
icon: "thumb_up_alt",
label: "Respect",
},
},
indentLevel: 1,
showAuthPopup: noop as any,
setCommentID: noop as any,
localReply: false,
disableReplies: false,
};
const wrapper = shallow(<CommentContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+10
View File
@@ -165,6 +165,11 @@ export class CommentContainer extends Component<InnerProps, State> {
blur={comment.pending || false}
showEditedMarker={comment.editing.edited}
highlight={highlight}
parentAuthorName={
comment.parent &&
comment.parent.author &&
comment.parent.author.username
}
topBarRight={
(editable && (
<Localized id="comments-commentContainer-editButton">
@@ -251,6 +256,11 @@ const enhanced = withSetCommentIDMutation(
id
username
}
parent {
author {
username
}
}
body
createdAt
editing {
src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
+74
View File
@@ -31,6 +31,7 @@ exports[`hide reply button 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -49,6 +50,7 @@ exports[`hide reply button 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username="Marvin"
/>
@@ -91,6 +93,7 @@ exports[`renders body only 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -109,12 +112,79 @@ exports[`renders body only 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username={null}
/>
</withPropsOnChange(HorizontalGutter)>
`;
exports[`renders in reply to 1`] = `
<withPropsOnChange(HorizontalGutter)>
<IndentedComment
blur={false}
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ButtonsBar>
<ReplyButton
active={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainerProps)
asset={
Object {
"url": "http://localhost/asset",
}
}
commentID="comment-id"
/>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"parent": Object {
"author": Object {
"username": "ParentAuthor",
},
},
"pending": false,
}
}
me={null}
settings={
Object {
"reaction": Object {
"icon": "thumb_up_alt",
"label": "Respect",
},
}
}
/>
</ButtonsBar>
</React.Fragment>
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName="ParentAuthor"
showEditedMarker={false}
username="Marvin"
/>
</withPropsOnChange(HorizontalGutter)>
`;
exports[`renders username and body 1`] = `
<withPropsOnChange(HorizontalGutter)>
<IndentedComment
@@ -151,6 +221,7 @@ exports[`renders username and body 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -169,6 +240,7 @@ exports[`renders username and body 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username="Marvin"
/>
@@ -211,6 +283,7 @@ exports[`shows conversation link 1`] = `
"edited": false,
},
"id": "comment-id",
"parent": null,
"pending": false,
}
}
@@ -235,6 +308,7 @@ exports[`shows conversation link 1`] = `
}
id="comment-comment-id"
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
username="Marvin"
/>
src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
+11 -11
View File
@@ -256,7 +256,7 @@ exports[`cancel edit: edit canceled 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -398,7 +398,7 @@ exports[`cancel edit: edit canceled 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -934,7 +934,7 @@ exports[`edit a comment: edit form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1470,7 +1470,7 @@ exports[`edit a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1841,7 +1841,7 @@ exports[`edit a comment: render stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1983,7 +1983,7 @@ exports[`edit a comment: render stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -2354,7 +2354,7 @@ exports[`edit a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -2505,7 +2505,7 @@ exports[`edit a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -2876,7 +2876,7 @@ exports[`shows expiry message: edit form closed 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -3018,7 +3018,7 @@ exports[`shows expiry message: edit form closed 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -3531,7 +3531,7 @@ exports[`shows expiry message: edit time expired 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
+5 -5
View File
@@ -195,7 +195,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -321,7 +321,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -447,7 +447,7 @@ exports[`loads more comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
@@ -757,7 +757,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -883,7 +883,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
+8 -8
View File
@@ -144,7 +144,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -287,7 +287,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
@@ -428,7 +428,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-replies"
>
<div
@@ -564,7 +564,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-3"
>
<div
@@ -690,7 +690,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-4"
>
<div
@@ -1002,7 +1002,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-replies"
>
<div
@@ -1132,7 +1132,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-3"
>
<div
@@ -1258,7 +1258,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-4"
>
<div
src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+1 -1
View File
@@ -305,7 +305,7 @@ exports[`show all comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+4 -4
View File
@@ -234,7 +234,7 @@ exports[`renders permalink view 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -498,7 +498,7 @@ exports[`views pervious comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -641,7 +641,7 @@ exports[`views pervious comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
@@ -782,7 +782,7 @@ exports[`views pervious comments 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
+8 -8
View File
@@ -250,7 +250,7 @@ exports[`post a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-uuid-0"
>
<div
@@ -392,7 +392,7 @@ exports[`post a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -518,7 +518,7 @@ exports[`post a comment: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -889,7 +889,7 @@ exports[`post a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-x"
>
<div
@@ -1015,7 +1015,7 @@ exports[`post a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1141,7 +1141,7 @@ exports[`post a comment: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1512,7 +1512,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1638,7 +1638,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+26 -26
View File
@@ -256,7 +256,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -386,7 +386,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -516,7 +516,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -646,7 +646,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -776,7 +776,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -906,7 +906,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -1430,7 +1430,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -1560,7 +1560,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -1690,7 +1690,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -1820,7 +1820,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -1950,7 +1950,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -2080,7 +2080,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -2347,7 +2347,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-uuid-0"
>
<div
@@ -2730,7 +2730,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -2860,7 +2860,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -2990,7 +2990,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -3120,7 +3120,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -3250,7 +3250,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -3380,7 +3380,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -3526,7 +3526,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-x"
>
<div
@@ -3893,7 +3893,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -4023,7 +4023,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -4153,7 +4153,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -4283,7 +4283,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -4413,7 +4413,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -4543,7 +4543,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
+10 -10
View File
@@ -256,7 +256,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -509,7 +509,7 @@ exports[`post a reply: open reply form 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -880,7 +880,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1131,7 +1131,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-uuid-0"
>
<div
@@ -1275,7 +1275,7 @@ exports[`post a reply: optimistic response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -1646,7 +1646,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -1776,7 +1776,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-x"
>
<div
@@ -1904,7 +1904,7 @@ exports[`post a reply: server response 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -2275,7 +2275,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -2401,7 +2401,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
+6 -6
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -321,7 +321,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deep-replies"
>
<div
@@ -451,7 +451,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-replies"
>
<div
@@ -581,7 +581,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-3"
>
<div
@@ -707,7 +707,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-4"
>
<div
@@ -835,7 +835,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-5"
>
<div
src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+2 -2
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -321,7 +321,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
+5 -5
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -325,7 +325,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -661,7 +661,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-0"
>
<div
@@ -791,7 +791,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-1"
>
<div
@@ -917,7 +917,7 @@ exports[`show all replies 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-2"
>
<div
src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
+7 -7
View File
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies"
>
<div
@@ -325,7 +325,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-1"
>
<div
@@ -455,7 +455,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-2"
>
<div
@@ -585,7 +585,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-3"
>
<div
@@ -715,7 +715,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-4"
>
<div
@@ -845,7 +845,7 @@ exports[`renders comment stream 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
@@ -1106,7 +1106,7 @@ exports[`shows conversation 1`] = `
role="article"
>
<div
className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
id="comment-comment-with-deepest-replies-5"
>
<div
src/core/client/ui/components/Typography/Typography.css
+4
View File
@@ -19,6 +19,10 @@
composes: heading4 from "talk-ui/shared/typography.css";
}
.heading5 {
composes: heading5 from "talk-ui/shared/typography.css";
}
.bodyCopy {
composes: bodyCopy from "talk-ui/shared/typography.css";
}
src/core/client/ui/components/Typography/Typography.tsx
+2
View File
@@ -12,6 +12,7 @@ type Variant =
| "heading2"
| "heading3"
| "heading4"
| "heading5"
| "bodyCopy"
| "bodyCopyBold"
| "inputLabel"
@@ -142,6 +143,7 @@ Typography.defaultProps = {
heading2: "h1",
heading3: "h1",
heading4: "h1",
heading5: "h1",
bodyCopy: "p",
bodyCopyBold: "p",
timestamp: "span",
src/core/client/ui/shared/typography.css
+8
View File
@@ -91,6 +91,14 @@
letter-spacing: calc(0.2em / 16);
color: var(--palette-text-primary);
}
.heading5 {
font-size: calc(14rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: var(--font-family-serif);
line-height: calc(16em / 16);
letter-spacing: calc(0.2em / 16);
color: var(--palette-text-primary);
}
.bodyCopy {
font-size: calc(16rem / var(--rem-base));
src/locales/en-US/stream.ftl
+1
View File
@@ -84,6 +84,7 @@ comments-conversationThread-showHiddenComments =
comments-permalinkView-currentViewing = You are currently viewing a
comments-permalinkView-singleConversation = SINGLE CONVERSATION
comments-inReplyTo = In reply to <username></username>
## Profile Tab
profile-historyComment-viewConversation = View Conversation