fix(FN-3847): restore pressed toggle contrast in dashboard views
- Switch pressed toggle foreground styling to use the --accent-text token - Apply the contrast fix to AgentLogViewer and DocumentsView toggle styles - Add regression coverage in AgentLogViewer tests for pressed-toggle contrast behavior - Add a changeset for the @runfusion/fusion patch release Fusion-Task-Id: FN-3847
This commit is contained in:
5
.changeset/fn-3847-agent-log-toggle-contrast.md
Normal file
5
.changeset/fn-3847-agent-log-toggle-contrast.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix low-contrast Markdown/Tools/fullscreen toggle buttons in the agent log header by replacing the undefined `--text-on-accent` CSS variable with the canonical `--accent-text` token. Also fixes the same typo in DocumentsView.
|
||||||
@@ -265,7 +265,7 @@
|
|||||||
|
|
||||||
.agent-log-mode-toggle[aria-pressed="true"] {
|
.agent-log-mode-toggle[aria-pressed="true"] {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: var(--text-on-accent);
|
color: var(--accent-text);
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -555,7 +555,7 @@
|
|||||||
|
|
||||||
.document-mode-toggle[aria-pressed="true"] {
|
.document-mode-toggle[aria-pressed="true"] {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: var(--text-on-accent);
|
color: var(--accent-text);
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1386,6 +1386,30 @@ describe("AgentLogViewer", () => {
|
|||||||
expect(toggle.getAttribute("aria-label")).toBe("Switch to plain text mode");
|
expect(toggle.getAttribute("aria-label")).toBe("Switch to plain text mode");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("FN-3847: uses accent text color for pressed markdown/tools toggles", () => {
|
||||||
|
window.localStorage.setItem("fn-agent-log-markdown", "true");
|
||||||
|
window.localStorage.setItem("fn-agent-log-tool-output", "true");
|
||||||
|
const entries = [makeEntry({ text: "hello" })];
|
||||||
|
const { container } = render(<AgentLogViewer entries={entries} loading={false} />);
|
||||||
|
|
||||||
|
const markdownToggle = container.querySelector("[data-testid='agent-log-mode-toggle']") as HTMLButtonElement;
|
||||||
|
const toolsToggle = container.querySelector("[data-testid='agent-log-tool-output-toggle']") as HTMLButtonElement;
|
||||||
|
const fullscreenToggle = container.querySelector("[data-testid='agent-log-fullscreen-toggle']") as HTMLButtonElement;
|
||||||
|
|
||||||
|
expect(markdownToggle.getAttribute("aria-pressed")).toBe("true");
|
||||||
|
expect(toolsToggle.getAttribute("aria-pressed")).toBe("true");
|
||||||
|
|
||||||
|
const markdownColor = getComputedStyle(markdownToggle).color;
|
||||||
|
const toolsColor = getComputedStyle(toolsToggle).color;
|
||||||
|
const unpressedColor = getComputedStyle(fullscreenToggle).color;
|
||||||
|
|
||||||
|
// Contract: unpressed toggles keep the shared muted button color, pressed toggles switch to accent foreground.
|
||||||
|
expect(markdownColor.length).toBeGreaterThan(0);
|
||||||
|
expect(toolsColor.length).toBeGreaterThan(0);
|
||||||
|
expect(markdownColor).toBe(toolsColor);
|
||||||
|
expect(markdownColor).not.toBe(unpressedColor);
|
||||||
|
});
|
||||||
|
|
||||||
it("switches to plain text mode when clicked", () => {
|
it("switches to plain text mode when clicked", () => {
|
||||||
const entries = [makeEntry({ text: "**bold** and *italic*" })];
|
const entries = [makeEntry({ text: "**bold** and *italic*" })];
|
||||||
const { container } = render(<AgentLogViewer entries={entries} loading={false} />);
|
const { container } = render(<AgentLogViewer entries={entries} loading={false} />);
|
||||||
|
|||||||
Reference in New Issue
Block a user