FN-6092: align task card promote button right
Right-align the task card promote action within its action row. - add auto margin to the promote action so it anchors to the row's right edge - cover the promote action alignment with a TaskCard CSS regression test - add a patch changeset for the published CLI package Files changed: .changeset/fn-6092-promote-button.md | 5 +++++ packages/dashboard/app/components/TaskCard.css | 1 + .../app/components/__tests__/TaskCard.test.tsx | 21 +++++++++++++++++++++ 3 files changed, 27 insertions(+) Fusion-Task-Id: FN-6092 Fusion-Task-Lineage: eacd596e-c810-44fd-b8ec-05c76988649f
This commit is contained in:
5
.changeset/fn-6092-promote-button.md
Normal file
5
.changeset/fn-6092-promote-button.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
Right-align the task-card promote action at the end of the card action row.
|
||||
@@ -800,6 +800,7 @@
|
||||
gap: var(--space-xs);
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
margin-left: auto;
|
||||
height: var(--card-chip-height);
|
||||
min-height: var(--card-chip-height);
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -4366,6 +4366,27 @@ describe("TaskCard mission badge", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("right-aligns the promote action inside the card action row", () => {
|
||||
const onPromote = vi.fn().mockResolvedValue(undefined);
|
||||
const css = loadAllAppCssBaseOnly();
|
||||
|
||||
render(
|
||||
<TaskCard
|
||||
task={makeTask({ id: "FN-781", column: "todo" })}
|
||||
onOpenDetail={noop}
|
||||
addToast={noop}
|
||||
onPromote={onPromote}
|
||||
/>,
|
||||
);
|
||||
|
||||
const promoteButton = screen.getByTestId("card-promote-FN-781");
|
||||
const actionRow = promoteButton.closest(".card-action-row");
|
||||
|
||||
expect(actionRow).not.toBeNull();
|
||||
expect(actionRow?.contains(promoteButton)).toBe(true);
|
||||
expect(css).toMatch(/\.card-promote-action\s*\{[^}]*margin-left:\s*auto;[^}]*\}/);
|
||||
});
|
||||
|
||||
it("calls onPromote without opening the card when promote is clicked", () => {
|
||||
const onPromote = vi.fn().mockResolvedValue(undefined);
|
||||
const onOpenDetail = vi.fn();
|
||||
|
||||
Reference in New Issue
Block a user