spectacle
spectacle copied to clipboard
fix: resolve React 19 compatibility by replacing defaultProps with attrs
Description
This PR fixes React 19 compatibility issues in Spectacle by replacing all usage of the deprecated defaultProps pattern with styled-components' attrs method.
React 19 removed support for defaultProps on function components, which was breaking components throughout the Spectacle codebase. While the issue was initially reported for the FullScreen component, investigation revealed that many other components (typography, table, and layout primitives) were also affected.
The solution follows the recommended approach from styled-components using the attrs method with function variant syntax, which allows props to override defaults while maintaining full backward compatibility.
Key Changes:
- Replaced
defaultPropswithstyled.component.attrs((props) => ({ ...defaults, ...props }))pattern - Fixed typography components: Text, Heading, Quote, OrderedList, UnorderedList, ListItem, Link, CodeSpan, ScalableText
- Fixed table components: Table, TableHeader, TableBody, TableRow, TableCell
- Fixed layout components: FlexBox, Grid
- Maintained all existing functionality and APIs
- Ensured props can still override defaults
Fixes #1350
Type of Change
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update
How Has This Been Tested?
Comprehensive Testing Performed:
- All Existing Tests Pass: Ran the full test suite (18 test suites, 114 tests) - all passing
- CI Checks Pass: Ran
pnpm run check:ci- all 26 scripts pass - Build Verification: Ran
pnpm run build- successful compilation - React 19 Compatibility Test: Created and ran specific tests to verify:
- FullScreen component renders with default size (24px) and custom sizes
- All typography components render with proper defaults
- Table components render correctly with attrs defaults
- Layout components (FlexBox, Grid) work with default display properties
- Props can override attrs defaults as expected
Test Configuration:
- Node.js v22.15.1
- React 19.1.0 compatibility verified
- All components tested with styled-components theme provider
- Verified both default behavior and prop override scenarios
Checklist: (Feel free to delete this section upon completion)
- [x] I have included a changeset if this change will require a version change to one of the packages.
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] I have run
pnpm run check:ciand all checks pass - [x] I have added tests that prove my fix is effective or that my feature works
- [x] My changes generate no new warnings
- [x] Any dependent changes have been merged and published in downstream modules
The latest updates on your projects. Learn more about Vercel for GitHub.
| Project | Deployment | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| spectacle-docs-website | Preview | Comment | Sep 25, 2025 4:28pm |
🦋 Changeset detected
Latest commit: 2c858637a7b8534f21052cdf0e89eefa9d6b8401
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 1 package
| Name | Type |
|---|---|
| spectacle | Patch |
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
@ryan-roemer any chance we can get this merged and a release pushed?
Released in https://www.npmjs.com/package/spectacle/v/10.2.2
@LegNeato let us know how it goes if you get a chance to upgrade!
Thank you! it seems to work. Some styling changed but I am not sure if that is on my end or yours. Thanks again!