fix: resolve React 19 compatibility by replacing defaultProps with attrs

[umxr]

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 defaultProps with styled.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

• 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:

1. All Existing Tests Pass: Ran the full test suite (18 test suites, 114 tests) - all passing
2. CI Checks Pass: Ran pnpm run check:ci - all 26 scripts pass
3. Build Verification: Ran pnpm run build - successful compilation
4. 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)

• I have included a changeset if this change will require a version change to one of the packages.
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have run pnpm run check:ci and all checks pass
• I have added tests that prove my fix is effective or that my feature works
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
spectacle-docs-website	Ready	Preview	Comment	Sep 25, 2025 4:28pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 2c85863

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

[LegNeato]

@ryan-roemer any chance we can get this merged and a release pushed?

[ryan-roemer]

[ryan-roemer]

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!

[LegNeato]

Thank you! it seems to work. Some styling changed but I am not sure if that is on my end or yours. Thanks again!