Enhance InputGroup and Button Components with Accessibility, Styling, and Integration Improvements #74
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Introduced a new `label` prop for the IconButton component to display text in badge mode. - Updated the IconButton.vue template to conditionally render the label based on the `badge` and `label` props. - Enhanced Storybook stories to demonstrate badge mode with labels, including size and color variants. - Added documentation for the new label feature in the IconButton component.
# [1.17.0-dev.36](dev-1.17.0-dev.35...dev-1.17.0-dev.36) (2025-09-01) ### Features * Add badge label support to IconButton component ([5084bce](5084bce))
- Introduced a new InputGroup component that allows for flexible input layouts with optional left and right addons. - Implemented the component's template and logic to support various input types and sizes. - Created comprehensive Storybook stories to demonstrate the InputGroup's features, including different states, sizes, and usage with other input components. - Added accessibility features and documentation for the InputGroup component.
… integration - Updated Input and TextArea components to support styling coordination when used within an InputGroup, ensuring consistent appearance and behavior. - Refactored InputGroup to provide context for child components, managing error and disabled states effectively. - Improved Storybook documentation for InputGroup, showcasing new examples and usage scenarios with various input types. - Added accessibility features and refined component structure for better maintainability.
…ed styling and functionality - Updated the InputGroup component to manage child components' positions and styling based on their order within the group. - Introduced InputGroupItem for consistent styling of non-form elements within InputGroup. - Enhanced Input and TextArea components to support flex layout when used in InputGroup, ensuring proper spacing and alignment. - Improved Storybook documentation with new examples showcasing InputGroup's capabilities and usage with various input types. - Added computed properties for better context management and styling coordination across input components.
…onsistency - Updated Button component to maintain height consistency when used within an InputGroup. - Modified Input component to ensure proper height alignment with InputGroup styling. - Adjusted Select component to align with InputGroup height requirements. - Removed unused TextArea import from InputGroup stories to streamline the codebase.
…ed styling and consistency - Updated useInputGroup to replace base classes with more comprehensive styling for input group children. - Modified Input and Select components to ensure consistent height and focus styles when used within an InputGroup. - Adjusted InputGroup layout to ensure full width for child components, enhancing overall alignment and appearance.
…utton styling - Added computed properties for button classes in InputGroup to ensure consistent styling and behavior. - Updated Button component to utilize new inputGroupButtonClasses for improved appearance when part of an InputGroup. - Ensured height consistency and responsive design for buttons within InputGroup, enhancing overall user experience.
…andling - Added computed properties for focus colors based on button type (solid, outline, gradient). - Implemented button reference for managing focus and defocus behavior on click. - Updated click event handling to prevent clicks when in loading state. - Enhanced tests to verify focus behavior and loading state functionality.
…ed styling and consistency - Updated InputGroup to include gap styling for better spacing between child components. - Modified Button component to utilize color prop instead of variant for consistent styling. - Enhanced Storybook examples to reflect changes in Button usage within InputGroup, ensuring clarity in color application and layout.
… management and border styling - Added focus and blur event handlers to InputGroup, Input, Button, and Select components for improved focus state management. - Introduced a new property to conditionally remove right borders from InputGroup children for seamless styling. - Updated InputGroup to manage focus state of child components, ensuring consistent behavior across inputs. - Enhanced styling for buttons and inputs within InputGroup to maintain visual consistency and improve user experience.
…related components - Updated InputGroup and Input components to ensure consistent error state styling across inputs. - Enhanced InputGroup to pass error state to child components for better visual feedback. - Modified Input and Select components to utilize a computed effectiveError for accurate error representation. - Adjusted Storybook examples to reflect new error handling scenarios for better testing and demonstration.
…ntegration requirements - Added mandatory guidelines for form input components to support InputGroup integration. - Specified the use of `useInputGroup` composable and outlined necessary properties and styling adjustments. - Included instructions for managing error states and focus/blur events within InputGroup. - Emphasized the exclusion of TextArea from InputGroup due to height constraints.
…ge disabled styling - Removed disabled styling handling from useInputGroup, allowing child components to manage their own disabled states. - Enhanced Button, Input, and Select components to apply disabled styling based on InputGroup context. - Cleaned up InputGroup by removing unnecessary ID prop and ensuring consistent error and disabled state passing to children. - Updated Storybook examples to reflect these changes and improve clarity in component behavior.
…ests - Modified Button accessibility test to reflect the correct behavior of the disabled state during loading. - Introduced new InputGroup accessibility and integration tests to ensure proper rendering, error handling, and focus management. - Enhanced tests for child component integration and edge cases to improve overall test coverage and reliability.
…put-Group-component_Navid-Shad Cu 86eunvbgj implement the input group component navid shad
# [1.17.0-dev.37](dev-1.17.0-dev.36...dev-1.17.0-dev.37) (2025-09-09) ### Bug Fixes * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Improve error handling and styling in InputGroup and related components ([4df36d0](4df36d0)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Update Button accessibility test and add InputGroup tests ([49a570a](49a570a)) ### Features * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Enhance InputGroup and related components for improved styling and functionality ([40ee215](40ee215)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Add InputGroup component with Storybook documentation ([41ccd32](41ccd32)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Enhance Button and Input components for InputGroup consistency ([dcb6d69](dcb6d69)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Enhance Button and InputGroup integration with new button styling ([abff417](abff417)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Enhance Input and TextArea components for InputGroup integration ([dc90f6f](dc90f6f)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Enhance InputGroup and related components for improved styling and consistency ([0593109](0593109)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Enhance InputGroup and related components with focus management and border styling ([8029f74](8029f74)) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgj Refactor InputGroup and Button components for improved styling and consistency ([dab9956](dab9956)) * Enhance Button component with focus styling and loading state handling ([9023937](9023937)) * Update Component Development Guidelines to include InputGroup integration requirements ([e50d144](e50d144))
|
🎉 This PR is included in version 1.17.0-dev.37 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
Contributor
Author
|
Task linked: CU-86eunvbgj Implement the Input Group component |
navidshad
changed the title
|
🎉 This PR is included in version 1.27.0 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.17.0-dev.38 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🏷️ PR Title:
Enhance InputGroup and Button Components with Accessibility, Styling, and Integration Improvements
📋 Summary
This PR introduces the new InputGroup component along with comprehensive updates to Button, Input, and TextArea components to improve styling consistency, accessibility, focus management, and error handling. It also adds support for badge labels in the IconButton component and updates the Component Development Guidelines to include InputGroup integration requirements. Extensive tests and Storybook documentation for InputGroup are included.
🔗 Related Tasks
#86eunvbgj - Implement the InputGroup component with focus, border styling, accessibility improvements, error handling, and integration with related components; add InputGroup tests and Storybook documentation; update Component Development Guidelines; enhance Button and Input components for InputGroup consistency
#CU-86eunvbgj - Add badge label support to IconButton component
📝 Additional Details
📜 Commit List
49a570a fix: Update Button accessibility test and add InputGroup tests
74976d8 refactor: Update InputGroup and related components to manage disabled styling
e50d144 feat: Update Component Development Guidelines to include InputGroup integration requirements
4df36d0 fix: Improve error handling and styling in InputGroup and related components
8029f74 feat: Enhance InputGroup and related components with focus management and border styling
dab9956 feat: Refactor InputGroup and Button components for improved styling and consistency
9023937 feat: Enhance Button component with focus styling and loading state handling
abff417 feat: Enhance Button and InputGroup integration with new button styling
0593109 feat: Enhance InputGroup and related components for improved styling and consistency
dcb6d69 feat: Enhance Button and Input components for InputGroup consistency
40ee215 feat: Enhance InputGroup and related components for improved styling and functionality
dc90f6f feat: Enhance Input and TextArea components for InputGroup integration
41ccd32 feat: Add InputGroup component with Storybook documentation
5084bce feat: Add badge label support to IconButton component