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 Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
spectacle-docs-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2025 11:06pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 1bfad3b

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