✨ feat: overhaul Sidebar for MFE-resilient layout, portal tooltips and SSR-safe mode hint#632
Merged
Merged
Conversation
…d SSR-safe mode hint - Render the collapsed-mode option label via a Radix tooltip portal so it escapes any consumer overflow clipping, not just the sidebar rail. - Ship a new `Sidebar.css` (auto-imported with the component) with plain un-layered protection rules — width, scroll, list reset, gap, item padding, separator, scrollbar, hover/active and Logo padding via CSS custom properties — so a federated remote's reset can no longer break the host sidebar. Adds stable `data-konstruct-sidebar-*` hooks (`-logo`, `-label`, `-separator`) and a `style` prop on the wrapper to drive the new variables. - Hover/active styling now lives entirely in the protection sheet (with variables consumers set via `style`), and active items expose `data-active="true"` so the rule can target them without relying on utility classes. - `useSidebarMode` accepts an `initialMode` hint (e.g. read from a cookie on the server) used as the SSR fallback so Next-style apps no longer flicker from `expanded` to the actual viewport mode after hydration. Probes all three breakpoint ranges so resizing to desktop after a tablet visit resolves correctly. - Items center their icon-only content in collapsed mode and the click / tooltip-trigger area now covers the full option (padding moved to the inner anchor). - Misc polish: drop the wrapper's width transition (no flicker on mode change), thin scrollbar tuned to match Storybook's, separator opacity bumped to bg-white/20, items use rounded (4px), Logo centers in collapsed and v1.11.1 caption gets text-center + pt-1 there.
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
Substantial Sidebar rework, motivated by issues hit while integrating it into a Next.js + federated micro-frontend host:
Sidebar.cssships plain (un-layered) rules for the bits that federated remotes were clobbering: width / scrollbar / overflow on the nav, list reset, item / Logo padding, separator and the hover / active background. Adds stabledata-konstruct-sidebar-*hooks (-logo,-label,-separator) and astyleprop on the wrapper so consumers theme via CSS custom properties (--konstruct-sidebar-hover-bg,--konstruct-sidebar-active-bg,--konstruct-sidebar-logo-padding-*) — inline styles outrank any utility a remote can ship.NavigationOptionexposesdata-active="true"so the active rule lives in the protection sheet alongside:hover, no more relying on utility classes that lose to un-layered overrides.useSidebarModenow accepts aninitialModehint (typically a cookie set on the previous client visit) used as the SSR fallback, so Next-style apps no longer flash fromexpandedto the actual mode after hydration. The hook also probes all three breakpoint ranges explicitly so a tablet → desktop resize resolves correctly.<li>to the inner<a>so navigation clicks and the Radix tooltip trigger cover the full option, not just the icon.bg-white/20),rounded(4px) on items, Logo centers in collapsed and the v1.11.1 caption getstext-center+ a smallpt-1.Test plan
npm run lint/npm run check:types/npm run check:prettier(run by Husky on commit)npx vitest run lib/components/Sidebar— all Sidebar tests passing (one collapsed-mode label assertion updated to expectsr-onlyinstead of the legacymax-w-0)expanded,collapsedanddrawermodes (logo, options, separators, hover, active)initialModeis provided, no expanded → collapsed flicker on tablet