feat(SidenavBar): add first draft of the component - #1673
Draft
brtbrt wants to merge 17 commits into
Draft
Conversation
…tion Define the public compound API (SidenavBar, SidenavSection, SidenavItem) following the Mistica sidenav spec, with a working first-version render: - Collapse/expand (controlled and uncontrolled) with a default IconButton control and a custom render hook. - Sections with optional title and top/bottom dividers. - Items with leading asset, label, optional right slot, selected indicator (aria-current="page"), and nested items with inline expand/collapse. - Accessible collapsed view: labels kept via ScreenReaderOnly plus tooltip. - variant / boxed / divider / width / doublePanel props wired to the API. Behaviours still pending are marked with TODO(sidenav): collapsed dialog/double panels, mobile burger menu, content layout wrapper, fixed header/footer scroll dividers, and per-variant token matrices. Includes unit tests, story, and a playroom snippet. Ref: 1592
|
Size stats
|
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ❌ 4 problems detectedcomponents-sidenavbar--default [Movistar] (1 violations)components-sidenavbar--default [O2] (1 violations)components-sidenavbar--default [Vivo] (1 violations)components-sidenavbar--default [Vivo-evolution] (1 violations)ℹ️ You can run this locally by executing |
- Logo: 40×40 per spec (was 32×32) - Collapse button: explicit 32×32 per spec - Both fit cleanly in the 72px collapsed width (logo stacks vertically with button)
The IconButton with `small` prop already renders as 32×32 (icon 1.25rem + 12px padding). Explicit CSS constraints were causing the button to appear squeezed. The button now renders naturally without forced dimensions.
Footer region now has 24px top/bottom padding to match the header, creating visual symmetry at the top and bottom of the sidenav.
…oter Header and footer now use the correct color tokens per variant: - Default: background / backgroundContainer - Brand: backgroundBrandTop / backgroundContainerBrand - Alternative: background / backgroundContainerAlternative - Negative: backgroundNegative / backgroundContainerNegative - Media: backgroundNegative / backgroundContainerNegative Tokens are now applied via styleVariants keyed by the normalized variant prop.
Body now uses the correct backgroundContainer tokens per variant: - Default: backgroundContainer - Brand: transparent - Alternative: backgroundContainerAlternative - Negative: backgroundContainerNegative - Media: backgroundContainerNegative This ensures the body background matches the spec and provides visual consistency with the header and footer regions.
…lify API The collapse button is now always the default IconButton (later to be replaced with a Touchable containing the sidenav-collapse/uncollapse glyphs). Removes: - RenderCollapseButton type - renderCollapseButton prop and parameter - Conditional logic for custom collapse button rendering Simplifies the component signature and header rendering. TODO WIP: Replace IconButton with Touchable + icon when sidenav-collapse/uncollapse icons are added to mistica-icons.
Clarifies that SidenavBar.children must be SidenavSection elements, not arbitrary ReactNode.
Items now have proper spacing from the right edge, matching the spec's content area padding requirement (8px left/right).
Aligns with the 10px spacing pattern used in collapsed header controls, providing consistent spacing throughout the sidenav.
Items now have 8px base left padding plus nesting indentation, preventing the selected indicator from touching the left edge of the sidenav.
Section container now has consistent 10px left/right padding for all content (items, dividers, title), preventing them from touching the sidenav edges.
- Section title: 16px x padding (per spec) - Section content (items + dividers): 10px x padding Wraps items and dividers in a sectionContent container so they get proper 10px left/right spacing while section title gets its own 16px.
|
Screenshot tests report ❌ icons / icons-catalog-for-blau-filled-1-snap
❌ icons / icons-catalog-for-blau-light-1-snap
❌ icons / icons-catalog-for-blau-regular-1-snap
❌ icons / icons-catalog-for-movistar-filled-1-snap
❌ icons / icons-catalog-for-movistar-light-1-snap
❌ icons / icons-catalog-for-movistar-regular-1-snap
❌ icons / icons-catalog-for-o-2-filled-1-snap
❌ icons / icons-catalog-for-o-2-light-1-snap
❌ icons / icons-catalog-for-o-2-regular-1-snap
|
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
First draft of the
SidenavBarcomponent, following the Mistica sidenav spec(
specs/sidenav.md). The goal of this PR is to agree on the public API surfaceearly so review can start while the internals are iterated.
Public API (compound components)
SidenavBar— the<nav>landmark. Props:variant,boxed,divider,collapsible,collapsed/defaultCollapsed/onCollapse,doublePanel,width/collapsedWidth,logo,header,footer,renderCollapseButton,aria-label,dataAttributes.SidenavSection— optionaltitleanddividerTop/dividerBottom.SidenavItem—label,Icon,selected,right,defaultOpen, nestedchildren, and an exclusiveonPress/href/tonavigation union (an itemmay also just group children and expand).
What works in this draft
IconButtoncontrol (and a custom render hook).
aria-current="page"),and nested items with inline expand / collapse (second focus stop on the chevron
for items that both navigate and group).
ScreenReaderOnly+ tooltip).args/argTypes, and a Playroom snippet.Intentionally not implemented yet (marked
TODO(sidenav))MainNavigationBar).brand/alternative/negative/media(onlydefaultis fully styled today; other variants still provide thecorrect
ThemeVariantcontext to descendants).Feedback on the API shape is very welcome before the behaviours above are built out.
Ref: 1592