diff --git a/packages/app/component-tests/line-comment.spec.ts b/packages/app/component-tests/line-comment.spec.ts new file mode 100644 index 00000000000..de1e7a59ae4 --- /dev/null +++ b/packages/app/component-tests/line-comment.spec.ts @@ -0,0 +1,13 @@ +import { expect, story } from "../../storybook/playwright/story" + +story("keeps the comment options button pressed while its menu is open", async ({ mount, page }) => { + const component = await mount("ui-line-comment--display") + const trigger = component.locator('[data-slot="line-comment-v2-overflow"]') + const rest = await trigger.evaluate((element) => getComputedStyle(element).backgroundColor) + + await trigger.click() + + await expect(page.getByRole("menu")).toBeVisible() + await expect(trigger).toHaveAttribute("data-expanded", "") + await expect(trigger).not.toHaveCSS("background-color", rest) +}) diff --git a/packages/ui/src/data-display/line-comment/line-comment.css b/packages/ui/src/data-display/line-comment/line-comment.css index 6a12d100f05..a496a6e09d5 100644 --- a/packages/ui/src/data-display/line-comment/line-comment.css +++ b/packages/ui/src/data-display/line-comment/line-comment.css @@ -103,7 +103,7 @@ background-color: var(--v2-overlay-simple-overlay-hover); } -[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"]) { +[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"], [data-expanded]) { background-color: var(--v2-overlay-simple-overlay-pressed); } diff --git a/packages/ui/src/data-display/line-comment/line-comment.stories.tsx b/packages/ui/src/data-display/line-comment/line-comment.stories.tsx index 5d3683bf212..2340d56c69e 100644 --- a/packages/ui/src/data-display/line-comment/line-comment.stories.tsx +++ b/packages/ui/src/data-display/line-comment/line-comment.stories.tsx @@ -1,6 +1,7 @@ // @ts-nocheck import { createSignal } from "solid-js" import { LineCommentEditor, LineComment, LineCommentOverflowIcon } from "./line-comment" +import { Menu } from "../../navigation/menu/menu" const docs = `### Overview Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`Button\` ghost + contrast actions). @@ -35,9 +36,17 @@ export const Display = { comment="Consider guarding against empty arrays." selection="Comment on line 40" actions={ - +
} />