[FX-5614] Add light variant support for PageTopBarMenu (#4403)

* Add `invert` to `PageTopBarMenu` * Remove prop and move to context * Fix changeset
toptal · Jul 8, 2024 · 337d17a · 337d17a
1 parent 5acb05f
commit 337d17a
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 54 deletions.
diff --git a/.changeset/clever-horses-cheer.md b/.changeset/clever-horses-cheer.md
@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-page': minor
+---
+
+### PageTopBar, PageTopBarMenu
+
+- added support for `PageTopBarMenu` to be rendered in `PageTopBar` when `variant='light'`
diff --git a/packages/base/Page/src/PageTopBar/PageTopBar.tsx b/packages/base/Page/src/PageTopBar/PageTopBar.tsx
@@ -48,6 +48,10 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
   }
 }
 
+export const PageTopBarContext = React.createContext<{ variant: VariantType }>({
+  variant: 'dark',
+})
+
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoTopBar',
 })
@@ -125,58 +129,67 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
   )
 
   return (
-    <div className={classes.wrapper}>
-      <header
-        {...rest}
-        ref={ref}
-        className={cx('mui-fixed', classes.root, classes[variant], className, {
-          [classes.preventPageWidthChangeOnScrollbar]:
-            preventPageWidthChangeOnScrollbar,
-        })}
-        style={style}
-      >
-        <div className={innerClassName}>
-          {/*  Left part: Hamburger, Logo, Tagline, Search bar */}
-          <div className={classes.left}>
-            <Container flex alignItems='center' gap='small'>
-              <PageHamburger
-                id={hamburgerId}
-                data-testid={testIds?.hamburger}
-              />
-              {logoLink
-                ? React.cloneElement(logoLink, {}, logoComponent)
-                : logoComponent}
-              {titleComponent}
-            </Container>
-            {leftContent}
-          </div>
-
-          {/* Center part: inline menu */}
-          {centerContent && (
-            <>
-              <PageHamburgerPortal>
-                <div className={classes.centerContentPortal}>
-                  {centerContent}
-                </div>
-              </PageHamburgerPortal>
-              <Container
-                flex
-                alignItems='center'
-                className={classes.centerContent}
-              >
-                {centerContent}
-              </Container>
-            </>
+    <PageTopBarContext.Provider value={{ variant }}>
+      <div className={classes.wrapper}>
+        <header
+          {...rest}
+          ref={ref}
+          className={cx(
+            'mui-fixed',
+            classes.root,
+            classes[variant],
+            className,
+            {
+              [classes.preventPageWidthChangeOnScrollbar]:
+                preventPageWidthChangeOnScrollbar,
+            }
           )}
+          style={style}
+        >
+          <div className={innerClassName}>
+            {/*  Left part: Hamburger, Logo, Tagline, Search bar */}
+            <div className={classes.left}>
+              <Container flex alignItems='center' gap='small'>
+                <PageHamburger
+                  id={hamburgerId}
+                  data-testid={testIds?.hamburger}
+                />
+                {logoLink
+                  ? React.cloneElement(logoLink, {}, logoComponent)
+                  : logoComponent}
+                {titleComponent}
+              </Container>
+              {leftContent}
+            </div>
+
+            {/* Center part: inline menu */}
+            {centerContent && (
+              <>
+                <PageHamburgerPortal>
+                  <div className={classes.centerContentPortal}>
+                    {centerContent}
+                  </div>
+                </PageHamburgerPortal>
+                <Container
+                  flex
+                  alignItems='center'
+                  className={classes.centerContent}
+                >
+                  {centerContent}
+                </Container>
+              </>
+            )}
+
+            {/* Right part: Action items, User menu, Notifications */}
 
-          {/* Right part: Action items, User menu, Notifications */}
-          <div className={classes.right}>
-            {actionItems}
-            {rightContent}
+            <div className={classes.right}>
+              {actionItems}
+              {rightContent}
+            </div>
           </div>
-        </div>
-      </header>
-    </div>
+        </header>
+      </div>
+    </PageTopBarContext.Provider>
   )
 })
 

diff --git a/packages/base/Page/src/PageTopBar/index.ts b/packages/base/Page/src/PageTopBar/index.ts
@@ -3,5 +3,6 @@ import type { OmitInternalProps } from '@toptal/picasso-shared'
 import type { Props } from './PageTopBar'
 
 export { default as PageTopBar } from './PageTopBar'
+export { PageTopBarContext } from './PageTopBar'
 export type PageTopBarProps = OmitInternalProps<Props>
 export * from './constants'
diff --git a/packages/base/Page/src/PageTopBar/story/Variants.example.tsx b/packages/base/Page/src/PageTopBar/story/Variants.example.tsx
@@ -49,6 +49,32 @@ const Example = () => (
         }
       />
     </Container>
+
+    <Container style={{ position: 'relative', height: '6rem' }}>
+      <Page hamburgerId='hamburger-default-example'>
+        <Page.TopBar
+          variant='light'
+          title='Light with menu'
+          actionItems={
+            <Container right={SPACING_6}>
+              <Button variant='primary'>Create job</Button>
+            </Container>
+          }
+          rightContent={
+            <Page.TopBarMenu
+              name='Jacqueline Roque'
+              meta='Developer'
+              avatar='./jacqueline-with-flowers-1954-square.jpg'
+            >
+              <Menu>
+                <Menu.Item>My Account</Menu.Item>
+                <Menu.Item>Log Out</Menu.Item>
+              </Menu>
+            </Page.TopBarMenu>
+          }
+        />
+      </Page>
+    </Container>
   </div>
 )
 

diff --git a/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx b/packages/base/Page/src/PageTopBarMenu/PageTopBarMenu.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 import type { ReactNode, HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
+import React, { useContext, forwardRef } from 'react'
 import cx from 'classnames'
 import type { Theme } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/core/styles'
@@ -12,6 +12,7 @@ import { Typography } from '@toptal/picasso-typography'
 import { DropdownCompound as Dropdown } from '@toptal/picasso-dropdown'
 
 import styles from './styles'
+import { PageTopBarContext } from '../PageTopBar'
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoTopBarMenu',
@@ -42,13 +43,16 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
     } = props
     const classes = useStyles()
 
+    const { variant } = useContext(PageTopBarContext)
+    const invert = variant === 'light'
+
     const isCompactLayout = useBreakpoint(['xs', 'sm', 'md'])
 
     const metaContent =
       typeof meta === 'string' ? (
         <Typography
           className={classes.truncateText}
-          invert={!isCompactLayout}
+          invert={!isCompactLayout && !invert}
           size='xsmall'
           data-private={dataPrivate}
         >
@@ -89,7 +93,7 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
       />
     ) : (
       <UserBadge
-        invert
+        invert={!invert}
         center
         size='xxsmall'
         classes={{
@@ -122,7 +126,9 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
         }}
       >
         {trigger}
-        <Dropdown.Arrow className={classes.arrow} />
+        <Dropdown.Arrow
+          className={cx(classes.arrow, { [classes.invert]: invert })}
+        />
       </Dropdown>
     )
   }

diff --git a/packages/base/Page/src/PageTopBarMenu/styles.ts b/packages/base/Page/src/PageTopBarMenu/styles.ts
@@ -1,7 +1,7 @@
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
 
-export default ({ screens }: Theme) =>
+export default ({ screens, palette }: Theme) =>
   createStyles({
     avatar: {
       fontSize: '0.9rem',
@@ -38,6 +38,9 @@ export default ({ screens }: Theme) =>
         marginLeft: '0.5rem',
       },
     },
+    invert: {
+      color: palette.text.primary,
+    },
     paper: {
       [screens('xs', 'sm', 'md')]: {
         top: '2.5em !important',