diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts index 153f534e1ea..d911c97c3da 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.test.ts @@ -7,11 +7,6 @@ const stubs = ['N8nSpinner', 'N8nIcon']; describe('components', () => { describe('N8nButton', () => { - it('maps the legacy subtle variant to brand', () => { - const wrapper = render(N8nButton, { props: { variant: 'subtle' }, global: { stubs } }); - expect(wrapper.getByRole('button').className).toContain('brand'); - }); - describe('rendering', () => { it('should render correctly with default props', () => { const wrapper = render(N8nButton, { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue index 2d2549b6b45..715c86bfe1c 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue @@ -27,14 +27,6 @@ const effectiveSize = computed(() => { return props.size; }); -// Map legacy variant values to current ones -const effectiveVariant = computed(() => { - if (props.variant === 'subtle') return 'brand'; - if (props.variant === 'highlight') return 'ghost'; - if (props.variant === 'highlight-fill') return 'ghost'; - return props.variant; -}); - const computedIconSize = computed((): IconSize | undefined => { if (props.iconSize) return props.iconSize; if (effectiveSize.value === 'xsmall') return 'xsmall'; @@ -57,7 +49,7 @@ const classes = computed(() => cn( 'button', $style.button, - $style[effectiveVariant.value], + $style[props.variant], $style[effectiveSize.value], props.loading && $style.loading, props.iconOnly && $style.iconOnly, diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue index 343555477eb..03231288b44 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.vue @@ -373,7 +373,7 @@ onBeforeUnmount(() => { {{ emptyText }} { return props.size; }); -const effectiveVariant = computed(() => { - if (props.variant === 'highlight') return 'ghost'; - if (props.variant === 'highlight-fill') return 'ghost'; - return props.variant; -}); - const computedIconSize = computed((): IconSize => { if (effectiveSize.value === 'xsmall') return 'xsmall'; return effectiveSize.value; @@ -53,7 +47,7 @@ const classes = computed(() => cn( 'button', $style.toggle, - $style[effectiveVariant.value], + $style[props.variant], $style[effectiveSize.value], $style.iconOnly, props.disabled && $style.disabled, diff --git a/packages/frontend/@n8n/design-system/src/types/button.ts b/packages/frontend/@n8n/design-system/src/types/button.ts index 4fe67c48fd7..5f3faf6e703 100644 --- a/packages/frontend/@n8n/design-system/src/types/button.ts +++ b/packages/frontend/@n8n/design-system/src/types/button.ts @@ -6,15 +6,12 @@ import { type IconName } from '../components/N8nIcon/icons'; const BUTTON_VARIANT = ['solid', 'brand', 'ghost', 'outline', 'destructive', 'success'] as const; export type ButtonVariant = (typeof BUTTON_VARIANT)[number]; -/** @deprecated Use 'brand' for 'subtle'. Use 'ghost' for 'highlight' or 'highlight-fill'. */ -export type LegacyButtonVariant = 'highlight' | 'highlight-fill' | 'subtle'; - const BUTTON_SIZE = ['mini', 'xmini', 'small', 'medium', 'large', 'xlarge', 'xsmall'] as const; export type ButtonSize = (typeof BUTTON_SIZE)[number]; export interface ButtonProps { /** Determines the visual style of the button */ - variant?: ButtonVariant | LegacyButtonVariant; + variant?: ButtonVariant; /** Determines the size of the button */ size?: ButtonSize; /** If passed, the button will be rendered as a link */ diff --git a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChatMessageList.test.ts b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChatMessageList.test.ts index bdcebacf19c..027dc0ab6c4 100644 --- a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChatMessageList.test.ts +++ b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentChatMessageList.test.ts @@ -170,7 +170,7 @@ describe('AgentChatMessageList', () => { }); const callout = wrapper.get('[data-testid="agent-chat-retry-error"]'); const retry = callout.get('[data-testid="agent-chat-retry"]'); - expect(wrapper.findComponent({ name: 'N8nButton' }).props('variant')).toBe('subtle'); + expect(wrapper.findComponent({ name: 'N8nButton' }).props('variant')).toBe('outline'); await retry.trigger('click'); expect(wrapper.emitted('retry')).toBeUndefined(); await wrapper.setProps({ retryDisabled: false }); diff --git a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentEvalChecksPanel.test.ts b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentEvalChecksPanel.test.ts index 47933e0285c..57bfec54d5a 100644 --- a/packages/frontend/editor-ui/src/features/agents/__tests__/AgentEvalChecksPanel.test.ts +++ b/packages/frontend/editor-ui/src/features/agents/__tests__/AgentEvalChecksPanel.test.ts @@ -443,6 +443,28 @@ describe('AgentEvalChecksPanel', () => { expect(getAllByTestId(/agent-eval-check-/)).toHaveLength(4); }); + it('marks the selected status filter', async () => { + const user = userEvent.setup(); + const { getByTestId } = renderFour(); + + const all = getByTestId('agent-eval-checks-filter-all'); + const pass = getByTestId('agent-eval-checks-filter-pass'); + + expect(all).toHaveAttribute('aria-pressed', 'true'); + expect(all.className).toContain('brand'); + expect(pass).toHaveAttribute('aria-pressed', 'false'); + expect(pass.className).toContain('outline'); + expect(pass.className).not.toContain('brand'); + + await user.click(pass); + + expect(pass).toHaveAttribute('aria-pressed', 'true'); + expect(pass.className).toContain('brand'); + expect(all).toHaveAttribute('aria-pressed', 'false'); + expect(all.className).toContain('outline'); + expect(all.className).not.toContain('brand'); + }); + it('filters down to only passing rows', async () => { const user = userEvent.setup(); const { getAllByTestId, getByTestId } = renderFour(); @@ -1447,6 +1469,7 @@ describe('AgentEvalChecksPanel', () => { await vi.waitFor(() => expect(queryByTestId('agent-eval-checks-filter-needs-work')).not.toBeInTheDocument(), ); + expect(getByTestId('agent-eval-checks-filter-all')).toHaveAttribute('aria-pressed', 'true'); expect(getAllByTestId(/agent-eval-check-/)).toHaveLength(2); }); }); diff --git a/packages/frontend/editor-ui/src/features/agents/components/AgentChatRetryError.vue b/packages/frontend/editor-ui/src/features/agents/components/AgentChatRetryError.vue index 7bda75e3cc9..e5049be14a0 100644 --- a/packages/frontend/editor-ui/src/features/agents/components/AgentChatRetryError.vue +++ b/packages/frontend/editor-ui/src/features/agents/components/AgentChatRetryError.vue @@ -20,7 +20,7 @@ const i18n = useI18n();