Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Oct 9, 2025

Summary

Fixed a regression in v10.2.2 where Heading components lost their pink/secondary color styling. The issue was introduced in PR #1351 when replacing React defaultProps with styled-components .attrs() method for React 19 compatibility.

Problem

  • Headings were rendering in primary color (beige #ebe5da) instead of secondary color (pink #fc6986)
  • Affected both JSX slides and Markdown slides
  • Regression introduced in v10.2.2

Root Cause

When a styled component with .attrs() extends another styled component with .attrs(), the parent's attrs output becomes the child's attrs input. This caused Text's color: 'primary' default to override Heading's color: 'secondary' setting.

Additionally, the original fix used an empty object ({}) instead of compose(color, typography, space), which prevented styled-system from resolving theme values.

Solution

Changed Heading from styled(Text).attrs(...) to styled.div.attrs(...) to be a standalone component. This ensures:

  • Heading's defaults are not overridden by Text's defaults
  • styled-system functions properly resolve theme values
  • User props can still override defaults

Changes

  1. Modified Heading component in packages/spectacle/src/components/typography.tsx
  2. Added test case to verify secondary color is applied correctly
  3. Added changeset at patch level

Testing

  • ✅ Added test: "should apply the secondary color from theme"
  • ✅ All 115 tests pass
  • ✅ Linting passes
  • ✅ Manual browser testing confirms fix works
  • ✅ Markdown slides also fixed (they use Heading component)

Screenshots

After fix - Headings properly display in pink/secondary color:

Spectacle slide with pink headings

Another slide showing pink heading

Changeset

Added changeset at patch level documenting this fix for the next release.

Original prompt

This section details on the original issue you should resolve

<issue_title>Bug: Styles not applied.</issue_title>
<issue_description>## Issue

From 10.2.1 to 10.2.2 we lost some of the styling on elements, both in slides and markdowns. Using https://github.com/FormidableLabs/spectacle/blob/main/examples/one-page/index.html as is with npx serve in root and navigating to that page we see the following where the headings should be pink but aren't.

Image

Changing to previous version produces the correct results:

diff --git a/examples/one-page/index.html b/examples/one-page/index.html
index 37d6341..69c23bf 100644
--- a/examples/one-page/index.html
+++ b/examples/one-page/index.html
@@ -13,7 +13,7 @@
       {
         "imports": {
           "htm": "https://esm.sh/htm@^3?external=react,react-dom",
-          "spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle",
+          "spectacle": "https://esm.sh/spectacle@10.2.2?external=react,react-dom&bundle",
           "broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom",
           "history": "https://esm.sh/history@^5.3.0?external=react,react-dom",
           "kbar": "https://esm.sh/kbar@0.1.0-beta.40?external=react,react-dom",
Image

Task

  • Identify any other styling / theme issues.
  • Diagnose and fix

Starting point

/cc @umxr </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #1357


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@changeset-bot
Copy link

changeset-bot bot commented Oct 9, 2025

🦋 Changeset detected

Latest commit: e49d253

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

@vercel
Copy link

vercel bot commented Oct 9, 2025

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

Project Deployment Preview Comments Updated (UTC)
spectacle-docs-website Ready Ready Preview Comment Oct 9, 2025 8:35pm

Changed Heading from extending Text with attrs to being a standalone styled.div with its own attrs. This fixes the issue where attrs from parent components were overriding child component defaults.

Co-authored-by: ryan-roemer <445557+ryan-roemer@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Fix styles not applied after version update Fix: Restore Heading component secondary color styling (regression in v10.2.2) Oct 9, 2025
@Copilot Copilot AI requested a review from ryan-roemer October 9, 2025 19:36
Copilot finished work on behalf of ryan-roemer October 9, 2025 19:36
@ryan-roemer
Copy link
Member

@copilot Please add a changeset to this PR at patch level. See the instructions at https://github.com/FormidableLabs/spectacle/blob/main/CONTRIBUTING.md#changesets if you need more details for changesets in this project.

Co-authored-by: ryan-roemer <445557+ryan-roemer@users.noreply.github.com>
@Copilot
Copy link
Contributor Author

Copilot AI commented Oct 9, 2025

@copilot Please add a changeset to this PR at patch level. See the instructions at https://github.com/FormidableLabs/spectacle/blob/main/CONTRIBUTING.md#changesets if you need more details for chang...

Added changeset at patch level in commit [hash will be shown after commit]. The changeset documents the fix for the Heading component color regression.

"spectacle": patch
---

Fix Heading component not applying secondary color styling. Restores pink color (#fc6986) for headings that was lost in v10.2.2 when replacing defaultProps with attrs method.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot this should be a named color (primary, secondary or whatever) and not refer to hex code or color name (e.g. pink). Rest looks good.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated changeset to refer to "secondary color" and "correct theme color" instead of hex code or color name in commit 6d7af9b.

Co-authored-by: ryan-roemer <445557+ryan-roemer@users.noreply.github.com>
@Copilot Copilot AI requested a review from ryan-roemer October 9, 2025 20:36
Copilot finished work on behalf of ryan-roemer October 9, 2025 20:36
@ryan-roemer ryan-roemer marked this pull request as ready for review October 9, 2025 20:53
Copy link

@bredikhin bredikhin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢 🚢 🚢

@ryan-roemer ryan-roemer merged commit 9c2f940 into main Oct 10, 2025
2 checks passed
@ryan-roemer ryan-roemer deleted the copilot/fix-styles-not-applied branch October 10, 2025 16:23
@github-actions github-actions bot mentioned this pull request Oct 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Styles not applied.

3 participants