n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

S8 fix - help centre glossary classes leaked onto the Issue (hold) status pill

Browse Source 
help.js injects its stylesheet on every page, and its glossary pills used bare
class selectors (.pill-draft ... .pill-hold). The creator's Issue (hold) status
radio also carries the class pill-hold, so the injected rule painted that radio
error-red at ALL times - selected or not. Reported by Nick ('why is the issues
(hold) button illuminated at all times'), 2026-08-20.

Pre-existing, not from this branch: help.js has had the bare selectors since
the login-portal commit, and the creator's pill-hold class predates the R2
branch. Every glossary rule is now scoped to .ui-help-pill.pill-*, which the
glossary markup already carries. Verified live: unselected, the hold pill's
computed style now matches its neighbours exactly; selected, it is still the
red fill; the glossary's own Hold pill keeps its tint. helptip_check gains the
pin (13 -> 14): no bare .pill-* selector in help.js, ever again.

Item: S8 (the help component's app-wide surface).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Nick Siegfried
2026-08-20 15:59:30 -07:00
parent 8663d81af3
commit fb89b1f6e1
3 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
html/help.js
View File

@@ -161,10 +161,14 @@
.ui-help-content th, .ui-help-content td{ border:1px solid var(--cds-border-subtle); padding:6px 9px; text-align:left; vertical-align:top; }
.ui-help-content th{ background:var(--cds-layer-accent); font-weight:600; }
.ui-help-pill{ display:inline-block; padding:1px 8px; border-radius:11px; font-size:11px; font-weight:600; }
.pill-draft{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); } .pill-sched{ background:var(--cds-highlight); color:var(--cds-link-primary-hover); }
.pill-prog{ background:var(--wp-status-warning-bg); color:var(--wp-status-warning-text); } .pill-issued{ background:var(--wp-status-success-bg); color:var(--wp-status-success-text); }
.pill-qc{ background:var(--cds-highlight); color:var(--cds-link-primary); } .pill-closed{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); }
.pill-hold{ background:var(--wp-status-error-bg); color:var(--wp-status-error-text); }
/* Scoped to .ui-help-pill: this block is injected on EVERY page, and the
creator's Issue (hold) status radio also carries the class pill-hold - the
bare selector painted that radio error-red at all times, selected or not
(found by Nick 2026-08-20; the collision dates to the login-portal era). */
.ui-help-pill.pill-draft{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); } .ui-help-pill.pill-sched{ background:var(--cds-highlight); color:var(--cds-link-primary-hover); }
.ui-help-pill.pill-prog{ background:var(--wp-status-warning-bg); color:var(--wp-status-warning-text); } .ui-help-pill.pill-issued{ background:var(--wp-status-success-bg); color:var(--wp-status-success-text); }
.ui-help-pill.pill-qc{ background:var(--cds-highlight); color:var(--cds-link-primary); } .ui-help-pill.pill-closed{ background:var(--cds-layer-accent); color:var(--cds-text-secondary); }
.ui-help-pill.pill-hold{ background:var(--wp-status-error-bg); color:var(--wp-status-error-text); }
.ui-help-callout{ background:var(--cds-highlight); border-left:3px solid var(--cds-link-primary); padding:10px 14px; border-radius:0;
font-size:13px; line-height:1.55; margin:10px 0; }
.ui-help-noresult{ display:none; color:var(--cds-text-secondary); font-size:14px; padding:10px 2px; }