Skip to content

Commit 9bba3f0

Browse files
ToolboxAidToolboxAid
committed
PR_26171_038 align idea board note indentation
1 parent d55a668 commit 9bba3f0

4 files changed

Lines changed: 95 additions & 5 deletions

File tree

‎assets/theme-v2/css/tables.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,16 @@ td {
8888
mask-image: url("../images/gfs-chevron-up.svg")
8989
}
9090

91+
.idea-board-notes-child-surface {
92+
margin-left: calc(var(--space-14) * 2);
93+
max-width: calc(100% - (var(--space-14) * 2))
94+
}
95+
96+
.idea-board-notes-child-actions {
97+
padding-left: var(--space-14);
98+
padding-top: var(--space-10)
99+
}
100+
91101
.tool-form-table {
92102
table-layout: fixed;
93103
width: 100%

‎tests/playwright/tools/IdeaBoardTableNotes.spec.mjs‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,43 @@ async function expectButtonLeftAligned(page, buttonSelector, containerSelector)
5353
expect(metrics.buttonLeft).toBeLessThan(metrics.containerLeft + metrics.containerWidth / 2);
5454
}
5555

56+
async function expectExpandedNotesChildIndentation(page, ideaId, expectedInputRows = 0) {
57+
const metrics = await page.locator(`[data-idea-board-expanded-row='${ideaId}']`).evaluate((row, targetIdeaId) => {
58+
const expandedCell = row.querySelector(":scope > td");
59+
const childSurface = row.querySelector(".idea-board-notes-child-surface");
60+
const noteCell = row.querySelector(`[data-idea-board-notes-table='${targetIdeaId}'] tbody tr td:first-child`);
61+
const noteInput = row.querySelector("[data-idea-board-note-input]");
62+
const addNote = row.querySelector(`[data-idea-board-add-note='${targetIdeaId}']`);
63+
const addNoteActions = row.querySelector(".idea-board-notes-child-actions");
64+
const expandedStyles = getComputedStyle(expandedCell);
65+
const noteCellStyles = getComputedStyle(noteCell);
66+
const addNoteActionStyles = getComputedStyle(addNoteActions);
67+
const expandedRect = expandedCell.getBoundingClientRect();
68+
const childRect = childSurface.getBoundingClientRect();
69+
const noteCellRect = noteCell.getBoundingClientRect();
70+
const expandedPadding = Number.parseFloat(expandedStyles.paddingLeft || "0");
71+
const noteCellPadding = Number.parseFloat(noteCellStyles.paddingLeft || "0");
72+
return {
73+
addNoteLeft: addNote.getBoundingClientRect().left,
74+
childSurfaceLeft: childRect.left,
75+
expandedContentLeft: expandedRect.left + expandedPadding,
76+
expectedContentLeft: expandedRect.left + 2 * (expandedPadding + noteCellPadding),
77+
inputLeft: noteInput ? noteInput.getBoundingClientRect().left : null,
78+
inputRows: row.querySelectorAll("[data-idea-board-note-input-row]").length,
79+
noteContentLeft: noteCellRect.left + noteCellPadding,
80+
actionContentLeft: addNoteActions.getBoundingClientRect().left + Number.parseFloat(addNoteActionStyles.paddingLeft || "0"),
81+
};
82+
}, ideaId);
83+
expect(metrics.childSurfaceLeft).toBeGreaterThan(metrics.expandedContentLeft);
84+
expect(Math.abs(metrics.noteContentLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
85+
expect(Math.abs(metrics.addNoteLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
86+
expect(Math.abs(metrics.actionContentLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
87+
expect(metrics.inputRows).toBe(expectedInputRows);
88+
if (expectedInputRows > 0) {
89+
expect(Math.abs(metrics.inputLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
90+
}
91+
}
92+
5693
test("Idea Board uses DB-shaped accordion table ideas and notes", async ({ page }) => {
5794
const server = await startRepoServer();
5895
const previousApiUrl = process.env.GAMEFOUNDRY_API_URL;
@@ -130,7 +167,7 @@ test("Idea Board uses DB-shaped accordion table ideas and notes", async ({ page
130167
await expect(page.locator("[data-idea-board-expanded-row='top-thoughts'] > td > .content-stack")).toHaveCount(0);
131168
await expect(page.locator("[data-idea-board-notes-table='top-thoughts'] th[scope='col']")).toHaveText(["Note", "Actions"]);
132169
await expect(page.locator("[data-idea-board-add-note='top-thoughts']")).toHaveText("Add Note");
133-
await expectButtonLeftAligned(page, "[data-idea-board-add-note='top-thoughts']", "[data-idea-board-expanded-row='top-thoughts'] > td");
170+
await expectExpandedNotesChildIndentation(page, "top-thoughts");
134171
await expect(page.locator("[data-idea-board-notes-table] th[scope='col']", { hasText: "Type" })).toHaveCount(0);
135172
await expect(page.locator("[data-idea-board-notes-table] th[scope='col']", { hasText: "Created By" })).toHaveCount(0);
136173
await expect(page.locator("[data-idea-board-notes-table] th[scope='col']", { hasText: "Created" })).toHaveCount(0);
@@ -141,13 +178,15 @@ test("Idea Board uses DB-shaped accordion table ideas and notes", async ({ page
141178
await expect(systemNote.locator("[data-idea-board-note-action='delete']")).toHaveCount(0);
142179
await systemNote.locator("[data-idea-board-note-action='edit']").click();
143180
await expect(page.locator("[data-idea-board-note-input-row] [data-idea-board-note-action]")).toHaveText(["Save", "Cancel"]);
181+
await expectExpandedNotesChildIndentation(page, "top-thoughts", 1);
144182
await page.locator("[data-idea-board-note-input]").fill("System note can be edited in-place.");
145183
await page.locator("[data-idea-board-note-action='save']").click();
146184
await expect(page.locator("[data-idea-board-notes-table='top-thoughts']")).toContainText("System note can be edited in-place.");
147185
await expect(page.locator("[data-idea-board-system-note] [data-idea-board-note-action='delete']")).toHaveCount(0);
148186

149187
await page.locator("[data-idea-board-add-note='top-thoughts']").click();
150188
await expect(page.locator("[data-idea-board-note-input-row] [data-idea-board-note-action]")).toHaveText(["Save", "Cancel"]);
189+
await expectExpandedNotesChildIndentation(page, "top-thoughts", 1);
151190
await page.locator("[data-idea-board-note-input]").fill("Add a fourth table-shaped note.");
152191
await page.locator("[data-idea-board-note-action='save']").click();
153192
await expect(page.locator("[data-idea-board-notes-table='top-thoughts']")).toContainText("Add a fourth table-shaped note.");

‎tests/playwright/tools/ToolboxRoutePages.spec.mjs‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,43 @@ async function expectButtonLeftAligned(page, buttonSelector, containerSelector)
155155
expect(metrics.buttonLeft).toBeLessThan(metrics.containerLeft + metrics.containerWidth / 2);
156156
}
157157

158+
async function expectExpandedNotesChildIndentation(page, ideaId, expectedInputRows = 0) {
159+
const metrics = await page.locator(`[data-idea-board-expanded-row='${ideaId}']`).evaluate((row, targetIdeaId) => {
160+
const expandedCell = row.querySelector(":scope > td");
161+
const childSurface = row.querySelector(".idea-board-notes-child-surface");
162+
const noteCell = row.querySelector(`[data-idea-board-notes-table='${targetIdeaId}'] tbody tr td:first-child`);
163+
const noteInput = row.querySelector("[data-idea-board-note-input]");
164+
const addNote = row.querySelector(`[data-idea-board-add-note='${targetIdeaId}']`);
165+
const addNoteActions = row.querySelector(".idea-board-notes-child-actions");
166+
const expandedStyles = getComputedStyle(expandedCell);
167+
const noteCellStyles = getComputedStyle(noteCell);
168+
const addNoteActionStyles = getComputedStyle(addNoteActions);
169+
const expandedRect = expandedCell.getBoundingClientRect();
170+
const childRect = childSurface.getBoundingClientRect();
171+
const noteCellRect = noteCell.getBoundingClientRect();
172+
const expandedPadding = Number.parseFloat(expandedStyles.paddingLeft || "0");
173+
const noteCellPadding = Number.parseFloat(noteCellStyles.paddingLeft || "0");
174+
return {
175+
addNoteLeft: addNote.getBoundingClientRect().left,
176+
childSurfaceLeft: childRect.left,
177+
expandedContentLeft: expandedRect.left + expandedPadding,
178+
expectedContentLeft: expandedRect.left + 2 * (expandedPadding + noteCellPadding),
179+
inputLeft: noteInput ? noteInput.getBoundingClientRect().left : null,
180+
inputRows: row.querySelectorAll("[data-idea-board-note-input-row]").length,
181+
noteContentLeft: noteCellRect.left + noteCellPadding,
182+
actionContentLeft: addNoteActions.getBoundingClientRect().left + Number.parseFloat(addNoteActionStyles.paddingLeft || "0"),
183+
};
184+
}, ideaId);
185+
expect(metrics.childSurfaceLeft).toBeGreaterThan(metrics.expandedContentLeft);
186+
expect(Math.abs(metrics.noteContentLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
187+
expect(Math.abs(metrics.addNoteLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
188+
expect(Math.abs(metrics.actionContentLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
189+
expect(metrics.inputRows).toBe(expectedInputRows);
190+
if (expectedInputRows > 0) {
191+
expect(Math.abs(metrics.inputLeft - metrics.expectedContentLeft)).toBeLessThanOrEqual(2);
192+
}
193+
}
194+
158195
test("tools route aliases render toolbox tool pages", async ({ page }) => {
159196
const server = await startRepoServer();
160197
const failedRequests = [];
@@ -289,7 +326,7 @@ test("Idea Board launches from Toolbox with accordion table notes model", async
289326
await expect(page.getByText("Selected")).toHaveCount(0);
290327
await expect(page.locator("[data-idea-board-add-note='top-thoughts']")).toBeVisible();
291328
await expect(page.locator("[data-idea-board-add-note='top-thoughts']")).toHaveText("Add Note");
292-
await expectButtonLeftAligned(page, "[data-idea-board-add-note='top-thoughts']", "[data-idea-board-expanded-row='top-thoughts'] > td");
329+
await expectExpandedNotesChildIndentation(page, "top-thoughts");
293330
await expect(page.locator("[data-idea-board-create-project]")).toBeVisible();
294331
await expect(page.locator("[data-idea-board-create-project]")).toBeDisabled();
295332
await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);

‎toolbox/idea-board/index.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,9 @@ function renderExpandedNotesRow(tbody, record) {
269269
const content = document.createElement("td");
270270
content.colSpan = 6;
271271

272+
const childSurface = document.createElement("div");
273+
childSurface.className = "idea-board-notes-child-surface";
274+
272275
const tableWrapper = document.createElement("div");
273276
tableWrapper.className = "table-wrapper";
274277
const notesTable = document.createElement("table");
@@ -281,7 +284,7 @@ function renderExpandedNotesRow(tbody, record) {
281284
notesBody.dataset.ideaBoardNotesBody = record.ideaId;
282285
notesTable.append(notesBody);
283286
tableWrapper.append(notesTable);
284-
content.append(tableWrapper);
287+
childSurface.append(tableWrapper);
285288

286289
for (const note of notesForIdea(record.ideaId)) {
287290
if (state.editingNoteId === note.noteId) {
@@ -293,11 +296,12 @@ function renderExpandedNotesRow(tbody, record) {
293296
if (state.addingNoteIdeaId === record.ideaId) renderNoteInputRow(notesBody, record.ideaId);
294297

295298
const controls = document.createElement("div");
296-
controls.className = "action-group";
299+
controls.className = "action-group idea-board-notes-child-actions";
297300
const addNote = actionButton("Add Note", "add", "ideaBoardNoteAction", "primary");
298301
addNote.dataset.ideaBoardAddNote = record.ideaId;
299302
controls.append(addNote);
300-
content.append(controls);
303+
childSurface.append(controls);
304+
content.append(childSurface);
301305

302306
row.append(content);
303307
tbody.append(row);

0 commit comments

Comments
 (0)