fix(sidenav-toggle): fix button size, add className prop #562

Author: airikej

src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.module.scss

@@ -1,9 +1,12 @@
 @use '@tedi-design-system/core/bootstrap-utility/breakpoints';
 
+$toggle-button-height: 3.5rem;
+$toggle-button-width: 3.5rem;
+
 .tedi-sidenav-toggle {
   z-index: var(--z-index-sidenav);
-  width: var(--button-sm-height);
-  height: var(--button-sm-height);
+  width: $toggle-button-width;
+  height: $toggle-button-height;
   margin: 0;
   border-radius: 0;
 

src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.spec.tsx

@@ -107,4 +107,19 @@ describe('SidenavToggle', () => {
     const button = screen.getByRole('button');
     expect(button.className).toContain('tedi-sidenav-toggle--open');
   });
+
+  test('applies custom className prop', () => {
+    const customClass = 'my-special-toggle extra-class';
+
+    render(<SidenavToggle {...defaultProps} className={customClass} />);
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveClass('my-special-toggle');
+    expect(button).toHaveClass('extra-class');
+
+    expect(button).toHaveClass('tedi-sidenav-toggle');
+    expect(button).toHaveClass('tedi-sidenav-toggle--mobile');
+    expect(button).not.toHaveClass('tedi-sidenav-toggle--open');
+  });
 });

src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.tsx

@@ -30,6 +30,10 @@ export type SidenavToggleProps = {
    * Variant of toggle (mobile overlay or collapse control)
    */
   variant?: SidenavToggleVariant;
+  /**
+   * Add custom class to override styles
+   */
+  className?: string;
 };
 
 export const SidenavToggle = ({
@@ -38,15 +42,20 @@ export const SidenavToggle = ({
   referenceRef,
   getReferenceProps = () => ({}),
   variant = 'mobile',
+  className,
 }: SidenavToggleProps) => {
   const { getLabel } = useLabels();
 
   const toggleLabel = getLabel('header.toggle', menuOpen);
 
-  const BEM = cn(styles['tedi-sidenav-toggle'], {
-    [styles['tedi-sidenav-toggle--open']]: menuOpen,
-    [styles[`tedi-sidenav-toggle--${variant}`]]: true,
-  });
+  const BEM = cn(
+    styles['tedi-sidenav-toggle'],
+    {
+      [styles['tedi-sidenav-toggle--open']]: menuOpen,
+      [styles[`tedi-sidenav-toggle--${variant}`]]: true,
+    },
+    className
+  );
 
   const Element = variant === 'collapse' ? FloatingButton : Button;