🐛 Fix input iconNameLeft loading #230
Conversation
WalkthroughThe pull request introduces modifications to the Changes
Possibly related PRs
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
packages/react/components/input/Input.tsx (1)
Line range hint
313-313: Enhance loading indicator accessibility.The loading indicator should communicate its state to screen readers.
Add appropriate ARIA attributes:
- {loading && <span className={hashClass(styled, clsx(is('searching')))} />} + {loading && ( + <span + className={hashClass(styled, clsx(is('searching')))} + role="status" + aria-label="Loading" + /> + )}
🧹 Nitpick comments (2)
packages/react/components/input/Input.tsx (2)
Line range hint
298-313: Consider consolidating icon rendering logic.The current implementation has separate conditions for icon rendering which could be simplified. Consider extracting the icon rendering logic into a separate method to improve maintainability.
Here's a suggested refactor:
- {iconNameLeft && <IconWrapper className={'icon-left'} name={iconNameLeft as unknown as IconName} />} - {iconNameRight && !loading && type !== 'password' && ( - <IconWrapper className={'icon-right'} name={iconNameRight as unknown as IconName} /> - )} - {!loading && type === 'password' && ( - <IconWrapper - className={'icon-right'} - name={isShowPwd ? IconName.EYE_SLASH : IconName.EYE} - onPress={() => { - if (inputType === 'password') { - setInputType(InputType.TEXT) - setIsShowPwd(true) - } else { - setInputType(InputType.PASSWORD) - setIsShowPwd(false) - } - }} - /> - )} + {renderIcon('left', iconNameLeft)} + {!loading && renderIcon('right', iconNameRight)} + {!loading && type === 'password' && renderPasswordIcon()}Add these helper methods:
const renderIcon = (position: 'left' | 'right', iconName?: IconName) => { if (!iconName) return null; return ( <IconWrapper className={`icon-${position}`} name={iconName as unknown as IconName} /> ); }; const renderPasswordIcon = () => ( <IconWrapper className={'icon-right'} name={isShowPwd ? IconName.EYE_SLASH : IconName.EYE} onPress={() => { setInputType(isShowPwd ? InputType.PASSWORD : InputType.TEXT); setIsShowPwd(!isShowPwd); }} /> );
298-298: Consider type safety improvement for IconName casting.The current code uses a type assertion
as unknown as IconNamewhich could be made more type-safe.Consider creating a type guard:
const isValidIconName = (name: string): name is IconName => { return Object.values(IconName).includes(name as IconName); }; // Then use it in the render: {iconNameLeft && isValidIconName(iconNameLeft) && ( <IconWrapper className={'icon-left'} name={iconNameLeft} /> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/react/components/input/Input.tsx(1 hunks)
🔇 Additional comments (1)
packages/react/components/input/Input.tsx (1)
298-298: LGTM! This change fixes the left icon visibility issue.
The modification correctly separates the left icon rendering logic from loading state checks, ensuring the left icon remains visible when the input is in a loading state.
Quand l'input est en chargement (loader sur la droite) l'icon de gauche était invisible
Summary by CodeRabbit
New Features
Bug Fixes
Documentation