Skip to content

Commit 5157b59

Browse files
ToolboxAidToolboxAid
authored
Merge PR #166: PR_26175_ALFA_049-theme-v2-status-action-icons
Merge validated ALFA_049 Theme V2 status/action icon conversion.
2 parents 3cb4ccc + 81616b9 commit 5157b59

13 files changed

Lines changed: 684 additions & 624 deletions

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,36 @@
1717
border-color: var(--orange-border-strong)
1818
}
1919

20+
.btn--with-icon {
21+
gap: var(--space-8)
22+
}
23+
24+
.btn--with-icon .theme-icon {
25+
height: var(--icon-size-sm);
26+
width: var(--icon-size-sm)
27+
}
28+
29+
.btn--icon-only {
30+
border-radius: var(--radius-pill);
31+
height: var(--space-44);
32+
min-width: var(--space-44);
33+
padding: var(--space-0);
34+
width: var(--space-44)
35+
}
36+
37+
.btn--icon-only .theme-icon {
38+
height: var(--icon-size-md);
39+
width: var(--icon-size-md)
40+
}
41+
42+
.btn--icon-danger {
43+
color: var(--red)
44+
}
45+
46+
.btn--icon-success {
47+
color: var(--green)
48+
}
49+
2050
.btn--compact {
2151
margin: var(--space-0);
2252
min-width: calc(var(--space-44) + var(--space-28));

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,22 @@
4343
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-close.svg")
4444
}
4545

46+
.theme-icon--delete {
47+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-trash.svg")
48+
}
49+
50+
.theme-icon--edit {
51+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-settings.svg")
52+
}
53+
4654
.theme-icon--error {
4755
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-error.svg")
4856
}
4957

58+
.theme-icon--external-link {
59+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-chevron-right.svg")
60+
}
61+
5062
.theme-icon--exit-fullscreen {
5163
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-exit-fullscreen.svg")
5264
}
@@ -63,6 +75,10 @@
6375
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-menu.svg")
6476
}
6577

78+
.theme-icon--save {
79+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-success.svg")
80+
}
81+
6682
.theme-icon--search {
6783
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-search.svg")
6884
}
@@ -83,6 +99,32 @@
8399
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-trash.svg")
84100
}
85101

102+
.theme-icon--validation {
103+
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-warning.svg")
104+
}
105+
86106
.theme-icon--warning {
87107
--theme-v2-icon-url: url("/assets/theme-v2/svg/gfs-warning.svg")
88108
}
109+
110+
.status-icon {
111+
height: var(--icon-size-sm);
112+
width: var(--icon-size-sm)
113+
}
114+
115+
.status-icon--error {
116+
color: var(--red)
117+
}
118+
119+
.status-icon--info {
120+
color: var(--cyan)
121+
}
122+
123+
.status-icon--save {
124+
color: var(--green)
125+
}
126+
127+
.status-icon--validation,
128+
.status-icon--warning {
129+
color: var(--gold)
130+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,20 @@
8585
}
8686

8787
.toolbox-status-bar__message {
88+
display: inline-flex;
89+
align-items: center;
90+
justify-content: center;
91+
gap: var(--space-8);
8892
margin: var(--space-0);
8993
max-width: var(--measure-lg);
9094
line-height: var(--line-height-copy);
9195
overflow-wrap: anywhere
9296
}
9397

98+
.toolbox-status-bar__status-icon {
99+
flex: 0 0 auto
100+
}
101+
94102
.toolbox-status-bar__progress {
95103
min-width: var(--space-0);
96104
max-width: var(--toolbox-status-progress-max);

‎assets/theme-v2/js/theme-icons.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,21 @@ const themeV2IconRegistry = Object.freeze({
55
"chevron-right": "gfs-chevron-right.svg",
66
"chevron-up": "gfs-chevron-up.svg",
77
close: "gfs-close.svg",
8+
delete: "gfs-trash.svg",
9+
edit: "gfs-settings.svg",
810
error: "gfs-error.svg",
11+
"external-link": "gfs-chevron-right.svg",
912
"exit-fullscreen": "gfs-exit-fullscreen.svg",
1013
fullscreen: "gfs-fullscreen.svg",
1114
info: "gfs-info.svg",
1215
menu: "gfs-menu.svg",
16+
save: "gfs-success.svg",
1317
search: "gfs-search.svg",
1418
settings: "gfs-settings.svg",
1519
subtract: "gfs-subtract.svg",
1620
success: "gfs-success.svg",
1721
trash: "gfs-trash.svg",
22+
validation: "gfs-warning.svg",
1823
warning: "gfs-warning.svg",
1924
});
2025

‎assets/theme-v2/js/toolbox-status-bar.js‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import { readGameJourneyCompletionMetrics } from "/src/api/game-journey-completion-api-client.js";
22
import { createServerRepositoryClient } from "/src/api/server-api-client.js";
33
import { getToolBySlug } from "/src/shared/toolbox/tool-metadata-inventory.js";
4+
import { createThemeIcon } from "/assets/theme-v2/js/theme-icons.js";
45

56
const EXCLUDED_SELECTED_GAME_TOOLS = new Set(["idea-board"]);
67
const STATUS_BAR_SELECTOR = "[data-toolbox-status-bar]";
8+
const STATUS_ICON_BY_CONTEXT_KIND = Object.freeze({
9+
action: "add",
10+
delete: "delete",
11+
error: "error",
12+
info: "info",
13+
save: "save",
14+
validation: "validation",
15+
warning: "warning",
16+
});
717
const TOOL_PROGRESS_BUCKET_BY_SLUG = Object.freeze({
818
"achievements": "Progression",
919
"assets": "Graphics",
@@ -262,10 +272,31 @@ function classifyToolContext(messageText, state, required) {
262272
if (/\b(validation|requirement|requirements|missing|required|open or seed)\b/i.test(text)) {
263273
return { kind: "validation" };
264274
}
265-
if (/\b(saved|created|deleted|updated|loaded|save changes)\b/i.test(text)) {
275+
if (/\b(deleted)\b/i.test(text)) {
276+
return { kind: "delete" };
277+
}
278+
if (/\b(saved|created|updated|loaded|save changes)\b/i.test(text)) {
266279
return { kind: "save" };
267280
}
268-
return { kind: "action" };
281+
return { kind: "info" };
282+
}
283+
284+
function statusIconNameForKind(kind) {
285+
return STATUS_ICON_BY_CONTEXT_KIND[kind] || STATUS_ICON_BY_CONTEXT_KIND.info;
286+
}
287+
288+
function renderStatusMessage(message, text, context) {
289+
if (!message) {
290+
return;
291+
}
292+
const kind = context?.kind || "info";
293+
const iconName = statusIconNameForKind(kind);
294+
const icon = createThemeIcon(iconName, {
295+
className: ["status-icon", `status-icon--${kind}`, "toolbox-status-bar__status-icon"],
296+
});
297+
message.dataset.toolboxStatusIcon = iconName;
298+
message.dataset.toolboxStatusKind = kind;
299+
message.replaceChildren(icon, document.createTextNode(text));
269300
}
270301

271302
function normalizeTextKey(value) {
@@ -387,24 +418,24 @@ function renderSelectedGame(bar, selectedGame, state, messageText) {
387418

388419
if (selectedGame) {
389420
name.textContent = selectedGame.name;
390-
message.textContent = nextMessage;
421+
renderStatusMessage(message, nextMessage, context);
391422
return;
392423
}
393424

394425
if (!required) {
395426
name.textContent = "No game selected";
396-
message.textContent = nextMessage;
427+
renderStatusMessage(message, nextMessage, context);
397428
return;
398429
}
399430

400431
if (state === "error") {
401432
name.textContent = "Unavailable";
402-
message.textContent = nextMessage;
433+
renderStatusMessage(message, nextMessage, context);
403434
return;
404435
}
405436

406437
name.textContent = "No game selected";
407-
message.textContent = "Select or create a game in Game Hub before using this toolbox page.";
438+
renderStatusMessage(message, "Select or create a game in Game Hub before using this toolbox page.", context);
408439
}
409440

410441
export function refreshToolboxStatusBar() {

‎docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_manual-validation-notes.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# PR_26175_ALFA_049-theme-v2-status-action-icons Manual Validation Notes
2+
3+
- Confirmed Theme V2 registry aliases map semantic status/action names to the existing authoritative SVG files without adding or modifying SVG artwork.
4+
- Confirmed generated status bar icons preserve the existing visible status message text.
5+
- Confirmed the Game Hub save, warning prompt, and missing-game prompt states render the expected registry-backed status icons.
6+
- Confirmed shared icon button classes support paired visible text and icon-only aria-label patterns.

‎docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_report.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# PR_26175_ALFA_049-theme-v2-status-action-icons Report
2+
3+
## Summary
4+
- Added semantic Theme V2 icon registry aliases for status/action affordances: save, validation, delete, edit, and external-link.
5+
- Added shared icon button and status icon CSS classes in the Theme V2 CSS layer.
6+
- Updated the shared toolbox status bar to render a registry-backed semantic status icon while preserving the existing selected-game, message, and progress text behavior.
7+
8+
## Branch Validation
9+
PASS
10+
11+
## Notes
12+
- Icons supplement existing text and accessible button names; no visible status labels removed by ALFA_009 were reintroduced.
13+
- No large banners, modal-style messages, row highlights, inline styles, style blocks, or page-local CSS were added.
14+
- A local ignored .env from the original checkout was used only to run database-dependent Playwright lanes. It is ignored and is not included in the delta package.

‎docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_requirements-checklist.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# PR_26175_ALFA_049-theme-v2-status-action-icons Requirements Checklist
2+
3+
- PASS: Add shared icon button CSS classes in buttons.css.
4+
- PASS: Add shared status icon CSS classes in icons.css and status.css.
5+
- PASS: Add helper usage in toolbox-status-bar.js only for semantic status icons.
6+
- PASS: Keep status bar left, center, and right text behavior intact.
7+
- PASS: Preserve creator-facing language and avoid reintroducing removed visible status labels.
8+
- PASS: Ensure action icons have accessible names through paired visible text or aria-label.
9+
- PASS: Keep status/action icon usage consistent for save, warning, error, validation, info, add, edit, delete, close, and external-link affordances covered by the scoped files.
10+
- PASS: No large banners or modal-style messages introduced.
11+
- PASS: No row highlights introduced.
12+
- PASS: No inline styles, style blocks, or page-local CSS introduced.
13+
- PASS: Exact required validation lane is green.

‎docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_validation-lane.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# PR_26175_ALFA_049-theme-v2-status-action-icons Validation Lane
2+
3+
## Static Checks
4+
- PASS: node --check assets/theme-v2/js/theme-icons.js
5+
- PASS: node --check assets/theme-v2/js/toolbox-status-bar.js
6+
7+
## Playwright
8+
- PASS: npx playwright test tests/playwright/tools/ThemeV2SvgIconRegistry.spec.mjs --workers=1 (8 passed)
9+
- PASS: npx playwright test tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs --workers=1 (7 passed)
10+
11+
## Pattern Scan
12+
- PASS: rg -n "<[s]tyle|[s]tyle=" assets/theme-v2/js/theme-icons.js assets/theme-v2/js/toolbox-status-bar.js assets/theme-v2/css/icons.css assets/theme-v2/css/buttons.css assets/theme-v2/css/status.css tests/playwright/tools/ThemeV2SvgIconRegistry.spec.mjs tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs
13+
14+
## Branch Validation
15+
PASS

‎docs_build/dev/reports/codex_changed_files.txt‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
assets/theme-v2/css/accordion.css
1+
assets/theme-v2/css/buttons.css
22
assets/theme-v2/css/icons.css
3-
assets/theme-v2/css/panels.css
4-
assets/theme-v2/css/tables.css
5-
assets/theme-v2/css/theme.css
3+
assets/theme-v2/css/status.css
64
assets/theme-v2/js/theme-icons.js
7-
assets/theme-v2/js/tool-display-mode.js
8-
assets/toolbox/idea-board/js/index.js
5+
assets/theme-v2/js/toolbox-status-bar.js
96
tests/playwright/tools/ThemeV2SvgIconRegistry.spec.mjs
10-
docs_build/dev/reports/PR_26175_ALFA_048-theme-v2-chevron-conversion_manual-validation-notes.md
11-
docs_build/dev/reports/PR_26175_ALFA_048-theme-v2-chevron-conversion_report.md
12-
docs_build/dev/reports/PR_26175_ALFA_048-theme-v2-chevron-conversion_requirements-checklist.md
13-
docs_build/dev/reports/PR_26175_ALFA_048-theme-v2-chevron-conversion_validation-lane.md
7+
tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs
8+
docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_report.md
9+
docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_validation-lane.md
10+
docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_requirements-checklist.md
11+
docs_build/dev/reports/PR_26175_ALFA_049-theme-v2-status-action-icons_manual-validation-notes.md
1412
docs_build/dev/reports/codex_changed_files.txt
1513
docs_build/dev/reports/codex_review.diff

0 commit comments

Comments
 (0)