FN-6129: right-align promote action on task cards
Keep the promote action pinned to the right edge of task card action rows. - add `margin-left: auto` to the promote action send-back button styling - preserve right alignment for the mobile action row breakpoint - add TaskCard coverage for solo and multi-action mobile layouts Files changed: packages/dashboard/app/components/TaskCard.css | 5 +++ packages/dashboard/app/components/__tests__/TaskCard.test.tsx | 40 ++++++++++++++++++++++ 2 files changed, 45 insertions(+) Fusion-Task-Id: FN-6129 Fusion-Task-Lineage: 70aed0c1-b007-4a71-9755-04535b630888
This commit is contained in:
@@ -1299,6 +1299,7 @@
|
||||
.card-promote-action.card-send-back-btn {
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
margin-left: auto;
|
||||
border: var(--btn-border-width) solid color-mix(in srgb, var(--text-muted) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--text-muted) 12%, transparent);
|
||||
color: var(--text);
|
||||
@@ -1435,6 +1436,10 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-promote-action.card-send-back-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Card: compact progress bar on narrow cards */
|
||||
.card-progress {
|
||||
gap: var(--space-xs);
|
||||
|
||||
@@ -4385,6 +4385,46 @@ describe("TaskCard mission badge", () => {
|
||||
expect(actionRow).not.toBeNull();
|
||||
expect(actionRow?.contains(promoteButton)).toBe(true);
|
||||
expect(css).toMatch(/\.card-promote-action\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
|
||||
expect(css).toMatch(/\.card-promote-action\.card-send-back-btn\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
|
||||
});
|
||||
|
||||
it("keeps the promote action right-aligned in the mobile card action row", () => {
|
||||
const css = loadAllAppCss();
|
||||
const onPromote = vi.fn().mockResolvedValue(undefined);
|
||||
|
||||
const soloRender = render(
|
||||
<TaskCard
|
||||
task={makeTask({ id: "FN-782", column: "todo" })}
|
||||
onOpenDetail={noop}
|
||||
addToast={noop}
|
||||
onPromote={onPromote}
|
||||
/>,
|
||||
);
|
||||
|
||||
const soloPromoteButton = screen.getByTestId("card-promote-FN-782");
|
||||
expect(soloPromoteButton.closest(".card-action-row")?.children).toHaveLength(1);
|
||||
expect(soloPromoteButton).toHaveClass("card-promote-action", "card-send-back-btn");
|
||||
soloRender.unmount();
|
||||
|
||||
render(
|
||||
<TaskCard
|
||||
task={makeTask({ id: "FN-783", column: "in-review", paused: false, userPaused: false, prInfo: undefined as any })}
|
||||
onOpenDetail={noop}
|
||||
addToast={noop}
|
||||
onPromote={onPromote}
|
||||
prAuthAvailable={true}
|
||||
autoMergeEnabled={false}
|
||||
/>,
|
||||
);
|
||||
|
||||
const createPrButton = screen.getByRole("button", { name: "Create pull request" });
|
||||
const promoteButton = screen.getByTestId("card-promote-FN-783");
|
||||
const actionRow = promoteButton.closest(".card-action-row");
|
||||
|
||||
expect(actionRow).not.toBeNull();
|
||||
expect(actionRow?.contains(createPrButton)).toBe(true);
|
||||
expect(createPrButton.compareDocumentPosition(promoteButton) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
|
||||
expect(css).toMatch(/@media[^{}]*\(max-width:\s*768px\)[^{]*\{[\s\S]*?\.card-promote-action\.card-send-back-btn\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
|
||||
});
|
||||
|
||||
it("calls onPromote without opening the card when promote is clicked", () => {
|
||||
|
||||
Reference in New Issue
Block a user