Side Navigation customization

.changeset/old-swans-love.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+Added wrapperProps, contentProps, topProps, and bottomProps to Side Navigation component to improve customization. Top-level props (className, styling, etc) now passed to SideNav button instead of to the wrapper.

packages/itwinui-react/src/core/SideNavigation/SideNavigation.test.tsx

@@ -229,7 +229,7 @@ it('should handle custom class and style', () => {
   });
 
   const sidebar = container.querySelector(
-    '.iui-side-navigation-wrapper',
+    '.iui-side-navigation',
   ) as HTMLElement;
 
   expect(sidebar).toHaveClass('test-class');
@@ -274,3 +274,61 @@ it('should not show submenu if isSubmenuOpen is false', () => {
   expect(wrapper.querySelector('.iui-side-navigation-submenu')).toBeFalsy();
   expect(screen.queryByText('submenu content')).toBeFalsy();
 });
+
+it('passes custom props to subcomponents', () => {
+  const { container } = renderComponent({
+    className: 'custom-class',
+    style: { width: 60 },
+    wrapperProps: {
+      className: 'custom-wrapper-class',
+      style: { width: 70 },
+    },
+    contentProps: {
+      className: 'custom-sidenav-content-class',
+      style: { width: 80 },
+    },
+    topProps: {
+      className: 'custom-sidenav-top-class',
+      style: { width: 90 },
+    },
+    bottomProps: {
+      className: 'custom-sidenav-bottom-class',
+      style: { width: 100 },
+    },
+  });
+
+  // sidenav props test
+  const sidenavElement = container.querySelector(
+    '.iui-side-navigation.iui-collapsed.custom-class',
+  ) as HTMLElement;
+  expect(sidenavElement).toBeTruthy();
+  expect(sidenavElement.style.width).toBe('60px');
+
+  // wrapper props test
+  const wrapperElement = container.querySelector(
+    '.iui-side-navigation-wrapper.custom-wrapper-class',
+  ) as HTMLElement;
+  expect(wrapperElement).toBeTruthy();
+  expect(wrapperElement.style.width).toBe('70px');
+
+  // content props test
+  const contentElement = container.querySelector(
+    '.iui-sidenav-content.custom-sidenav-content-class',
+  ) as HTMLElement;
+  expect(contentElement).toBeTruthy();
+  expect(contentElement.style.width).toBe('80px');
+
+  // top props test
+  const topElement = container.querySelector(
+    '.iui-top.custom-sidenav-top-class',
+  ) as HTMLElement;
+  expect(topElement).toBeTruthy();
+  expect(topElement.style.width).toBe('90px');
+
+  // bottom props test
+  const bottomElement = container.querySelector(
+    '.iui-bottom.custom-sidenav-bottom-class',
+  ) as HTMLElement;
+  expect(bottomElement).toBeTruthy();
+  expect(bottomElement.style.width).toBe('100px');
+});

packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx

@@ -57,6 +57,22 @@ type SideNavigationProps = {
    * @default false
    */
   isSubmenuOpen?: boolean;
+  /**
+   * Passes props for SideNav wrapper.
+   */
+  wrapperProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes props for SideNav content.
+   */
+  contentProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes props for SideNav top.
+   */
+  topProps?: React.ComponentProps<'div'>;
+  /**
+   * Passes props for SideNav bottom.
+   */
+  bottomProps?: React.ComponentProps<'div'>;
 };
 
 /**
@@ -83,6 +99,10 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     onExpanderClick,
     submenu,
     isSubmenuOpen = false,
+    wrapperProps,
+    contentProps,
+    topProps,
+    bottomProps,
     ...rest
   } = props;
 
@@ -105,19 +125,33 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
 
   return (
     <Box
-      className={cx('iui-side-navigation-wrapper', className)}
+      {...wrapperProps}
+      className={cx('iui-side-navigation-wrapper', wrapperProps?.className)}
       ref={forwardedRef}
-      {...rest}
     >
       <Box
-        className={cx('iui-side-navigation', {
-          'iui-expanded': _isExpanded,
-          'iui-collapsed': !_isExpanded,
-        })}
+        as='div'
+        className={cx(
+          'iui-side-navigation',
+          {
+            'iui-expanded': _isExpanded,
+            'iui-collapsed': !_isExpanded,
+          },
+          className,
+        )}
+        {...rest}
       >
         {expanderPlacement === 'top' && ExpandButton}
-        <Box className='iui-sidenav-content'>
-          <Box className='iui-top'>
+        <Box
+          as='div'
+          {...contentProps}
+          className={cx('iui-sidenav-content', contentProps?.className)}
+        >
+          <Box
+            as='div'
+            {...topProps}
+            className={cx('iui-top', topProps?.className)}
+          >
             {items.map((sidenavButton: JSX.Element, index) =>
               !_isExpanded ? (
                 <Tooltip
@@ -132,7 +166,11 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
               ),
             )}
           </Box>
-          <Box className='iui-bottom'>
+          <Box
+            as='div'
+            {...bottomProps}
+            className={cx('iui-bottom', bottomProps?.className)}
+          >
             {secondaryItems?.map((sidenavButton: JSX.Element, index) =>
               !_isExpanded ? (
                 <Tooltip