Feature: Improved FwbInput component flexibility #365
Conversation
WalkthroughThis pull request updates and refines the input component’s implementation and its documentation. Documentation is revised with new import statements, updated v-model bindings, refreshed labels and placeholders, and additional sections for styling and API details. The component code has been refactored to change class binding names, update prop interfaces, and use new utility functions for merging classes. Additionally, the global types and merging functions have been enhanced for better flexibility in handling class inputs. Changes
Sequence Diagram(s)sequenceDiagram
participant Component as FwbInput Component
participant InputClasses as useInputClasses
participant Merge as useMergeClasses
Component->>InputClasses: Request computed class bindings
InputClasses->>Merge: Merge default & custom classes
Merge-->>InputClasses: Return merged class string
InputClasses-->>Component: Provide wrapperClass, labelClass, inputClass, etc.
Possibly related PRs
Suggested labels
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
🪧 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: 3
🧹 Nitpick comments (3)
src/components/FwbInput/FwbInput.vue (2)
38-39: Remove unnecessary empty class attributeThe empty string class attribute (
class="") doesn't add any value and can be removed for cleaner code.- :class="helperMessageClass" - class="" + :class="helperMessageClass"
54-66: Update the interface documentationConsider adding JSDoc comments to describe each property in the
InputPropsinterface, especially the newly added ones. This would make the component API more self-documenting.interface InputProps { + /** Specifies the autocomplete attribute for the input element */ autocomplete?: CommonAutoFill + /** Classes to be applied to the input wrapper element */ class?: string | Record<string, boolean> disabled?: boolean + /** Classes to be applied to the input element */ inputClass?: string | Record<string, boolean> label?: string + /** Classes to be applied to the label element */ labelClass?: string | Record<string, boolean> modelValue?: string | number required?: boolean size?: InputSize type?: InputType validationStatus?: ValidationStatus + /** Classes to be applied to the outer wrapper element */ wrapperClass?: string | Record<string, boolean> }docs/components/input.md (1)
251-251: Add language specifier to code fenceThe fenced code block is missing a language specifier, which violates markdown linting rules.
-<script setup> +<script lang="ts" setup>🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
251-251: Fenced code blocks should have a language specified
null(MD040, fenced-code-language)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
docs/components/input.md(3 hunks)docs/components/input/examples/FwbInputExampleStyling.vue(1 hunks)docs/components/input/examples/FwbInputExampleValidation.vue(2 hunks)src/components/FwbInput/FwbInput.vue(3 hunks)src/components/FwbInput/composables/useInputClasses.ts(1 hunks)src/components/FwbInput/types.ts(1 hunks)src/composables/useMergeClasses.ts(1 hunks)src/types/global.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/composables/useMergeClasses.ts (1)
src/types/global.ts (1)
ClassInput(3-3)
src/components/FwbInput/composables/useInputClasses.ts (2)
src/components/FwbInput/types.ts (3)
InputSize(1-1)ValidationStatus(13-13)validationStatusMap(8-11)src/composables/useMergeClasses.ts (1)
useMergeClasses(27-29)
🪛 markdownlint-cli2 (0.17.2)
docs/components/input.md
251-251: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
🔇 Additional comments (14)
src/types/global.ts (1)
1-5: Well-structured type definitions for class handlingThe
ClassInputandClassReftype definitions are clean and provide excellent flexibility for handling CSS classes in Vue components. These types will allow components to accept classes in various formats (strings, objects, or arrays), making them more versatile.src/components/FwbInput/types.ts (1)
8-11: Good addition of the Success validation stateAdding the
Successstate to the validation status map improves the component's feedback capabilities. This allows the input component to provide positive validation feedback, not just error states, which is a meaningful enhancement to the user experience.src/composables/useMergeClasses.ts (3)
3-4: Clean import of new type definitionGood job importing the new
ClassInputtype from the global types file. This maintains proper type safety and code organization.
5-25: Well-implemented class normalization functionThe
normalizeClassesfunction is robust and handles all possible input formats cleanly. The recursive approach for arrays is particularly well-designed, and the edge case handling is thorough.
27-29: Good update to useMergeClasses functionThe updated function now accepts the more flexible
ClassInputtype and properly uses the new normalization function. This change aligns perfectly with the PR's goal of improving component flexibility.docs/components/input/examples/FwbInputExampleValidation.vue (3)
3-13: Improved validation example with success stateThe updates to this example effectively demonstrate the new success validation state. The more engaging validation message ("Well done!") and clearer placeholder text make the example more user-friendly and instructive.
15-25: Consistent styling between validation statesGood job maintaining consistency between the success and error examples. The parallel structure helps users understand how to implement both validation states in their own code.
34-34: Appropriate variable renamingThe ref variable name change from
nameproperly reflects the updated purpose of the input field, maintaining code clarity.src/components/FwbInput/FwbInput.vue (1)
87-88: Good use of defineModelThe switch from
useVModelto Vue 3'sdefineModelis a good improvement. This makes the component more aligned with modern Vue 3 patterns.src/components/FwbInput/composables/useInputClasses.ts (3)
13-14: Good implementation of cursor styling for disabled stateThe addition of
cursor-not-allowedfor disabled inputs addresses one of the issues mentioned in the PR objectives. This improves the UX by providing clear visual feedback that the input is not interactive.
69-77: Improved input class handlingThe enhanced implementation for
inputClassis well structured, with proper consideration for validation states and disabled state. The order of class merging ensures that prop-provided classes take precedence over default classes, which is the expected behavior.
10-10: Dark mode text color fixThe updated
defaultInputClassescorrectly includes the dark mode text color (dark:text-white), addressing one of the issues mentioned in the PR objectives about text visibility in dark mode.docs/components/input.md (2)
226-251: Excellent documentation for the new styling featuresThe new "Styling Inputs" section clearly explains how to use the new class properties with a concise example. This significantly improves the component's documentation and will help users understand how to customize the component's appearance.
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
251-251: Fenced code blocks should have a language specified
null(MD040, fenced-code-language)
256-262: Well-structured API documentationThe added API documentation for the new class-related properties is clear and helps users understand the purpose of each property. The table format makes it easy to scan and reference.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/components/input.md (1)
213-214: Typo in error message slot content.The validation message displays “Oh, snapp!”—consider removing the extra “p” to read “Oh, snap!” for clarity.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/components/input.md(3 hunks)docs/components/input/examples/FwbInputExampleDisabled.vue(1 hunks)docs/components/input/examples/FwbInputExampleHelper.vue(1 hunks)docs/components/input/examples/FwbInputExampleStyling.vue(1 hunks)src/components/FwbInput/FwbInput.vue(3 hunks)
✅ Files skipped from review due to trivial changes (3)
- docs/components/input/examples/FwbInputExampleHelper.vue
- docs/components/input/examples/FwbInputExampleDisabled.vue
- docs/components/input/examples/FwbInputExampleStyling.vue
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/FwbInput/FwbInput.vue
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/components/input.md
251-251: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
🔇 Additional comments (8)
docs/components/input.md (8)
7-9: Import new styling and size example components.The imports for
FwbInputExampleSize,FwbInputExampleStyling, andFwbInputExampleSuffixhave been added to demonstrate the new styling props and size variations. The ordering remains alphabetical and consistent with the other examples.
194-196: Consistent v-model, label, and placeholder updates.The validation slot example now correctly uses
namefor thev-model, updates the label to “Your name,” and adjusts the placeholder to “Success input,” aligning with the updated example component.
199-203: Validation slot markup is clear and correct.The closing
>for<fwb-input>and the<template #validationMessage>block are properly formatted and indented. The styled<span class="font-medium">highlights the message as intended.
206-208: Error input example consistency.The second
<fwb-input>example mirrors the success case, using the samenameref, updated placeholder “Error input,” andvalidation-status="error". All attributes are consistent.
222-222: Ref declaration aligns with examples.The
const name = ref('')line is correctly placed and matches thev-modelin all examples.
226-229: New “Styling Inputs” section introduction.The heading and description clearly introduce the feature for passing classes via dedicated props. This addition enhances the docs.
231-243: Styling example demonstrates new props effectively.The
<fwb-input>example coversclass,input-class,label-class, andwrapper-classprops with realistic Tailwind utilities. All props are shown in context, and the component import matches.
249-249: Variable setup in styling example is correct.The
const name = ref('')declaration aligns with the usage in the styling example template.
This PR enables customizing the looks of input fields by adding new props to allow passing classes to proper elements:
It also fixes:
Summary by CodeRabbit
Documentation
New Features