Alexander Brown
2d0f3d6a55
[backport cloud/1.37] refactor: restructure BaseModalLayout from flexbox to CSS Grid ( #8239 )
...
Backport of #8211 to `cloud/1.37`.
Cherry-picked merge commit `2db246f494b42bb65bd034571c2388b8d6c7e11f`.
**Resolved conflicts:**
- `src/components/widget/layout/BaseModalLayout.vue` - Accepted PR
version (complete refactor from flexbox to CSS Grid)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8239-backport-cloud-1-37-refactor-restructure-BaseModalLayout-from-flexbox-to-CSS-Grid-2f06d73d365081b3bf60f558ceced8c5 )
by [Unito](https://www.unito.io )
Co-authored-by: Amp <amp@ampcode.com >
2026-01-21 19:57:12 -08:00
Alexander Brown
51a7654a39
perf(AssetBrowserModal): virtualize asset grid to reduce network requests ( #7919 )
...
## Problem
The `AssetBrowserModal` triggers hundreds of network requests when
opened because `AssetGrid.vue` renders all asset cards immediately using
a simple `v-for` loop. Each `AssetCard` loads its thumbnail image,
causing a flood of simultaneous requests.
## Solution
Replace the simple `v-for` with the existing `VirtualGrid` component
(already used in `AssetsSidebarTab.vue` and `ManagerDialogContent.vue`)
to only render visible items plus a small buffer.
## Changes
- **`AssetGrid.vue`**: Use `VirtualGrid` with computed `assetsWithKey`
that adds the required `key` property from `asset.id`
- **`BaseModalLayout.vue`**: Add `flex-1` to content container for
proper height calculation (required for `VirtualGrid` to work)
## Testing
- All 130 asset-related tests pass
- TypeScript and lint checks pass
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7919-perf-AssetBrowserModal-virtualize-asset-grid-to-reduce-network-requests-2e36d73d365081a1be18d0eb33b7ef8a )
by [Unito](https://www.unito.io )
Co-authored-by: Amp <amp@ampcode.com >
2026-01-08 19:05:55 -08:00
Alexander Brown
644a8bc60c
fix: Button sizing in modals and asset browser ( #7920 )
...
## Summary
Fix button sizing inconsistencies in modal dialogs and the asset
browser.
## Changes
- **What**: Fix Import button using responsive size (`lg`/`icon` based
on breakpoint) and ensure Modal Close button has explicit `w-10` width
for consistent sizing.
## Review Focus
Button sizing consistency across the modal UI.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7920-fix-Button-sizing-in-modals-and-asset-browser-2e36d73d365081fc997af8be1e928049 )
by [Unito](https://www.unito.io )
2026-01-09 03:02:59 +00:00
Jin Yi
a2e0c3d596
feature: model browser folder grouping ( #7892 )
2026-01-08 16:58:06 -08:00
Alexander Brown
fba580dc7d
Component: Button Migration 2: IconButton ( #7598 )
...
## Summary
Still a work in progress. Buttons with just icons are already in the
stories for button.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7598-WIP-Component-Button-Migration-2-IconButton-2cc6d73d365081c09143c63464ac60b7 )
by [Unito](https://www.unito.io )
2025-12-17 18:11:43 -08:00
Terry Jia
6081404abb
feat: Don't hide scrollbar in BaseModalLayout ( #7226 )
...
## Summary
- Add showScrollbar prop to BaseModalLayout component to control
scrollbar visibility
- Enable scrollbar in Templates dialog for better navigation when
content overflows
The original implementation used scrollbar-hide class by default. Since
the intent behind hiding the scrollbar wasn't documented in the original
PR (#5290 ), this change preserves the default behavior (showScrollbar:
false) while allowing individual dialogs to opt-in to visible
scrollbars.
The Templates dialog specifically benefits from a visible scrollbar as
it contains a large grid of template cards that requires scrolling.
fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/6915
## Screenshots (if applicable)
<img width="2490" height="1097" alt="image"
src="https://github.com/user-attachments/assets/711b060c-9752-4cee-84c0-d90210969f5a "
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7226-feat-add-showScrollbar-prop-to-BaseModalLayout-2c36d73d365081b1b55bdcd50ca89030 )
by [Unito](https://www.unito.io )
2025-12-08 13:53:35 -05:00
Alexander Brown
471ccca1dd
Style: Design System use across more components ( #6705 )
...
## Summary
Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.
## Changes
- **What**: Replace light/dark colors with theme aware design system
tokens.
## Review Focus
Double check the chosen colors for the components
## Screenshots
| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104 "
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63 "
/> |
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341 )
by [Unito](https://www.unito.io )
---------
Co-authored-by: github-actions <github-actions@github.com >
2025-11-17 12:27:10 -08:00
Alexander Brown
b03cf7e11d
Style: Token renaming and style organization ( #6337 )
...
## Summary
Align color names and organize style.css some more
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6337-Style-Token-renaming-and-style-organization-29a6d73d365081b69f25ce1298c67fdc )
by [Unito](https://www.unito.io )
2025-10-28 12:13:28 -07:00
Alexander Brown
b943c0fa75
Lint: Add tailwind linter ( #5984 )
...
## Summary
Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss )
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support )).
## Changes
- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb )
by [Unito](https://www.unito.io )
---------
Co-authored-by: GitHub Action <action@github.com >
2025-10-08 19:39:14 -07:00
Alexander Brown
99b3a59679
Style: Standardize icon use Part 1 ( #5947 )
...
## Summary
Remove the mix of class based and component style icons in favor of just
[classes](https://iconify.design/docs/usage/css/tailwind/tailwind4/#basic-usage ).
## Changes
- **What**: Migrate existing lucide icons
## Review Focus
What differs between the icons before and now?
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5947-Style-Standardize-icon-use-Part-1-2846d73d365081bfa66ceb6bdaa9ff02 )
by [Unito](https://www.unito.io )
---------
Co-authored-by: github-actions <github-actions@github.com >
2025-10-07 17:53:38 -07:00
Arjan Singh
abf2b3b980
Full Asset Selection Experience (Assets API) ( #5900 )
...
## Summary
Full Integration of Asset Browsing and Selection when Assets API is
enabled.
## Changes
1. Replace Model Left Side Tab with experience
2. Configurable titles for the Asset Browser Modal
3. Refactors to simplify callback code
4. Refactor to make modal filters reactive (they change their values
based on assets displayed)
5. Add `browse()` mode with ability to create node directly from the
Asset Browser Modal (in `browse()` mode)
## Screenshots
Demo of many different types of Nodes getting configured by the Modal
https://github.com/user-attachments/assets/34f9c964-cdf2-4c5d-86a9-a8e7126a7de9
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5900-Feat-asset-selection-cloud-integration-2816d73d365081ccb4aeecdc14b0e5d3 )
by [Unito](https://www.unito.io )
2025-10-03 20:34:59 -07:00
Arjan Singh
13ce23399c
Asset Browser Design Review + Filters ( #5737 )
...
## Summary
Fixed design feedback and wired up the filter controls.
## Review Focus
Design Feedback:
-
[4872888](48728881af9a0b63edce07f22f807423e6fa97237801ed9e28https://github.com/user-attachments/assets/d82088e4-7d72-4c6f-904e-5180774d64a5 "
/>
<img width="1794" height="793" alt="Screenshot 2025-09-23 at 1 03 22 PM"
src="https://github.com/user-attachments/assets/56eac2ba-5ecc-4a20-843f-ce683dea668c "
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5737-Asset-Browser-Design-Review-Filters-2776d73d3650813e890bd16fa6a0433f )
by [Unito](https://www.unito.io )
---------
Co-authored-by: Alexander Brown <drjkl@comfy.org >
Co-authored-by: GitHub Action <action@github.com >
2025-09-25 11:17:26 -07:00
Jin Yi
e70ddea684
fix: Add dropdown size control to Select components and improve UI ( #5290 )
...
* feature: size adjust
* feature: design adjust
* fix: popover width, height added
* fix: li style override
* refactor: improve component readability and
maintainability per PR feedback
- Replace CardGridList component with
createGridStyle utility function
- Add runtime validation for grid column values
- Remove !important usage in MultiSelect, use cn()
function instead
- Extract popover sizing logic into
usePopoverSizing composable
- Improve class string readability by splitting
into logical groups
- Use Tailwind size utilities (size-8, size-10)
instead of separate width/height
- Remove magic numbers in SearchBox, align with
button sizes
- Rename BaseWidgetLayout to BaseModalLayout for
clarity
- Enhance SearchBox click area to cover entire
component
- Refactor long class strings using cn() utility
across components
* fix: BaseWidgetLayout => BaseModalLayout
* fix: CardGrid deleted
* fix: unused exported types
* Update test expectations [skip ci]
* chore: code review
* Update test expectations [skip ci]
* chore: restore screenshot
---------
Co-authored-by: github-actions <github-actions@github.com >
2025-09-11 03:01:06 -07:00
