[PF-1994] Migrate Button to @base-ui/react + Tailwind

docs/migration/Button-diff.json

@@ -0,0 +1,12 @@
+{
+  "component": "Button",
+  "removed": [
+    {
+      "prop": "classes",
+      "reason": "Type-level removal via Omit<StandardProps, 'classes'> on both Button.Props and ButtonBase.Props. Pre-migration the prop was vestigial — inherited via StandardProps/JssProps but never extracted by either component, so it leaked through {...rest} to @mui/base/Button (no public classes prop on MUIButtonBase), which dropped it as an unknown HTML attribute (React dev warning + silent prod drop). Post-migration the leak path was identical against @base-ui/react/button. Reviewer asked us to make the API honest about not using it. Zero internal call-sites pass classes={...} to picasso Button (verified by grep across packages/**). External 23-repo portfolio not audited — if any consumer types classes={...}, they will see a TS error and need to remove the prop.",
+      "codemod": "required"
+    }
+  ],
+  "renamed": [],
+  "narrowed": []
+}

packages/base/Button/package.json

@@ -32,7 +32,7 @@
     "@toptal/picasso-utils": "4.0.0",
     "@toptal/picasso-link": "4.0.0",
     "ap-style-title-case": "^1.1.2",
-    "@mui/base": "5.0.0-beta.58",
+    "@base-ui/react": "^1.4.1",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
@@ -43,7 +43,7 @@
     "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-tailwind": ">=2.7",
     "@toptal/picasso-provider": "*",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

packages/base/Button/src/Button/Button.tsx

@@ -35,7 +35,7 @@ export type VariantType =
 export type IconPositionType = 'left' | 'right'
 
 export interface Props
-  extends StandardProps,
+  extends Omit<StandardProps, 'classes'>,
     TextLabelProps,
     ButtonOrAnchorProps {
   /** Show button in the active state (left mouse button down) */

packages/base/Button/src/Button/__snapshots__/test.tsx.snap

@@ -7,8 +7,9 @@ exports[`Button disabled button as link renders disabled version 1`] = `
   >
     <a
       aria-disabled="true"
-      class="font-inherit focus:outline-hidden base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
+      class="font-inherit focus:outline-hidden base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
       data-component-type="button"
+      data-disabled=""
       href="URL"
       role="button"
       tabindex="-1"
@@ -31,8 +32,9 @@ exports[`Button disabled button renders disabled version 1`] = `
   >
     <button
       aria-disabled="true"
-      class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
       data-component-type="button"
+      data-disabled=""
       disabled=""
       role="button"
       tabindex="-1"

packages/base/Button/src/ButtonBase/ButtonBase.tsx

@@ -9,8 +9,7 @@ import type {
   TextLabelProps,
 } from '@toptal/picasso-shared'
 import { useTitleCase } from '@toptal/picasso-shared'
-import { Button as MUIButtonBase } from '@mui/base/Button'
-import type { ButtonRootSlotProps } from '@mui/base/Button'
+import { Button as BaseUIButton } from '@base-ui/react/button'
 import { Loader } from '@toptal/picasso-loader'
 import { Container } from '@toptal/picasso-container'
 import { noop, toTitleCase } from '@toptal/picasso-utils'
@@ -20,7 +19,7 @@ import { createCoreClassNames } from './styles'
 export type IconPositionType = 'left' | 'right'
 
 export interface Props
-  extends StandardProps,
+  extends Omit<StandardProps, 'classes'>,
     TextLabelProps,
     ButtonOrAnchorProps {
   as?: ElementType
@@ -46,8 +45,11 @@ export interface Props
   type?: 'button' | 'reset' | 'submit'
 }
 
-const getClickHandler = (loading?: boolean, handler?: Props['onClick']) =>
-  loading ? noop : handler
+const getClickHandler = (
+  loading?: boolean,
+  handler?: Props['onClick']
+): BaseUIButton.Props['onClick'] =>
+  (loading ? noop : handler) as BaseUIButton.Props['onClick']
 
 const getIcon = ({ icon }: { icon?: ReactElement }) => {
   if (!icon) {
@@ -60,15 +62,6 @@ const getIcon = ({ icon }: { icon?: ReactElement }) => {
   })
 }
 
-const RootElement = forwardRef(
-  (props: ButtonRootSlotProps & { as: ElementType }, ref) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { ownerState, as: Root, ...rest } = props
-
-    return <Root {...rest} ref={ref} />
-  }
-)
-
 export const ButtonBase: OverridableComponent<Props> = forwardRef<
   HTMLButtonElement,
   Props
@@ -98,7 +91,8 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
 
   const titleCase = useTitleCase(propsTitleCase)
   const finalChildren = [titleCase ? toTitleCase(children) : children]
-  const finalRootElementName = typeof as === 'string' ? as : 'a'
+  const finalAs: ElementType = as ?? 'button'
+  const isNativeButton = finalAs === 'button'
 
   if (icon) {
     const iconComponent = getIcon({ icon })
@@ -110,12 +104,18 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
     }
   }
 
-  const finalClassName = twMerge(createCoreClassNames({ disabled }), className)
+  const finalClassName = twMerge(
+    'base-Button-root',
+    createCoreClassNames({ disabled }),
+    className
+  )
 
   return (
-    <MUIButtonBase
+    <BaseUIButton
       {...rest}
-      ref={ref}
+      ref={ref as React.Ref<HTMLElement>}
+      nativeButton={isNativeButton}
+      render={isNativeButton ? undefined : React.createElement(finalAs)}
       onClick={getClickHandler(loading, onClick)}
       className={finalClassName}
       style={style}
@@ -125,12 +125,8 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
       value={value}
       type={type}
       data-component-type='button'
-      tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
+      tabIndex={rest.tabIndex ?? (disabled ? -1 : 0)}
       role={rest.role ?? 'button'}
-      rootElementName={finalRootElementName as keyof HTMLElementTagNameMap}
-      slots={{ root: RootElement }}
-      // @ts-ignore
-      slotProps={{ root: { as } }}
     >
       <Container
         as='span'
@@ -151,7 +147,7 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
           size='small'
         />
       )}
-    </MUIButtonBase>
+    </BaseUIButton>
   )
 })
 

packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap

@@ -79,8 +79,9 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
   >
     <a
       aria-disabled="true"
-      class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
+      class="font-inherit focus:outline-hidden hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
+      data-disabled=""
       href="URL"
       role="button"
       tabindex="-1"
@@ -174,8 +175,9 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
   >
     <button
       aria-disabled="true"
-      class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-default pointer-events"
       data-component-type="button"
+      data-disabled=""
       disabled=""
       role="button"
       tabindex="-1"