Skip to content

Fix ProfileCard demo props leaking into usage examples#886

Merged
DavidHDev merged 2 commits intomainfrom
copilot/fix-profile-card-prop-issues
Feb 14, 2026
Merged

Fix ProfileCard demo props leaking into usage examples#886
DavidHDev merged 2 commits intomainfrom
copilot/fix-profile-card-prop-issues

Conversation

Copy link
Contributor

Copilot AI commented Feb 14, 2026

The ProfileCard demo's internal state props (showIcon, showBehindGlow, customInnerGradient) were being injected into the generated usage code when users modified demo controls, causing compilation errors.

Changes

  • Added demoOnlyProps to ComponentPropsProvider to exclude demo-specific state from usage examples
  • Added computedProps to map demo state to actual component props:
    • showIconiconUrl (conditional URL)
    • showBehindGlowbehindGlowEnabled
    • customInnerGradientinnerGradient

The CodeExample component already supports filtering demo-only props via the demoOnlyProps array—ProfileCardDemo was simply not configured to use it.

<ComponentPropsProvider
  props={props}
  defaultProps={DEFAULT_PROPS}
  resetProps={resetProps}
  hasChanges={hasChanges}
  demoOnlyProps={['showIcon', 'showBehindGlow', 'customInnerGradient']}
  computedProps={computedProps}
>

Users can now interact with demo controls without invalid props appearing in the generated usage code.

Original prompt

This section details on the original issue you should resolve

<issue_title>[BUG]: components/profile-card</issue_title>
<issue_description>### Describe the issue

Your generated code is producing the props which don't exist:
showIcon
showBehindGlow
customInnerGradient

I presume others, like me, may run into compilation issues when their component definition has undefined props

Reproduction Link

No response

Steps to reproduce

nav to: https://reactbits.dev/components/profile-card
click on "code" button.
Usage has aforementioned options which are not in your props section of your preview tab.

Validations

  • I have checked other issues to see if my issue was already reported or addressed</issue_description>

<agent_instructions>make sure to check the demo file and all 4 variants of the profile-card to ensure this is cleaned up.

/content, /tailwind, /ts-default, /ts-tailwind</agent_instructions>

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


💡 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.

Add demoOnlyProps and computedProps to ComponentPropsProvider to prevent
showIcon, showBehindGlow, and customInnerGradient from appearing in the
generated usage examples. These demo-only props are now correctly mapped
to their actual component props (iconUrl, behindGlowEnabled, innerGradient).

Co-authored-by: DavidHDev <48634587+DavidHDev@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix undefined props in profile card component Fix ProfileCard demo props leaking into usage examples Feb 14, 2026
Copilot AI requested a review from DavidHDev February 14, 2026 13:43
@DavidHDev DavidHDev marked this pull request as ready for review February 14, 2026 19:42
@DavidHDev DavidHDev merged commit ac20400 into main Feb 14, 2026
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]: components/profile-card

2 participants

Comments