Chinese taipei flag size - #15404
Conversation
WcaFlag special-cases the TW country code to render a custom _TwFlag icon but dropped all width/height/className/style props passed to it, so it ignored the Icon size wrapper used by every call site and rendered oversized. Fixes thewca#14593
There was a problem hiding this comment.
Pull request overview
Fixes incorrect sizing for the Chinese Taipei (“TW”) flag in the Next.js frontend by ensuring sizing-related props are forwarded to the custom _TwFlag icon, aligning behavior with the standard react-world-flags rendering path.
Changes:
- Forward
width/height/className/stylefromWcaFlagto the TW-specific_TwFlagicon. - Pass the same sizing/styling props explicitly to the standard
react-world-flags<Flag>component. - Update ESLint configuration to include the
importplugin and enforce a basic import grouping order.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| next-frontend/src/components/WcaFlag.tsx | Updates TW special-case rendering to forward sizing/styling props so it respects Chakra Icon asChild sizing. |
| .eslintrc.json | Adds import plugin and enables import/order rule for grouped import ordering. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <_TwFlag | ||
| width={width} | ||
| height={height} | ||
| className={className} | ||
| style={style} |
|
why not just spread the rest props to the flag from the start? no need to add more props |
|
@FinnIckler Thanks for the response! I already tried that, but it doesn't type-check. FlagProps (HTMLImageElement) and _TwFlag (Chakra SVG) have incompatible event handlers. Only forward compatible props: width, height, className, style. |
gregorbg
left a comment
gregorbg
left a comment
There was a problem hiding this comment.
Thank you for your contribution! I second Finn in that explicitly naming individual props is too verbose. I have made a suggestion in-line about which intersection type might be useful to solve this.
There was a problem hiding this comment.
These are unrelated changes. If you want to suggest improvements to our Eslint setup, please open them as a separate PR
| const WcaFlag = ({ | ||
| code, | ||
| width, | ||
| height, | ||
| className, | ||
| style, | ||
| ...restProps | ||
| }: FlagProps) => { |
There was a problem hiding this comment.
If you're worried about type safety, then use an intersection type between FlagProps and whatever other component props are relevant
There was a problem hiding this comment.
The _TwFlag helper is created via the Chakra createIcon helper, which effectively gives it the same props as an Icon ChakraUI component.
So if you read ComponentPropsWithoutRef<typeof Icon>, that should give you a steady base for intersection typing of ...restProps.
Revert unrelated ESLint import-order change and forward props to _TwFlag via an intersection type (FlagProps & Icon props) instead of naming each prop individually.
|
@gregorbg and @FinnIckler thank you guys so much for the feedback. I addressed both the points and it should be good, please let me know if you need anything else! |
Fixes #14593
WcaFlagspecial-cases the Chinese Taipei ("TW") country code to render a custom_TwFlagicon, but it dropped every prop passed to it (width/height/className/style). Every call site sizes its flag via Chakra's<Icon asChild size="...">wrapper, which injects sizing through those props — so Chinese Taipei's flag ignored the intended size andrendered oversized everywhere else.
This forwards those props to
_TwFlagthe same way they're already forwarded to the regularreact-world-flags<Flag>.