Skip to content

[MOL-22548] Add optional addon props for LocalNav & Drawer - #1479

Merged
qroll merged 7 commits into
masterfrom
MOL-22548
Sep 25, 2026
Merged

qroll merged 7 commits into
masterfrom
MOL-22548

Conversation

@jhyeep

@jhyeep jhyeep commented Sep 23, 2026

Copy link
Copy Markdown
Contributor

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing apis or functionality to change)
  • Documentation (change to documentation, comments or API descriptions)
  • Tests (improvements to unit tests or E2E tests)
  • Other (technical improvements, refactoring, or changes that don't fall into the above categories)

Description of changes

Drawer — customCallToAction

  • New prop customCallToAction?: JSX.Element on DrawerProps, rendered in the
    header alongside the heading.
  • Wide drawer: CTA sits inline to the right of the heading (heading truncates
    with an ellipsis).
  • Narrow drawer (useMaxWidthMediaQuery("sm")): CTA wraps below the heading,
    indented to line up with the title text, buttons flushed left.

LocalNav — titleAddon

  • New prop titleAddon?: TitleAddonProps on the shared LocalNavItemProps
    (both LocalNavMenu and LocalNavDropdown).
  • Own type with two slots: { left?: JSX.Element; right?: JSX.Element } — both
    usable at once. left renders before the title; right renders after and is
    flushed to the far right (margin-left: auto).
  • Wrapping titles: left addon (and the selected-item tick in the dropdown)
    stay aligned to the first line; right addon stays vertically centred. Handled
    natively by the component.
  • Ignored when a custom renderItem is supplied (caller owns layout).

Checklist

  • Changes follow the project guidelines in CONTRIBUTING.md and CONVENTIONS.md
  • Looks good on mobile and tablet
  • Updated documentation
  • Added/updated unit tests
  • Added/updated E2E tests

Screenshots

Drawer
image
image

LocalNav
image
image

@jhyeep
jhyeep requested review from ghazwan-gt and qroll September 23, 2026 05:37
@jhyeep jhyeep self-assigned this Sep 23, 2026
@jhyeep jhyeep added the type: enhancement New feature or request label Sep 23, 2026
Comment thread src/drawer/types.ts Outdated
Comment thread src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx
Comment thread stories/drawer/drawer.stories.tsx Outdated
Comment thread tests/drawer/drawer.spec.tsx Outdated
Comment thread src/drawer/types.ts Outdated
Comment thread src/drawer/drawer.styles.ts Outdated
Comment thread src/drawer/drawer.styles.ts Outdated
Comment thread src/drawer/drawer.tsx Outdated
Comment thread src/drawer/drawer.tsx Outdated
Comment thread src/drawer/drawer.styles.ts Outdated
Comment thread src/drawer/drawer.styles.ts Outdated
Comment thread stories/local-nav/local-nav.stories.tsx Outdated
Comment thread stories/local-nav/local-nav.stories.tsx Outdated
Comment thread e2e/nextjs-app/src/app/components/local-nav/menu-title-addon.e2e.tsx Outdated
@jhyeep
jhyeep requested a review from qroll September 24, 2026 21:08
@qroll qroll added this to the v4.0.0-alpha.13 milestone Sep 25, 2026
@qroll
qroll merged commit 2ec86af into master Sep 25, 2026
12 checks passed
@qroll
qroll deleted the MOL-22548 branch September 25, 2026 14:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants