Skip to content

Commit b2964fb

Browse files
ToolboxAidToolboxAid
committed
Remove placeholder text from empty Palette Swatch Editor state - PR_26156_178-palette-empty-editor-state
1 parent 159dbbd commit b2964fb

5 files changed

Lines changed: 65 additions & 27 deletions

File tree

‎docs_build/dev/reports/palette-empty-editor-state-report.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# PR_26156_178 Palette Empty Editor State Report
2+
3+
## Result
4+
PASS
5+
6+
## Summary
7+
- Removed placeholder text from Palette Tool Symbol, Hex, Name, and Tags inputs.
8+
- Swatch Editor no-selection state now shows empty disabled fields with no instructional values inside fields.
9+
- Selected swatch values still appear after selecting a valid Palette Colors swatch.
10+
- Removing the selected swatch returns Swatch Editor to empty disabled fields.
11+
- Preserved PR_26156_177 disabled/read-only behavior and User Defined Swatch selection rules.
12+
13+
## Swatch Editor
14+
- No selected swatch: Symbol, Hex, Name, and Tags are empty and disabled.
15+
- No selected swatch: Symbol, Hex, Name, and Tags expose no placeholder text.
16+
- Selected swatch: Symbol, Hex, and Name populate from the selected swatch while remaining disabled/read-only.
17+
- Tags remain editable only for selected project palette colors.
18+
19+
## User Defined Swatch
20+
- Placeholder text was removed from User Defined Swatch Symbol, Hex, and Name fields.
21+
- Existing selection rules from PR_26156_177 are preserved.
22+
- Non-user Palette Colors selections still leave User Defined Swatch blank while allowing new user-defined swatch creation.
23+
24+
## Validation
25+
- `node --check toolbox/colors/colors.js`
26+
- PASS
27+
- `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
28+
- PASS
29+
- `rg "placeholder=" toolbox/colors/index.html tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
30+
- PASS, no matches
31+
- `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`
32+
- PASS, no matches
33+
- `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
34+
- PASS, 3 tests
35+
- `npm run test:playwright:static`
36+
- PASS
37+
38+
## Verification Coverage
39+
- Initial no-selection state shows empty disabled Swatch Editor fields.
40+
- No placeholder text remains in Swatch Editor or User Defined Swatch inputs.
41+
- Selecting source-backed and user-defined swatches populates Swatch Editor fields correctly.
42+
- Removing the selected swatch returns Swatch Editor fields to empty disabled state.
43+
44+
## Skipped
45+
- Full samples smoke was not run, per BUILD instruction.

‎docs_build/dev/reports/playwright_v8_coverage_report.txt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ Exercised tool entry points detected:
1717
(83%) Theme V2 Shared JS - exercised 2 runtime JS files
1818

1919
Changed runtime JS files covered:
20-
(87%) toolbox/colors/palette-workspace-repository.js - executed lines 1190/1190; executed functions 113/130
2120
(95%) toolbox/colors/colors.js - executed lines 793/793; executed functions 77/81
2221

2322
Files with executed line/function counts where available:
@@ -34,5 +33,4 @@ Uncovered or low-coverage changed JS files:
3433

3534
Changed JS files considered:
3635
(0%) tests/playwright/tools/PaletteToolMockRepository.spec.mjs - changed JS file not collected as browser runtime coverage
37-
(87%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
3836
(95%) toolbox/colors/colors.js - changed JS file with browser V8 coverage

‎docs_build/dev/reports/testing_lane_execution_report.md‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
# PR_26156_177 Testing Lane Execution Report
1+
# PR_26156_178 Testing Lane Execution Report
22

33
## Result
44
PASS
55

66
## Commands Run
77
- `node --check toolbox/colors/colors.js`
88
- PASS
9-
- `node --check toolbox/colors/palette-workspace-repository.js`
10-
- PASS
119
- `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
1210
- PASS
13-
- `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`
14-
- PASS, no matches
15-
- `rg "readEditorForm|fillEditorForm|clearEditorForm|validateEditor|tagsFromText|elements\\.remove|data-palette-remove" toolbox/colors tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
11+
- `rg "placeholder=" toolbox/colors/index.html tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
1612
- PASS, no matches
17-
- `rg "DEFAULT_SOURCE_PALETTES" toolbox/colors tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
13+
- `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`
1814
- PASS, no matches
1915
- `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
2016
- PASS, 3 tests
@@ -28,26 +24,22 @@ PASS
2824
- Changed-file/static validation: PASS.
2925

3026
## Playwright Coverage
31-
- Disabled Swatch Editor selected-value fields preserve normal text color, text fill, and opacity: PASS.
32-
- Selected source-backed Palette Colors swatch values appear in Swatch Editor: PASS.
33-
- Selected user-defined Palette Colors swatch values appear in Swatch Editor: PASS.
34-
- Swatch Editor Symbol, Hex, and Name remain disabled: PASS.
35-
- Tags are disabled with no selected project palette color and enabled with selected project palette colors: PASS.
36-
- Tag input and rendered tag action area are split across two rows: PASS.
37-
- Tag action-group uses the tight 50% gap utility: PASS.
38-
- User Defined Swatch remains enabled and blank for new user-defined swatch creation with no selected color: PASS.
39-
- User Defined Swatch is blank with Add/Clear enabled for selected non-user colors: PASS.
40-
- User Defined Swatch populates and enables for selected user-defined colors: PASS.
27+
- Initial no-selection state shows empty disabled Swatch Editor fields: PASS.
28+
- Initial no-selection state shows no placeholder text in Swatch Editor fields: PASS.
29+
- Placeholder text is absent from Swatch Editor and User Defined Swatch inputs: PASS.
30+
- Selecting a source-backed swatch populates Swatch Editor selected values: PASS.
31+
- Selecting a user-defined swatch populates Swatch Editor selected values: PASS.
32+
- Removing the selected swatch returns Swatch Editor fields to empty disabled state: PASS.
33+
- PR_26156_177 User Defined Swatch rules remain covered: PASS.
4134

4235
## Impacted Lane
4336
- Palette Tool runtime/UI lane.
44-
- Theme V2 static validation for reusable form/action-group utility classes used by Palette.
4537
- Changed-file/static validation lane.
4638

4739
## Skipped Lanes
4840
- Full samples smoke was skipped by BUILD instruction.
49-
- Shared Tool Center fullscreen UI lane was skipped because PR177 did not modify shared Tool Center layout behavior.
50-
- 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.
41+
- Shared Tool Center fullscreen UI lane was skipped because PR178 does not modify shared Tool Center or Theme V2 behavior.
42+
- Broader tool lanes were skipped because changes are confined to Palette Tool input markup and targeted Palette spec assertions.
5143

5244
## Not Run
5345
- Full samples smoke was not run, per BUILD instruction.

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,7 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
383383
await expect(page.locator("[data-palette-selected-name]")).toHaveValue("");
384384
await expect(page.locator("[data-palette-tags]")).toBeDisabled();
385385
await expect(page.locator("[data-palette-tags]")).toHaveValue("");
386+
await expect(page.locator("[data-palette-editor-form] input[placeholder], [data-palette-user-swatch-form] input[placeholder]")).toHaveCount(0);
386387
await expect(page.locator("[data-palette-editor-tags-input-row] th")).toHaveAttribute("rowspan", "2");
387388
const tagInputRowBox = await page.locator("[data-palette-editor-tags-input-row]").boundingBox();
388389
const tagListRowBox = await page.locator("[data-palette-editor-tags-list-row]").boundingBox();
@@ -477,6 +478,8 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
477478
await expect(page.locator("[data-palette-selected-hex]")).toHaveValue("");
478479
await expect(page.locator("[data-palette-selected-name]")).toHaveValue("");
479480
await expect(page.locator("[data-palette-tags]")).toBeDisabled();
481+
await expect(page.locator("[data-palette-tags]")).toHaveValue("");
482+
await expect(page.locator("[data-palette-editor-form] input[placeholder], [data-palette-user-swatch-form] input[placeholder]")).toHaveCount(0);
480483
await expect(page.locator("[data-palette-user-swatch-form] [data-palette-symbol]")).toBeEnabled();
481484
await expect(page.locator("[data-palette-user-swatch-form] [data-palette-hex]")).toBeEnabled();
482485
await expect(page.locator("[data-palette-user-swatch-form] [data-palette-name]")).toBeEnabled();

‎toolbox/colors/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@ <h2>Palette</h2>
5050
</tr>
5151
<tr>
5252
<th scope="row"><label for="paletteSelectedHexInput">Hex</label></th>
53-
<td><input class="field-value--readable-disabled" id="paletteSelectedHexInput" type="text" placeholder="#1F75FE" data-palette-selected-hex readonly disabled></td>
53+
<td><input class="field-value--readable-disabled" id="paletteSelectedHexInput" type="text" data-palette-selected-hex readonly disabled></td>
5454
</tr>
5555
<tr>
5656
<th scope="row"><label for="paletteSelectedNameInput">Name</label></th>
57-
<td><input class="field-value--readable-disabled" id="paletteSelectedNameInput" type="text" placeholder="Hero Blue" data-palette-selected-name readonly disabled></td>
57+
<td><input class="field-value--readable-disabled" id="paletteSelectedNameInput" type="text" data-palette-selected-name readonly disabled></td>
5858
</tr>
5959
<tr data-palette-editor-tags-input-row>
6060
<th scope="row" rowspan="2"><label for="paletteTagsInput">Tags</label></th>
6161
<td>
62-
<input id="paletteTagsInput" type="text" placeholder="hero" list="paletteTagSuggestions" data-palette-tags>
62+
<input id="paletteTagsInput" type="text" list="paletteTagSuggestions" data-palette-tags>
6363
<datalist id="paletteTagSuggestions" data-palette-tag-suggestions></datalist>
6464
</td>
6565
</tr>
@@ -92,11 +92,11 @@ <h2>Palette</h2>
9292
</tr>
9393
<tr>
9494
<th scope="row"><label for="paletteHexInput">Hex</label></th>
95-
<td><input id="paletteHexInput" type="text" placeholder="#1F75FE" data-palette-hex></td>
95+
<td><input id="paletteHexInput" type="text" data-palette-hex></td>
9696
</tr>
9797
<tr>
9898
<th scope="row"><label for="paletteNameInput">Name</label></th>
99-
<td><input id="paletteNameInput" type="text" placeholder="Hero Blue" data-palette-name></td>
99+
<td><input id="paletteNameInput" type="text" data-palette-name></td>
100100
</tr>
101101
<tr>
102102
<td colspan="2" data-palette-user-swatch-diagnostic>Ready for a user-defined swatch.</td>

0 commit comments

Comments
 (0)