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

ensure tab text doesn't get cut off if tab titles are long (#2619)

Browse Source
This commit is contained in:
Tessa Thornton
2019-10-15 20:49:37 +00:00
committed by Wyatt Johnson
parent bae88f476e
commit 8409dbb4ea
10 changed files with 744 additions and 660 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
+34 -3
View File
@@ -8,9 +8,6 @@
}
.sortMenu {
position: absolute;
right: 0;
top: 0;
}
.featuredCommentsInfo {
@@ -22,7 +19,41 @@
.featuredCommentsTabContainer {
position: relative;
overflow: hidden;
}
.featuredCommentsTabContainer > li {
display: block;
}
.featuredCommentsTab {
padding-right: 30px !important;
width: 100%;
}
.tabBar {
flex: 2;
overflow: hidden;
}
.featuredTabText {
overflow: hidden;
text-overflow: ellipsis;
}
.tabListItem {
display: block;
}
.allCommentsTabContainer {
overflow: hidden;
}
.allCommentsTab {
width: 100%;
}
.allCommentsTabText {
overflow: hidden;
text-overflow: ellipsis;
}
src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+54 -43
View File
@@ -147,57 +147,68 @@ 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}
>
{featuredCommentsCount > 0 && (
<TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
<Flex spacing={1} alignItems="center">
<Localized id="comments-featuredTab">
<span>Featured</span>
<Flex>
<TabBar
variant="secondary"
activeTab={local.commentsTab}
onTabClick={onChangeTab}
className={cn(styles.tabBar, CLASSES.tabBarComments.$root)}
>
{featuredCommentsCount > 0 && (
<TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
<Flex spacing={1} alignItems="center">
<Localized id="comments-featuredTab">
<span className={styles.featuredTabText}>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"
classes={{
root: styles.allCommentsTabContainer,
}}
className={cn(
styles.allCommentsTab,
CLASSES.tabBarComments.allComments
)}
>
<Flex alignItems="center" spacing={1}>
<Localized id="comments-allCommentsTab">
<span className={styles.allCommentsTabText}>
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>
<SortMenu
className={styles.sortMenu}
orderBy={local.commentsOrderBy}
onChange={onChangeOrder}
reactionSortLabel={props.settings.reaction.sortLabel}
/>
</Flex>
<TabContent activeTab={local.commentsTab}>
<TabPane
className={CLASSES.featuredCommentsTabPane.$root}
src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+93 -87
View File
@@ -9,7 +9,7 @@ exports[`renders comment stream 1`] = `
role="tablist"
>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-COMMENTS"
role="presentation"
>
@@ -184,100 +184,106 @@ 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 Flex-flex"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<ul
className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<li
className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
id="tab-ALL_COMMENTS"
role="presentation"
>
<option
value="CREATED_AT_DESC"
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={false}
className="BaseButton-root Tab-button Tab-secondary StreamContainer-allCommentsTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
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"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span
className="Counter-text"
className="StreamContainer-allCommentsTabText"
>
2
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
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
<option
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>
</div>
<section
aria-labelledby="tab-FEATURED_COMMENTS"
className="coral coral-featuredComments"
src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+92 -86
View File
@@ -168,100 +168,106 @@ 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 Flex-flex"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<ul
className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<li
className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
id="tab-ALL_COMMENTS"
role="presentation"
>
<option
value="CREATED_AT_DESC"
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
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"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span
className="Counter-text"
className="StreamContainer-allCommentsTabText"
>
2
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
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
<option
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>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+368 -344
View File
@@ -89,100 +89,106 @@ 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 Flex-flex"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<ul
className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<li
className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
id="tab-ALL_COMMENTS"
role="presentation"
>
<option
value="CREATED_AT_DESC"
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
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"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span
className="Counter-text"
className="StreamContainer-allCommentsTabText"
>
0
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
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
<option
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>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
@@ -408,100 +414,106 @@ 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 Flex-flex"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<ul
className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<li
className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
id="tab-ALL_COMMENTS"
role="presentation"
>
<option
value="CREATED_AT_DESC"
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
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"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span
className="Counter-text"
className="StreamContainer-allCommentsTabText"
>
0
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
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
<option
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>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
@@ -701,100 +713,106 @@ 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 Flex-flex"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<ul
className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<li
className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
id="tab-ALL_COMMENTS"
role="presentation"
>
<option
value="CREATED_AT_DESC"
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
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"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span
className="Counter-text"
className="StreamContainer-allCommentsTabText"
>
0
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
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
<option
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>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
@@ -901,100 +919,106 @@ 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 Flex-flex"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<ul
className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<li
className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
id="tab-ALL_COMMENTS"
role="presentation"
>
<option
value="CREATED_AT_DESC"
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
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"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span
className="Counter-text"
className="StreamContainer-allCommentsTabText"
>
0
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
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
<option
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>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+93 -87
View File
@@ -9,7 +9,7 @@ exports[`renders comment stream 1`] = `
role="tablist"
>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-COMMENTS"
role="presentation"
>
@@ -184,100 +184,106 @@ 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 Flex-flex"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
<ul
className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
role="tablist"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
<li
className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
id="tab-ALL_COMMENTS"
role="presentation"
>
<option
value="CREATED_AT_DESC"
<button
aria-controls="tabPane-ALL_COMMENTS"
aria-selected={true}
className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
role="tab"
type="button"
>
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"
<div
className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
>
<span
className="Counter-text"
className="StreamContainer-allCommentsTabText"
>
2
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
className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_DESC"
>
<option
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>
</div>
<section
aria-labelledby="tab-ALL_COMMENTS"
className="coral coral-allComments"
src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
+5 -5
View File
@@ -9,7 +9,7 @@ exports[`renders the empty settings pane 1`] = `
role="tablist"
>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-COMMENTS"
role="presentation"
>
@@ -32,7 +32,7 @@ exports[`renders the empty settings pane 1`] = `
</button>
</li>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-PROFILE"
role="presentation"
>
@@ -110,7 +110,7 @@ exports[`renders the empty settings pane 1`] = `
role="tablist"
>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-MY_COMMENTS"
role="presentation"
>
@@ -133,7 +133,7 @@ exports[`renders the empty settings pane 1`] = `
</button>
</li>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-NOTIFICATIONS"
role="presentation"
>
@@ -156,7 +156,7 @@ exports[`renders the empty settings pane 1`] = `
</button>
</li>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-ACCOUNT"
role="presentation"
>
src/core/client/ui/components/Tabs/Tab.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ class Tab extends React.Component<TabProps> {
return (
<li
className={styles.root}
className={cn(styles.root, classes.root)}
key={tabID}
id={`tab-${tabID}`}
role="presentation"
src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
+1 -1
View File
@@ -2,7 +2,7 @@
exports[`renders correctly 1`] = `
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-three"
role="presentation"
>
src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
+3 -3
View File
@@ -6,7 +6,7 @@ exports[`renders correctly 1`] = `
role="tablist"
>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-one"
role="presentation"
>
@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
</button>
</li>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-two"
role="presentation"
>
@@ -48,7 +48,7 @@ exports[`renders correctly 1`] = `
</button>
</li>
<li
className="Tab-root"
className="Tab-root Tab-root"
id="tab-three"
role="presentation"
>