Merge pull request #249 from qualcomm/dev

navDensity

Author: R-Bower

packages/frameworks/react-mdx/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @qualcomm-ui/react-mdx Changelog
 
+## 2.6.0
+
+Apr 28th, 2026
+
+### Features
+
+- [docs-layout]: add NavDensity type and prop, defaults to "compact" ([4cd65b5](https://github.com/qualcomm/qualcomm-ui/commit/4cd65b5))
+- [sidebar]: integrate navDensity from context ([9636533](https://github.com/qualcomm/qualcomm-ui/commit/9636533))
+
 ## 2.5.0
 
 Apr 23rd, 2026

packages/frameworks/react-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qualcomm-ui/react-mdx",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "React components and utilities for MDX documentation sites based on QUI Docs",
   "author": "Ryan Bower",
   "license": "BSD-3-Clause-Clear",

packages/frameworks/react-mdx/src/docs-layout/docs-layout.css

@@ -133,14 +133,16 @@
     height: 100%;
   }
 
-  /* TODO: remove when the small side nav size lands */
-  .qui-side-nav__node-root {
-    height: 32px;
-    min-height: 32px;
-
-    &:has(+ .qui-side-nav__node-root),
-    &:has(+ .qui-side-nav__branch-root) {
-      margin-bottom: 1px;
+  &[data-nav-density="compact"] {
+    /* TODO: remove when the small side nav size lands */
+    .qui-side-nav__node-root {
+      height: 32px;
+      min-height: 32px;
+
+      &:has(+ .qui-side-nav__node-root),
+      &:has(+ .qui-side-nav__branch-root) {
+        margin-bottom: 1px;
+      }
     }
   }
 

packages/frameworks/react-mdx/src/docs-layout/layout/root.tsx

@@ -44,6 +44,7 @@ export function Root({
   docProps,
   hideToc,
   mdxComponents,
+  navDensity = "compact",
   onDemoSettingsChange,
   onDemoStateChange,
   onPackageManagerChange,
@@ -136,6 +137,7 @@ export function Root({
       hidePageLinks,
       hideSideNav,
       mainContentElement,
+      navDensity,
       navItems,
       pageExport,
       pageFrontmatter: pageData?.data ?? {},
@@ -149,14 +151,18 @@ export function Root({
   }, [
     exports,
     hideToc,
+    navDensity,
     mainContentElement,
     navItems,
     pageDocProps,
     pageMap,
     pathname,
   ])
 
-  const mergedProps = mergeProps({className: "qui-docs__root"}, props)
+  const mergedProps = mergeProps(
+    {className: "qui-docs__root", "data-nav-density": navDensity},
+    props,
+  )
 
   return (
     <MdxDocsProvider value={mdxDocsContextValue}>

packages/frameworks/react-mdx/src/docs-layout/layout/sidebar.tsx

@@ -62,7 +62,7 @@ export function Sidebar({
   ...props
 }: SidebarProps): ReactElement {
   const ref = useRef<HTMLDivElement | null>(null)
-  const {navItems, pathname} = useMdxDocsLayoutContext()
+  const {navDensity, navItems, pathname} = useMdxDocsLayoutContext()
   const {renderLink: RenderLink} = useMdxDocsContext()
 
   const initialCollection = useMemo(
@@ -213,7 +213,7 @@ export function Sidebar({
   }, [scrollIntoView])
 
   const mergedProps = mergeProps(
-    {className: "qui-docs-sidebar__root", ref},
+    {className: "qui-docs-sidebar__root", "data-nav-density": navDensity, ref},
     props,
   )
 

packages/frameworks/react-mdx/src/docs-layout/layout/use-mdx-docs-layout.ts

@@ -17,10 +17,13 @@ import type {
 } from "@qualcomm-ui/mdx-common"
 import type {PropsContextValue} from "@qualcomm-ui/react-mdx/typedoc"
 
+import type {NavDensity} from "../types"
+
 export interface MdxDocsLayoutContextState {
   hidePageLinks: boolean
   hideSideNav: boolean
   mainContentElement: HTMLElement | null
+  navDensity: NavDensity
   navItems: NavItem[]
   pageExport: boolean | KnowledgePageData | undefined
   pageFrontmatter: Record<string, unknown>

packages/frameworks/react-mdx/src/docs-layout/types.ts

@@ -21,26 +21,20 @@ export type TocHighlightStrategy = "nearest" | "viewport"
 
 /**
  * The function used to render the application's clientside link component.
- *
- * @public
  */
 export type RenderLink = (
   props: HTMLAttributes<HTMLAnchorElement> & {href: string},
 ) => ReactNode
 
-/**
- * @public
- */
 export interface DocPropsSettings {
   /**
    * URL for the changelog, used by the `@since` tags.
    */
   changelogUrl?: string
 }
 
-/**
- * @public
- */
+export type NavDensity = "compact" | "comfy"
+
 export interface DocsLayoutSettings extends Pick<
   MdxDocsContextValue,
   "demoSettings" | "packageManager" | "ssrUserAgent"
@@ -81,6 +75,16 @@ export interface DocsLayoutSettings extends Pick<
    */
   mdxComponents?: ReturnType<typeof useMDXComponents>
 
+  /**
+   * Governs sidebar nav item padding and size.
+   *
+   * @option `compact`: sidebar nav items render with reduced padding.
+   * @option 'comfy': sidebar nav items render with increased padding.
+   *
+   * @default 'compact'
+   */
+  navDensity?: NavDensity
+
   /**
    * Function fired when the demo settings change.
    */

packages/frameworks/react-swagger/package.json

@@ -48,7 +48,7 @@
     "@qualcomm-ui/qds-core": "workspace:^1.26.1",
     "@qualcomm-ui/react": "workspace:^1.20.3",
     "@qualcomm-ui/react-core": "workspace:^1.4.3",
-    "@qualcomm-ui/react-mdx": "workspace:^2.5.0",
+    "@qualcomm-ui/react-mdx": "workspace:^2.6.0",
     "@qualcomm-ui/react-test-utils": "workspace:^1.0.1",
     "@qualcomm-ui/tsconfig": "catalog:",
     "@qualcomm-ui/utils": "workspace:^1.2.3",