Skip to content

fix(react): resolve React warnings and fix Alert title margin#72

Merged
wangdicoder merged 3 commits intomasterfrom
fix/react-warnings-and-style-fixes
Mar 22, 2026
Merged

fix(react): resolve React warnings and fix Alert title margin#72
wangdicoder merged 3 commits intomasterfrom
fix/react-warnings-and-style-fixes

Conversation

@wangdicoder
Copy link
Owner

@wangdicoder wangdicoder commented Mar 22, 2026

Summary

  • List: wrap renderItem results in keyed React.Fragment to fix missing key warning
  • Collapse: restructure header so extra content is a sibling of the toggle <button>, fixing nested <button> DOM nesting violation
  • Waterfall: deduplicate onLayoutChange calls to prevent infinite re-render loop
  • InputOTP: move onChange callback outside setValueCells updater to fix setState-during-render warning
  • Tag: destructure visible prop so it doesn't leak onto the DOM <div>
  • StrengthIndicator: destructure labels prop so it doesn't leak onto the DOM <div>
  • NativeSelect: use defaultValue instead of value in disabled demo to fix read-only field warning
  • Alert: only apply title bottom margin when children are present

Release

  • Bump: patch
  • Affected: @tiny-design/react (fixed version group includes @tiny-design/tokens and @tiny-design/icons)

Test plan

  • Run pnpm dev and verify no React warnings in the console for List, Collapse, Waterfall, InputOTP, Tag, StrengthIndicator, NativeSelect, and Alert component pages
  • Verify Collapse extra buttons render and function correctly without DOM nesting warnings
  • Verify Alert title has no bottom margin when rendered without children, and has 5px margin when children are present
  • Run pnpm test to ensure no regressions

🤖 Generated with Claude Code

- List: wrap renderItem results in keyed Fragments to fix missing key warning
- Collapse: move extra content outside header button to fix nested button warning
- Waterfall: prevent infinite loop in onLayoutChange by deduplicating layout updates
- InputOTP: move onChange call outside setState updater to fix setState-during-render warning
- Tag: destructure visible prop to prevent it leaking to DOM
- StrengthIndicator: destructure labels prop to prevent it leaking to DOM
- NativeSelect: use defaultValue instead of value in disabled demo
- Alert: only apply title bottom margin when children are present
@wangdicoder wangdicoder merged commit 08f4b2a into master Mar 22, 2026
1 check passed
@wangdicoder wangdicoder deleted the fix/react-warnings-and-style-fixes branch March 22, 2026 10:33
@github-actions github-actions bot mentioned this pull request Mar 22, 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.

1 participant