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

[CORL-974] Add more classnames (#2913)

Browse Source 
* wired css

* add more classnames to hook into

* update snaps

* update more snaps

Co-authored-by: Kim Gardner <kgardnr@gmail.com>
This commit is contained in:
Tessa Thornton
2020-04-03 15:54:17 -04:00
committed by GitHub
parent 7c3c510bbc
commit 7fc0e2e489
16 changed files with 125 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/App/TabBar.tsx
+13 -2
View File
@@ -1,4 +1,5 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { GQLSTORY_MODE } from "coral-framework/schema";
@@ -22,7 +23,12 @@ const AppTabBar: FunctionComponent<Props> = props => {
activeTab={props.activeTab}
onTabClick={props.onTabClick}
>
<Tab className={CLASSES.tabBar.comments} tabID="COMMENTS">
<Tab
className={cn(CLASSES.tabBar.comments, {
[CLASSES.tabBar.activeTab]: props.activeTab === "COMMENTS",
})}
tabID="COMMENTS"
>
{props.mode === GQLSTORY_MODE.QA ? (
<Localized id="general-tabBar-qaTab">
<span>Q&A</span>
@@ -34,7 +40,12 @@ const AppTabBar: FunctionComponent<Props> = props => {
)}
</Tab>
{props.showProfileTab && (
<Tab className={CLASSES.tabBar.myProfile} tabID="PROFILE">
<Tab
className={cn(CLASSES.tabBar.myProfile, {
[CLASSES.tabBar.activeTab]: props.activeTab === "PROFILE",
})}
tabID="PROFILE"
>
<Localized id="general-tabBar-myProfileTab">
<span>My Profile</span>
</Localized>
src/core/client/stream/classes.ts
+15 -1
View File
@@ -36,7 +36,7 @@ const CLASSES = {
rte: {
$root: "coral coral-rte",
content: "coral coral-rte-content",
placeholder: "coral coral-rte-placholder",
placeholder: "coral coral-rte-placeholder",
toolbar: "coral coral-rte-toolbar",
},
@@ -63,6 +63,8 @@ const CLASSES = {
* configure is the button for the "Configure" tab.
*/
configure: "coral coral-tabBar-tab coral-tabBar-configure",
activeTab: "coral-tabBar-tab-active",
},
/**
@@ -89,6 +91,8 @@ const CLASSES = {
* featuredTooltip is the tooltip next to the featured tab.
*/
featuredTooltip: "coral coral-tabBarComments-featuredTooltip",
activeTab: "coral-tabBarSecondary-tab-active",
},
/**
@@ -118,6 +122,7 @@ const CLASSES = {
notifications:
"coral coral-tabBarSecondary-tab coral-tabBarMyProfile-notifications",
active: "coral-tabBarSecondary-tab-active",
/**
* settings is the button for the "Settings" tab.
*/
@@ -307,6 +312,9 @@ const CLASSES = {
*/
commentTag: "coral coral-commentTag coral-comment-commentTag",
featuredTag:
"coral coral-commentTag coral-comment-commentTag coral-featuredTag coral-comment-featuredTag",
/**
* caretButton can be used to target the caret that opens the moderation dropdown.
*/
@@ -470,6 +478,11 @@ const CLASSES = {
*/
replies: "coral coral-featuredComment-replies",
/**
* replies indicates the amount of replies this comment has.
*/
repliesDivider: "coral coral-featuredComment-replies-divider",
/**
* reactButton is the reaction button.
*/
@@ -741,6 +754,7 @@ const CLASSES = {
replies: "coral coral-myComment-replies",
reactions: "coral coral-myComment-reactions",
viewConversationButton: "coral coral-myComment-viewConversationButton",
commentOn: "coral coral-myComment-commentOn",
},
/**
src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+1 -1
View File
@@ -234,7 +234,7 @@ export class CommentContainer extends Component<Props, State> {
<>
{hasFeaturedTag && !isQA && (
<Tag
className={CLASSES.comment.topBar.commentTag}
className={CLASSES.comment.topBar.featuredTag}
color="primary"
variant="pill"
>
src/core/client/stream/tabs/Comments/RTE/__snapshots__/RTE.spec.tsx.snap
+1 -1
View File
@@ -62,7 +62,7 @@ exports[`renders correctly 1`] = `
]
}
placeholder="Post a comment"
placeholderClassName="coral coral-rte-placholder RTE-placeholder"
placeholderClassName="coral coral-rte-placeholder RTE-placeholder"
placeholderClassNameDisabled=""
toolbarClassName="coral coral-rte-toolbar RTE-toolbar"
toolbarClassNameDisabled=""
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
+7 -2
View File
@@ -84,7 +84,7 @@ const FeaturedCommentContainer: FunctionComponent<Props> = props => {
settings={settings}
/>
</Box>
<Box ml={2} clone>
<Box ml={2}>
<Timestamp className={CLASSES.featuredComment.authorBar.timestamp}>
{comment.createdAt}
</Timestamp>
@@ -116,7 +116,12 @@ const FeaturedCommentContainer: FunctionComponent<Props> = props => {
</Localized>
<Box>{comment.replyCount}</Box>
</Flex>
<Box mx={2}>|</Box>
<Box
className={CLASSES.featuredComment.actionBar.repliesDivider}
mx={2}
>
|
</Box>
</Flex>
)}
<div>
src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+4 -1
View File
@@ -76,7 +76,8 @@ const TabWithFeaturedTooltip: FunctionComponent<TooltipTabProps> = ({
className={cn(
styles.fixedTab,
CLASSES.tabBarComments.featured,
styles.featuredCommentsTab
styles.featuredCommentsTab,
{ [CLASSES.tabBarComments.activeTab]: props.active }
)}
/>
<FeaturedCommentTooltip
@@ -280,6 +281,8 @@ export const StreamContainer: FunctionComponent<Props> = props => {
className={cn(
{
[styles.fixedTab]: featuredCommentsCount > 0,
[CLASSES.tabBarComments.activeTab]:
local.commentsTab === "ALL_COMMENTS",
},
CLASSES.tabBarComments.allComments
)}
src/core/client/stream/tabs/Profile/MyComments/HistoryComment.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const HistoryComment: FunctionComponent<HistoryCommentProps> = props => {
className={cn(styles.root, CLASSES.myComment.$root)}
data-testid={`historyComment-${props.id}`}
>
<div>
<div className={CLASSES.myComment.commentOn}>
<Localized id="profile-historyComment-comment-on">
<Typography variant="detail" className={styles.commentOn}>
Comment on:
src/core/client/stream/tabs/Profile/MyComments/__snapshots__/HistoryComment.spec.tsx.snap
+3 -1
View File
@@ -5,7 +5,9 @@ exports[`renders correctly 1`] = `
className="HistoryComment-root coral coral-myComment"
data-testid="historyComment-comment-id"
>
<div>
<div
className="coral coral-myComment-commentOn"
>
<Localized
id="profile-historyComment-comment-on"
>
src/core/client/stream/tabs/Profile/Profile.tsx
+18 -3
View File
@@ -1,4 +1,5 @@
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent, useCallback, useMemo } from "react";
import { useViewerEvent } from "coral-framework/lib/events";
@@ -79,21 +80,35 @@ const Profile: FunctionComponent<ProfileProps> = props => {
onTabClick={onTabClick}
className={CLASSES.tabBarMyProfile.$root}
>
<Tab tabID="MY_COMMENTS" className={CLASSES.tabBarMyProfile.myComments}>
<Tab
tabID="MY_COMMENTS"
className={cn(CLASSES.tabBarMyProfile.myComments, {
[CLASSES.tabBarMyProfile.active]:
local.profileTab === "MY_COMMENTS",
})}
>
<Localized id="profile-myCommentsTab-comments">
<span>My comments</span>
</Localized>
</Tab>
<Tab
tabID="PREFERENCES"
className={CLASSES.tabBarMyProfile.preferences}
className={cn(CLASSES.tabBarMyProfile.preferences, {
[CLASSES.tabBarMyProfile.active]:
local.profileTab === "PREFERENCES",
})}
>
<Localized id="profile-preferencesTab">
<span>Preferences</span>
</Localized>
</Tab>
{showAccountTab && (
<Tab tabID="ACCOUNT" className={CLASSES.tabBarMyProfile.settings}>
<Tab
tabID="ACCOUNT"
className={cn(CLASSES.tabBarMyProfile.settings, {
[CLASSES.tabBarMyProfile.active]: local.profileTab === "ACCOUNT",
})}
>
<Localized id="profile-accountTab">
<span>Account</span>
</Localized>
src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+43 -35
View File
@@ -22,7 +22,7 @@ exports[`renders comment stream 1`] = `
<button
aria-controls="tabPane-COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments coral-tabBar-tab-active"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -118,7 +118,7 @@ exports[`renders comment stream 1`] = `
/>
<div
aria-hidden="true"
className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
className="RTE-placeholder coral coral-rte-placeholder RTE-placeholder"
>
Post a comment
</div>
@@ -264,7 +264,7 @@ exports[`renders comment stream 1`] = `
<button
aria-controls="tabPane-FEATURED_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary StreamContainer-featuredCommentsTabButton Tab-active StreamContainer-fixedTab coral coral-tabBarSecondary-tab coral-tabBarComments-featured StreamContainer-featuredCommentsTab"
className="BaseButton-root Tab-button Tab-secondary StreamContainer-featuredCommentsTabButton Tab-active StreamContainer-fixedTab coral coral-tabBarSecondary-tab coral-tabBarComments-featured StreamContainer-featuredCommentsTab coral-tabBarSecondary-tab-active"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -429,24 +429,28 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
/>
</span>
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="Box-root Box-ml-2"
>
<time
className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div
className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
@@ -546,24 +550,28 @@ exports[`renders comment stream 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
/>
</span>
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
<div
className="Box-root Box-ml-2"
>
<time
className="RelativeTime-root Timestamp-text Box-root Box-ml-2"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<time
className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
</div>
</div>
<div
className="Box-root Flex-root coral coral-featuredComment-actionBar Flex-flex Flex-justifySpaceBetween Box-mt-2"
src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+1 -1
View File
@@ -345,7 +345,7 @@ exports[`post a reply: open reply form 1`] = `
/>
<div
aria-hidden="true"
className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
className="RTE-placeholder coral coral-rte-placeholder RTE-placeholder"
>
Write a reply
</div>
src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+1 -1
View File
@@ -301,7 +301,7 @@ exports[`post a reply: open reply form 1`] = `
/>
<div
aria-hidden="true"
className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
className="RTE-placeholder coral coral-rte-placeholder RTE-placeholder"
>
Write a reply
</div>
src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+2 -2
View File
@@ -96,7 +96,7 @@ exports[`renders comment stream with community guidelines 1`] = `
/>
<div
aria-hidden="true"
className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
className="RTE-placeholder coral coral-rte-placeholder RTE-placeholder"
>
Post a comment
</div>
@@ -239,7 +239,7 @@ exports[`renders comment stream with community guidelines 1`] = `
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
className="BaseButton-root Tab-button Tab-secondary Tab-active coral-tabBarSecondary-tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+6 -6
View File
@@ -160,7 +160,7 @@ exports[`renders message box when commenting disabled 1`] = `
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
className="BaseButton-root Tab-button Tab-secondary Tab-active coral-tabBarSecondary-tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -340,7 +340,7 @@ exports[`renders message box when logged in 1`] = `
/>
<div
aria-hidden="true"
className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
className="RTE-placeholder coral coral-rte-placeholder RTE-placeholder"
>
Post a comment
</div>
@@ -488,7 +488,7 @@ exports[`renders message box when logged in 1`] = `
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
className="BaseButton-root Tab-button Tab-secondary Tab-active coral-tabBarSecondary-tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -645,7 +645,7 @@ exports[`renders message box when not logged in 1`] = `
/>
<div
aria-hidden="true"
className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
className="RTE-placeholder coral coral-rte-placeholder RTE-placeholder"
>
Post a comment
</div>
@@ -788,7 +788,7 @@ exports[`renders message box when not logged in 1`] = `
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
className="BaseButton-root Tab-button Tab-secondary Tab-active coral-tabBarSecondary-tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -997,7 +997,7 @@ exports[`renders message box when story isClosed 1`] = `
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
className="BaseButton-root Tab-button Tab-secondary Tab-active coral-tabBarSecondary-tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+3 -3
View File
@@ -22,7 +22,7 @@ exports[`renders comment stream 1`] = `
<button
aria-controls="tabPane-COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments coral-tabBar-tab-active"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -118,7 +118,7 @@ exports[`renders comment stream 1`] = `
/>
<div
aria-hidden="true"
className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
className="RTE-placeholder coral coral-rte-placeholder RTE-placeholder"
>
Post a comment
</div>
@@ -261,7 +261,7 @@ exports[`renders comment stream 1`] = `
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
className="BaseButton-root Tab-button Tab-secondary Tab-active coral-tabBarSecondary-tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
+6 -2
View File
@@ -10,7 +10,9 @@ exports[`renders profile 1`] = `
className="Box-root HorizontalGutter-root HistoryComment-root coral coral-myComment HorizontalGutter-full"
data-testid="historyComment-comment-0"
>
<div>
<div
className="coral coral-myComment-commentOn"
>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary HistoryComment-commentOn"
>
@@ -71,7 +73,9 @@ exports[`renders profile 1`] = `
className="Box-root HorizontalGutter-root HistoryComment-root coral coral-myComment HorizontalGutter-full"
data-testid="historyComment-comment-1"
>
<div>
<div
className="coral coral-myComment-commentOn"
>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary HistoryComment-commentOn"
>