langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 12:05:30 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #24647] UI enhancements for workflow checklist component #30730

New Issue
Closed
opened 2026-02-21 20:48:07 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:48:07 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/24647

State: closed
Merged: Yes

Part of #24198
Related #23981 #24648

Summary

This PR contains a series of UI enhancements and fixes focused on improving the workflow checklist component user experience and overall interface polish.

Key Changes

1. Workflow Checklist Interactive Enhancement

  • Added hover "Go to" action with right arrow icon for better navigation indication
  • Implemented blue color theme using existing Tailwind variables (text-primary-600)
  • Added custom IconR component for consistent arrow styling
  • Internationalization support for 3 languages (en-US, zh-Hans, ja-JP)
  • Smooth opacity transition animation on hover

2. Warning List Visual Improvements

  • Replaced AlertTriangle with custom Warning icon for better visual consistency
  • Added subtle orange gradient background for warning sections using components-badge-bg-orange-soft (8%/14% opacity)
  • Optimized spacing with intelligent padding adjustments (py-1 with first:pt-1.5 last:pb-1.5)
  • Improved line height from leading-[18px] to leading-4 for better text density
  • Added rounded corners to prevent gradient overflow beyond container boundaries
  • Reduced header-to-content spacing for tighter layout

3. Data Safety Enhancement

  • Restricted onboarding trigger to completely empty canvas only
  • Prevents accidental data loss by avoiding auto-onboarding on existing workflows
  • Simplified logic while strengthening protection conditions

4. Publisher Button Polish

  • Adjusted left padding for better text spacing and visual balance

Technical Implementation

Icon Management System

  • Proper SVG to component workflow (assets/svg → JSON → TSX)
  • Consistent sizing and styling across new icons
  • Integration with existing icon system architecture

CSS Architecture

  • Leveraged existing Tailwind theme variables for color consistency
  • Used cn() utility for conditional class application
  • Implemented gradient backgrounds with theme-aware opacity values

Component Structure

  • Maintained existing React patterns and hooks
  • Enhanced conditional rendering for warning states
  • Preserved accessibility and responsive design

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/24647 **State:** closed **Merged:** Yes --- Part of #24198 Related #23981 #24648 ## Summary This PR contains a series of UI enhancements and fixes focused on improving the workflow checklist component user experience and overall interface polish. ### Key Changes **1. Workflow Checklist Interactive Enhancement** - Added hover "Go to" action with right arrow icon for better navigation indication - Implemented blue color theme using existing Tailwind variables (text-primary-600) - Added custom IconR component for consistent arrow styling - Internationalization support for 3 languages (en-US, zh-Hans, ja-JP) - Smooth opacity transition animation on hover **2. Warning List Visual Improvements** - Replaced AlertTriangle with custom Warning icon for better visual consistency - Added subtle orange gradient background for warning sections using components-badge-bg-orange-soft (8%/14% opacity) - Optimized spacing with intelligent padding adjustments (py-1 with first:pt-1.5 last:pb-1.5) - Improved line height from leading-[18px] to leading-4 for better text density - Added rounded corners to prevent gradient overflow beyond container boundaries - Reduced header-to-content spacing for tighter layout **3. Data Safety Enhancement** - Restricted onboarding trigger to completely empty canvas only - Prevents accidental data loss by avoiding auto-onboarding on existing workflows - Simplified logic while strengthening protection conditions **4. Publisher Button Polish** - Adjusted left padding for better text spacing and visual balance ### Technical Implementation **Icon Management System** - Proper SVG to component workflow (assets/svg → JSON → TSX) - Consistent sizing and styling across new icons - Integration with existing icon system architecture **CSS Architecture** - Leveraged existing Tailwind theme variables for color consistency - Used cn() utility for conditional class application - Implemented gradient backgrounds with theme-aware opacity values **Component Structure** - Maintained existing React patterns and hooks - Enhanced conditional rendering for warning states - Preserved accessibility and responsive design ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:48:07 -05:00
yindo closed this issue 2026-02-21 20:48:07 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30730
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?