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

Put ref and root className to first div

Browse Source
This commit is contained in:
Chi Vinh Le
2018-08-09 18:42:10 +02:00
parent ff62dc4ecc
commit 04f03b7f3b
14 changed files with 376 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/components/Comment/Comment.css
+3
View File
@@ -1,3 +1,6 @@
.root {
width: 100%;
}
.footer {
margin-top: var(--spacing-unit);
}
src/core/client/stream/components/Comment/Comment.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export interface CommentProps {
const Comment: StatelessComponent<CommentProps> = props => {
return (
<div role="article">
<div role="article" className={styles.root}>
<TopBar>
{props.author &&
props.author.username && <Username>{props.author.username}</Username>}
src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+1
View File
@@ -2,6 +2,7 @@
exports[`renders username and body 1`] = `
<div
className="Comment-root"
role="article"
>
<TopBar>
src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+8 -4
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly on big screens 1`] = `
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
>
<div>
Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly on big screens 1`] = `
`;
exports[`renders correctly on small screens 1`] = `
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<div>
Hello World
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+83 -42
View File
@@ -1,17 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`loads more comments 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`loads more comments 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +135,21 @@ exports[`loads more comments 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -158,16 +176,21 @@ exports[`loads more comments 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -203,17 +226,23 @@ exports[`loads more comments 1`] = `
`;
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -281,23 +310,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -324,16 +360,21 @@ exports[`renders comment stream 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+41 -21
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders permalink view 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div
className="PermalinkView-root"
@@ -23,16 +25,21 @@ exports[`renders permalink view 1`] = `
>
Show all Comments
</a>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -65,17 +72,23 @@ exports[`renders permalink view 1`] = `
`;
exports[`show all comments 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -143,23 +156,30 @@ exports[`show all comments 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+4 -2
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders permalink view with unknown asset 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div
className="PermalinkView-root"
src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+32 -17
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders permalink view with unknown comment 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div
className="PermalinkView-root"
@@ -34,17 +36,23 @@ exports[`renders permalink view with unknown comment 1`] = `
`;
exports[`show all comments 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -112,23 +120,30 @@ exports[`show all comments 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+53 -27
View File
@@ -1,17 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +135,21 @@ exports[`renders comment stream 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -159,18 +177,23 @@ exports[`renders comment stream 1`] = `
<div
className="Indent-root Indent-level0"
>
<div>
<div
className="Flex-root"
id="talk-comments-replyList-log--comment-with-replies"
role="log"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-replyList-log--comment-with-replies"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -196,11 +219,14 @@ exports[`renders comment stream 1`] = `
/>
</div>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+37 -19
View File
@@ -1,17 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +135,21 @@ exports[`renders comment stream 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+83 -44
View File
@@ -1,17 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -123,18 +136,23 @@ exports[`renders comment stream 1`] = `
<div
className="Indent-root Indent-level0"
>
<div>
<div
className="Flex-root"
id="talk-comments-replyList-log--comment-0"
role="log"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-replyList-log--comment-0"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -188,17 +206,23 @@ exports[`renders comment stream 1`] = `
`;
exports[`show all replies 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -266,23 +290,30 @@ exports[`show all replies 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -310,18 +341,23 @@ exports[`show all replies 1`] = `
<div
className="Indent-root Indent-level0"
>
<div>
<div
className="Flex-root"
id="talk-comments-replyList-log--comment-0"
role="log"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-replyList-log--comment-0"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -347,11 +383,14 @@ exports[`show all replies 1`] = `
/>
</div>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/ui/components/Flex/Flex.css
+5
View File
@@ -1,5 +1,10 @@
.root {
width: 100%;
}
.flex {
display: flex;
width: 100%;
}
.halfItemGutter {
src/core/client/ui/components/Flex/Flex.tsx
+5 -3
View File
@@ -43,6 +43,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
itemGutter,
wrap,
forwardRef,
children,
...rest
} = props;
@@ -75,12 +76,13 @@ const Flex: StatelessComponent<InnerProps> = props => {
classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
}
const classNames: string = cn(classes.root, className, classObject);
const rootClassNames: string = cn(classes.root, className);
const flexClassNames: string = cn(classes.flex, classObject);
// The first div is required to support nested `Flex` components with itemGutters.
return (
<div>
<div ref={forwardRef} className={classNames} {...rest} />
<div ref={forwardRef} className={rootClassNames} {...rest}>
<div className={flexClassNames}>{children}</div>
</div>
);
};
src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+20 -10
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
>
<div>
Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly 1`] = `
`;
exports[`renders with halfe item gutter 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
>
<div>
Hello World
@@ -25,9 +29,11 @@ exports[`renders with halfe item gutter 1`] = `
`;
exports[`renders with item gutter 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
>
<div>
Hello World
@@ -37,9 +43,11 @@ exports[`renders with item gutter 1`] = `
`;
exports[`renders with wrap 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<div>
Hello World
@@ -49,9 +57,11 @@ exports[`renders with wrap 1`] = `
`;
exports[`renders with wrap reverse 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrapReverse Flex-alignCenter"
className="Flex-flex Flex-wrapReverse Flex-alignCenter"
>
<div>
Hello World