Compare commits

...
Author SHA1 Message Date
Brendan Allan fcac46f522 fix(ui): use ghost comment cancel button 2026-09-02 14:24:33 +08:00
3 changed files with 8 additions and 2 deletions
@@ -0,0 +1,6 @@
import { expect, story } from "../../storybook/playwright/story"
story("renders the line comment cancel action as a ghost button", async ({ mount }) => {
const root = await mount("ui-line-comment--editor-filled")
await expect(root.getByRole("button", { name: "Cancel" })).toHaveAttribute("data-variant", "ghost")
})
@@ -3,7 +3,7 @@ import { createSignal } from "solid-js"
import { LineCommentEditor, LineComment, LineCommentOverflowIcon } from "./line-comment"
const docs = `### Overview
Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`Button\` neutral + contrast actions).
Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`Button\` ghost + contrast actions).
### Display
- \`LineComment\`: column stack (body + meta) beside optional \`actions\` (overflow).
@@ -294,7 +294,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
<div data-slot="line-comment-v2-footer">
<div data-slot="line-comment-v2-footer-meta">{local.selection}</div>
<div data-slot="line-comment-v2-footer-actions">
<Button type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
<Button type="button" size="normal" variant="ghost" onClick={() => local.onCancel()}>
{local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
</Button>
<Button type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>