Match Status Clear button styling to Preview Generator V2 header action pattern - PR_26126_074-status-clear-style-match

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.txt

@@ -18,7 +18,7 @@ Exercised tool entry points detected:
 (0%) Workspace Manager - not exercised by this Playwright run
 
 Changed runtime JS files covered:
-(100%) tools/preview-generator-v2/controls/StatusLogControl.js - executed lines 22/22; executed functions 6/6
+(86%) tools/templates-v2/js/controls/StatusLogControl.js - executed lines 24/24; executed functions 6/7
 
 Files with executed line/function counts where available:
 (2%) src/engine/input/ActionInputService.js - executed lines 397/397; executed functions 1/51
@@ -102,7 +102,7 @@ Files with executed line/function counts where available:
 (77%) src/engine/core/Engine.js - executed lines 323/323; executed functions 10/13
 (80%) src/engine/theme/accordionV2/accordionV2.js - executed lines 26/26; executed functions 4/5
 (82%) samples/shared/sampleDetailPageEnhancement.js - executed lines 471/471; executed functions 41/50
-(86%) tools/templates-v2/js/controls/StatusLogControl.js - executed lines 21/21; executed functions 6/7
+(86%) tools/templates-v2/js/controls/StatusLogControl.js - executed lines 24/24; executed functions 6/7
 (87%) tools/common/PaletteSortService.js - executed lines 103/103; executed functions 13/15
 (88%) tools/templates-v2/js/controls/SourceInputControl.js - executed lines 33/33; executed functions 7/8
 (90%) tools/preview-generator-v2/PreviewGeneratorV2App.js - executed lines 539/539; executed functions 52/58
@@ -160,4 +160,4 @@ Uncovered or low-coverage changed JS files:
 
 Changed JS files considered:
 (0%) tests/playwright/PreviewGeneratorV2Baseline.spec.mjs - changed JS file not collected as browser runtime coverage
-(100%) tools/preview-generator-v2/controls/StatusLogControl.js - changed JS file with browser V8 coverage
+(86%) tools/templates-v2/js/controls/StatusLogControl.js - changed JS file with browser V8 coverage

docs/dev/reports/status_clear_preview_generator_pattern.txt

@@ -0,0 +1,43 @@
+PR_26126_073-status-clear-placement-match-preview-generator
+
+Scope:
+- Tool Template V2 Status Clear placement and behavior.
+- Preview Generator V2 was used as the reference pattern.
+
+Preview Generator V2 pattern reviewed:
+- `tools/preview-generator-v2/index.html`
+- Working Status pattern:
+  - `section.accordion-v2`
+  - `.accordion-v2__header` contains the `Status` title
+  - header action container contains `Clear`
+  - accordion icon remains in the same header action row
+  - content contains only the status/log output
+
+Changes:
+- Applied the same Status header/action pattern to `tools/templates-v2/index.html`.
+- Moved `#clearStatusButton` out of `#statusLogContent` and into the Status `.accordion-v2__header`.
+- Added `tool-starter__status-header-actions` and `tool-starter__status-clear-button` styling to keep Clear on the same visual row as the Status title and accordion icon.
+- Updated `tools/templates-v2/js/controls/StatusLogControl.js` so Clear stops event propagation before clearing the log.
+- Extended workspace Playwright assertions for Tool Template V2 to verify:
+  - Clear is physically inside the Status header DOM
+  - Clear is not inside the Status content panel
+  - Clear aligns on the same header row as the Status title
+  - Clear clears the textarea while the accordion is open
+  - Clear clears the textarea without toggling while the accordion is collapsed
+  - Status still expands and collapses from the normal Status title/header click
+
+Playwright impacted: Yes
+- This PR changes Tool Template V2 UI control placement and click behavior.
+- `npm run test:workspace-v2` passed.
+
+Validation:
+- `node --check tests/playwright/PreviewGeneratorV2Baseline.spec.mjs` passed.
+- `node --check tools/templates-v2/js/controls/StatusLogControl.js` passed.
+- `npm run test:workspace-v2` passed: 7 tests passed.
+- `git diff --check` passed with line-ending warnings only.
+
+Manual test notes:
+- Open Tool Template V2.
+- Confirm the Status header row shows `Status`, `Clear`, and the accordion icon on the same row.
+- Click Clear and confirm the status textarea empties without changing accordion state.
+- Click the Status title/header and confirm the Status section still collapses and expands.

docs/dev/reports/status_clear_style_match.txt

@@ -0,0 +1,44 @@
+PR_26126_074-status-clear-style-match
+
+Scope:
+- Tool Template V2 Status Clear button styling only.
+- Existing Status header placement and Clear behavior were preserved.
+
+Preview Generator V2 styling reviewed:
+- `tools/preview-generator-v2/index.html`
+- `tools/preview-generator-v2/previewGeneratorV2.css`
+- Preview Generator V2 keeps Clear in the Status header action row with:
+  - `preview-generator-v2__status-header-actions`
+  - `preview-generator-v2__status-clear-button`
+  - compact browser-style button padding
+  - 10px rounded border inherited from the Palette Manager surface button pattern
+
+Changes:
+- Updated `tools/templates-v2/styles/toolStarter.css` so `#clearStatusButton` visually follows the Preview Generator V2 header action button pattern:
+  - compact `2px 6px` padding
+  - 10px border radius
+  - same status header action spacing
+  - browser-style ButtonFace/ButtonText colors instead of the dark template action-button treatment
+  - unchanged hover styling pattern
+- Added Playwright style assertions for Tool Template V2 Status Clear:
+  - Clear remains inside the Status header
+  - Clear remains on the Status header row
+  - Clear uses the compact Preview-style border radius and padding
+  - Clear still clears the textarea
+  - Clear still does not toggle the accordion
+
+Playwright impacted: Yes
+- This PR changes a visible UI control style and validates the existing Status Clear behavior.
+- `npm run test:workspace-v2` passed.
+
+Validation:
+- `node --check tests/playwright/PreviewGeneratorV2Baseline.spec.mjs` passed.
+- `node --check tools/templates-v2/js/controls/StatusLogControl.js` passed.
+- `npm run test:workspace-v2` passed: 7 tests passed.
+- `git diff --check` passed.
+
+Manual test notes:
+- Open Tool Template V2.
+- Confirm the Status Clear button remains in the Status header row.
+- Confirm Clear visually matches the Preview Generator V2 compact header action button style.
+- Click Clear and confirm the status textarea empties without collapsing or expanding Status.

tests/playwright/PreviewGeneratorV2Baseline.spec.mjs

@@ -591,6 +591,38 @@ test.describe("Preview Generator V2 baseline", () => {
       await expect(page.locator(".tool-starter__panel--right #inspectorContent")).toBeVisible();
       await expect(page.locator(".tool-starter__panel--right #statusLogContent")).toBeVisible();
       await expect(page.locator(".tool-starter__panel--right .accordion-v2").last()).toContainText("Status");
+      const templateStatusHeader = page.locator('.tool-starter__panel--right .accordion-v2__header[aria-controls="statusLogContent"]');
+      const templateStatusContent = page.locator("#statusLogContent");
+      const templateStatusTitle = templateStatusHeader.locator("span").first();
+      await expect(templateStatusHeader.locator("#clearStatusButton")).toBeVisible();
+      await expect(templateStatusContent.locator("#clearStatusButton")).toHaveCount(0);
+      const clearAlignment = await page.evaluate(() => {
+        const header = document.querySelector('.tool-starter__panel--right .accordion-v2__header[aria-controls="statusLogContent"]');
+        const clear = document.getElementById("clearStatusButton");
+        const headerRect = header.getBoundingClientRect();
+        const clearRect = clear.getBoundingClientRect();
+        return {
+          clearInsideHeader: header.contains(clear),
+          headerCenterY: headerRect.top + headerRect.height / 2,
+          clearCenterY: clearRect.top + clearRect.height / 2,
+          headerHeight: headerRect.height
+        };
+      });
+      expect(clearAlignment.clearInsideHeader).toBe(true);
+      expect(Math.abs(clearAlignment.clearCenterY - clearAlignment.headerCenterY)).toBeLessThan(clearAlignment.headerHeight / 2);
+      const clearStyle = await page.locator("#clearStatusButton").evaluate((button) => {
+        const style = getComputedStyle(button);
+        return {
+          borderRadius: style.borderRadius,
+          paddingLeft: style.paddingLeft,
+          paddingRight: style.paddingRight,
+          cursor: style.cursor
+        };
+      });
+      expect(clearStyle.borderRadius).toBe("10px");
+      expect(clearStyle.paddingLeft).toBe("6px");
+      expect(clearStyle.paddingRight).toBe("6px");
+      expect(clearStyle.cursor).toBe("pointer");
 
       const duplicateIds = await page.evaluate(() => {
         const ids = [...document.querySelectorAll("[id]")].map((element) => element.id);
@@ -625,8 +657,25 @@ test.describe("Preview Generator V2 baseline", () => {
       await expect(exportToolStateButton).toBeEnabled();
       await exportButton.click();
       await expect(page.locator("#statusLog")).toHaveValue(/Processed source value/);
+      await expect(templateStatusHeader).toHaveAttribute("aria-expanded", "true");
+      await expect(templateStatusContent).toBeVisible();
+      await page.locator("#clearStatusButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue("");
+      await expect(templateStatusHeader).toHaveAttribute("aria-expanded", "true");
+      await expect(templateStatusContent).toBeVisible();
+
+      await exportButton.click();
+      await expect(page.locator("#statusLog")).toHaveValue(/Processed source value/);
+      await templateStatusTitle.click();
+      await expect(templateStatusContent).toBeHidden();
+      await expect(templateStatusHeader).toHaveAttribute("aria-expanded", "false");
       await page.locator("#clearStatusButton").click();
       await expect(page.locator("#statusLog")).toHaveValue("");
+      await expect(templateStatusHeader).toHaveAttribute("aria-expanded", "false");
+      await expect(templateStatusContent).toBeHidden();
+      await templateStatusTitle.click();
+      await expect(templateStatusContent).toBeVisible();
+      await expect(templateStatusHeader).toHaveAttribute("aria-expanded", "true");
 
       await page.locator("#sourceInput").fill("");
       await expect(exportButton).toBeDisabled();

tools/templates-v2/index.html

@@ -92,12 +92,14 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
         </section>
 
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
-          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="statusLogContent">
+          <div class="accordion-v2__header tool-starter__status-accordion-header" aria-expanded="true" aria-controls="statusLogContent">
             <span>Status</span>
-            <span class="accordion-v2__icon" aria-hidden="true">+</span>
-          </button>
+            <div class="tool-starter__status-header-actions">
+              <button id="clearStatusButton" class="tool-starter__status-clear-button" type="button">Clear</button>
+              <span class="accordion-v2__icon" aria-hidden="true">+</span>
+            </div>
+          </div>
           <div id="statusLogContent" class="accordion-v2__content">
-            <button id="clearStatusButton" type="button">Clear</button>
             <textarea id="statusLog" readonly rows="10" aria-label="Status log"></textarea>
           </div>
         </section>

tools/templates-v2/js/controls/StatusLogControl.js

@@ -5,7 +5,10 @@ export class StatusLogControl {
   }
 
   mount() {
-    this.clearButton.addEventListener("click", () => this.clear());
+    this.clearButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      this.clear();
+    });
   }
 
   clear() {
@@ -23,4 +26,3 @@ export class StatusLogControl {
     this.log.scrollTop = this.log.scrollHeight;
   }
 }
-

tools/templates-v2/styles/toolStarter.css

@@ -190,6 +190,7 @@ textarea:focus-visible {
   font-weight: 700;
   padding: 10px 12px;
   text-align: left;
+  cursor: pointer;
 }
 
 .accordion-v2__icon {
@@ -221,6 +222,34 @@ textarea:focus-visible {
   display: none;
 }
 
+.tool-starter__status-accordion-header {
+  flex: 0 0 42px;
+  min-width: 0;
+}
+
+.tool-starter__status-header-actions {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tool-starter__status-clear-button {
+  flex: 0 0 auto;
+  margin-right: 0;
+  border-color: var(--tool-starter-line) !important;
+  border-radius: 10px !important;
+  background: ButtonFace;
+  color: ButtonText;
+  padding: 2px 6px;
+}
+
+.tool-starter__status-clear-button:hover {
+  border-color: var(--tool-starter-line) !important;
+  background: ButtonFace;
+  color: ButtonText;
+}
+
 .tool-starter__accordion--fill {
   flex: 1 1 auto;
 }