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

[CORL-575] allow line breaks in stream tabs (#2726)

Browse Source 
* allow line breaks in stream tabs

* update snaps

* fix specs

* rearrange stream tabs for better mutliline support
This commit is contained in:
Tessa Thornton
2019-11-26 10:01:05 -05:00
committed by GitHub
parent f1cdcb149b
commit 9bc41ad020
7 changed files with 730 additions and 666 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
+27 -8
View File
@@ -8,21 +8,40 @@
}
.sortMenu {
position: absolute;
right: 0;
top: 0;
/* same as tab bottom padding */
padding-bottom: calc(0.5 * var(--mini-unit) + 3px);
}
.featuredCommentsInfo {
position: absolute;
top: 0;
right: 4px;
height: 100%;
.fixedTab {
max-width: 200px;
white-space: normal;
text-align: left;
}
.featuredCommentsTabContainer {
position: relative;
}
.featuredCommentsInfo {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.featuredCommentsTab {
display: flex;
align-items: center;
}
.tabBarRoot {
border: 0;
}
.tabBarRow {
border-bottom: 1px solid var(--palette-divider);
}
.featuredCommentsTabButton {
padding-right: 30px !important;
}
src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+58 -42
View File
@@ -60,7 +60,11 @@ const TabWithFeaturedTooltip: FunctionComponent<PropTypesOf<typeof Tab>> = ({
<div className={styles.featuredCommentsTabContainer}>
<Tab
{...props}
classes={{
secondary: styles.featuredCommentsTabButton,
}}
className={cn(
styles.fixedTab,
CLASSES.tabBarComments.featured,
styles.featuredCommentsTab
)}
@@ -169,57 +173,69 @@ export const StreamContainer: FunctionComponent<Props> = props => {
/>
)}
<HorizontalGutter spacing={4} className={styles.tabBarContainer}>
<SortMenu
className={styles.sortMenu}
orderBy={local.commentsOrderBy}
onChange={onChangeOrder}
reactionSortLabel={props.settings.reaction.sortLabel}
/>
<TabBar
variant="secondary"
activeTab={local.commentsTab}
onTabClick={onChangeTab}
className={CLASSES.tabBarComments.$root}
<Flex
direction="row-reverse"
alignItems="flex-end"
justifyContent="space-between"
className={styles.tabBarRow}
>
{featuredCommentsCount > 0 && (
<TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
<Flex spacing={1} alignItems="center">
<Localized id="comments-featuredTab">
<span>Featured</span>
<SortMenu
className={styles.sortMenu}
orderBy={local.commentsOrderBy}
onChange={onChangeOrder}
reactionSortLabel={props.settings.reaction.sortLabel}
/>
<TabBar
variant="secondary"
activeTab={local.commentsTab}
onTabClick={onChangeTab}
className={cn(CLASSES.tabBarComments.$root, styles.tabBarRoot)}
>
{featuredCommentsCount > 0 && (
<TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
<Flex spacing={1} alignItems="center">
<Localized id="comments-featuredTab">
<span>Featured</span>
</Localized>
<Counter
data-testid="comments-featuredCount"
size="sm"
color={
local.commentsTab === "FEATURED_COMMENTS"
? "primary"
: "grey"
}
>
{featuredCommentsCount}
</Counter>
</Flex>
</TabWithFeaturedTooltip>
)}
<Tab
tabID="ALL_COMMENTS"
className={cn(
{
[styles.fixedTab]: featuredCommentsCount > 0,
},
CLASSES.tabBarComments.allComments
)}
>
<Flex alignItems="center" spacing={1}>
<Localized id="comments-allCommentsTab">
<span>All Comments</span>
</Localized>
<Counter
data-testid="comments-featuredCount"
size="sm"
color={
local.commentsTab === "FEATURED_COMMENTS"
? "primary"
: "grey"
local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey"
}
>
{featuredCommentsCount}
{allCommentsCount}
</Counter>
</Flex>
</TabWithFeaturedTooltip>
)}
<Tab
tabID="ALL_COMMENTS"
className={CLASSES.tabBarComments.allComments}
>
<Flex alignItems="center" spacing={1}>
<Localized id="comments-allCommentsTab">
<span>All Comments</span>
</Localized>
<Counter
size="sm"
color={
local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey"
}
>
{allCommentsCount}
</Counter>
</Flex>
</Tab>
</TabBar>
</Tab>
</TabBar>
</Flex>
<TabContent activeTab={local.commentsTab}>
<TabPane
className={CLASSES.featuredCommentsTabPane.$root}
src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+92 -88
View File
@@ -192,101 +192,105 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
>
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<option
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={false}
className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
<span
className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
<option
value="CREATED_AT_DESC"
>
<span
className="Counter-text"
>
2
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={false}
className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
</span>
</div>
</button>
</li>
</ul>
<span
className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
>
<span
className="Counter-text"
>
2
</span>
</span>
</div>
</button>
</li>
</ul>
</div>
<section
aria-labelledby="tab-FEATURED_COMMENTS"
className="coral coral-featuredComments"
src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+92 -88
View File
@@ -168,101 +168,105 @@ exports[`renders comment stream with community guidelines 1`] = `
className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
>
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<option
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
<option
value="CREATED_AT_DESC"
>
<span
className="Counter-text"
>
2
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
</span>
</div>
</button>
</li>
</ul>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
>
<span
className="Counter-text"
>
2
</span>
</span>
</div>
</button>
</li>
</ul>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+368 -352
View File
@@ -89,101 +89,105 @@ exports[`renders message box when commenting disabled 1`] = `
className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
>
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<option
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
<option
value="CREATED_AT_DESC"
>
<span
className="Counter-text"
>
0
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
</span>
</div>
</button>
</li>
</ul>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
>
<span
className="Counter-text"
>
0
</span>
</span>
</div>
</button>
</li>
</ul>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
@@ -411,101 +415,105 @@ exports[`renders message box when logged in 1`] = `
className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
>
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<option
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
<option
value="CREATED_AT_DESC"
>
<span
className="Counter-text"
>
0
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
</span>
</div>
</button>
</li>
</ul>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
>
<span
className="Counter-text"
>
0
</span>
</span>
</div>
</button>
</li>
</ul>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
@@ -705,101 +713,105 @@ exports[`renders message box when not logged in 1`] = `
className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
>
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<option
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
<option
value="CREATED_AT_DESC"
>
<span
className="Counter-text"
>
0
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
</span>
</div>
</button>
</li>
</ul>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
>
<span
className="Counter-text"
>
0
</span>
</span>
</div>
</button>
</li>
</ul>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
@@ -906,101 +918,105 @@ exports[`renders message box when story isClosed 1`] = `
className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
>
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<option
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
<option
value="CREATED_AT_DESC"
>
<span
className="Counter-text"
>
0
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
</span>
</div>
</button>
</li>
</ul>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
>
<span
className="Counter-text"
>
0
</span>
</span>
</div>
</button>
</li>
</ul>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+92 -88
View File
@@ -192,101 +192,105 @@ exports[`renders comment stream 1`] = `
className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
>
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<div
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<option
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
<option
value="CREATED_AT_DESC"
>
<span
className="Counter-text"
>
2
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Respected
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</i>
</span>
</span>
</div>
<ul
className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
role="tablist"
>
<li
className="Tab-root"
id="tab-ALL_COMMENTS"
role="presentation"
>
<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"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span>
All Comments
</span>
</span>
</div>
</button>
</li>
</ul>
<span
className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
>
<span
className="Counter-text"
>
2
</span>
</span>
</div>
</button>
</li>
</ul>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
src/core/client/ui/components/Tabs/TabBar.css
+1
View File
@@ -2,6 +2,7 @@
display: flex;
padding: 0;
margin: 0;
align-items: flex-end;
}
.primary {