@toptal/picasso-page 2.2.0 → 3.0.0

package/src/PageAutocomplete/__snapshots__/test.tsx.snap

@@ -12,23 +12,23 @@ exports[`PageAutocomplete renders 1`] = `
       role="combobox"
     >
       <div
-        class="PicassoContainer-flex"
+        class="flex"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoOutlinedInput-rootDark MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-[#081237] after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border-none [&:has(input:focus)]:after:shadow-0 hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
         >
           <input
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium PicassoOutlinedInput-inputDark MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-white [&::placeholder]:text-white [&::placeholder]:opacity-[0.64]"
             data-testid="autocomplete"
             type="text"
             value=""
             variant="dark"
           />
           <div
-            class="MuiInputAdornment-root PicassoInputAdornment-root PicassoOutlinedInput-resetButton MuiInputAdornment-positionEnd"
+            class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible"
             data-testid="reset-adornment"
           >
             <button
@@ -40,7 +40,7 @@ exports[`PageAutocomplete renders 1`] = `
               type="button"
             >
               <span
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                class="items-center inline-flex font-semibold whitespace-nowrap text-button"
               >
                 <svg
                   class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1"
@@ -54,20 +54,6 @@ exports[`PageAutocomplete renders 1`] = `
               </span>
             </button>
           </div>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutlineDark"
-            style="padding-left: 8px;"
-          >
-            <legend
-              class="PrivateNotchedOutline-legend"
-              style="width: 0.01px;"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
         </div>
       </div>
       <div

package/src/PageSidebar/PageSidebar.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { useSidebar } from '@toptal/picasso-provider'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import cx from 'classnames'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type { ReactNode } from 'react'
 import React, { forwardRef, useCallback, useEffect, useState } from 'react'
 import { ButtonCircular } from '@toptal/picasso-button'
@@ -100,8 +100,6 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
   return (
     <Container
       ref={ref}
-      flex
-      direction='column'
       style={style}
       className={cx(classes.root, className, classes[variant], classes[size], {
         [classes.rootCollapsed]: collapsible && isCollapsed,

package/src/PageSidebar/__snapshots__/test.tsx.snap

@@ -6,13 +6,13 @@ exports[`PageSidebar renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"
@@ -30,19 +30,19 @@ exports[`PageSidebar with menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"
           />
           <ul
-            class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root"
+            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
             role="menu"
             tabindex="-1"
           />
@@ -59,24 +59,24 @@ exports[`PageSidebar with one normal and one bottom menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"
           />
           <ul
-            class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root"
+            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
             role="menu"
             tabindex="-1"
           />
           <ul
-            class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root PicassoSidebarMenu-bottom"
+            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 [&_&]:flex-1 flex-grow flex-shrink max-w order-[99]"
             role="menu"
             tabindex="-1"
           />

package/src/PageTopBar/PageTopBar.tsx

@@ -170,11 +170,7 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
                     {centerContent}
                   </div>
                 </PageHamburgerPortal>
-                <Container
-                  flex
-                  alignItems='center'
-                  className={classes.centerContent}
-                >
+                <Container className={classes.centerContent}>
                   {centerContent}
                 </Container>
               </>

package/src/PageTopBar/__snapshots__/test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
             class="PicassoTopBar-left"
           >
             <div
-              class="PicassoContainer-smallGap PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="gap-4 items-center flex"
             >
               <div
                 class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
@@ -35,7 +35,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
                     type="button"
                   >
                     <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                      class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
                         class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
@@ -72,13 +72,13 @@ exports[`Page.TopBar render with custom logo 1`] = `
                 Custom logo content
               </div>
               <div
-                class="PicassoContainer-centerAlignItems PicassoTopBar-title"
+                class="items-center PicassoTopBar-title"
               >
                 <div
                   class="PicassoTopBar-divider"
                 />
                 <div
-                  class="PicassoContainer-leftsmallMargin"
+                  class="ml-4"
                 >
                   <p
                     class="m-0 font-inherit leading-[1.5em] text-white font-regular"
@@ -117,7 +117,7 @@ exports[`Page.TopBar render with link 1`] = `
             class="PicassoTopBar-left"
           >
             <div
-              class="PicassoContainer-smallGap PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="gap-4 items-center flex"
             >
               <div
                 class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
@@ -134,7 +134,7 @@ exports[`Page.TopBar render with link 1`] = `
                     type="button"
                   >
                     <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                      class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
                         class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
@@ -168,7 +168,7 @@ exports[`Page.TopBar render with link 1`] = `
                 </div>
               </div>
               <a
-                class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root PicassoLink-blue MuiTypography-colorPrimary"
+                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
                 href="https://www.toptal.com"
               >
                 <svg
@@ -197,13 +197,13 @@ exports[`Page.TopBar render with link 1`] = `
                 </svg>
               </a>
               <div
-                class="PicassoContainer-centerAlignItems PicassoTopBar-title"
+                class="items-center PicassoTopBar-title"
               >
                 <div
                   class="PicassoTopBar-divider"
                 />
                 <div
-                  class="PicassoContainer-leftsmallMargin"
+                  class="ml-4"
                 >
                   <p
                     class="m-0 font-inherit leading-[1.5em] text-white font-regular"
@@ -242,7 +242,7 @@ exports[`Page.TopBar renders 1`] = `
             class="PicassoTopBar-left"
           >
             <div
-              class="PicassoContainer-smallGap PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="gap-4 items-center flex"
             >
               <div
                 class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
@@ -259,7 +259,7 @@ exports[`Page.TopBar renders 1`] = `
                     type="button"
                   >
                     <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                      class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
                         class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
@@ -317,13 +317,13 @@ exports[`Page.TopBar renders 1`] = `
                 />
               </svg>
               <div
-                class="PicassoContainer-centerAlignItems PicassoTopBar-title"
+                class="items-center PicassoTopBar-title"
               >
                 <div
                   class="PicassoTopBar-divider"
                 />
                 <div
-                  class="PicassoContainer-leftsmallMargin"
+                  class="ml-4"
                 >
                   <p
                     class="m-0 font-inherit leading-[1.5em] text-white font-regular"

package/src/PageTopBarMenu/__snapshots__/test.tsx.snap

@@ -12,7 +12,7 @@ exports[`PageTopBarMenu renders 1`] = `
         class="PicassoDropdown-anchor"
       >
         <div
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoUserBadge-root"
+          class="items-center flex PicassoUserBadge-root"
         >
           <div
             class="flex relative"
@@ -28,10 +28,10 @@ exports[`PageTopBarMenu renders 1`] = `
             </div>
           </div>
           <div
-            class="PicassoContainer-flex PicassoContainer-column PicassoUserBadge-infoContainer"
+            class="flex flex-col PicassoUserBadge-infoContainer"
           >
             <div
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="items-center flex"
             >
               <h4
                 class="m-0 text-md text-white font-semibold inline PicassoUserBadge-name !font-[400] PicassoTopBarMenu-truncateText"

package/src/PageTopBarMenu/test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 /* eslint-disable-next-line */
 import { render } from '@toptal/picasso-test-utils'
 import type { OmitInternalProps } from '@toptal/picasso-shared'
-import { MenuCompound as Menu } from '@toptal/picasso-menu'
+import { Menu, MenuItem } from '@toptal/picasso-menu'
 
 import type { Props } from './PageTopBarMenu'
 import { PageTopBarMenu } from './PageTopBarMenu'
@@ -27,8 +27,8 @@ describe('PageTopBarMenu', () => {
         avatar='./jacqueline-with-flowers-1954-square.jpg'
       >
         <Menu>
-          <Menu.Item>My Account</Menu.Item>
-          <Menu.Item>Log Out</Menu.Item>
+          <MenuItem>My Account</MenuItem>
+          <MenuItem>Log Out</MenuItem>
         </Menu>
       </TestPageTopBarMenu>
     )

package/src/SidebarItem/SidebarItemHeader.tsx

@@ -1,18 +1,94 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge'
 import React, { forwardRef, useCallback } from 'react'
 import { MenuItem } from '@toptal/picasso-menu'
 
 import { SidebarItemContent } from '../SidebarItemContent'
-import styles from './styles'
 import type { Props } from './types'
-import { useSubMenuContext } from './SubMenuContextProvider'
+import { useSubMenuContext, type ContextProps } from './SubMenuContextProvider'
 import { getTagProps, getBadgeProps } from './utils'
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSidebarItemHeader',
-})
+const getColorStyles = ({
+  variant,
+  selected,
+}: {
+  variant: Props['variant']
+  selected?: boolean
+}) => {
+  if (variant === 'light') {
+    if (selected) {
+      return 'text-blue-500 hover:text-blue-500 focus:text-blue-500 bg-gray-300 hover:bg-gray-300 focus:bg-gray-300'
+    }
+
+    return 'text-graphite-700 hover:text-blue-500 focus:text-blue-500'
+  }
+
+  if (variant === 'dark') {
+    if (selected) {
+      return 'text-white hover:text-white focus:text-white bg-graphite-700 hover:bg-graphite-700 focus:bg-graphite-700'
+    }
+
+    return 'hover:text-white focus:text-white'
+  }
+}
+
+const getSpacingStyles = ({
+  compact,
+  parentMenu,
+  hasMenu,
+  collapsible,
+}: {
+  compact: Props['compact']
+  parentMenu: ContextProps['parentMenu']
+  hasMenu: boolean
+  collapsible?: boolean
+}) => {
+  let pl = 'pl-4'
+  let pr = 'pr-4'
+  let pt = 'pt-0'
+  let pb = 'pb-0'
+
+  let ml = 'ml-4'
+  let mr = 'mr-4'
+  let mt = 'mt-0'
+  let mb = 'mb-0'
+
+  if (parentMenu) {
+    pr = 'pr-4'
+    pl = parentMenu.icon ? 'pl-[2.875rem]' : 'pl-8'
+    mr = 'mr-4'
+  }
+
+  if (compact) {
+    pt = 'pt-0'
+    pb = 'pb-0'
+    pr = 'pr-0'
+    pl = 'pl-0'
+  }
+
+  if (hasMenu && (collapsible || compact)) {
+    pt = 'pt-0'
+    pb = 'pb-0'
+    pr = 'pr-0'
+    pl = 'pl-0'
+    mt = 'mt-0'
+    mb = 'mb-0'
+    mr = 'mr-0'
+    ml = 'ml-0'
+  }
+
+  if (parentMenu?.compact) {
+    mr = 'mr-0'
+    mt = 'mt-0'
+    mb = 'mb-0'
+    ml = 'ml-0'
+    pt = 'pt-[0.375rem]'
+    pb = 'pb-[0.375rem]'
+    pl = 'pl-4'
+    pr = 'pr-4'
+  }
+
+  return twJoin(pl, pr, pt, pb, mt, mb, mr, ml)
+}
 
 export const SidebarItemHeader = forwardRef<HTMLElement, Props>(
   function SidebarItemHeader(props: Props, ref) {
@@ -39,8 +115,6 @@ export const SidebarItemHeader = forwardRef<HTMLElement, Props>(
       ...rest
     } = props
 
-    const classes = useStyles()
-
     const { parentMenu } = useSubMenuContext()
 
     const hasMenu = menu != null
@@ -54,28 +128,18 @@ export const SidebarItemHeader = forwardRef<HTMLElement, Props>(
       [hasMenu, onClick]
     )
 
-    const subMenuClass =
-      parentMenu &&
-      (parentMenu.icon ? classes.nestedMenuWithIcon : classes.nestedMenu)
-
     const shouldShowSelected = (compact || !hasMenu) && selected
 
     return (
       <MenuItem
         {...rest}
-        classes={classes}
         ref={ref}
-        className={cx(
-          classes.root,
-          classes.noWrap,
-          classes[variant],
-          subMenuClass,
-          {
-            [classes.compact]: compact,
-            [classes.selected]: shouldShowSelected,
-            [classes.parentCompact]: parentMenu?.compact,
-            [classes.collapsible]: hasMenu && (collapsible || compact),
-          },
+        className={twMerge(
+          'h-[2.75rem] whitespace-nowrap rounded-sm',
+          'flex-1 min-w-0',
+          getColorStyles({ variant, selected: shouldShowSelected }),
+          getSpacingStyles({ compact, parentMenu, hasMenu, collapsible }),
+          compact && 'overflow-visible',
           className
         )}
         onClick={handleMenuItemClick}