refactor(ui): tokenize raw z-index one-offs into a semantic layering scale#8049
Merged
Conversation
|
Superagent didn't find any vulnerabilities or security issues in this PR. |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
metagraphed-ui | 6b4d417 | Commit Preview URL Branch Preview URL |
Jul 24 2026, 08:49 PM |
…scale ~56 sites across both packages used bare Tailwind z-* steps (z-10/20/30/40/50 plus z-[60]/z-[100]) with no documented layering system -- undocumented stacking is how a future component silently lands behind a modal or above a toast. Author a named --mg-z-* scale in packages/ui-kit/src/styles.css: --mg-z-sticky(10)/raised(20)/nav(30)/overlay(40)/modal(50)/progress(60)/ skip-link(100), matching Radix's own z-50 default so its portalled primitives (dialog/sheet/popover/tooltip/hover-card) need no override. Sweep all 50 non-exception sites onto z-[var(--mg-z-*)]. Two sites didn't transliterate 1:1: a column-customizer.tsx click-outside backdrop and a page-actions.tsx overflow menu were both bare z-30, but neither is nav chrome -- they're popover-style overlays, so both moved to --mg-z-overlay (their DOM order already keeps the visible panel above its own backdrop at equal z-index). Left the 6 z-[1]/z-[2] sticky-cell sites in the two compare drawers alone -- local stacking context (a sticky corner cell over its own sticky row/col), not a global layer -- and added a comment on each explaining why. Guardrail (warn-tier) in both eslint configs flags any remaining bare z-10/20/30/40/50 or z-[N] step, including the 6 documented exceptions (same residual-worklist convention the shadow-token rule already uses). Documented the full scale in apps/ui/CONTRIBUTING.md's Bone & Ink section. Verified via getComputedStyle: all 7 --mg-z-* custom properties resolve to their intended numeric values, and the sticky table header / site nav report the correct 10/30 z-index in a live preview. Closes #7841
… style CI's format:check caught this -- prettier pads markdown table columns to a fixed width, which the table added in the previous commit didn't match.
JSONbored
force-pushed
the
z-index-tokens-7841
branch
from
July 24, 2026 20:46
368ff33 to
6b4d417
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8049 +/- ##
=======================================
Coverage 97.67% 97.67%
=======================================
Files 220 220
Lines 27206 27211 +5
Branches 10783 10788 +5
=======================================
+ Hits 26574 26579 +5
Misses 140 140
Partials 492 492 🚀 New features to boost your workflow:
|
loopover-orb
Bot
added
the
gittensor:bug
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.
Summary
~56 sites across
apps/uiandpackages/ui-kitused bare Tailwindz-*steps (z-10/20/30/40/50plusz-[60]/z-[100]) with no documented layering system. Nothing was visibly broken, but undocumented stacking is how a future component silently lands behind a modal or above a toast.Tokens
Added to
packages/ui-kit/src/styles.css:--mg-z-sticky--mg-z-raised--mg-z-nav--mg-z-overlay--mg-z-modal--mg-z-progress--mg-z-skip-linkSweep
All 50 non-exception sites converted to
z-[var(--mg-z-*)]. Two didn't transliterate literally:column-customizer.tsx's click-outside backdrop andpage-actions.tsx's overflow menu were both barez-30, but neither is nav chrome — they're popover-style overlays, so both moved to--mg-z-overlayinstead (their DOM order already keeps the visible panel above its own backdrop at equal z-index, so no stacking change).Left alone (documented exception): the 6
z-[1]/z-[2]sticky-cell sites insubnets-compare-drawer.tsxandvalidators-compare-drawer.tsx— a sticky corner cell over its own sticky row/col, a local stacking context rather than a global layer. Added a comment on each.Guardrail + docs
no-restricted-syntaxrule in botheslint.config.tsfiles flags any remaining barez-10/20/30/40/50orz-[N]step — including the 6 documented exceptions above, same residual-worklist convention the shadow-token rule already uses.apps/ui/CONTRIBUTING.md's Bone & Ink section.Verification
tsc --noEmitclean in both packageseslint .(full package, not justsrc) — 0 errors in both packages; exactly 6 warnings from the documented z-index exceptions, no othersvitest run— 191 files / 1461 tests inapps/ui, 16 files / 88 tests inui-kit, all passingpackages/ui-kitrebuilt (dist/index.{js,cjs,css})getComputedStyleconfirms all 7--mg-z-*custom properties resolve to their intended numeric values, and the sticky table header (z-index: 10) / site nav (z-index: 30) report the correct resolved values on a real rendered pageCloses #7841