Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7f63362

Browse files
lyzno1lyzno1
authored
fix(web): use popup-open selectors for trigger styles (#36471)
1 parent 66f5ab4 commit 7f63362

31 files changed

Lines changed: 211 additions & 193 deletions

File tree

‎packages/dify-ui/AGENTS.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ Shared design tokens, the `cn()` utility, CSS-first Tailwind styles, and headles
1111
- Props pattern: `Omit<BaseXxx.Root.Props, 'className' | ...> & VariantProps<typeof xxxVariants> & { /* custom */ }`.
1212
- Use plain `Omit<...>` only for non-union Base UI props. When a prop changes the valid shape of related props (for example `value` / `defaultValue`, `multiple` / `value`, or `clearable` / `onChange`), model that relationship with an explicit discriminated union or a distributive helper instead of flattening the props.
1313
- When a component accepts a prop typed from a shared internal module, `export type` it from that component so consumers import it from the component subpath.
14+
- Prefer Base UI data attributes and CSS variables for visual states; do not mirror state in React solely to add classes.
15+
- When a Base UI API or selector contract is unclear, read the docs linked from `README.md` and the local `@base-ui/react` `.d.ts` files before coding.
1416

1517
## Overlay Primitive Selection: Tooltip vs PreviewCard vs Popover
1618

‎packages/dify-ui/README.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
Shared UI primitives, design tokens, CSS-first Tailwind styles, and the `cn()` utility consumed by Dify's `web/` app.
44

55
The primitives are thin, opinionated wrappers around [Base UI] headless components, styled with `cva` + `cn` and Dify design tokens.
6+
For upstream component docs, start from the [Base UI docs index].
67

78
> `private: true` — this package is consumed by `web/` via the pnpm workspace and is not published to npm. Treat the API as internal to Dify, but stable within the workspace.
89
@@ -39,12 +40,16 @@ Importing from `@langgenius/dify-ui` (no subpath) is intentionally not supported
3940
4041
## Primitives
4142
42-
| Category | Subpath | Notes |
43-
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
44-
| Overlay | `./alert-dialog`, `./autocomplete`, `./combobox`, `./context-menu`, `./dialog`, `./drawer`, `./dropdown-menu`, `./popover`, `./select`, `./toast`, `./tooltip` | Portalled. See [Overlay & portal contract] below. |
45-
| Form | `./form`, `./field`, `./fieldset`, `./checkbox`, `./checkbox-group`, `./number-field`, `./select`, `./slider`, `./switch` | Native form boundary, field semantics, and controls. |
46-
| Layout | `./scroll-area` | Custom-styled scrollbar over the host viewport. |
47-
| Media | `./avatar`, `./button` | Button exposes `cva` variants. |
43+
| Category | Subpath | Notes |
44+
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
45+
| Actions | `./button` | Design-system CTA primitive with `cva` variants. |
46+
| Feedback | `./meter`, `./toast` | Meter is inline status; Toast owns the `z-60` layer. |
47+
| Form | `./form`, `./field`, `./fieldset`, `./input`, `./checkbox`, `./checkbox-group`, `./radio`, `./radio-group`, `./number-field`, `./select`, `./slider`, `./switch` | Native form boundary, field semantics, and controls. |
48+
| Layout | `./scroll-area` | Custom-styled scrollbar over the host viewport. |
49+
| Media | `./avatar` | Avatar root, image, and fallback primitives. |
50+
| Navigation | `./tabs`, `./toggle-group` | Tabs for panels; ToggleGroup for segmented modes. |
51+
| Overlay / menu | `./alert-dialog`, `./context-menu`, `./dialog`, `./drawer`, `./dropdown-menu`, `./popover`, `./preview-card`, `./tooltip` | Portalled. See [Overlay & portal contract] below. |
52+
| Search / pickers | `./autocomplete`, `./combobox`, `./select` | Search input, searchable picker, and closed picker. |
4853
4954
Utilities:
5055
@@ -174,5 +179,6 @@ See `[AGENTS.md](./AGENTS.md)` for:
174179
[Base UI Fieldset]: https://base-ui.com/react/components/fieldset
175180
[Base UI Form]: https://base-ui.com/react/components/form
176181
[Base UI Portal]: https://base-ui.com/react/overview/quick-start#portals
182+
[Base UI docs index]: https://base-ui.com/llms.txt
177183
[Base UI]: https://base-ui.com/react
178184
[Overlay & portal contract]: #overlay--portal-contract

‎packages/dify-ui/src/autocomplete/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export type AutocompleteRootHighlightEventDetails = BaseAutocomplete.Root.Highli
3030

3131
const autocompletePopupClassName = [
3232
'w-(--anchor-width) max-w-[min(28rem,var(--available-width))] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg outline-hidden',
33-
'data-side-top:origin-bottom data-side-bottom:origin-top data-side-left:origin-right data-side-right:origin-left',
3433
]
3534

3635
const autocompleteListClassName = [

‎packages/dify-ui/src/combobox/__tests__/index.spec.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@ describe('Combobox wrappers', () => {
273273
it('should render item text indicator status and empty wrappers with design classes', async () => {
274274
const screen = await renderSelectLikeCombobox({ open: true })
275275

276+
expect(screen.getByRole('option', { name: 'Workflow' }).element().className).not.toContain('mx-1')
276277
await expect.element(screen.getByTestId('list').getByText('Workflow')).toHaveClass('system-sm-medium')
277278
await expect.element(screen.getByTestId('status')).toHaveClass('text-text-tertiary')
278279
await expect.element(screen.getByTestId('empty')).toHaveClass('system-sm-regular')

0 commit comments

Comments
 (0)