From fb70ebb8f8f4382f5452714e600f5a8f9f64301c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 10 Jun 2026 08:44:14 +0000 Subject: [PATCH 1/7] chore(i18n): sync translations with en-US (#37269) Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com> --- web/i18n/ar-TN/workflow.json | 1 + web/i18n/de-DE/workflow.json | 1 + web/i18n/es-ES/workflow.json | 1 + web/i18n/fa-IR/workflow.json | 1 + web/i18n/fr-FR/workflow.json | 1 + web/i18n/hi-IN/workflow.json | 1 + web/i18n/id-ID/workflow.json | 1 + web/i18n/it-IT/workflow.json | 1 + web/i18n/ja-JP/workflow.json | 1 + web/i18n/ko-KR/workflow.json | 1 + web/i18n/nl-NL/workflow.json | 1 + web/i18n/pl-PL/workflow.json | 1 + web/i18n/pt-BR/workflow.json | 1 + web/i18n/ro-RO/workflow.json | 1 + web/i18n/ru-RU/workflow.json | 1 + web/i18n/sl-SI/workflow.json | 1 + web/i18n/th-TH/workflow.json | 1 + web/i18n/tr-TR/workflow.json | 1 + web/i18n/uk-UA/workflow.json | 1 + web/i18n/vi-VN/workflow.json | 1 + web/i18n/zh-Hant/workflow.json | 1 + 21 files changed, 21 insertions(+) diff --git a/web/i18n/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json index 5c8d1a2188..f5ad90ca62 100644 --- a/web/i18n/ar-TN/workflow.json +++ b/web/i18n/ar-TN/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "القيمة", "chatVariable.modal.description": "الوصف", "chatVariable.modal.descriptionPlaceholder": "وصف المتغير", + "chatVariable.modal.descriptionTooLong": "يجب ألا يتجاوز الوصف {{maxLength}} حرفًا", "chatVariable.modal.editInForm": "تعديل في النموذج", "chatVariable.modal.editInJSON": "تعديل في JSON", "chatVariable.modal.editTitle": "تعديل متغير محادثة", diff --git a/web/i18n/de-DE/workflow.json b/web/i18n/de-DE/workflow.json index fb2ebbf8fd..82e9966dfe 100644 --- a/web/i18n/de-DE/workflow.json +++ b/web/i18n/de-DE/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Wert", "chatVariable.modal.description": "Beschreibung", "chatVariable.modal.descriptionPlaceholder": "Beschreiben Sie die Variable", + "chatVariable.modal.descriptionTooLong": "Die Beschreibung darf maximal {{maxLength}} Zeichen lang sein", "chatVariable.modal.editInForm": "Im Formular bearbeiten", "chatVariable.modal.editInJSON": "In JSON bearbeiten", "chatVariable.modal.editTitle": "Gesprächsvariable bearbeiten", diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json index 8c03cbab3e..1bde56032c 100644 --- a/web/i18n/es-ES/workflow.json +++ b/web/i18n/es-ES/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Valor", "chatVariable.modal.description": "Descripción", "chatVariable.modal.descriptionPlaceholder": "Describa la variable", + "chatVariable.modal.descriptionTooLong": "La descripción debe tener {{maxLength}} caracteres o menos", "chatVariable.modal.editInForm": "Editar en Formulario", "chatVariable.modal.editInJSON": "Editar en JSON", "chatVariable.modal.editTitle": "Editar Variable de Conversación", diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json index a8da76a3ff..8a0d71095d 100644 --- a/web/i18n/fa-IR/workflow.json +++ b/web/i18n/fa-IR/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "مقدار", "chatVariable.modal.description": "توضیحات", "chatVariable.modal.descriptionPlaceholder": "توصیف متغیر", + "chatVariable.modal.descriptionTooLong": "توضیحات باید {{maxLength}} کاراکتر یا کمتر باشد", "chatVariable.modal.editInForm": "ویرایش در فرم", "chatVariable.modal.editInJSON": "ویرایش در JSON", "chatVariable.modal.editTitle": "ویرایش متغیر مکالمه", diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json index 5d62f7309f..e4f9e3f9ed 100644 --- a/web/i18n/fr-FR/workflow.json +++ b/web/i18n/fr-FR/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Valeur", "chatVariable.modal.description": "Description", "chatVariable.modal.descriptionPlaceholder": "Décrivez la variable", + "chatVariable.modal.descriptionTooLong": "La description ne doit pas dépasser {{maxLength}} caractères", "chatVariable.modal.editInForm": "Éditer dans le Formulaire", "chatVariable.modal.editInJSON": "Éditer en JSON", "chatVariable.modal.editTitle": "Modifier une Variable de Conversation", diff --git a/web/i18n/hi-IN/workflow.json b/web/i18n/hi-IN/workflow.json index 68986b1434..f4cf49caee 100644 --- a/web/i18n/hi-IN/workflow.json +++ b/web/i18n/hi-IN/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "मान", "chatVariable.modal.description": "विवरण", "chatVariable.modal.descriptionPlaceholder": "चर का वर्णन करें", + "chatVariable.modal.descriptionTooLong": "विवरण {{maxLength}} वर्णों या उससे कम का होना चाहिए", "chatVariable.modal.editInForm": "फॉर्म में संपादित करें", "chatVariable.modal.editInJSON": "JSON में संपादित करें", "chatVariable.modal.editTitle": "वार्तालाप चर संपादित करें", diff --git a/web/i18n/id-ID/workflow.json b/web/i18n/id-ID/workflow.json index 5a9a3334ab..3ee4a0a0cc 100644 --- a/web/i18n/id-ID/workflow.json +++ b/web/i18n/id-ID/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Nilai", "chatVariable.modal.description": "Deskripsi", "chatVariable.modal.descriptionPlaceholder": "Jelaskan variabel", + "chatVariable.modal.descriptionTooLong": "Deskripsi harus {{maxLength}} karakter atau kurang", "chatVariable.modal.editInForm": "Edit dalam Formulir", "chatVariable.modal.editInJSON": "Edit dalam JSON", "chatVariable.modal.editTitle": "Edit Variabel Percakapan", diff --git a/web/i18n/it-IT/workflow.json b/web/i18n/it-IT/workflow.json index 6bcde7db74..60bcfb518c 100644 --- a/web/i18n/it-IT/workflow.json +++ b/web/i18n/it-IT/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Valore", "chatVariable.modal.description": "Descrizione", "chatVariable.modal.descriptionPlaceholder": "Descrivi la variabile", + "chatVariable.modal.descriptionTooLong": "La descrizione deve contenere al massimo {{maxLength}} caratteri", "chatVariable.modal.editInForm": "Modifica nel Modulo", "chatVariable.modal.editInJSON": "Modifica in JSON", "chatVariable.modal.editTitle": "Modifica Variabile di Conversazione", diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json index 2c8c42df8a..baed1c62ff 100644 --- a/web/i18n/ja-JP/workflow.json +++ b/web/i18n/ja-JP/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "値", "chatVariable.modal.description": "説明", "chatVariable.modal.descriptionPlaceholder": "変数の説明を入力", + "chatVariable.modal.descriptionTooLong": "説明は {{maxLength}} 文字以内で入力してください", "chatVariable.modal.editInForm": "フォームで編集", "chatVariable.modal.editInJSON": "JSON で編集", "chatVariable.modal.editTitle": "会話変数を編集", diff --git a/web/i18n/ko-KR/workflow.json b/web/i18n/ko-KR/workflow.json index e8f0eaf550..44af1f27d3 100644 --- a/web/i18n/ko-KR/workflow.json +++ b/web/i18n/ko-KR/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "값", "chatVariable.modal.description": "설명", "chatVariable.modal.descriptionPlaceholder": "변수에 대해 설명하세요", + "chatVariable.modal.descriptionTooLong": "설명은 {{maxLength}}자 이하여야 합니다", "chatVariable.modal.editInForm": "양식에서 편집", "chatVariable.modal.editInJSON": "JSON 으로 편집", "chatVariable.modal.editTitle": "대화 변수 편집", diff --git a/web/i18n/nl-NL/workflow.json b/web/i18n/nl-NL/workflow.json index 310e73a6eb..76631b87d1 100644 --- a/web/i18n/nl-NL/workflow.json +++ b/web/i18n/nl-NL/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Value", "chatVariable.modal.description": "Description", "chatVariable.modal.descriptionPlaceholder": "Describe the variable", + "chatVariable.modal.descriptionTooLong": "Description must be {{maxLength}} characters or less", "chatVariable.modal.editInForm": "Edit in Form", "chatVariable.modal.editInJSON": "Edit in JSON", "chatVariable.modal.editTitle": "Edit Conversation Variable", diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json index 269602edfd..75bfaef03b 100644 --- a/web/i18n/pl-PL/workflow.json +++ b/web/i18n/pl-PL/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Wartość", "chatVariable.modal.description": "Opis", "chatVariable.modal.descriptionPlaceholder": "Opisz zmienną", + "chatVariable.modal.descriptionTooLong": "Opis nie może mieć więcej niż {{maxLength}} znaków", "chatVariable.modal.editInForm": "Edytuj w Formularzu", "chatVariable.modal.editInJSON": "Edytuj w JSON", "chatVariable.modal.editTitle": "Edytuj Zmienną Konwersacji", diff --git a/web/i18n/pt-BR/workflow.json b/web/i18n/pt-BR/workflow.json index 006adb10ad..1a2f0107a0 100644 --- a/web/i18n/pt-BR/workflow.json +++ b/web/i18n/pt-BR/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Valor", "chatVariable.modal.description": "Descrição", "chatVariable.modal.descriptionPlaceholder": "Descreva a variável", + "chatVariable.modal.descriptionTooLong": "A descrição deve ter no máximo {{maxLength}} caracteres", "chatVariable.modal.editInForm": "Editar no Formulário", "chatVariable.modal.editInJSON": "Editar em JSON", "chatVariable.modal.editTitle": "Editar Variável de Conversação", diff --git a/web/i18n/ro-RO/workflow.json b/web/i18n/ro-RO/workflow.json index 540e979110..1f7d256ce6 100644 --- a/web/i18n/ro-RO/workflow.json +++ b/web/i18n/ro-RO/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Valoare", "chatVariable.modal.description": "Descriere", "chatVariable.modal.descriptionPlaceholder": "Descrieți variabila", + "chatVariable.modal.descriptionTooLong": "Descrierea trebuie să aibă cel mult {{maxLength}} caractere", "chatVariable.modal.editInForm": "Editare în Formular", "chatVariable.modal.editInJSON": "Editare în JSON", "chatVariable.modal.editTitle": "Editare Variabilă de Conversație", diff --git a/web/i18n/ru-RU/workflow.json b/web/i18n/ru-RU/workflow.json index 5de1bc1ed7..87f4923322 100644 --- a/web/i18n/ru-RU/workflow.json +++ b/web/i18n/ru-RU/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Значение", "chatVariable.modal.description": "Описание", "chatVariable.modal.descriptionPlaceholder": "Опишите переменную", + "chatVariable.modal.descriptionTooLong": "Описание должно содержать не более {{maxLength}} символов", "chatVariable.modal.editInForm": "Редактировать в форме", "chatVariable.modal.editInJSON": "Редактировать в JSON", "chatVariable.modal.editTitle": "Редактировать переменную разговора", diff --git a/web/i18n/sl-SI/workflow.json b/web/i18n/sl-SI/workflow.json index 7a0afa2c93..753f5661ea 100644 --- a/web/i18n/sl-SI/workflow.json +++ b/web/i18n/sl-SI/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Vrednost", "chatVariable.modal.description": "Opis", "chatVariable.modal.descriptionPlaceholder": "Opisujte spremenljivko", + "chatVariable.modal.descriptionTooLong": "Opis ne sme presegati {{maxLength}} znakov", "chatVariable.modal.editInForm": "Uredi v obrazcu", "chatVariable.modal.editInJSON": "Uredi v JSON", "chatVariable.modal.editTitle": "Uredi spremenljivko pogovora", diff --git a/web/i18n/th-TH/workflow.json b/web/i18n/th-TH/workflow.json index 9d6d310d51..f6998eecab 100644 --- a/web/i18n/th-TH/workflow.json +++ b/web/i18n/th-TH/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "ค่า", "chatVariable.modal.description": "คำอธิบาย", "chatVariable.modal.descriptionPlaceholder": "อธิบายตัวแปร", + "chatVariable.modal.descriptionTooLong": "คำอธิบายต้องมีความยาวไม่เกิน {{maxLength}} ตัวอักษร", "chatVariable.modal.editInForm": "แก้ไขในแบบฟอร์ม", "chatVariable.modal.editInJSON": "แก้ไขใน JSON", "chatVariable.modal.editTitle": "แก้ไขตัวแปรการสนทนา", diff --git a/web/i18n/tr-TR/workflow.json b/web/i18n/tr-TR/workflow.json index e5d4ebc71b..39bfb01a83 100644 --- a/web/i18n/tr-TR/workflow.json +++ b/web/i18n/tr-TR/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Değer", "chatVariable.modal.description": "Açıklama", "chatVariable.modal.descriptionPlaceholder": "Değişkeni açıklayın", + "chatVariable.modal.descriptionTooLong": "Açıklama {{maxLength}} karakter veya daha az olmalıdır", "chatVariable.modal.editInForm": "Formda düzenle", "chatVariable.modal.editInJSON": "JSON olarak düzenle", "chatVariable.modal.editTitle": "Konuşma Değişkenini Düzenle", diff --git a/web/i18n/uk-UA/workflow.json b/web/i18n/uk-UA/workflow.json index c9a559fc83..9be46ee2e5 100644 --- a/web/i18n/uk-UA/workflow.json +++ b/web/i18n/uk-UA/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Значення", "chatVariable.modal.description": "Опис", "chatVariable.modal.descriptionPlaceholder": "Опишіть змінну", + "chatVariable.modal.descriptionTooLong": "Опис має містити не більше {{maxLength}} символів", "chatVariable.modal.editInForm": "Редагувати у формі", "chatVariable.modal.editInJSON": "Редагувати в JSON", "chatVariable.modal.editTitle": "Редагувати змінну розмови", diff --git a/web/i18n/vi-VN/workflow.json b/web/i18n/vi-VN/workflow.json index 301b288d06..049f7f60bd 100644 --- a/web/i18n/vi-VN/workflow.json +++ b/web/i18n/vi-VN/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "Giá trị", "chatVariable.modal.description": "Mô tả", "chatVariable.modal.descriptionPlaceholder": "Mô tả biến", + "chatVariable.modal.descriptionTooLong": "Mô tả không được vượt quá {{maxLength}} ký tự", "chatVariable.modal.editInForm": "Chỉnh sửa trong Biểu mẫu", "chatVariable.modal.editInJSON": "Chỉnh sửa dưới dạng JSON", "chatVariable.modal.editTitle": "Chỉnh Sửa Biến Hội Thoại", diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json index 2b81a10350..d8ebd94662 100644 --- a/web/i18n/zh-Hant/workflow.json +++ b/web/i18n/zh-Hant/workflow.json @@ -90,6 +90,7 @@ "chatVariable.modal.arrayValue": "值", "chatVariable.modal.description": "描述", "chatVariable.modal.descriptionPlaceholder": "描述此變數", + "chatVariable.modal.descriptionTooLong": "描述不能超過 {{maxLength}} 個字元", "chatVariable.modal.editInForm": "在表單中編輯", "chatVariable.modal.editInJSON": "以 JSON 編輯", "chatVariable.modal.editTitle": "編輯對話變數", From 0d8f7c41de6a9d770acae62617337bb8fa8b0ebd Mon Sep 17 00:00:00 2001 From: yyh <92089059+lyzno1@users.noreply.github.com> Date: Wed, 10 Jun 2026 16:59:33 +0800 Subject: [PATCH 2/7] feat: add dify-ui collapsible primitive and refactor workflow collapse usage (#37276) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- eslint-suppressions.json | 5 - packages/dify-ui/README.md | 2 +- packages/dify-ui/package.json | 4 + .../src/collapsible/__tests__/index.spec.tsx | 89 ++++++++ .../dify-ui/src/collapsible/index.stories.tsx | 183 ++++++++++++++++ packages/dify-ui/src/collapsible/index.tsx | 71 +++++++ .../collapse/__tests__/index.spec.tsx | 71 +++++-- .../components/collapse/field-collapse.tsx | 36 ---- .../nodes/_base/components/collapse/index.tsx | 199 +++++++++++++----- .../error-handle/error-handle-on-panel.tsx | 111 +++++----- .../nodes/_base/components/output-vars.tsx | 2 +- .../metadata/metadata-filter/index.tsx | 102 ++++----- 12 files changed, 650 insertions(+), 225 deletions(-) create mode 100644 packages/dify-ui/src/collapsible/__tests__/index.spec.tsx create mode 100644 packages/dify-ui/src/collapsible/index.stories.tsx create mode 100644 packages/dify-ui/src/collapsible/index.tsx delete mode 100644 web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx diff --git a/eslint-suppressions.json b/eslint-suppressions.json index 39e800e1ba..fd90ebbff5 100644 --- a/eslint-suppressions.json +++ b/eslint-suppressions.json @@ -3529,11 +3529,6 @@ "count": 5 } }, - "web/app/components/workflow/nodes/_base/components/collapse/index.tsx": { - "no-barrel-files/no-barrel-files": { - "count": 1 - } - }, "web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx": { "ts/no-explicit-any": { "count": 6 diff --git a/packages/dify-ui/README.md b/packages/dify-ui/README.md index 36e5585538..b392c5adec 100644 --- a/packages/dify-ui/README.md +++ b/packages/dify-ui/README.md @@ -47,7 +47,7 @@ Importing from `@langgenius/dify-ui` (no subpath) is intentionally not supported | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- | | Actions | `./button` | Design-system CTA primitive with `cva` variants. | | Controls | `./segmented-control` | SegmentedControl for mode, filter, and view selection. | -| Display | `./kbd` | Keyboard input and shortcut keycap primitives. | +| Display | `./collapsible`, `./kbd` | Collapsible disclosure primitive; keyboard input and shortcut keycap primitives. | | Feedback | `./meter`, `./toast` | Meter is inline status; Toast owns the `z-60` layer. | | Form | `./form`, `./field`, `./fieldset`, `./input`, `./textarea`, `./checkbox`, `./checkbox-group`, `./radio`, `./radio-group`, `./number-field`, `./select`, `./slider`, `./switch` | Native form boundary, field semantics, and controls. | | Layout | `./scroll-area` | Custom-styled scrollbar over the host viewport. | diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json index dcc19c6750..5758e3541b 100644 --- a/packages/dify-ui/package.json +++ b/packages/dify-ui/package.json @@ -37,6 +37,10 @@ "types": "./src/combobox/index.tsx", "import": "./src/combobox/index.tsx" }, + "./collapsible": { + "types": "./src/collapsible/index.tsx", + "import": "./src/collapsible/index.tsx" + }, "./context-menu": { "types": "./src/context-menu/index.tsx", "import": "./src/context-menu/index.tsx" diff --git a/packages/dify-ui/src/collapsible/__tests__/index.spec.tsx b/packages/dify-ui/src/collapsible/__tests__/index.spec.tsx new file mode 100644 index 0000000000..0692ffbcc6 --- /dev/null +++ b/packages/dify-ui/src/collapsible/__tests__/index.spec.tsx @@ -0,0 +1,89 @@ +import { render } from 'vitest-browser-react' +import { + CollapsiblePanel, + CollapsibleRoot, + CollapsibleTrigger, +} from '../index' + +const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement + +describe('Collapsible wrappers', () => { + it('renders the Base UI anatomy with an accessible trigger', async () => { + const screen = await render( + + Recovery keys + Panel content + , + ) + + await expect.element(screen.getByTestId('collapsible-root')).toBeInTheDocument() + await expect.element(screen.getByRole('button', { name: 'Recovery keys' })).toHaveAttribute('data-panel-open', '') + await expect.element(screen.getByText('Panel content')).toBeInTheDocument() + }) + + it('toggles open state through the trigger without caller-owned state', async () => { + const screen = await render( + + Toggle section + Hidden content + , + ) + const trigger = screen.getByRole('button', { name: 'Toggle section' }) + + await expect.element(trigger).not.toHaveAttribute('data-panel-open') + + asHTMLElement(trigger.element()).click() + + await expect.element(trigger).toHaveAttribute('data-panel-open', '') + await expect.element(screen.getByText('Hidden content')).toBeInTheDocument() + }) + + it('forwards className to every compound part', async () => { + const screen = await render( + + Custom + Custom panel + , + ) + + await expect.element(screen.getByRole('button', { name: 'Custom' })).toHaveClass('custom-trigger') + expect(screen.getByText('Custom panel').element()).toHaveClass('custom-panel') + expect(screen.container.querySelector('.custom-root')).toBeInTheDocument() + }) + + it('passes Base UI panel props through to the panel', async () => { + const screen = await render( + + Styled trigger + Styled panel + , + ) + + await expect.element(screen.getByRole('button', { name: 'Styled trigger' })).toHaveAttribute('data-panel-open', '') + await expect.element(screen.getByText('Styled panel')).toBeInTheDocument() + }) + + it('applies Dify disclosure defaults without a pressed active style', async () => { + const screen = await render( + + Styled trigger + Styled panel + , + ) + const trigger = screen.getByRole('button', { name: 'Styled trigger' }).element() + const panel = screen.getByText('Styled panel').element() + + expect(trigger).toHaveClass( + 'hover:not-data-disabled:bg-components-panel-on-panel-item-bg-hover', + 'focus-visible:ring-2', + 'focus-visible:ring-state-accent-solid', + 'data-panel-open:text-text-primary', + ) + expect(trigger.className).not.toContain('active:') + expect(panel).toHaveClass( + 'h-(--collapsible-panel-height)', + 'data-ending-style:h-0', + 'data-starting-style:h-0', + ) + }) +}) diff --git a/packages/dify-ui/src/collapsible/index.stories.tsx b/packages/dify-ui/src/collapsible/index.stories.tsx new file mode 100644 index 0000000000..354e61212a --- /dev/null +++ b/packages/dify-ui/src/collapsible/index.stories.tsx @@ -0,0 +1,183 @@ +import type { Meta, StoryObj } from '@storybook/react-vite' +import * as React from 'react' +import { + CollapsiblePanel, + CollapsibleRoot, + CollapsibleTrigger, +} from '.' +import { cn } from '../cn' + +const meta = { + title: 'Base/UI/Collapsible', + component: CollapsibleRoot, + parameters: { + layout: 'centered', + docs: { + description: { + component: 'Unstyled Base UI Collapsible primitive. The examples mirror the official Root, Trigger, and Panel anatomy, with presentation supplied at the call site using Dify UI tokens.', + }, + }, + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +const rootClassName = 'w-72 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg shadow-shadow-shadow-5' +const triggerClassName = 'h-8' +const panelClassName = 'system-sm-regular text-text-secondary' +const contentClassName = 'flex flex-col gap-2 px-2.5 pb-2 pt-1' +const iconClassName = 'i-ri-arrow-right-s-line size-4 shrink-0 text-text-tertiary transition-transform duration-100 ease-out group-data-panel-open:rotate-90 motion-reduce:transition-none' +const sectionRootClassName = 'w-90 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg shadow-shadow-shadow-5' +const sectionTriggerClassName = cn( + triggerClassName, + 'h-auto min-h-12 px-3 py-2', +) +const sectionPanelClassName = panelClassName + +function TriggerIcon() { + return