From 7f633622aaa0c8d791c4a099cb9702611dd733cd Mon Sep 17 00:00:00 2001 From: yyh <92089059+lyzno1@users.noreply.github.com> Date: Thu, 21 May 2026 14:13:11 +0800 Subject: [PATCH] fix(web): use popup-open selectors for trigger styles (#36471) --- packages/dify-ui/AGENTS.md | 2 + packages/dify-ui/README.md | 18 +- packages/dify-ui/src/autocomplete/index.tsx | 1 - .../src/combobox/__tests__/index.spec.tsx | 1 + .../dify-ui/src/combobox/index.stories.tsx | 256 +++++++++--------- packages/dify-ui/src/combobox/index.tsx | 9 +- .../src/select/__tests__/index.spec.tsx | 2 +- packages/dify-ui/src/select/index.tsx | 4 +- packages/dify-ui/src/toast/index.stories.tsx | 43 +-- web/__mocks__/base-ui-popover.tsx | 2 + .../time-range-picker/range-selector.tsx | 5 +- .../app-sidebar/app-sidebar-dropdown.tsx | 2 +- .../app-sidebar/dataset-sidebar-dropdown.tsx | 2 +- .../add-member-or-group-pop.tsx | 2 +- .../dataset-config/context-var/var-picker.tsx | 6 +- web/app/components/app/log/model-info.tsx | 4 +- .../datasets/common/document-picker/index.tsx | 2 +- .../documents/components/operations.tsx | 5 +- .../model-selector/index.tsx | 2 +- .../app-selector/app-picker.tsx | 2 +- .../filter-management/category-filter.tsx | 2 +- .../filter-management/tag-filter.tsx | 2 +- web/app/components/tools/labels/selector.tsx | 2 +- .../__tests__/method-selector.spec.tsx | 5 +- .../tools/workflow-tool/method-selector.tsx | 2 +- .../workflow/header/checklist/index.tsx | 6 +- .../workflow/header/view-history.tsx | 6 +- .../workflow/header/view-workflow-history.tsx | 2 +- .../components/button-style-dropdown.tsx | 2 +- .../tag-management/components/tag-filter.tsx | 2 +- .../components/tag-selector.tsx | 3 +- 31 files changed, 211 insertions(+), 193 deletions(-) diff --git a/packages/dify-ui/AGENTS.md b/packages/dify-ui/AGENTS.md index 6eadd200f0..fddb0a1e98 100644 --- a/packages/dify-ui/AGENTS.md +++ b/packages/dify-ui/AGENTS.md @@ -11,6 +11,8 @@ Shared design tokens, the `cn()` utility, CSS-first Tailwind styles, and headles - Props pattern: `Omit & VariantProps & { /* custom */ }`. - 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. - 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. +- Prefer Base UI data attributes and CSS variables for visual states; do not mirror state in React solely to add classes. +- 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. ## Overlay Primitive Selection: Tooltip vs PreviewCard vs Popover diff --git a/packages/dify-ui/README.md b/packages/dify-ui/README.md index 8592622e6f..396c42e187 100644 --- a/packages/dify-ui/README.md +++ b/packages/dify-ui/README.md @@ -3,6 +3,7 @@ Shared UI primitives, design tokens, CSS-first Tailwind styles, and the `cn()` utility consumed by Dify's `web/` app. The primitives are thin, opinionated wrappers around [Base UI] headless components, styled with `cva` + `cn` and Dify design tokens. +For upstream component docs, start from the [Base UI docs index]. > `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. @@ -39,12 +40,16 @@ Importing from `@langgenius/dify-ui` (no subpath) is intentionally not supported ## Primitives -| Category | Subpath | Notes | -| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -| Overlay | `./alert-dialog`, `./autocomplete`, `./combobox`, `./context-menu`, `./dialog`, `./drawer`, `./dropdown-menu`, `./popover`, `./select`, `./toast`, `./tooltip` | Portalled. See [Overlay & portal contract] below. | -| Form | `./form`, `./field`, `./fieldset`, `./checkbox`, `./checkbox-group`, `./number-field`, `./select`, `./slider`, `./switch` | Native form boundary, field semantics, and controls. | -| Layout | `./scroll-area` | Custom-styled scrollbar over the host viewport. | -| Media | `./avatar`, `./button` | Button exposes `cva` variants. | +| Category | Subpath | Notes | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | +| Actions | `./button` | Design-system CTA primitive with `cva` variants. | +| Feedback | `./meter`, `./toast` | Meter is inline status; Toast owns the `z-60` layer. | +| Form | `./form`, `./field`, `./fieldset`, `./input`, `./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. | +| Media | `./avatar` | Avatar root, image, and fallback primitives. | +| Navigation | `./tabs`, `./toggle-group` | Tabs for panels; ToggleGroup for segmented modes. | +| Overlay / menu | `./alert-dialog`, `./context-menu`, `./dialog`, `./drawer`, `./dropdown-menu`, `./popover`, `./preview-card`, `./tooltip` | Portalled. See [Overlay & portal contract] below. | +| Search / pickers | `./autocomplete`, `./combobox`, `./select` | Search input, searchable picker, and closed picker. | Utilities: @@ -174,5 +179,6 @@ See `[AGENTS.md](./AGENTS.md)` for: [Base UI Fieldset]: https://base-ui.com/react/components/fieldset [Base UI Form]: https://base-ui.com/react/components/form [Base UI Portal]: https://base-ui.com/react/overview/quick-start#portals +[Base UI docs index]: https://base-ui.com/llms.txt [Base UI]: https://base-ui.com/react [Overlay & portal contract]: #overlay--portal-contract diff --git a/packages/dify-ui/src/autocomplete/index.tsx b/packages/dify-ui/src/autocomplete/index.tsx index 4c8893b376..a209fe4716 100644 --- a/packages/dify-ui/src/autocomplete/index.tsx +++ b/packages/dify-ui/src/autocomplete/index.tsx @@ -30,7 +30,6 @@ export type AutocompleteRootHighlightEventDetails = BaseAutocomplete.Root.Highli const autocompletePopupClassName = [ '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', - 'data-side-top:origin-bottom data-side-bottom:origin-top data-side-left:origin-right data-side-right:origin-left', ] const autocompleteListClassName = [ diff --git a/packages/dify-ui/src/combobox/__tests__/index.spec.tsx b/packages/dify-ui/src/combobox/__tests__/index.spec.tsx index 75968c162f..5d5dc31be7 100644 --- a/packages/dify-ui/src/combobox/__tests__/index.spec.tsx +++ b/packages/dify-ui/src/combobox/__tests__/index.spec.tsx @@ -273,6 +273,7 @@ describe('Combobox wrappers', () => { it('should render item text indicator status and empty wrappers with design classes', async () => { const screen = await renderSelectLikeCombobox({ open: true }) + expect(screen.getByRole('option', { name: 'Workflow' }).element().className).not.toContain('mx-1') await expect.element(screen.getByTestId('list').getByText('Workflow')).toHaveClass('system-sm-medium') await expect.element(screen.getByTestId('status')).toHaveClass('text-text-tertiary') await expect.element(screen.getByTestId('empty')).toHaveClass('system-sm-regular') diff --git a/packages/dify-ui/src/combobox/index.stories.tsx b/packages/dify-ui/src/combobox/index.stories.tsx index f2b5f4d4c6..c5ca18f282 100644 --- a/packages/dify-ui/src/combobox/index.stories.tsx +++ b/packages/dify-ui/src/combobox/index.stories.tsx @@ -29,6 +29,11 @@ import { useComboboxFilteredItems, } from '.' import { cn } from '../cn' +import { + FieldDescription, + FieldLabel, + FieldRoot, +} from '../field' type Option = { value: string @@ -44,8 +49,6 @@ type OptionGroup = { } const fieldWidth = 'w-80' -const wideFieldWidth = 'w-[520px]' -const nativeFieldLabelClassName = 'mb-1 block text-text-secondary system-sm-medium' type StoryVirtualizer = Virtualizer @@ -174,11 +177,11 @@ const defaultDataSource = dataSourceOptions[0]! const defaultPopupDataSource = dataSourceOptions[1]! const readOnlyDataSource = dataSourceOptions[2]! const defaultTool = toolGroups[0]!.items[0]! -const defaultReviewers = [reviewerOptions[0]!, reviewerOptions[2]!] +const defaultReviewers = [reviewerOptions[0]!, reviewerOptions[1]!, reviewerOptions[2]!, reviewerOptions[3]!] const defaultTag = tagOptions[2]! const renderOptionItem = (option: Option, index?: number) => ( - + {option.icon && } @@ -204,18 +207,20 @@ const PopupSearchInput = ({ label: string placeholder: string }) => ( - - - - - +
+ + + + + +
) const GroupedToolList = () => { const groups = useComboboxFilteredItems() return ( - + {groups.map((group, groupIndex) => ( {groupIndex > 0 && } @@ -318,7 +323,7 @@ const VirtualizedLongListDemo = () => { - + @@ -351,7 +356,8 @@ const AsyncDirectoryDemo = () => { }, [inputValue]) return ( -
+ + Owner item.value === value.value) ? [value, ...items] : items} value={value} @@ -360,15 +366,12 @@ const AsyncDirectoryDemo = () => { onInputValueChange={setInputValue} autoHighlight > - + + + + + + {loading ? 'Loading directory matches…' : `${items.length} selectable owners`} @@ -377,12 +380,12 @@ const AsyncDirectoryDemo = () => { No owner matches this query -
+ ) } const meta = { - title: 'Base/UI/Combobox', + title: 'Base/Form/Combobox', component: Combobox, parameters: { layout: 'centered', @@ -398,24 +401,46 @@ const meta = { export default meta type Story = StoryObj -export const SelectLikeDefault: Story = { +export const Default: Story = { render: () => (
- - Model provider - - - - - - {renderOptionItem} + + Connect source + + + + + + + + {renderSimpleOptionItem}
), } -export const PopupInputSearchableSelect: Story = { +export const FormField: Story = { + render: () => ( + + Connect source + + + + + + + + + {renderSimpleOptionItem} + + + Type to filter, then choose a remembered data source. + + ), +} + +export const CompactTriggerWithPopupSearch: Story = { render: () => (
@@ -423,9 +448,9 @@ export const PopupInputSearchableSelect: Story = { - + - {renderOptionItem} + {renderOptionItem}
@@ -436,38 +461,20 @@ export const AsyncSearchSingle: Story = { render: () => , } -export const InputGroupSearchable: Story = { - render: () => ( -
- - - - {renderOptionItem} - - -
- ), -} - export const Sizes: Story = { render: () => (
{(['small', 'medium', 'large'] as const).map(size => ( - - - - - - {renderOptionItem} + {`${size[0]!.toUpperCase()}${size.slice(1)}`} + + + + + + + + {renderOptionItem} ))} @@ -483,7 +490,7 @@ export const Grouped: Story = { - + @@ -496,35 +503,34 @@ const MultipleChipsDemo = () => { const [value, setValue] = useState(defaultReviewers) return ( -
+ + Reviewers - + + + + {renderOptionItem} -
+ Selected reviewers wrap inside the input instead of scrolling horizontally. + ) } @@ -538,53 +544,53 @@ export const VirtualizedLongList: Story = { export const EmptyAndStatus: Story = { render: () => ( -
+ + Connector - + + + + + + Search workspace connectors No connectors found {renderSimpleOptionItem} -
+ ), } export const DisabledAndReadOnly: Story = { render: () => (
- - Disabled provider - - - - - - {renderOptionItem} - - - - - - {renderOptionItem} - - + + {renderOptionItem} + + +
), } @@ -594,16 +600,18 @@ const ControlledDemo = () => { return (
- - Default app tag - - - - - - {renderSimpleOptionItem} - - +
+ + Default app tag + + + + + + {renderSimpleOptionItem} + + +
Selected: {' '} diff --git a/packages/dify-ui/src/combobox/index.tsx b/packages/dify-ui/src/combobox/index.tsx index eb43b911c7..d00e193c77 100644 --- a/packages/dify-ui/src/combobox/index.tsx +++ b/packages/dify-ui/src/combobox/index.tsx @@ -31,7 +31,6 @@ export type ComboboxRootHighlightEventDetails = BaseCombobox.Root.HighlightEvent const comboboxPopupClassName = [ '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', - 'data-side-top:origin-bottom data-side-bottom:origin-top data-side-left:origin-right data-side-right:origin-left', ] const comboboxListClassName = [ @@ -40,7 +39,7 @@ const comboboxListClassName = [ ] const comboboxItemClassName = [ - 'mx-1 grid min-h-8 cursor-pointer select-none grid-cols-[1fr_auto] items-center gap-2 rounded-lg px-2 py-1.5 text-text-secondary outline-hidden transition-colors', + 'grid min-h-8 cursor-pointer select-none grid-cols-[1fr_auto] items-center gap-2 rounded-lg px-2 py-1.5 text-text-secondary outline-hidden transition-colors', 'hover:bg-state-base-hover-alt hover:text-text-primary', 'data-highlighted:bg-state-base-hover data-highlighted:text-text-primary', 'data-selected:text-text-primary', @@ -51,7 +50,7 @@ const comboboxItemClassName = [ const comboboxTriggerVariants = cva( [ 'group/combobox-trigger flex w-full min-w-0 items-center border-0 bg-components-input-bg-normal text-left text-components-input-text-filled outline-hidden transition-colors', - 'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-open:bg-state-base-hover-alt', + 'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-popup-open:bg-state-base-hover-alt', 'focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:ring-inset', 'data-placeholder:text-components-input-text-placeholder', 'data-readonly:cursor-default data-readonly:bg-transparent data-readonly:hover:bg-transparent', @@ -101,7 +100,7 @@ export function ComboboxTrigger({ {children} {icon !== false && ( - + {icon ?? )} @@ -115,7 +114,7 @@ const comboboxInputGroupVariants = cva( 'hover:border-components-input-border-hover hover:bg-components-input-bg-hover', 'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs', 'data-focused:border-components-input-border-active data-focused:bg-components-input-bg-active data-focused:shadow-xs', - 'data-open:border-components-input-border-active data-open:bg-components-input-bg-active', + 'data-popup-open:border-components-input-border-active data-popup-open:bg-components-input-bg-active', 'data-disabled:cursor-not-allowed data-disabled:border-transparent data-disabled:bg-components-input-bg-disabled data-disabled:text-components-input-text-filled-disabled', 'data-disabled:hover:border-transparent data-disabled:hover:bg-components-input-bg-disabled', 'data-readonly:shadow-none data-readonly:hover:border-transparent data-readonly:hover:bg-components-input-bg-normal', diff --git a/packages/dify-ui/src/select/__tests__/index.spec.tsx b/packages/dify-ui/src/select/__tests__/index.spec.tsx index ac8be5917e..2fd4e23bdb 100644 --- a/packages/dify-ui/src/select/__tests__/index.spec.tsx +++ b/packages/dify-ui/src/select/__tests__/index.spec.tsx @@ -174,7 +174,7 @@ describe('Select wrappers', () => { it('should include open state feedback classes', async () => { const screen = await renderOpenSelect() - expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toContain('data-open:bg-state-base-hover-alt') + expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toContain('data-popup-open:bg-state-base-hover-alt') }) }) diff --git a/packages/dify-ui/src/select/index.tsx b/packages/dify-ui/src/select/index.tsx index 676fcae6b4..0e2c53c3dc 100644 --- a/packages/dify-ui/src/select/index.tsx +++ b/packages/dify-ui/src/select/index.tsx @@ -21,7 +21,7 @@ export const SelectGroup = BaseSelect.Group const selectTriggerVariants = cva( [ 'group flex w-full items-center border-0 bg-components-input-bg-normal text-left text-components-input-text-filled outline-hidden', - 'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-open:bg-state-base-hover-alt', + 'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-popup-open:bg-state-base-hover-alt', 'data-placeholder:text-components-input-text-placeholder', 'data-readonly:cursor-default data-readonly:bg-transparent data-readonly:hover:bg-transparent', 'data-disabled:cursor-not-allowed data-disabled:bg-components-input-bg-disabled data-disabled:text-components-input-text-filled-disabled data-disabled:hover:bg-components-input-bg-disabled', @@ -60,7 +60,7 @@ export function SelectTrigger({ {children} - + diff --git a/packages/dify-ui/src/toast/index.stories.tsx b/packages/dify-ui/src/toast/index.stories.tsx index cbfb944f19..772d0c456c 100644 --- a/packages/dify-ui/src/toast/index.stories.tsx +++ b/packages/dify-ui/src/toast/index.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite' import type { ReactNode } from 'react' -import { toast } from '.' +import { toast, ToastHost } from '.' const buttonClassName = 'rounded-lg border border-divider-subtle bg-components-button-secondary-bg px-3 py-2 text-sm text-text-secondary shadow-xs transition-colors hover:bg-state-base-hover' const cardClassName = 'flex min-h-[220px] flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6 shadow-sm shadow-shadow-shadow-3' @@ -272,28 +272,31 @@ const UpdateExamples = () => { const ToastDocsDemo = () => { return ( -
-
-
-
- Base UI toast docs + <> + +
+
+
+
+ Base UI toast docs +
+

+ Shared stacked toast examples +

+

+ Each example card below triggers the same shared toast viewport in the top-right corner, so you can review stacking, state transitions, actions, and tone variants the same way the official Base UI documentation demonstrates toast behavior. +

+
+
+ + + + +
-

- Shared stacked toast examples -

-

- Each example card below triggers the same shared toast viewport in the top-right corner, so you can review stacking, state transitions, actions, and tone variants the same way the official Base UI documentation demonstrates toast behavior. -

-
-
- - - - -
-
+ ) } diff --git a/web/__mocks__/base-ui-popover.tsx b/web/__mocks__/base-ui-popover.tsx index c4d7a23827..0874aedc93 100644 --- a/web/__mocks__/base-ui-popover.tsx +++ b/web/__mocks__/base-ui-popover.tsx @@ -99,6 +99,7 @@ export const PopoverTrigger = ({ ...childProps, 'data-testid': childProps['data-testid'] ?? triggerProps['data-testid'] ?? 'popover-trigger', 'data-popover-trigger': 'true', + 'data-popup-open': open ? '' : undefined, 'onClick': (event: React.MouseEvent) => { childProps.onClick?.(event) onClick?.(event) @@ -113,6 +114,7 @@ export const PopoverTrigger = ({
{ onClick?.(event) if (event.defaultPrevented) diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx index c028a184ed..c257033774 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx @@ -2,7 +2,6 @@ import type { FC } from 'react' import type { PeriodParamsWithTimeRange, TimeRange } from '@/app/components/app/overview/app-chart' import type { I18nKeysByPrefix } from '@/types/i18n' -import { cn } from '@langgenius/dify-ui/cn' import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select' import { RiArrowDownSLine } from '@remixicon/react' import dayjs from 'dayjs' @@ -74,9 +73,9 @@ const RangeSelector: FC = ({ -
+
{isCustomRange ? t('filter.period.custom', { ns: 'appLog' }) : selectedItem?.name}
- +
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx index a46e07e5fe..e3ed938987 100644 --- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx +++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx @@ -49,7 +49,7 @@ const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => { aria-label={t('operation.more', { ns: 'common' })} className={cn( 'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover', - open && 'bg-background-default-hover', + 'data-popup-open:bg-background-default-hover', )} >
)} diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx index 8e4224aadc..0344c706b3 100644 --- a/web/app/components/app/log/model-info.tsx +++ b/web/app/components/app/log/model-info.tsx @@ -71,10 +71,10 @@ const ModelInfo: FC = ({
+ )} /> diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx index 8c8649e930..0e3dfa5187 100644 --- a/web/app/components/workflow/header/view-workflow-history.tsx +++ b/web/app/components/workflow/header/view-workflow-history.tsx @@ -157,7 +157,7 @@ const ViewWorkflowHistory = () => { aria-label={t('changeHistory.title', { ns: 'workflow' })} disabled={nodesReadOnly} className={ - cn('box-border inline-flex size-8 max-h-8 min-h-8 max-w-8 min-w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', open && 'bg-state-accent-active text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled') + cn('box-border inline-flex size-8 max-h-8 min-h-8 max-w-8 min-w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary data-popup-open:bg-state-accent-active data-popup-open:text-text-accent', nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled') } onClick={() => { if (nodesReadOnly) diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx index 47c7eb04e4..b3149f6b66 100644 --- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx +++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx @@ -55,7 +55,7 @@ const ButtonStyleDropdown: FC = ({ > +
diff --git a/web/features/tag-management/components/tag-filter.tsx b/web/features/tag-management/components/tag-filter.tsx index 9a734965c4..4402d118c6 100644 --- a/web/features/tag-management/components/tag-filter.tsx +++ b/web/features/tag-management/components/tag-filter.tsx @@ -74,7 +74,7 @@ export const TagFilter = ({ aria-label={triggerLabel} icon={false} className={cn( - 'flex h-8 max-w-60 min-w-28 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 py-0 text-left select-none hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal data-open:bg-components-input-bg-normal', + 'flex h-8 max-w-60 min-w-28 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 py-0 text-left select-none hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal data-popup-open:bg-components-input-bg-normal', !!value.length && 'pr-6 shadow-xs', )} > diff --git a/web/features/tag-management/components/tag-selector.tsx b/web/features/tag-management/components/tag-selector.tsx index 70dae241d5..ffc166af0e 100644 --- a/web/features/tag-management/components/tag-selector.tsx +++ b/web/features/tag-management/components/tag-selector.tsx @@ -214,8 +214,7 @@ export const TagSelector = ({