Admin UI on @plugpress/ui (migration → v0.8.2) + header refresh + hygiene - #37
Merged
Conversation
Retire the @wordpress/components compat shim (admin/src/ui.jsx) and compose every admin screen directly on @plugpress/ui design-system components; bump the pin v0.2.0 → v0.6.0. - Screens on DS components: TopBar (Tabs/StatusDot), Onboarding + Permissions (CardRadioGroup, ApplyBar, toast), Home (Hero/CalloutCard/CardGrid/RowList), Connect tab (PageHeader/EmptyState/RowList/useConfirm/Snippet), ConnectionHealth (CodeBlock/CalloutCard), ConnectWizard (Steps/CodeBlock/Snippet/LiveIndicator/ useCopy — everCopied gate + back-out revoke preserved), Guidance/Memory (Card/RowList/Switch/Field/useConfirm/toast), Activity (FilterTabs/EmptyState/Badge). - Mount TooltipProvider/ConfirmProvider/Toaster once at the app root. - Delete admin/src/ui.jsx shim and dead theme icons; drop wp-components from the PHP fallback deps + stylesheet deps (no @wordpress/components left anywhere). - style.scss 2,203 → 1,109 lines (kept: token aliases, setup shell, permissions lanes/chips, activity timeline, wizard flourishes). - Single-source the brand mark: assets/brand/mark.svg is the only copy; React <BrandMark/> (SVGR) and the PHP admin-menu icon both read it. - Reconcile CLAUDE.md + admin/DESIGN-ALIGNMENT.md to name @plugpress/ui as the kit. v0.6.0 verified non-breaking for Saddle (all 34 imports resolve; flat Tabs/ FilterTabs/Steps + every pp-* class Saddle targets survive; adds a WCAG 2.2 AA pass). Verified: build clean, react/wp-* externalized, no google-fonts; 300 PHPUnit tests green; wp-playground smoke test (app renders, DS + product stylesheets ordered, pp-scope on body, monochrome accent wins, menu icon reads the single-source SVG). Follow-up: #35 (full-width header + Home stat tiles + a11y). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W7RDwBHyNgrKKcDKYeuVLk
The fleet:agents tooling bumped the pin to v0.6.1; package.json already carried it but node_modules/lockfile lagged at v0.6.0. Reinstalled at v0.6.1 and rebuilt — admin/build is byte-identical (v0.6.1 changed only README, a consumer-agent guide, and fleet tooling; zero component/CSS/JS changes), so nothing visual differs from the tested v0.6.0 build. - package-lock.json: v0.6.0 → v0.6.1 (now consistent with package.json). - AGENTS.md: fleet:agents-managed pointer to the @plugpress/ui consumer guide (matches waggle/knovia). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W7RDwBHyNgrKKcDKYeuVLk
…nt Home hero Header (TopBar) becomes a full-bleed product bar: brand logo + name + version tag on the left; the safety status pill + Pause, then Docs and ★ Rate links on the right; section nav below. Reads version/docsUrl/rateUrl from saddleData (new, filterable PHP fields). Layout: the width constraint moves off .saddle-app onto .saddle-top__inner + a new centered .saddle-content (id=pp-main) so the bar spans edge-to-edge, sticky under the admin bar. Home: remove the "Right now" hero — it restated the access level the header now shows. Home leads with the connect callout + cards; unused props cleaned up. Also bumps @plugpress/ui to v0.6.2, which fixes the Activity filter tabs: the DS FilterTabs never reset the native <button> chrome, so wp-admin borders bled through into ugly bordered pills (fixed upstream to match SegmentedControl/Tabs). Verified: 300 tests green; build clean, react/wp-* externalized, no google-fonts; FilterTabs reset present in the built CSS; saddleData serves version/docs/rate end-to-end in wp-playground; app mounts with no fatal. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W7RDwBHyNgrKKcDKYeuVLk
Complete the remaining scope of #35 (the full-bleed header and #pp-main anchor were already shipped on this branch): - Home: three DS StatCard tiles in a StatGrid — Connected apps, Access level, Actions logged — sourced from data Home already loads. Drop the now-redundant "%d apps" header badge (and its unused sprintf/_n). - App: DS SkipLink -> #pp-main as the first focusable element (a11y). - SCSS: .saddle-stats outer spacing only; StatGrid owns its layout. - Resync @plugpress/ui 0.6.2 -> v0.8.0 (pin was already bumped but the install was never re-run) and rebuild. Externals unchanged, no google-fonts in built CSS. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
v0.8.0 newly implements Button `asChild` via Slot, whose React.Children.only rejects the `children: [loading && spinner, children]` array the Button always builds — so any `Button asChild` throws "expected to receive a single React element child" at render. Our TopBar Docs/Rate links used that path. Drop asChild + the inner <a>; pass `href` directly so Button renders an <a> itself (Comp = href ? 'a' : 'button'). Same markup and classes, no Slot. Upstream: the DS Button asChild path is broken for every consumer on v0.8.0 — needs a separate fix in plugpress-ui. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The block/core-content/memory/site ability groups each carried an identical private static log() wrapper around Saddle_Log::record(). Replace all four with one shared Saddle_Log::record_action( $action, $target, $summary ) helper (17 call sites). Saddle_Log is required unconditionally in saddle.php, so the per-wrapper class_exists() guard was dead defensiveness and is dropped. Maintainability only — no behavior change. Relevant suites green (79 tests). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Consume the upstream fix for the Button asChild → Slot Children.only crash (plugpress-ui a303a8f / v0.8.1). Saddle's TopBar already sidesteps it by using `Button href=…`; this keeps the DS itself sound as belt-and-suspenders. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Picks up the DS fix for the "Dialog has no accessible name" warning that fired on ConfirmProvider's idle (closed) dialog on every admin load. Console is clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Brings the Saddle admin UI onto
@plugpress/uiend-to-end, adds the header/Home refresh from #35, fixes two design-system crashes surfaced during live testing, and lands the #8 free-side hygiene.What's in here
UI migration + refresh
@plugpress/ui(TopBar, Onboarding, Permissions, Home, Connect, ConnectionHealth, ConnectWizard, Guidance/Memory, Activity);ui.jsxcompat shim deleted;style.scsscut ~1,260 lines; brand mark single-sourced.StatCard/StatGridtiles (Connected apps · Access level · Actions logged),SkipLink→#pp-maina11y. Dropped the redundant "%d apps" badge.Design-system crash fixes (released upstream, pinned here)
@plugpress/uiv0.8.1 —Button asChildthrewReact.Children.onlyon every use (component passed a 2-entry[spinner, children]array toSlot). Saddle also switched TopBar's Docs/Rate links toButton href=(cleaner idiom).@plugpress/uiv0.8.2 —Dialog"no accessible name" dev-warning fired on closed dialogs (ConfirmProvider's idle dialog), noisy on every load; now gated onopen.v0.8.2.#8 hygiene (free side)
log()wrappers (block/core-content/memory/site, 17 call sites) into oneSaddle_Log::record_action()helper — maintainability only, no behavior change.--scope userfix ships in the build.connect-test.php, 22 tests).Verification
admin/build/index.asset.phpexternals unchanged; no google-fonts in built CSS.14af28ac).Closes #35. #8 handled (closed separately; optional 401-legibility tail split to #36).