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

Merge pull request #1794 from coralproject/flex-improvments

Browse Source 
[next] Flex improvements
This commit is contained in:
Belén Curcio
2018-08-09 15:38:10 -03:00
committed by GitHub
parent 60843f2322 3eceb22198
commit 797a02b2a3
15 changed files with 445 additions and 191 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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,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"
@@ -112,16 +125,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"
@@ -148,16 +166,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"
@@ -193,17 +216,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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -261,23 +290,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"
@@ -304,16 +340,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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -133,23 +146,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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -102,23 +110,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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,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"
@@ -112,16 +125,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"
@@ -149,18 +167,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"
@@ -186,11 +209,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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,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"
@@ -112,16 +125,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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,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"
@@ -113,18 +126,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"
@@ -178,17 +196,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"
>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -246,23 +270,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"
@@ -290,18 +321,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"
@@ -327,11 +363,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
+46
View File
@@ -1,5 +1,10 @@
.root {
width: 100%;
}
.flex {
display: flex;
width: 100%;
}
.halfItemGutter {
@@ -26,6 +31,30 @@
}
}
.doubleItemGutter {
& > * {
margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
}
&.directionRowReverse {
& > * {
margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
}
}
&.directionColumn {
& > * {
margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
}
}
&.directionColumnReverese {
& > * {
margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
}
}
& > *:last-child {
margin: 0 !important;
}
}
.itemGutter {
& > * {
margin: 0 var(--spacing-unit) 0 0 !important;
@@ -93,6 +122,23 @@
margin-left: calc(0.5 * var(--spacing-unit)) !important;
}
}
&:not(.directionColumn).doubleItemGutter {
&:not(:empty) {
margin-top: calc(-2 * var(--spacing-unit)) !important;
}
& > * {
margin-top: calc(2 * var(--spacing-unit)) !important;
}
}
&.directionColumn.doubleItemGutter {
&:not(:empty) {
margin-left: calc(-2 * var(--spacing-unit)) !important;
}
&.doubleItemGutter > * {
margin-left: calc(2 * var(--spacing-unit)) !important;
}
}
}
.justifyFlexStart {
src/core/client/ui/components/Flex/Flex.mdx
+26
View File
@@ -33,3 +33,29 @@ import Button from '../Button'
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
## Item Gutter
<Playground>
<Flex direction="column" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
<Playground>
<Flex direction="column" itemGutter="half">
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
<Playground>
<Flex direction="column" itemGutter="double">
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
src/core/client/ui/components/Flex/Flex.tsx
+7 -4
View File
@@ -25,7 +25,7 @@ interface InnerProps {
| "space-evenly";
alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
direction?: "row" | "column" | "row-reverse" | "column-reverse";
itemGutter?: boolean | "half";
itemGutter?: boolean | "half" | "double";
className?: string;
wrap?: boolean | "reverse";
@@ -43,6 +43,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
itemGutter,
wrap,
forwardRef,
children,
...rest
} = props;
@@ -55,6 +56,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
const classObject: Record<string, boolean> = {
[classes.itemGutter]: itemGutter === true,
[classes.halfItemGutter]: itemGutter === "half",
[classes.doubleItemGutter]: itemGutter === "double",
[classes.wrap]: wrap === true,
[classes.wrapReverse]: wrap === "reverse",
};
@@ -75,12 +77,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