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 5 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
5 commits
Select commit Hold shift + click to select a range
33b8758
Migrate Button and Switch to BASE UI
OleksandrNechai Mar 4, 2026
e027b2e
Yarn lock
OleksandrNechai Mar 4, 2026
8328581
Fix switch native button reset for Happo parity
OleksandrNechai Mar 4, 2026
e10a9c1
Fix Base UI Switch hidden input visual overflow
OleksandrNechai Mar 4, 2026
9331194
Remove unnecessary runtime type check
narghev May 6, 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.23",
"@toptal/picasso-container": "3.1.4",
"@toptal/picasso-dropdown": "5.0.0",
Expand All @@ -32,7 +33,6 @@
"@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",
"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-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"
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-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"
Expand Down
41 changes: 18 additions & 23 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 @@ -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) {
Expand All @@ -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
Expand Down Expand Up @@ -98,7 +91,6 @@ export const ButtonBase: OverridableComponent<Props> = forwardRef<

const titleCase = useTitleCase(propsTitleCase)
const finalChildren = [titleCase ? toTitleCase(children) : children]
const finalRootElementName = typeof as === 'string' ? as : 'a'

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

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

return (
<MUIButtonBase
<BaseUIButton
{...rest}
ref={ref}
ref={ref as React.Ref<HTMLElement>}
onClick={getClickHandler(loading, onClick)}
className={finalClassName}
style={style}
nativeButton={isNativeButton}
render={isNativeButton ? undefined : React.createElement(as)}
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 +146,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-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"
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-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"
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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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-hidden [[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
Loading
Loading