@toptal/picasso-tabs 3.0.2-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.32 → 3.0.2-alpha-fx-null-revert-tabs-b3f67a2fa.31

package/dist-package/src/TabsCompound/index.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
-export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
-    ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
-}) => JSX.Element | null) & {
-    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsCompound: import("react").ForwardRefExoticComponent<import("../Tabs/Tabs").Props<import("../Tabs").TabsValueType> & import("react").RefAttributes<HTMLButtonElement>> & {
+    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/TabsCompound/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;CAEvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;CAEvB,CAAA"}

package/dist-package/src/index.d.ts

@@ -1,3 +1,4 @@
+export * from './TabScrollButton';
 export * from './Tabs';
 export * from './Tab';
 export * from './TabDescription';

package/dist-package/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/dist-package/src/index.js

@@ -1,3 +1,4 @@
+export * from './TabScrollButton';
 export * from './Tabs';
 export * from './Tab';
 export * from './TabDescription';

package/dist-package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "3.0.2-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.32+7cdb4a4dd",
+  "version": "3.0.2-alpha-fx-null-revert-tabs-b3f67a2fa.31+b3f67a2fa",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,14 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@mui/base": "5.0.0-beta.40",
-    "@toptal/picasso-container": "2.0.1-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.46+7cdb4a4dd",
-    "@toptal/picasso-icons": "1.6.1-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.32+7cdb4a4dd",
-    "@toptal/picasso-shared": "15.0.1-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.125+7cdb4a4dd",
-    "@toptal/picasso-typography": "3.0.1-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.46+7cdb4a4dd",
-    "@toptal/picasso-typography-overflow": "2.0.5-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.46+7cdb4a4dd",
-    "@toptal/picasso-user-badge": "3.0.2-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.32+7cdb4a4dd",
-    "@toptal/picasso-utils": "1.0.4-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.125+7cdb4a4dd",
+    "@toptal/picasso-container": "2.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
+    "@toptal/picasso-icons": "1.6.1-alpha-fx-null-revert-tabs-b3f67a2fa.31+b3f67a2fa",
+    "@toptal/picasso-shared": "15.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.124+b3f67a2fa",
+    "@toptal/picasso-typography": "3.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
+    "@toptal/picasso-typography-overflow": "2.0.5-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
+    "@toptal/picasso-user-badge": "3.0.2-alpha-fx-null-revert-tabs-b3f67a2fa.31+b3f67a2fa",
+    "@toptal/picasso-utils": "1.0.4-alpha-fx-null-revert-tabs-b3f67a2fa.124+b3f67a2fa",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.5.1"
   },
@@ -38,22 +37,23 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@toptal/picasso-tailwind": ">=2.7",
-    "@toptal/picasso-tailwind-merge": "1.2.0",
-    "react": ">=16.12.0 < 19.0.0"
+    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-provider": "*",
+    "react": ">=16.12.0 < 19.0.0",
+    "tailwindcss": ">=3"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.46+7cdb4a4dd",
-    "@toptal/picasso-tailwind-merge": "1.2.1-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.46+7cdb4a4dd",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-5726-create-base-preset-package-7cdb4a4dd.125+7cdb4a4dd"
+    "@toptal/picasso-provider": "5.0.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
+    "@toptal/picasso-tailwind-merge": "1.2.1-alpha-fx-null-revert-tabs-b3f67a2fa.45+b3f67a2fa",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-null-revert-tabs-b3f67a2fa.124+b3f67a2fa"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "7cdb4a4ddee130d17468e7b2eeab69c26fd36ea4"
+  "gitHead": "b3f67a2fa9c785bf8251fbfdcfe27163597835d0"
 }

package/src/Tab/Tab.tsx

@@ -1,20 +1,22 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
 import React, { forwardRef, useContext } from 'react'
-import type { TabProps } from '@mui/base/Tab'
-import { Tab as MUITab } from '@mui/base/Tab'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import type { TabProps } from '@material-ui/core'
+import { Tab as MUITab } from '@material-ui/core'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
 import { UserBadge } from '@toptal/picasso-user-badge'
-import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { TabsContext } from '../Tabs/Tabs'
+import styles from './styles'
+import { TabsOrientationContext } from '../Tabs/Tabs'
 import { TabLabel } from '../TabLabel'
 import { TabDescription } from '../TabDescription'
 
 export interface Props
   extends BaseProps,
     TextLabelProps,
-    Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
    * If true, the tab will be disabled
    * @default false
@@ -43,81 +45,27 @@ export interface Props
   onClick?: TabProps['onClick']
 }
 
-const getOpacityClass = (
-  selected: boolean,
-  disabled: boolean,
-  orientation: 'horizontal' | 'vertical'
-) => {
-  if (disabled) {
-    return 'opacity-50'
-  }
-
-  if (selected || orientation === 'vertical') {
-    return 'opacity-100 '
-  }
+const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTab' })
 
-  return 'opacity-70'
-}
-
-const wrapperClassesByOrientation = {
-  horizontal: 'inline-flex items-center flex-col justify-center',
-  vertical: 'block',
-}
-
-const rootClassesByOrientation = (selected: boolean) => ({
-  horizontal: [
-    'm-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0',
-    'text-center bg-transparent transition-shadow z-10 rounded-none',
-    selected ? 'text-black' : 'text-inheritColor',
-    selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
-  ],
-  vertical: [
-    ' first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
-    'text-left rounded-l-sm rounded-r-none transition-all',
-    'w-full overflow-hidden',
-    selected && 'shadow-1',
-    selected && [
-      'before:absolute',
-      'before:content-[""]',
-      'before:bottom-0',
-      'before:left-0',
-      'before:top-0',
-      'before:w-[3px]',
-      'before:bg-blue-500',
-    ],
-    selected
-      ? 'bg-gray-50 text-black'
-      : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
-  ],
-})
-
-const classesByVariant = {
-  scrollable: 'shrink-0 max-w-[264px]',
-  fullWidth: 'shrink flex-grow basis-0',
-}
-
-export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
-  props,
-  ref
-) {
+export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
   const {
     disabled,
     value,
     label,
     icon,
+    selected,
     onChange,
     onClick,
     titleCase: propsTitleCase,
     description,
     avatar,
-    className,
     ...rest
   } = props
+  const classes = useStyles()
   const titleCase = useTitleCase(propsTitleCase)
-  const { orientation, variant } = useContext(TabsContext)
-  const isHorizontal = orientation === 'horizontal'
+  const orientation = useContext(TabsOrientationContext)
 
-  const renderLabel = getLabelComponent({
+  const labelComponent = getLabelComponent({
     avatar,
     description,
     disabled,
@@ -133,44 +81,18 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
       ref={ref}
       tabIndex={0}
       disabled={disabled}
+      label={labelComponent}
+      icon={icon}
       value={value}
+      selected={selected}
       onChange={onChange}
       onClick={onClick}
-      slotProps={{
-        root: ownerState => {
-          return {
-            className: twMerge(
-              getOpacityClass(
-                ownerState.selected,
-                ownerState.disabled,
-                orientation
-              ),
-              rootClassesByOrientation(ownerState.selected)[orientation],
-              classesByVariant[variant],
-              ownerState.disabled
-                ? 'cursor-default text-gray-500'
-                : 'cursor-pointer',
-              ownerState.disabled && 'pointer-events-none',
-              icon && isHorizontal && 'min-h-0 pt-[0.5625rem] pr-6',
-              'min-w-0 sm:min-w-[160px] md:min-w-[auto]',
-              'border-0 cursor-pointer inline-flex outline-none',
-              'items-center select-none align-middle appearance-none',
-              'justify-center no-underline [-webkit-tap-highlight-color:transparent]',
-              'normal-case whitespace-normal leading-4',
-              'relative ',
-              className
-            ),
-          }
-        },
+      classes={{
+        root: classes[orientation],
+        selected: classes.selected,
+        wrapper: classes.wrapper,
       }}
-    >
-      <span
-        className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
-      >
-        {renderLabel}
-        {icon && <span className='absolute right-0 mb-0 h-4'>{icon}</span>}
-      </span>
-    </MUITab>
+    />
   )
 })
 

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

@@ -6,27 +6,30 @@ exports[`Tab Tab disabled tab 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="true"
             aria-selected="false"
-            class="base-Tab base- opacity-50 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none shrink-0 max-w text-gray pointer-events min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
-            id=":r1:"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
+            disabled=""
             role="tab"
-            tabindex="0"
+            tabindex="-1"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -36,6 +39,10 @@ exports[`Tab Tab disabled tab 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -48,27 +55,29 @@ exports[`Tab Tab renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
-            id=":r0:"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -78,6 +87,10 @@ exports[`Tab Tab renders 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -90,43 +103,45 @@ exports[`Tab Tab tab with icon 1`] = `
     class="Picasso-root"
   >
     <div
-      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
     >
       <div
-        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="base-TabsList base-TabsList flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="false"
             aria-selected="false"
-            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor shrink-0 max-w min-h pt-[0.5625rem] pr-6 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
-            id=":r2:"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex items-center flex-col justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
+              <div
+                id="Icon"
+              />
               <div
                 class="m-0 text-sm text-inherit font-semibold"
               >
                 Tab Label
               </div>
-              <span
-                class="absolute right-0 mb-0 h-4"
-              >
-                <div
-                  id="Icon"
-                />
-              </span>
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>

package/src/Tab/styles.ts

@@ -0,0 +1,106 @@
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
+import { rem } from '@toptal/picasso-shared'
+import { PicassoProvider } from '@toptal/picasso-provider'
+
+PicassoProvider.override(({ breakpoints, palette }: Theme) => ({
+  MuiTab: {
+    root: {
+      minHeight: 0,
+      minWidth: 0,
+      lineHeight: 1,
+      textTransform: 'none',
+      padding: `${rem('9px')} 0 ${rem('7px')}`,
+      overflow: 'initial',
+
+      [breakpoints.up('md')]: {
+        padding: undefined,
+      },
+
+      color: palette.grey.dark,
+
+      [breakpoints.up('md')]: {
+        minWidth: 'auto',
+        fontSize: '1rem',
+      },
+    },
+    labelIcon: {
+      minHeight: 0,
+      paddingRight: '1.5rem',
+      paddingTop: rem('9px'),
+      '& $wrapper > *:first-child': {
+        position: 'absolute',
+        right: 0,
+        marginBottom: 0,
+      },
+    },
+    selected: {
+      color: palette.common.black,
+    },
+    textColorInherit: {
+      '&$disabled': {
+        color: palette.grey.main,
+      },
+    },
+    disabled: {},
+  },
+}))
+
+export default ({ sizes, palette, shadows, transitions }: Theme) =>
+  createStyles({
+    horizontal: {
+      '&:not(:last-child)': {
+        marginRight: '2em',
+      },
+    },
+    vertical: {
+      width: '100%',
+      borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
+      margin: '0.25rem 0',
+      overflow: 'hidden',
+      padding: '0.5rem 1rem',
+      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
+      textAlign: 'left',
+      backgroundColor: palette.grey.lighter,
+      opacity: 1,
+      color: palette.grey.dark,
+
+      '&:first-child': {
+        marginTop: '1rem',
+      },
+
+      '&:last-child': {
+        marginBottom: '1rem',
+      },
+
+      '&:hover': {
+        color: palette.common.black,
+      },
+
+      '&:hover:not($selected)': {
+        backgroundColor: palette.grey.lighter2,
+      },
+
+      '& $wrapper': {
+        display: 'block',
+      },
+    },
+    selected: {
+      '&$vertical': {
+        color: palette.common.black,
+        boxShadow: shadows[1],
+        backgroundColor: palette.grey.lightest,
+
+        '&::before': {
+          content: '""',
+          background: palette.blue.main,
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '3px',
+        },
+      },
+    },
+    wrapper: {},
+  })

package/src/TabScrollButton/TabScrollButton.tsx

@@ -0,0 +1,64 @@
+import cx from 'classnames'
+import React, { forwardRef } from 'react'
+import { ButtonBase } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
+import { Container } from '@toptal/picasso-container'
+
+import styles from './styles'
+
+type DirectionType = 'left' | 'right'
+
+export interface Props extends BaseProps {
+  /** The direction the button should indicate. */
+  direction: DirectionType
+  /** If `true`, the component is disabled. */
+  disabled?: boolean
+}
+
+const useStyles = makeStyles(styles, {
+  name: 'PicassoTabScrollButton',
+})
+
+export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
+  function TabScrollButton(props, ref) {
+    const { className, style, direction, disabled, ...rest } = props
+    const classes = useStyles()
+
+    if (disabled) {
+      return null
+    }
+
+    return (
+      <Container
+        {...rest}
+        ref={ref}
+        className={cx(classes.root, className)}
+        style={style}
+      >
+        <Container
+          className={cx(classes.gradient, {
+            [classes.left]: direction === 'left',
+            [classes.right]: direction === 'right',
+          })}
+        >
+          <ButtonBase
+            className={cx(classes.button, {
+              [classes.left]: direction === 'left',
+              [classes.right]: direction === 'right',
+            })}
+            aria-label={`${direction} button`}
+            data-testid={`tab-scroll-button-${direction}`}
+          >
+            {direction === 'left' ? <BackMinor16 /> : <ChevronMinor16 />}
+          </ButtonBase>
+        </Container>
+      </Container>
+    )
+  }
+)
+
+TabScrollButton.displayName = 'TabScrollButton'
+
+export default TabScrollButton

package/src/TabScrollButton/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './TabScrollButton'
+
+export { default as TabScrollButton } from './TabScrollButton'
+export type TabScrollButtonProps = OmitInternalProps<Props>

package/src/TabScrollButton/styles.ts

@@ -0,0 +1,37 @@
+import { createStyles } from '@material-ui/core'
+import type { Theme } from '@material-ui/core/styles'
+import { alpha } from '@toptal/picasso-shared'
+
+export default ({ palette }: Theme) => {
+  const color = palette.common.white
+  const colorStops = `${color} 0%, ${color} 50%, ${alpha(color, 0)} 100%`
+
+  return createStyles({
+    root: {
+      position: 'relative',
+    },
+    gradient: {
+      position: 'absolute',
+      width: '2.5rem',
+      height: '100%',
+      zIndex: 2,
+      '&$left': {
+        background: `linear-gradient(90deg, ${colorStops})`,
+      },
+      '&$right': {
+        background: `linear-gradient(270deg, ${colorStops})`,
+      },
+    },
+    button: {
+      position: 'absolute',
+      width: '1rem',
+      height: '100%',
+    },
+    left: {
+      left: 0,
+    },
+    right: {
+      right: 0,
+    },
+  })
+}