Skip to content

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

Open
OleksandrNechai wants to merge 4 commits intomasterfrom
migrate-button-switch-to-base-ui
Open

[TAPS-0000] Migrate Button and Switch to BASE UI#4906
OleksandrNechai wants to merge 4 commits intomasterfrom
migrate-button-switch-to-base-ui

Conversation

@OleksandrNechai
Copy link
Copy Markdown
Collaborator

@OleksandrNechai OleksandrNechai commented Mar 4, 2026 •
edited
Loading

Migrated Button and Switch components from @mui/base to @base-ui/react.

User prompt to Codex:

Component is Switch
Your goal is to migrate Component from @mui/base to @base-ui/react

Directions:
- use Playwright MCP to compare visually
- use storybook baseline: https://picasso.toptal.net/
- Use `yarn start` to start local storybook where you can check your current work at http://localhost:9001/
- find component in storybook sidebar and click on it to get to component

Constraints:
- Test changes are not allowed except updating snapshots
- Minimal code changes
- Only proceed to final acceptance criteria after you achieved working acceptance criteria 

Working acceptance criteria (run for regular feedback):
- Picasso's component does not reference @mui/base anymore as it is deprecated
- yarn test:unit
- visual comparison is pixel perfect for all stories and variants of Component
- visual comparison should also be done in different interaction states: default, hover, clicked, focused

Full acceptance criteria (run before finish):
- working acceptance criteria pass
- tests pass (yarn test)
- `yarn lint`pass
- `yarn typecheck` pass

After Happo failed, follow up:

Pull request: https://github.com/toptal/picasso/pull/4906
Happo repot fails for both Switch and Button
Happo token is on the image
Your job now is to iterate until you commit and happo is report is green
to communicate with GitHub use GH CLI

@OleksandrNechai OleksandrNechai requested a review from a team as a code owner March 4, 2026 19:39
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 4, 2026 •
edited
Loading

⚠️ No Changeset found

Latest commit: 2a31a58

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@OleksandrNechai OleksandrNechai changed the title Migrate Button and Switch to BASE UI [TAPS-0000] Migrate Button and Switch to BASE UI Mar 4, 2026
@OleksandrNechai OleksandrNechai self-assigned this Mar 4, 2026
@toptal toptal deleted a comment from github-actions bot Mar 4, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 4, 2026

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4906/

This preview is updated automatically when you push changes to this PR.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 4, 2026

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/4906/

This preview is updated automatically when you push changes to this PR.

denieler
denieler reviewed Mar 5, 2026
View reviewed changes
packages/base/Button/src/ButtonBase/ButtonBase.tsx
Comment on lines +65 to +70
return (
valueType === 'string' ||
valueType === 'function' ||
(valueType === 'object' && value !== null)
)
}
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.

denieler
denieler reviewed Mar 5, 2026
View reviewed changes
packages/base/Button/src/ButtonBase/ButtonBase.tsx
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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@denieler denieler denieler left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@OleksandrNechai OleksandrNechai

Labels

no-jira

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@OleksandrNechai @denieler