[feat] Enhance MultiSelect component and Storybook stories

[viva-jinyi]

Summary

• Enhanced MultiSelect component with improved layout and conditional rendering
• Added comprehensive Storybook stories for better component testing and documentation
• Improved UI/UX for MultiSelect header features with proper spacing

Changes

MultiSelect Component (src/components/input/MultiSelect.vue)

• Improved layout with proper spacing between search box and header controls
• Added conditional rendering for header section based on feature flags
• Fixed spacing issues with divider line positioning

Storybook Stories

• MultiSelect.stories.ts:

  • Added default args for all controls
  • Added 5 new story variants: WithSearchBox, WithSelectedCount, WithClearButton, AllHeaderFeatures, CustomSearchPlaceholder
  • Enhanced controls for hasSearchBox, showSelectedCount, hasClearButton, searchPlaceholder

• SearchBox.stories.ts:

  • Added default args with placeHolder and hasBorder
  • Added WithBorder and NoBorder story variants
  • Fixed template syntax and improved story structure

• MoreButton.stories.ts:

  • Updated button type to transparent for better visual consistency
  • Added proper icon sizing (16px)

• BaseWidget.stories.ts:

  • Updated to showcase MultiSelect with all header features enabled

Test plan

• Run Storybook (npm run storybook)
• Test MultiSelect component with all new story variants
• Verify proper spacing and conditional rendering in MultiSelect header
• Test SearchBox with border toggle functionality
• Verify MoreButton displays with transparent styling
• Test BaseWidget with enhanced MultiSelect features
• Run component tests (npm run test:component)

🤖 Generated with Claude Code

┆Issue is synchronized with this Notion page by Unito

[github-actions]

🎭 Playwright Test Results

✅ All tests passed across all browsers!

⏰ Completed at: 08/31/2025, 05:31:13 AM UTC

📊 Test Reports by Browser

---

🎉 Your tests are passing across all browsers!

[github-actions]

🎨 Storybook Build Status

❌ Build failed!

⏰ Completed at: 08/31/2025, 05:06:52 AM UTC

🔗 Links

• 📊 View Workflow Run

---

⚠️ Please check the workflow logs for error details.

[Myestery]

I had to make the following mods to multiselect yesterday : https://github.com/Comfy-Org/ComfyUI_frontend/pull/5142/files#diff-2ad6dfa2673924c2a03f905f5e6142f97eaf34067500f9a37447c6d915b0c961.

Pls see if it makes sense to do it here

[viva-jinyi]

🚀 Additional Improvements Made

Beyond the initial review feedback, I've implemented several enhancements to improve the developer experience:

Storybook Enhancements

• Default options in all stories: Both MultiSelect and SingleSelect stories now have default options in their controls, making it easier to test without manual setup
• Removed modelValue from controls: The modelValue is now managed internally as it should be, not exposed in Storybook controls
• Fixed story reactivity: All stories (WithPreselectedValues, MultipleSelectors, etc.) now properly respond to control changes
• Pre-populated sample data: Stories that demonstrate specific features (like WithSelectedCount, WithClearButton) now come with pre-selected items to better showcase the functionality

Component Improvements

• Clear event emission: Added a @clear event that fires when the clear button is clicked, giving parent components full awareness of the clear action while maintaining v-model synchronization
• Proper Option type usage: Fixed all stories to use the correct name property instead of label to match the component's type definition

SingleSelect Updates

• Applied the same Storybook improvements to SingleSelect for consistency
• Added default options and proper args binding to all SingleSelect stories

These changes make the components more developer-friendly and the Storybook stories more interactive and useful for testing different configurations.

[DrJKL]

I think maybe the most recent commit didn't push. I don't see the changes.

[christian-byrne]

I rebased this for you so we can re-run CI with the fixed tests.

[DrJKL]

I'm not seeing any default items. The storybook should update on new commits, right?

[viva-jinyi]

@DrJKL Something went wrong. Let me fix it.

[DrJKL]

For the searchbox, can we add +icon -border?

[viva-jinyi]

@DrJKL What do you mean +icon -border?

[DrJKL]

@DrJKL What do you mean +icon -border?

One that has the icon set to visible but without the border. Right now the default and borderless are identical. And it looks like the icon is tied to the border being present.

[viva-jinyi]

@DrJKL The version where the icon is visible but the border is removed is actually the default one. I think this might just be an issue with the deployed public Storybook. Anyway, I’ll check into the issue of components breaking when Storybook is deployed.

[viva-jinyi]

Neutralize Storybook's injected styles that override MultiSelect component styling during build.

[DrJKL]

nit: Do these need the important?

[viva-jinyi]

If we don’t add the import in this class, the color override won’t work as intended. I think it would be better to open up a new prop in TextButton in new PR, decide on a name for this blue-styled button type, and then discuss with design how it should be defined and applied.

[DrJKL]

nit: Can these be extracted and use the cn function?

[viva-jinyi]

Thanks for the review! I'd prefer to keep the Tailwind classes inline in the template as it follows Tailwind's utility-first philosophy - being able to see the styles directly in the template improves developer experience. Since we don't use a cn utility elsewhere in the codebase, introducing it here would break consistency. The PrimeVue PT configuration is already properly organized in the computed property below, which handles that abstraction well.

[christian-byrne]

Is it necessary to include options, optionLabel, placeholder, and maxSelectedLabels explicitly? They will already be set by the parent. At the very least, we probably don't need to alias them.

[viva-jinyi]

I’ve removed the unnecessary parts, and for the props needed due to custom styling I added comments above the component to explain them.

[viva-jinyi]

📝 Changes Summary

1. Improved props handling for MultiSelect/SingleSelect (commit: 50db4b7)

• MultiSelect: Removed options prop, pass all PrimeVue props via v-bind="$attrs"
• SingleSelect: Kept options prop (required for getLabel function), added v-bind="$attrs"
• Fixed Storybook type definitions to resolve TypeScript errors

2. Fixed SearchBox v-model bugs (commit: 4ed9222)

• Fixed defineModel usage (removed empty string parameter)
• Fixed v-model syntax error: v-model:= → v-model
• Added v-model:search-query binding to MultiSelect
  (cc. @Myestery)

3. Renamed ModelSelector → SampleModelSelector (commit: 4ed9222)

• Renamed to clarify it's a sample component
• Updated import path in useModelSelectorDialog

Result: Search functionality working properly, all TypeScript checks passing

@christian-byrne @DrJKL