props moved to button

iTwin · Aug 10, 2023 · 2eae953 · 2eae953
1 parent 495e6ee
commit 2eae953
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 26 deletions.
diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.test.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.test.tsx
@@ -222,20 +222,6 @@ it('should render active and disabled sidebar buttons', () => {
   expect(mainItems[2]).toHaveClass('iui-submenu-open');
 });
 
-it('should handle custom class and style', () => {
-  const { container } = renderComponent({
-    className: 'test-class',
-    style: { height: 200 },
-  });
-
-  const sidebar = container.querySelector(
-    '.iui-side-navigation',
-  ) as HTMLElement;
-
-  expect(sidebar).toHaveClass('test-class');
-  expect(sidebar).toHaveStyle('height: 200px');
-});
-
 it('should render with submenu', () => {
   const { container } = renderComponent({
     submenu: <SidenavSubmenu>submenu content</SidenavSubmenu>,
@@ -277,6 +263,8 @@ it('should not show submenu if isSubmenuOpen is false', () => {
 
 it('passes custom props to subcomponents', () => {
   const { container } = renderComponent({
+    className: 'custom-class',
+    style: { width: 60 },
     wrapperProps: {
       className: 'custom-wrapper-class',
       style: { width: 70 },
@@ -295,13 +283,20 @@ it('passes custom props to subcomponents', () => {
     },
   });
 
-  // sideNav props test
+  // 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');
 
+  // button props test
+  const buttonElement = container.querySelector(
+    '.iui-button-base.iui-button.iui-sidenav-button.iui-expand.custom-class',
+  ) as HTMLElement;
+  expect(buttonElement).toBeTruthy();
+  expect(buttonElement.style.width).toBe('60px');
+
   // content props test
   const contentElement = container.querySelector(
     '.iui-sidenav-content.custom-sidenav-content-class',

diff --git a/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx b/packages/itwinui-react/src/core/SideNavigation/SideNavigation.tsx
@@ -113,33 +113,31 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
 
   const ExpandButton = (
     <IconButton
-      className='iui-sidenav-button iui-expand'
+      as='div'
+      className={cx('iui-sidenav-button iui-expand', className)}
       onClick={React.useCallback(() => {
         _setIsExpanded((expanded) => !expanded);
         onExpanderClick?.();
       }, [onExpanderClick])}
+      ref={forwardedRef}
+      {...rest}
     >
       <SvgChevronRight />
     </IconButton>
   );
 
   return (
     <Box
+      as='div'
       {...wrapperProps}
       className={cx('iui-side-navigation-wrapper', wrapperProps?.className)}
-      ref={forwardedRef}
     >
       <Box
         as='div'
-        className={cx(
-          'iui-side-navigation',
-          {
-            'iui-expanded': _isExpanded,
-            'iui-collapsed': !_isExpanded,
-          },
-          className,
-        )}
-        {...rest}
+        className={cx('iui-side-navigation', {
+          'iui-expanded': _isExpanded,
+          'iui-collapsed': !_isExpanded,
+        })}
       >
         {expanderPlacement === 'top' && ExpandButton}
         <Box