Skip to content

[TAPS-0000] Migrate Button and Switch to BASE UI #4906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OleksandrNechai wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[TAPS-0000] Migrate Button and Switch to BASE UI #4906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d9b08a
Migrate Button and Switch to BASE UI
OleksandrNechai Mar 4, 2026
ef7906e
Yarn lock
OleksandrNechai Mar 4, 2026
a11d547
Fix switch native button reset for Happo parity
OleksandrNechai Mar 4, 2026
2a31a58
Fix Base UI Switch hidden input visual overflow
OleksandrNechai Mar 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/base/Button/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
},
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
"dependencies": {
"@base-ui/react": "1.2.0",
"@toptal/picasso-checkbox": "5.0.22",
"@toptal/picasso-container": "3.1.3",
"@toptal/picasso-dropdown": "4.2.4",
Expand All @@ -32,7 +33,6 @@
"@toptal/picasso-utils": "3.1.0",
"@toptal/picasso-link": "3.0.7",
"ap-style-title-case": "^1.1.2",
"@mui/base": "5.0.0-beta.58",
"classnames": "^2.5.1"
},
"sideEffects": [
Expand Down
6 changes: 4 additions & 2 deletions packages/base/Button/src/Button/__snapshots__/test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ exports[`Button disabled button as link renders disabled version 1`] = `
>
<a
aria-disabled="true"
class="font-inherit focus:outline-none 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-none [[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-none 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-none [[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"
Expand All @@ -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-none [[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-none [[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"
Expand Down
45 changes: 25 additions & 20 deletions packages/base/Button/src/ButtonBase/ButtonBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -60,14 +59,15 @@ 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
const isValidAs = (value: Props['as']) => {
const valueType = typeof value

return <Root {...rest} ref={ref} />
}
)
return (
valueType === 'string' ||
valueType === 'function' ||
(valueType === 'object' && value !== null)
)
}
Comment on lines +65 to +70
Copy link
Copy Markdown
Collaborator

@denieler denieler Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a bad pattern to me 🤔 and we would need to do that in other components too most likely, so I would think it through carefully

Copy link
Copy Markdown
Collaborator Author

@OleksandrNechai OleksandrNechai Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wdym? it does same thing as before but more thoroughly. We can keep the code as it was though.


export const ButtonBase: OverridableComponent<Props> = forwardRef<
HTMLButtonElement,
Expand Down Expand Up @@ -98,7 +98,7 @@ 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 = isValidAs(as) ? as : 'a'

if (icon) {
const iconComponent = getIcon({ icon })
Expand All @@ -110,27 +110,32 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
}
}

const finalClassName = twMerge(createCoreClassNames({ disabled }), className)
const finalClassName = twMerge(
'base-Button-root',
createCoreClassNames({ disabled }),
className
)
const isNativeButton = finalAs === 'button'

return (
<MUIButtonBase
<BaseUIButton
{...rest}
ref={ref}
onClick={getClickHandler(loading, onClick)}
ref={ref as React.Ref<HTMLElement>}
onClick={
getClickHandler(loading, onClick) as BaseUIButton.Props['onClick']
Copy link
Copy Markdown
Collaborator

@denieler denieler Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type casing, most likely unnecessary

Copy link
Copy Markdown
Collaborator Author

@OleksandrNechai OleksandrNechai Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like its necessary to do as here

Image

Or you meant something different?

}
className={finalClassName}
style={style}
nativeButton={isNativeButton}
render={isNativeButton ? undefined : React.createElement(finalAs)}
aria-disabled={disabled}
disabled={disabled}
title={title}
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'
Expand All @@ -151,7 +156,7 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<
size='small'
/>
)}
</MUIButtonBase>
</BaseUIButton>
)
})

Expand Down
6 changes: 4 additions & 2 deletions packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-none 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
class="font-inherit focus:outline-none 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
data-component-type="button"
data-disabled=""
href="URL"
role="button"
tabindex="-1"
Expand Down Expand Up @@ -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-none [[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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand Down
30 changes: 20 additions & 10 deletions packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,9 @@ exports[`Pagination renders disabled 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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -231,8 +232,9 @@ exports[`Pagination renders disabled 1`] = `
<button
aria-current="false"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -256,8 +258,9 @@ exports[`Pagination renders disabled 1`] = `
<button
aria-current="false"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -272,8 +275,9 @@ exports[`Pagination renders disabled 1`] = `
<button
aria-current="false"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -288,8 +292,9 @@ exports[`Pagination renders disabled 1`] = `
<button
aria-current="true"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite disabled:text-gray text-gray [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white bg-graphite border-graphite disabled:text-gray text-gray [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -304,8 +309,9 @@ exports[`Pagination renders disabled 1`] = `
<button
aria-current="false"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -320,8 +326,9 @@ exports[`Pagination renders disabled 1`] = `
<button
aria-current="false"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -345,8 +352,9 @@ exports[`Pagination renders disabled 1`] = `
<button
aria-current="false"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid visited:text-gray border-gray bg-white h-6 py-0 min-w px-[0.3em] active:bg-graphite active:border-graphite active:text-white disabled:text-gray text-gray [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand All @@ -360,8 +368,9 @@ exports[`Pagination renders disabled 1`] = `
</button>
<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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand Down Expand Up @@ -418,8 +427,9 @@ exports[`Pagination renders with next disabled 1`] = `
</button>
<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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
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-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border border-solid text-gray visited:text-gray border-gray bg-white min-w h-6 py-0 px-3 [&+&]:!ml-2"
data-component-type="button"
data-disabled=""
disabled=""
role="button"
tabindex="-1"
Expand Down
2 changes: 1 addition & 1 deletion packages/base/Switch/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
},
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
"dependencies": {
"@base-ui/react": "1.2.0",
"@toptal/picasso-form-label": "1.0.3",
"@toptal/picasso-shared": "15.0.0",
"@mui/base": "5.0.0-beta.58",
"classnames": "^2.5.1"
},
"sideEffects": [
Expand Down
Loading
Loading