Migrate picasso provider v2#5040
Conversation
🦋 Changeset detectedLatest commit: be3cee1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 83 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
📖 Storybook Preview 🚀 Your Storybook preview is ready: View Storybook 📍 Preview URL: This preview is updated automatically when you push changes to this PR. |
| flex-direction: column; | ||
| min-height: 100vh; | ||
| margin: 0; | ||
| background-color: #fff; |
| } | ||
| @media print { | ||
| body { | ||
| background-color: #fff; |
|
🎉 Alpha packages are ready! PR: #5040 Installation commands: These alpha packages were built from the latest commit in this PR. |
|
|
||
| export const buttons = '-top-3 -right-4 absolute' | ||
|
|
||
| export const editor = 'w-full bg-[#141414] py-4 px-0' |
There was a problem hiding this comment.
can we use color token for the bg?
| // equal specificity), so the code editor keeps its monospace font — matching the | ||
| // pre-migration cascade where JSS injection order let this win. | ||
| export const root = | ||
| 'w-full [&_*]:font-[Monaco,Menlo,Ubuntu_Mono,Consolas,source-code-pro,monospace]!' |
There was a problem hiding this comment.
! means we add important, is this maybe a change as we're forcing the font and overwriting anything maybe custom set for any reason?
| } | ||
| } | ||
| export const root = | ||
| '[&_code]:bg-[rgb(236,236,236,0.5)] [&_code]:rounded-[0.4em] [&_code]:px-[0.7em] [&_code]:py-[0.3em] [&_code]:font-normal [&_code]:text-[0.8em] [&_code]:font-[Monaco,Menlo,Ubuntu_Mono,Consolas,source-code-pro,monospace] [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_pre]:bg-[rgb(236,236,236,0.5)] [&_pre_code]:p-0 [&_pre_code]:bg-[initial]' |
There was a problem hiding this comment.
can we use color tokens if possible?
| }, | ||
| }, | ||
| }) | ||
| export const classes = { |
There was a problem hiding this comment.
would it make sense to either export all styles.ts files like this or by naming each prop in a separate const? (just to be consistent and imports into files will be consistent in that case)
| defaultValue: 'w-[1%]', | ||
| tooltipTarget: 'border-b border-dotted font-semibold cursor-help', | ||
| highlight: | ||
| 'bg-[rgb(236,236,236,0.5)] rounded-[0.4em] px-[0.7em] py-[0.3em] font-semibold', |
There was a problem hiding this comment.
can we use color tokens if possible?
| "devDependencies": { | ||
| "@toptal/picasso-test-utils": "workspace:*" | ||
| "@toptal/picasso-test-utils": "workspace:*", | ||
| "@types/react-transition-group": "^4.4.5" |
There was a problem hiding this comment.
did we miss these in the base branch?
5c313c7 to
f8ee52c
Compare
|
🎉 Alpha packages are ready! PR: #5040 Installation commands: These alpha packages were built from the latest commit in this PR. |
|
📖 Storybook Preview 🚀 Your Storybook preview is ready: View Storybook 📍 Preview URL: This preview is updated automatically when you push changes to this PR. |
1 similar comment
|
📖 Storybook Preview 🚀 Your Storybook preview is ready: View Storybook 📍 Preview URL: This preview is updated automatically when you push changes to this PR. |
|
📖 Storybook Preview 🚀 Your Storybook preview is ready: View Storybook 📍 Preview URL: This preview is updated automatically when you push changes to this PR. |
|
🎉 Alpha packages are ready! PR: #5040 Installation commands: These alpha packages were built from the latest commit in this PR. |
fcaa71d to
9b7fd3f
Compare
azebich
left a comment
azebich
left a comment
There was a problem hiding this comment.
it looks good to me. For now can't see any obvious red flags
c7e3653 to
13d5a48
Compare
|
🎉 Alpha packages are ready! PR: #5040 Installation commands: These alpha packages were built from the latest commit in this PR. |
|
📖 Storybook Preview 🚀 Your Storybook preview is ready: View Storybook 📍 Preview URL: This preview is updated automatically when you push changes to this PR. |
|
📖 Storybook Preview 🚀 Your Storybook preview is ready: View Storybook 📍 Preview URL: This preview is updated automatically when you push changes to this PR. |
|
📖 Storybook Preview 🚀 Your Storybook preview is ready: View Storybook 📍 Preview URL: This preview is updated automatically when you push changes to this PR. |
|
🎉 Alpha packages are ready! PR: #5040 Installation commands: These alpha packages were built from the latest commit in this PR. |
…5051) base-ui form controls render an accessible role element plus a hidden native input; wrapping them in a <label> made both label-associated, so getByLabelText/getByText/getByRole matched twice and threw in consumer tests. Add an opt-in labelId path to FormControlLabel that renders a non-<label> wrapper, names the control via aria-labelledby and forwards label clicks to preserve toggling. Checkbox and Switch opt in; the default <label> path (Radio, other consumers) is unchanged. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3aabba3 to
be3cee1
Compare
Picasso design patterns check failed
|
|
🎉 Alpha packages are ready! PR: #5040 Installation commands: These alpha packages were built from the latest commit in this PR. |
4 participants
PF-2023
Document
Summary
Final step of PI-4318.
@toptal/picasso-providerno longer runs a MUI v4 theme/JSSruntime, and
@toptal/picassono longer declares@material-ui/coreas a peerdependency.
@material-uiis now absent from everysrc, everypackage.json,and the lockfile. Both packages allow React 19 (
react/react-dompeer widenedto
>=16.12.0). The provider is now a services+context layer (CSS reset, fonts,favicon, notifications, RootContext, breakpoints); styling is Tailwind end-to-end.
Rendered UI is behaviour-preserving (byte-identical/immaterial CSS). The
theme-customization API is intentionally removed — see Breaking changes.
📄 Decisions, rationale, implications & follow-ups:
docs/modernization/PI-4318-PF-2023-provider-migration-report.md(review appendix).This branch has Tooltip #5005 + query-builder #5006 merged in so the whole tree
was MUI-free for the canary + DoD validation. Until those land on
feature/picasso-modernization-temp, the diff also contains their changes — itwill be rebased to provider-only before this is marked ready. Review the
provider commits; ignore #5005/#5006 content.
Also expect jest snapshot failures in CI: cross-package snapshot drift (from the
CssBaseline
<style>+ PicassoRootNode restyle) is reconciled by a deferredrepo-wide
pnpm test:unit -- -u, run before merge.What's in the PR (logical commits)
<style>reset (unlayered,reset-gated, byte-identical)get-serverside-stylesheets.tsretiredcreateTheme/MuiThemeProvider/StylesProvider,delete
PicassoProvider,useMediaQuery→window.matchMedia@material-uideps/peer-dep, liftreact<19cap, sweep the lasttransitive MUI pulls (Utils'
notistack@1.0.10;@types/react-transition-group).storybookto Tailwindcontent)Breaking changes (major — consumer migration tracked in PF-1995 + codemod)
PicassoProvider+.override()/.extendTheme()/.disableResponsiveStyle()removed → style via Tailwind
className/data-*theme/injectFirst/disableClassNamePrefixprops removed from<Picasso>/<PicassoLight>→ page content width via<Page className="[--content-width:80em]">getServersideStylesheetsremoved → drop from SSR (Tailwind extracts CSS at build)@material-ui/corepeer-dep removed from@toptal/picassoreact/react-dompeer widened to>=16.12.0<StylesProvider injectFirst>(Picasso no longer configures their JSS injection)Non-breaking but observable: PicassoRootNode / notistack container class names change
from JSS hashes to Tailwind classes (hashes were random-seeded, never a contract).
Follow-ups
@layer basepreflight + React-19hoistable
<style>(needs consumer Tailwind-entry coordination)offsetonContainer's static-Tailwind pattern, fix the inverted mobile-first cascade
@toptal/picasso-codemodtransformreact<19cap lift on the remaining non-MUI packagesVerification / DoD
pnpm build:package— 90 projects green;@material-ui= 0 (src + package.json + lockfile)smoke in staging, React 19 validation, repo-wide snapshot regen
Reviewer focus
audit backing it is in report §4.4
<style>vs@layer basedecision (report §4.2) + its Happo diffsmajorfor@toptal/picasso-provider+@toptal/picasso(
.changeset/decommission-mui-provider.md)How to test
Screenshots
Development checks
picasso-tailwind-mergerequires major update (check itsREADME.md)propsin component with documentationexamplesfor componentBreaking change
Alpha packages
Manually trigger the publish.yml workflow to publish alpha packages. Specify pull request number as a parameter (only digits, e.g.
123).PR Review Guidelines
When to approve? ✅
You are OK with merging this PR and
nit:to your comment. (ex.nit: I'd rename this variable from makeCircle to getCircle)When to request changes? ❌
You are not OK with merging this PR because
When to comment (neither ✅ nor ❌)
You want your comments to be addressed before merging this PR in cases like:
How to handle the comments?