From 38bdddf61ace57ae74d647c29477b39fcbccf668 Mon Sep 17 00:00:00 2001 From: nick-funk Date: Tue, 12 May 2020 11:25:49 -0600 Subject: [PATCH] Rebrand the main stream tab bar CORL-799 --- src/core/client/stream/App/TabBar.tsx | 60 +++++++++++++---- .../tabs/Comments/Stream/StreamContainer.css | 4 +- .../renderFeaturedStream.spec.tsx.snap | 15 +++-- .../__snapshots__/renderStream.spec.tsx.snap | 15 +++-- src/core/client/ui/components/v2/Tabs/Tab.css | 66 ++++++++++++++++++- src/core/client/ui/components/v2/Tabs/Tab.tsx | 12 +++- .../client/ui/components/v2/Tabs/TabBar.css | 4 ++ .../client/ui/components/v2/Tabs/TabBar.tsx | 8 ++- 8 files changed, 154 insertions(+), 30 deletions(-) diff --git a/src/core/client/stream/App/TabBar.tsx b/src/core/client/stream/App/TabBar.tsx index 967bab723ad..28435d54bd5 100644 --- a/src/core/client/stream/App/TabBar.tsx +++ b/src/core/client/stream/App/TabBar.tsx @@ -4,7 +4,7 @@ import React, { FunctionComponent } from "react"; import { GQLSTORY_MODE } from "coral-framework/schema"; import CLASSES from "coral-stream/classes"; -import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components"; +import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components/v2"; type TabValue = "COMMENTS" | "PROFILE" | "%future added value"; @@ -22,22 +22,39 @@ const AppTabBar: FunctionComponent = (props) => { className={CLASSES.tabBar.$root} activeTab={props.activeTab} onTabClick={props.onTabClick} + variant="streamPrimary" > - {props.mode === GQLSTORY_MODE.QA ? ( - - Q&A - - ) : ( - - Comments - - )} + + {(matches) => + matches ? ( + props.mode === GQLSTORY_MODE.QA ? ( + + Q&A + + ) : ( + + Comments + + ) + ) : ( + + mode_comment + + ) + } + {props.showProfileTab && ( = (props) => { [CLASSES.tabBar.activeTab]: props.activeTab === "PROFILE", })} tabID="PROFILE" + variant="streamPrimary" + ariaLabel="My Profile" > - - My Profile - + + {(matches) => + matches ? ( + + My Profile + + ) : ( + account_circle + ) + } + )} {props.showConfigureTab && ( - + {(matches) => matches ? ( diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css index b8cd2c70b06..4d055adf770 100644 --- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css +++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css @@ -38,8 +38,8 @@ display: inline-block; bottom: 1.5px; - margin-left: var(--v2-spacing-1); - margin-right: var(--v2-spacing-2); + margin-left: calc(-1 * var(--v2-spacing-1)); + margin-right: var(--v2-spacing-3); } .featuredCommentsTab { diff --git a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap index e7aacb8c666..994098adcca 100644 --- a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap @@ -11,7 +11,7 @@ exports[`renders comment stream 1`] = ` Navigation
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap index 1bae9f735e6..2e85e1b582c 100644 --- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap @@ -11,7 +11,7 @@ exports[`renders comment stream 1`] = ` Navigation
diff --git a/src/core/client/ui/components/v2/Tabs/Tab.css b/src/core/client/ui/components/v2/Tabs/Tab.css index e29cef07a6c..9051a92f057 100644 --- a/src/core/client/ui/components/v2/Tabs/Tab.css +++ b/src/core/client/ui/components/v2/Tabs/Tab.css @@ -7,8 +7,6 @@ $tab-stream-default: var(--v2-colors-mono-500); .root { display: inline-block; list-style: none; - margin-right: var(--v2-spacing-3); - margin-bottom: -1px; } .button { @@ -30,6 +28,9 @@ $tab-stream-default: var(--v2-colors-mono-500); } .default { + margin-right: var(--v2-spacing-3); + margin-bottom: -1px; + font-family: var(--v2-font-family-primary); font-weight: var(--v2-font-weight-primary-semi-bold); color: $tab-default; @@ -61,6 +62,9 @@ $tab-stream-default: var(--v2-colors-mono-500); } .secondary { + margin-right: var(--v2-spacing-3); + margin-bottom: -1px; + font-family: var(--v2-font-family-primary); color: $tab-default; padding-bottom: var(--v2-spacing-2); @@ -74,6 +78,9 @@ $tab-stream-default: var(--v2-colors-mono-500); } .streamSecondary { + margin-right: var(--v2-spacing-3); + margin-bottom: -1px; + font-family: var(--v2-font-family-primary); color: $tab-stream-default; padding-bottom: var(--v2-spacing-2); @@ -86,6 +93,61 @@ $tab-stream-default: var(--v2-colors-mono-500); } } +.streamPrimary { + position: relative; + + margin-right: 0px; + margin-bottom: -1px; + + padding-top: var(--v2-spacing-3); + padding-bottom: var(--v2-spacing-3); + padding-left: var(--v2-spacing-6); + padding-right: var(--v2-spacing-6); + + background: var(--v2-colors-grey-100); + border: 1px solid var(--v2-colors-grey-300); + border-bottom-width: 0px; + + font-family: var(--v2-font-family-secondary); + font-style: normal; + font-weight: var(--v2-font-weight-secondary-regular); + font-size: var(--v2-font-size-4); + line-height: var(--v2-line-height-5); + + color: var(--v2-colors-mono-500); + + &.active { + z-index: 10; + + background-color: var(--v2-colors-pure-white); + border-bottom: 0; + border-radius: 0; + + color: var(--v2-colors-stream-blue-500); + font-weight: var(--v2-font-weight-secondary-bold); + + overflow: visible; + } +} + +.streamPrimary.active::before { + position: absolute; + + top: -1px; + left: -1px; + width: calc(100% + 2px); + height: 4px; + + background-color: var(--v2-colors-stream-blue-500); + color: var(--v2-colors-stream-blue-500); + content: "active"; + overflow: hidden; +} + +.root:not(:first-child) .streamPrimary { + border-left-width: 0px; +} + .uppercase { text-transform: uppercase; } diff --git a/src/core/client/ui/components/v2/Tabs/Tab.tsx b/src/core/client/ui/components/v2/Tabs/Tab.tsx index cbc90d31a27..467923ae610 100644 --- a/src/core/client/ui/components/v2/Tabs/Tab.tsx +++ b/src/core/client/ui/components/v2/Tabs/Tab.tsx @@ -27,13 +27,20 @@ export interface TabProps { /** * Style variant */ - variant?: "primary" | "secondary" | "default" | "streamSecondary"; + variant?: + | "primary" + | "secondary" + | "default" + | "streamSecondary" + | "streamPrimary"; /** * Action taken on tab click */ onTabClick?: (tabID: string) => void; uppercase?: boolean; + + ariaLabel?: string; } class Tab extends React.Component { @@ -52,6 +59,7 @@ class Tab extends React.Component { active, variant, uppercase, + ariaLabel, } = this.props; const buttonClassName = cn( @@ -60,6 +68,7 @@ class Tab extends React.Component { [classes.primary]: variant === "primary", [classes.secondary]: variant === "secondary", [classes.streamSecondary]: variant === "streamSecondary", + [classes.streamPrimary]: variant === "streamPrimary", [classes.default]: variant === "default", [classes.uppercase]: uppercase, [classes.active]: active, @@ -79,6 +88,7 @@ class Tab extends React.Component { aria-controls={`tabPane-${tabID}`} role="tab" aria-selected={active} + aria-label={ariaLabel} onClick={this.handleTabClick} > {children} diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.css b/src/core/client/ui/components/v2/Tabs/TabBar.css index 766db71474d..cd7dfd24b80 100644 --- a/src/core/client/ui/components/v2/Tabs/TabBar.css +++ b/src/core/client/ui/components/v2/Tabs/TabBar.css @@ -23,3 +23,7 @@ $moderateCardTabSecondaryColor: var(--v2-palette-divider); .streamSecondary { border-bottom: 1px solid $moderateCardTabSecondaryColor; } + +.streamPrimary { + border-bottom: 1px solid $moderateCardTabPrimaryColor; +} diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.tsx b/src/core/client/ui/components/v2/Tabs/TabBar.tsx index 20f1e3693a7..2eb9a5c6b47 100644 --- a/src/core/client/ui/components/v2/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/v2/Tabs/TabBar.tsx @@ -17,7 +17,12 @@ export interface TabBarProps { /** * Style variant */ - variant?: "primary" | "secondary" | "default" | "streamSecondary"; + variant?: + | "primary" + | "secondary" + | "default" + | "streamSecondary" + | "streamPrimary"; /** * Active tab id/name */ @@ -50,6 +55,7 @@ const TabBar: FunctionComponent = (props) => { [classes.primary]: variant === "primary", [classes.secondary]: variant === "secondary", [classes.streamSecondary]: variant === "streamSecondary", + [classes.streamPrimary]: variant === "streamPrimary", [classes.default]: variant === "default", }, ],