feat: FwbInput: Split input and block classes #325
Conversation
WalkthroughThe pull request introduces enhancements to the Changes
Possibly related PRs
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Additional context usedLanguageTool
Markdownlint
Additional comments not posted (2)
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
Outside diff range and nitpick comments (2)
docs/components/input.md (2)
107-132: Documentation looks good, but please address the grammatical issues.The new section "Extra CSS classes" provides clear instructions on how to customize the input and input wrapper using the
classandblock-classesattributes. The example code aligns well with the explanation.However, please address the following grammatical issues:
- Line 109: Add a comma after "By default".
- Line 110: Replace "an" with "can".
- Line 110: Add "the" before "values".
Apply this diff to fix the grammatical issues:
- By default `class` attibute is bind to the input element. To customize the input wrapper you an use `block-classes` property. - It accepts the values as `class` attribute + By default, `class` attribute is bound to the input element. To customize the input wrapper you can use the `block-classes` property. + It accepts the values as the `class` attributeTools
LanguageTool
[uncategorized] ~109-~109: Did you mean: “By default,”?
Context: ...tion to the input or the input wrapper. By defaultclassattibute is bind to the input e...(BY_DEFAULT_COMMA)
[misspelling] ~110-~110: Use “a” instead of ‘an’ if the following word doesn’t start with a vowel sound, e.g. ‘a sentence’, ‘a university’.
Context: ...ent. To customize the input wrapper you an useblock-classesproperty. It accept...(EN_A_VS_AN)
[uncategorized] ~110-~110: You might be missing the article “the” here.
Context: ... customize the input wrapper you an useblock-classesproperty. It accepts the ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
Markdownlint
132-132: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
132-132: Please specify the language for the fenced code block.To improve syntax highlighting and readability, it's a best practice to specify the language for fenced code blocks in markdown.
Based on the content, please add the language specifier "vue" to the code block:
- ``` + ```vueTools
Markdownlint
132-132: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- docs/components/input.md (2 hunks)
- docs/components/input/examples/FwbInputExampleBlockClasses.vue (1 hunks)
- src/components/FwbInput/FwbInput.vue (3 hunks)
Additional context used
LanguageTool
docs/components/input.md
[uncategorized] ~109-~109: Did you mean: “By default,”?
Context: ...tion to the input or the input wrapper. By defaultclassattibute is bind to the input e...(BY_DEFAULT_COMMA)
[misspelling] ~110-~110: Use “a” instead of ‘an’ if the following word doesn’t start with a vowel sound, e.g. ‘a sentence’, ‘a university’.
Context: ...ent. To customize the input wrapper you an useblock-classesproperty. It accept...(EN_A_VS_AN)
[uncategorized] ~110-~110: You might be missing the article “the” here.
Context: ... customize the input wrapper you an useblock-classesproperty. It accepts the ...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
Markdownlint
docs/components/input.md
132-132: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
Additional comments not posted (8)
docs/components/input/examples/FwbInputExampleBlockClasses.vue (2)
1-11: LGTM!The template structure and usage of the
<fwb-input>component are correct. Thev-modelbinding, label, placeholder, and custom styling attributes are used appropriately.
13-18: LGTM!The script section imports the necessary dependencies and creates a reactive variable
namecorrectly. The usage of thereffunction and the initialization ofnamewith an empty string are appropriate for capturing user input.src/components/FwbInput/FwbInput.vue (4)
2-2: LGTM!The change to use the
blockClassesprop for dynamic class binding on the outer<div>is a good improvement. It enhances the component's flexibility by allowing users to specify custom classes for styling purposes.
67-67: LGTM!The new
blockClassesprop has been correctly added to theInputPropsinterface with a flexible type that allows for a string, an array of strings, or a record of string keys and unknown values. This is consistent with the usage in the template.
70-72: LGTM!The introduction of the
defineOptionsfunction to setinheritAttrsto false is a good practice. It prevents the component from automatically inheriting attributes from its parent, allowing for more controlled attribute management and preventing unintended attribute inheritance.
83-83: LGTM!The addition of the
blockClassesprop to thewithDefaultsfunction with anundefineddefault value is consistent with the prop declaration in theInputPropsinterface. This makes the prop optional, which is appropriate for its intended usage.docs/components/input.md (2)
6-6: LGTM!The import statement for the new example component
FwbInputExampleBlockClasseslooks good.
113-131: Example code looks good!The example code effectively demonstrates how to use the
classandblock-classesattributes to customize the input and input wrapper. The code is syntactically correct and aligns well with the explanation.
Sometimes it is required to add some customization to the input or the input wrapper. Currently it is impossible: class attribute value for is added both for the input and for the input wrapper block.
This PR fixes the issue and introduces a separate property to control wrapper only classes
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
block-classesproperty and provide usage examples.