Improved input layout to support proper positioning for right-to-left languages #322
Conversation
…or different lang directions
WalkthroughThe changes involve updates to the Changes
Poem
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 (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/components/FwbInput/FwbInput.vue (3 hunks)
- src/components/FwbInput/composables/useInputClasses.ts (4 hunks)
Additional comments not posted (7)
src/components/FwbInput/FwbInput.vue (4)
7-10: Improved layout and responsiveness.The addition of
flexanditems-centerclasses along with the dynamicinputBlockClassessignificantly enhances the alignment and responsiveness of the component, especially for RTL languages.
13-13: Consistent sizing for prefix element.The addition of
flex-shrink-0ensures that the prefix element maintains its size, contributing to a more consistent layout across varying screen sizes and input contents.
28-28: Proper alignment and spacing for suffix element.The addition of
flex-shrink-0andme-3ensures that the suffix element maintains its size and proper spacing, which is crucial for layout consistency and alignment, particularly in RTL configurations.
85-85: Expanded styling logic.The inclusion of
inputBlockClassesin the destructuring ofuseInputClassesreflects an expansion in the component's styling logic, likely to better accommodate RTL languages and various input sizes.src/components/FwbInput/composables/useInputClasses.ts (3)
13-18: Enhanced styling flexibility and consistency.The simplification of
defaultInputClassesand the introduction ofdefaultBlockClassesenhance the flexibility and consistency of the input's appearance, particularly when focused. These changes are likely part of the efforts to improve layout handling for RTL languages.
Line range hint
40-50: Improved modularity and clarity in styling logic.The introduction of the
inputBlockClassescomputed property allows for more granular control over the styling of block-level input elements, enhancing the modularity and clarity of the styling logic.
56-58: Continued flexibility in customizing input appearance.The adjustment to the
inputClassescomputed property, utilizing the modifieddefaultInputClasses, ensures that the input's appearance remains customizable based on size and validation status.
Current FwbInput implementation uses
position: absolutefor prefix and suffix. It causes some issues with positioning fordir="rtl"case.This is how the input with prefix and suffix looks like in this case:
My idea is to switch from using absolute position to just display: flex for the input wrapper. This will enable the direction management out of the box and will simplify component sizes and positions management.
This is how result looks like:
The next step with this implementation could be improvements for different sizes of the input. Now only
size="lg"looks good with button as suffixSummary by CodeRabbit
New Features
Bug Fixes
Refactor