Skip to content

Enhance Select Component with Confirmation and Custom Modes, Update Storybook and Cleanup - #72

Merged
navidshad merged 14 commits into
mainfrom
dev
Aug 31, 2025
Merged

Enhance Select Component with Confirmation and Custom Modes, Update Storybook and Cleanup#72
navidshad merged 14 commits into
mainfrom
dev

Conversation

@navidshad

@navidshad navidshad commented Aug 31, 2025

Copy link
Copy Markdown
Contributor

📋 Summary

This PR introduces significant improvements to the Select component, including the addition of a Confirmation Mode for better user experience and a Custom Mode that enhances slot functionality. It also updates the component imports by removing unused CheckboxInput and SwitchBall components, refines snapshot tests to align with new dropdown styling, and disables Storybook snapshot testing across all components to streamline testing. Additionally, the Select component now features comprehensive Storybook documentation. Supporting changes include updating import paths, adding the form component to package configurations, and refreshing Storybook development guidelines.

🔗 Related Tasks

#86eunvbgw - Implement the Select2 component with Confirmation and Custom modes, update snapshots and Storybook documentation, and refactor imports to remove unused components.

📝 Additional Details

  • Updated Select component snapshots to reflect styling changes.
  • Disabled snapshot testing in Storybook for all components to improve test reliability.
  • Added form component references in package.json and vite.config.ts to support new features.
  • Refactored import paths for cleaner codebase and removed unused components to reduce bundle size.
  • Provided detailed Storybook documentation for the Select component to aid developers.

📜 Commit List

  • 6fbeb73 chore(release): 1.17.0-dev.35 [skip ci]
  • 5a7a50a Merge pull request Refactor Select Component with Confirmation and Custom Modes, Update Storybook and Remove Unused Components #71 from codebridger/CU-86eunvbgw_Implement-the-Select2-component_Navid-Shad
  • 4098c17 refactor: #86eunvbgw Update Storybook test runner configuration to disable snapshots for all components
  • 35ac8f8 refactor: #86eunvbgw Update Select component snapshots to reflect new dropdown options
  • 4c25aa6 fix: #86eunvbgw Update Select component snapshots to reflect changes in dropdown styling
  • 8f37d8c feat: #86eunvbgw Update component imports and remove unused CheckboxInput and SwitchBall components
  • 136ff6b feat: #86eunvbgw Add Confirmation Mode to Select component for improved user experience
  • 24a7105 feat: #86eunvbgw Implement custom mode for Select component with enhanced slot functionality
  • 058b780 docs: Update Storybook development guidelines for component documentation
  • eacd2c4 refactor: #86eunvbgw Update import paths and remove unused components
  • b12b68c feat: #86eunvbgw Add form component to package.json and vite.config.ts
  • 02e0195 feat: #86eunvbgw Add Select component with comprehensive Storybook documentation
  • ae5455a chore(release): 1.17.0-dev.34 [skip ci]

semantic-release-bot and others added 14 commits August 26, 2025 17:17
# [1.17.0-dev.34](dev-1.17.0-dev.33...dev-1.17.0-dev.34) (2025-08-26)

### Features

* Enhance Storybook server management and health checks ([5079f22](5079f22))
…cumentation

- Introduced a new Select component that supports single and multiple selections, search functionality, and grouped options.
- Created detailed Storybook stories showcasing various use cases, including default, labeled, required, searchable, and interactive examples.
- Enhanced accessibility features and provided extensive prop descriptions for better usability and customization.
- Included the form component in package.json with its respective types, import, and require paths.
- Updated vite.config.ts to resolve the form component from the appropriate source directory.
- Changed import paths in `how-to-use.mdx` to remove file extensions for better consistency.
- Updated import statements in `Card.stories.ts` to reflect the new structure of the form components.
- Deleted unused `FileInputButton`, `FileInputCombo`, `Input`, and `TextArea` components along with their associated tests and snapshots to streamline the codebase.
…tion

- Enhanced guidelines for writing dedicated documentation for each story file, emphasizing clarity and human-readability.
- Specified the use of standard Markdown elements and the importance of avoiding inline code snippets, as Storybook auto-generates usage code.
- Added instructions for demonstrating practical usage scenarios in stories, including basic and advanced configurations.
…nced slot functionality

- Added support for a custom mode in the Select component, allowing for complete customization through header, each, and footer slots.
- Updated the component's template to conditionally render custom elements based on the `custom` prop.
- Enhanced Storybook documentation to showcase the new custom mode features, including examples for multiple selection and custom rendering.
- Added tests to verify the functionality of the custom mode and its integration with multiple selections.
…ed user experience

- Introduced a new Confirmation Mode in the Select component, allowing users to confirm or cancel their selections with a built-in footer featuring Accept and Cancel buttons.
- Updated the component's template to conditionally render the confirmation footer based on the `confirm` prop.
- Enhanced Storybook documentation with examples demonstrating both single and multiple selection scenarios in Confirmation Mode.
- Preserved original selections until confirmed, improving user experience by allowing review before committing choices.
…nput and SwitchBall components

- Added imports for CheckboxInput and SwitchBall components in the form components file.
- Deleted CheckboxInput and SwitchBall components along with their associated tests, stories, and snapshots to streamline the codebase.
- Updated documentation in `how-to-use.mdx` to reflect the new import structure and usage of form components.
…in dropdown styling

- Removed unnecessary border and adjusted transition properties in the Select component's dropdown snapshots.
- Cleaned up unused options in the Select Multiple play-test snapshot to streamline the test cases.
…sable snapshots for all components

- Adjusted the test runner configuration to disable snapshots for all components to prevent timing and state issues during tests.
- Provided guidance in comments for future snapshot considerations, emphasizing the need for static, non-interactive components or post-play function snapshots.
- Removed outdated snapshot files for various components to streamline the codebase and eliminate unnecessary clutter.
…lect2-component_Navid-Shad

Refactor Select Component with Confirmation and Custom Modes, Update Storybook and Remove Unused Components
# [1.17.0-dev.35](dev-1.17.0-dev.34...dev-1.17.0-dev.35) (2025-08-30)

### Bug Fixes

* [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgw Update Select component snapshots to reflect changes in dropdown styling ([4c25aa6](4c25aa6))

### Features

* [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgw  Add Confirmation Mode to Select component for improved user experience ([136ff6b](136ff6b))
* [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgw Add form component to package.json and vite.config.ts ([b12b68c](b12b68c))
* [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgw Add Select component with comprehensive Storybook documentation ([02e0195](02e0195))
* [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgw Implement custom mode for Select component with enhanced slot functionality ([24a7105](24a7105))
* [#86](https://github.com/codebridger/lib-vue-components/issues/86)eunvbgw Update component imports and remove unused CheckboxInput and SwitchBall components ([8f37d8c](8f37d8c))
@navidshad

Copy link
Copy Markdown
Contributor Author

@navidshad navidshad changed the title Dev Enhance Select Component with Confirmation and Custom Modes, Update Storybook and Cleanup Aug 31, 2025
@navidshad
navidshad merged commit d9f2502 into main Aug 31, 2025
6 checks passed
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 1.26.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions

github-actions Bot commented Sep 1, 2025

Copy link
Copy Markdown

🎉 This PR is included in version 1.17.0-dev.36 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions

Copy link
Copy Markdown

🎉 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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants