Correct Palette Swatch Editor disabled state and User Defined field behavior - PR_26156_177-palette-swatch-editor-disable-correction

Author: ToolboxAid

assets/theme-v2/css/buttons.css

@@ -50,6 +50,10 @@
   align-items: center
 }
 
+.action-group--tight {
+  gap: calc(var(--space-10) / 2)
+}
+
 .action-group--end {
   justify-content: flex-end
 }

assets/theme-v2/css/forms.css

@@ -68,6 +68,14 @@ select {
   padding: var(--space-12)
 }
 
+.field-value--readable-disabled:disabled {
+  color: var(--text);
+  -webkit-text-fill-color: var(--text);
+  background: var(--panel);
+  border-color: var(--line);
+  opacity: 1
+}
+
 input[type="checkbox"],
 input[type="radio"] {
   width: var(--icon-size-sm);

docs_build/dev/reports/palette-swatch-editor-disable-correction-report.md

@@ -0,0 +1,63 @@
+# PR_26156_177 Palette Swatch Editor Disable Correction Report
+
+## Result
+PASS
+
+## Summary
+- Corrected Swatch Editor disabled/read-only selected value fields so selected Symbol, Hex, and Name remain visible without gray/color wash styling.
+- Kept Swatch Editor Symbol, Hex, and Name disabled/read-only.
+- Kept Tags editable only when a project palette color is selected.
+- Split the Swatch Editor tag input and rendered tag action area into two table rows.
+- Reduced the tag action-group spacing by 50% with a reusable tight action-group utility.
+- Updated User Defined Swatch so it only populates for selected user-defined palette colors.
+- Source-backed and harmony-backed Palette Colors now leave User Defined Swatch blank while still allowing new user-defined swatch creation.
+
+## Theme V2 Gap
+Existing Theme V2 classes had no reusable way to show a disabled form value while preserving readable selected text, and no reusable half-gap action-group variant.
+
+Reusable Theme V2 utilities were added:
+- `forms.css`: `.field-value--readable-disabled` keeps disabled input values readable with normal text color and opacity.
+- `buttons.css`: `.action-group--tight` reduces action-group gap to half of the standard action-group gap.
+
+## Swatch Editor
+- Selected Palette Colors swatch text appears in Swatch Editor.
+- Symbol, Hex, and Name remain disabled and read-only.
+- Disabled selected-value fields use normal text color, normal text fill, and full opacity.
+- Tags are disabled with no selected project palette color and enabled for selected project palette colors.
+- Tags input and tag action display occupy separate rows under the same Tags label.
+
+## User Defined Swatch
+- No selected swatch: blank fields remain enabled for creating a new user-defined swatch.
+- Selected user-defined swatch: Symbol, Hex, and Name populate and remain editable.
+- Selected non-user swatch: Symbol, Hex, and Name are blank and enabled for new user-defined swatch entry.
+- Non-user selected colors cannot be updated through User Defined Swatch base-value controls.
+
+## Validation
+- `node --check toolbox/colors/colors.js`
+  - PASS
+- `node --check toolbox/colors/palette-workspace-repository.js`
+  - PASS
+- `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+  - PASS
+- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js assets/theme-v2/css/forms.css assets/theme-v2/css/buttons.css tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+  - PASS, no matches
+- `rg "readEditorForm|fillEditorForm|clearEditorForm|validateEditor|tagsFromText|elements\\.remove|data-palette-remove" toolbox/colors tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+  - PASS, no matches
+- `rg "DEFAULT_SOURCE_PALETTES" toolbox/colors tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+  - PASS, no matches
+- `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
+  - PASS, 3 tests
+- `npm run test:playwright:static`
+  - PASS
+
+## Verification Coverage
+- Disabled Swatch Editor values remain readable and not color-washed.
+- Selected Palette Colors swatch text appears in Swatch Editor.
+- Symbol, Hex, and Name cannot be edited in Swatch Editor.
+- Tags are editable only for selected project palette colors.
+- Tag layout uses two rows and the tight action-group spacing.
+- User Defined Swatch fields populate for user-defined swatches.
+- Non-user selections leave User Defined Swatch blank, keep Add/Clear enabled, and keep Update Selected disabled.
+
+## Skipped
+- Full samples smoke was not run, per BUILD instruction.

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -12,28 +12,27 @@ Note: entry percentages use function coverage when available, otherwise line cov
 Note: coverage entries are aggregated across every page/tool where coverageReporter.start(page) and coverageReporter.stop(page) ran.
 
 Exercised tool entry points detected:
-(85%) Toolbox Index - exercised 5 runtime JS files
+(86%) Toolbox Index - exercised 5 runtime JS files
 (0%) Tool Template V2 - not exercised by this Playwright run
 (83%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
 (87%) toolbox/colors/palette-workspace-repository.js - executed lines 1190/1190; executed functions 113/130
-(95%) toolbox/colors/colors.js - executed lines 776/776; executed functions 75/79
+(95%) toolbox/colors/colors.js - executed lines 793/793; executed functions 77/81
 
 Files with executed line/function counts where available:
 (65%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 402/402; executed functions 20/31
 (75%) toolbox/toolRegistry.js - executed lines 1754/1754; executed functions 27/36
 (80%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 205/205; executed functions 16/20
 (87%) assets/theme-v2/js/tool-display-mode.js - executed lines 201/201; executed functions 13/15
 (87%) toolbox/colors/palette-workspace-repository.js - executed lines 1190/1190; executed functions 113/130
-(95%) toolbox/colors/colors.js - executed lines 776/776; executed functions 75/79
+(95%) toolbox/colors/colors.js - executed lines 793/793; executed functions 77/81
 (100%) toolbox/colors/palette-source-mock-db.js - executed lines 927/927; executed functions 6/6
 
 Uncovered or low-coverage changed JS files:
 (100%) none - no low-coverage changed runtime JS files
 
 Changed JS files considered:
 (0%) tests/playwright/tools/PaletteToolMockRepository.spec.mjs - changed JS file not collected as browser runtime coverage
-(0%) tests/playwright/tools/ToolCenterFullscreenAccordion.spec.mjs - changed JS file not collected as browser runtime coverage
 (87%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
 (95%) toolbox/colors/colors.js - changed JS file with browser V8 coverage

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,4 +1,4 @@
-# PR_26156_176 Testing Lane Execution Report
+# PR_26156_177 Testing Lane Execution Report
 
 ## Result
 PASS
@@ -10,7 +10,7 @@ PASS
   - PASS
 - `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
   - PASS
-- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html toolbox/colors/colors.js toolbox/colors/palette-workspace-repository.js assets/theme-v2/css/forms.css assets/theme-v2/css/buttons.css tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
   - PASS, no matches
 - `rg "readEditorForm|fillEditorForm|clearEditorForm|validateEditor|tagsFromText|elements\\.remove|data-palette-remove" toolbox/colors tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
   - PASS, no matches
@@ -28,26 +28,26 @@ PASS
 - Changed-file/static validation: PASS.
 
 ## Playwright Coverage
-- Source-pinned user Palette Colors start with empty tags: PASS.
-- Harmony-pinned user Palette Colors start with empty tags: PASS.
-- Manual Add Swatch starts user tags empty: PASS.
-- Rendered user tags appear side by side: PASS.
-- Clicking a rendered tag deletes it from the selected project palette color: PASS.
-- Pressing Enter adds only the user-entered tag: PASS.
-- Swatch Editor has disabled Symbol, Hex, and Name mirror fields: PASS.
-- Swatch Editor enables Tags only when a Palette Colors swatch is selected: PASS.
-- Swatch Editor has no Add, Update, Remove, or Clear actions: PASS.
-- User Defined Swatch has Symbol, Hex, and Name and no Tags: PASS.
-- Selected swatch removal clears selected editor fields and disables Tags: PASS.
+- Disabled Swatch Editor selected-value fields preserve normal text color, text fill, and opacity: PASS.
+- Selected source-backed Palette Colors swatch values appear in Swatch Editor: PASS.
+- Selected user-defined Palette Colors swatch values appear in Swatch Editor: PASS.
+- Swatch Editor Symbol, Hex, and Name remain disabled: PASS.
+- Tags are disabled with no selected project palette color and enabled with selected project palette colors: PASS.
+- Tag input and rendered tag action area are split across two rows: PASS.
+- Tag action-group uses the tight 50% gap utility: PASS.
+- User Defined Swatch remains enabled and blank for new user-defined swatch creation with no selected color: PASS.
+- User Defined Swatch is blank with Add/Clear enabled for selected non-user colors: PASS.
+- User Defined Swatch populates and enables for selected user-defined colors: PASS.
 
 ## Impacted Lane
 - Palette Tool runtime/UI lane.
+- Theme V2 static validation for reusable form/action-group utility classes used by Palette.
 - Changed-file/static validation lane.
 
 ## Skipped Lanes
 - Full samples smoke was skipped by BUILD instruction.
-- Shared Tool Center fullscreen UI lane was skipped because PR176 did not modify shared Tool Center or Theme V2 layout behavior.
-- Broader tool lanes were skipped because changes are confined to Palette Tool tag/editor behavior and the targeted Palette spec covers the changed runtime/UI paths.
+- Shared Tool Center fullscreen UI lane was skipped because PR177 did not modify shared Tool Center layout behavior.
+- Broader tool lanes were skipped because the new Theme V2 utilities are only used by Palette in this delta, and the targeted Palette spec verifies their rendered behavior.
 
 ## Not Run
 - Full samples smoke was not run, per BUILD instruction.

tests/playwright/tools/PaletteToolMockRepository.spec.mjs

@@ -150,6 +150,24 @@ async function expectControlGroupsShareLine(page, sortSelector, sizeSelector) {
   expect(Math.abs(sortCenter - sizeCenter)).toBeLessThan(4);
 }
 
+async function expectReadableDisabledField(page, selector, value) {
+  const field = page.locator(selector);
+  await expect(field).toBeDisabled();
+  await expect(field).toHaveValue(value);
+  const style = await field.evaluate((node) => {
+    const computed = getComputedStyle(node);
+    return {
+      bodyColor: getComputedStyle(document.body).color,
+      color: computed.color,
+      opacity: computed.opacity,
+      textFillColor: computed.webkitTextFillColor
+    };
+  });
+  expect(style.opacity).toBe("1");
+  expect(style.color).toBe(style.bodyColor);
+  expect(style.textFillColor).toBe(style.bodyColor);
+}
+
 async function expectSwatchRegionScrollsOnly(page, scrollSelector, controlsSelector, summarySelector) {
   const scrollRegion = page.locator(scrollSelector);
   const controls = page.locator(controlsSelector);
@@ -365,6 +383,19 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-selected-name]")).toHaveValue("");
     await expect(page.locator("[data-palette-tags]")).toBeDisabled();
     await expect(page.locator("[data-palette-tags]")).toHaveValue("");
+    await expect(page.locator("[data-palette-editor-tags-input-row] th")).toHaveAttribute("rowspan", "2");
+    const tagInputRowBox = await page.locator("[data-palette-editor-tags-input-row]").boundingBox();
+    const tagListRowBox = await page.locator("[data-palette-editor-tags-list-row]").boundingBox();
+    expect(tagListRowBox?.y || 0).toBeGreaterThan((tagInputRowBox?.y || 0) + (tagInputRowBox?.height || 0) - 2);
+    const tagActionLayout = await page.locator("[data-palette-editor-tags-list]").evaluate((node) => {
+      const style = getComputedStyle(node);
+      return {
+        columnGap: style.columnGap,
+        hasTightClass: node.classList.contains("action-group--tight")
+      };
+    });
+    expect(tagActionLayout.hasTightClass).toBe(true);
+    expect(tagActionLayout.columnGap).toBe("5px");
     await expect(page.locator("[data-palette-table-counts]")).toContainText("palette_colors");
     await expect(page.locator("[data-palette-project-accordion]")).toBeVisible();
     await expect(page.locator("[data-palette-source-accordion]")).toBeVisible();
@@ -411,6 +442,22 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Black']")).toHaveCount(1);
     await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Black']")).toHaveAttribute("data-palette-selected", "true");
     await expect(page.locator("[data-palette-selected-summary]")).toHaveText("Black");
+    const blackTile = page.locator("[data-palette-user-list] [data-palette-swatch-name='Black']");
+    const blackSymbol = await blackTile.getAttribute("data-palette-swatch-row");
+    const blackHex = await blackTile.getAttribute("data-palette-swatch-hex");
+    await expectReadableDisabledField(page, "[data-palette-selected-symbol]", blackSymbol || "");
+    await expectReadableDisabledField(page, "[data-palette-selected-hex]", blackHex || "");
+    await expectReadableDisabledField(page, "[data-palette-selected-name]", "Black");
+    await expect(page.locator("[data-palette-tags]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-symbol]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-hex]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-name]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-symbol]")).toHaveValue("");
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-hex]")).toHaveValue("");
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-name]")).toHaveValue("");
+    await expect(page.locator("[data-palette-user-swatch-form]").getByRole("button", { name: "Add Swatch" })).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form]").getByRole("button", { name: "Update Selected" })).toBeDisabled();
+    await expect(page.locator("[data-palette-user-swatch-form]").getByRole("button", { name: "Clear Form" })).toBeEnabled();
     await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Black']")).toHaveAttribute("data-palette-swatch-tags", "");
     await expect(page.locator("[data-palette-user-list] [data-palette-swatch-name='Black']")).toHaveAttribute("title", /^Symbol: .+\nHex: #[0-9A-F]{6}\nName: Black\nTags: None$/);
     await expect(page.locator("[data-palette-source-index]").first()).toHaveAttribute("data-palette-pinned", "true");
@@ -430,6 +477,12 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-selected-hex]")).toHaveValue("");
     await expect(page.locator("[data-palette-selected-name]")).toHaveValue("");
     await expect(page.locator("[data-palette-tags]")).toBeDisabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-symbol]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-hex]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-name]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form]").getByRole("button", { name: "Add Swatch" })).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form]").getByRole("button", { name: "Update Selected" })).toBeDisabled();
+    await expect(page.locator("[data-palette-user-swatch-form]").getByRole("button", { name: "Clear Form" })).toBeEnabled();
     await page.locator("[data-palette-source-search]").fill("");
     await expect(page.locator("[data-palette-source-index]")).toHaveCount(8);
     await expect(page.locator("[data-palette-harmony-choice]")).toHaveCount(0);
@@ -474,13 +527,16 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("title", "Symbol: H\nHex: #123456AA\nName: Hero Blue\nTags: None");
     await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("data-palette-selected", "true");
     await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("data-palette-swatch-tags", "");
-    await expect(page.locator("[data-palette-selected-symbol]")).toHaveValue("H");
-    await expect(page.locator("[data-palette-selected-hex]")).toHaveValue("#123456AA");
-    await expect(page.locator("[data-palette-selected-name]")).toHaveValue("Hero Blue");
-    await expect(page.locator("[data-palette-selected-symbol]")).toBeDisabled();
-    await expect(page.locator("[data-palette-selected-hex]")).toBeDisabled();
-    await expect(page.locator("[data-palette-selected-name]")).toBeDisabled();
+    await expectReadableDisabledField(page, "[data-palette-selected-symbol]", "H");
+    await expectReadableDisabledField(page, "[data-palette-selected-hex]", "#123456AA");
+    await expectReadableDisabledField(page, "[data-palette-selected-name]", "Hero Blue");
     await expect(page.locator("[data-palette-tags]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-symbol]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-hex]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-name]")).toBeEnabled();
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-symbol]")).toHaveValue("H");
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-hex]")).toHaveValue("#123456AA");
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-name]")).toHaveValue("Hero Blue");
     await expect(page.locator("[data-palette-editor-tags-list]")).toContainText("No tags added.");
     await expect(page.locator("[data-palette-user-swatch-form]").getByRole("button", { name: "Update Selected" })).toBeEnabled();
     await expect(page.locator("[data-palette-swatch-row='H']")).toHaveAttribute("aria-current", "true");
@@ -546,6 +602,9 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await expect(page.locator("[data-palette-swatch-row='J']")).toHaveAttribute("data-palette-swatch-tags", "ui, feature");
     await expect(page.locator("[data-palette-swatch-row='J']")).toHaveAttribute("title", "Symbol: J\nHex: #ABCDEF\nName: Hero Updated\nTags: ui, feature");
     await expect(page.locator("[data-palette-selected-summary]")).toHaveText("Hero Updated");
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-symbol]")).toHaveValue("J");
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-hex]")).toHaveValue("#ABCDEF");
+    await expect(page.locator("[data-palette-user-swatch-form] [data-palette-name]")).toHaveValue("Hero Updated");
     await expect(page.locator("[data-palette-user-list]")).not.toContainText(/Hero Updated|ui, feature|Symbol|Name|Hex|Source|Tags/);
 
     await page.getByRole("button", { name: "Undo" }).click();