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 #28303] refactor: migrate radio-card component to use CVA with @layer components #32002

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

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

State: closed
Merged: No

Summary

This PR refactors the radio-card/simple component to follow Tailwind CSS best practices by using CVA (class-variance-authority) for variant management and @layer components for styling instead of CSS Modules.

Changes

  • Created index.css using @layer components for component styles
  • Updated index.tsx to use CVA for managing active state variant
  • Removed style.module.css (legacy CSS Module approach)
  • Added VariantProps type support for better TypeScript integration

Why this change?

The radio-card component was using CSS Modules with @apply directives, which indicates it can leverage Tailwind's @layer components instead. This refactoring:

  1. Aligns with project patterns: Matches the approach used in other base components like Button, Badge, and ActionButton
  2. Better type safety: CVA provides TypeScript support for variant props
  3. Improved maintainability: Centralizes variant logic and styling with Tailwind's design system
  4. Optimized bundling: @layer components allows Tailwind to optimize and purge unused styles

Migration Pattern

Before (CSS Modules):

import s from './style.module.css'
<div className={cn(s.item, isChosen && s.active)} />

After (CVA + @layer components):

import { cva } from 'class-variance-authority'
import './index.css'

const radioCardVariants = cva('radio-card', {
  variants: { active: { true: 'radio-card-active', false: '' } }
})
<div className={radioCardVariants({ active: isChosen })} />

Testing

  • Lint checks pass
  • TypeScript type-check passes
  • Component maintains same visual appearance and behavior

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/28303 **State:** closed **Merged:** No --- ## Summary This PR refactors the radio-card/simple component to follow Tailwind CSS best practices by using CVA (class-variance-authority) for variant management and `@layer components` for styling instead of CSS Modules. ## Changes - Created `index.css` using `@layer components` for component styles - Updated `index.tsx` to use CVA for managing active state variant - Removed `style.module.css` (legacy CSS Module approach) - Added `VariantProps` type support for better TypeScript integration ## Why this change? The radio-card component was using CSS Modules with `@apply` directives, which indicates it can leverage Tailwind's `@layer components` instead. This refactoring: 1. **Aligns with project patterns**: Matches the approach used in other base components like Button, Badge, and ActionButton 2. **Better type safety**: CVA provides TypeScript support for variant props 3. **Improved maintainability**: Centralizes variant logic and styling with Tailwind's design system 4. **Optimized bundling**: `@layer components` allows Tailwind to optimize and purge unused styles ## Migration Pattern ### Before (CSS Modules): ```tsx import s from './style.module.css' <div className={cn(s.item, isChosen && s.active)} /> ``` ### After (CVA + @layer components): ```tsx import { cva } from 'class-variance-authority' import './index.css' const radioCardVariants = cva('radio-card', { variants: { active: { true: 'radio-card-active', false: '' } } }) <div className={radioCardVariants({ active: isChosen })} /> ``` ## Testing - [x] Lint checks pass - [x] TypeScript type-check passes - [x] Component maintains same visual appearance and behavior ## Checklist - [x] 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:50:33 -05:00
yindo closed this issue 2026-02-21 20:50:34 -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#32002
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?