fix(bottom-sheet): fix prop headerClassName

alfa-laboratory · Apr 12, 2022 · 2f2b106 · 2f2b106
1 parent bc55bac
commit 2f2b106
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/packages/bottom-sheet/src/component.test.tsx b/packages/bottom-sheet/src/component.test.tsx
@@ -137,21 +137,29 @@ describe('Bottom sheet', () => {
         });
 
         it('should set className', () => {
-            const className = 'class-name';
+            const className = 'class-name-1';
 
             render(<BottomSheetWrapper className={className} />);
 
             expect(document.body.querySelector(`.${className}`)).toBeInTheDocument();
         });
 
         it('should set contentClassName', () => {
-            const className = 'class-name';
+            const className = 'class-name-2';
 
             render(<BottomSheetWrapper contentClassName={className} />);
 
             expect(document.body.querySelector(`.${className}`)).toBeInTheDocument();
         });
 
+        it('should set headerClassName', () => {
+            const className = 'class-name-3';
+
+            render(<BottomSheetWrapper headerClassName={className} />);
+
+            expect(document.body.querySelector(`.${className}`)).toBeInTheDocument();
+        });
+
         it('should set z-index', () => {
             const zIndex = 9999;
 

diff --git a/packages/bottom-sheet/src/component.tsx b/packages/bottom-sheet/src/component.tsx
@@ -13,7 +13,7 @@ import { TransitionProps } from 'react-transition-group/Transition';
 import { SwipeCallback, useSwipeable } from 'react-swipeable';
 import { BaseModal } from '@alfalab/core-components-base-modal';
 
-import { Header } from './components/header/Component';
+import { Header, HeaderProps } from './components/header/Component';
 import { Footer } from './components/footer/Component';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component';
 
@@ -222,7 +222,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
         const fullHeight = use100vh()!;
         const targetHeight = `${fullHeight - HEADER_OFFSET}px`;
 
-        const headerProps = {
+        const headerProps: HeaderProps = {
             title,
             headerClassName,
             addonClassName,

diff --git a/packages/bottom-sheet/src/components/header/Component.tsx b/packages/bottom-sheet/src/components/header/Component.tsx
@@ -18,7 +18,7 @@ export type HeaderProps = {
     /**
      * Дополнительный класс
      */
-    className?: string;
+     headerClassName?: string;
 
     /**
      * Дополнительный класс для аддонов
@@ -78,7 +78,7 @@ export type HeaderProps = {
 
 export const Header: FC<HeaderProps> = ({
     title,
-    className,
+    headerClassName,
     addonClassName,
     closerClassName,
     backerClassName,
@@ -120,7 +120,7 @@ export const Header: FC<HeaderProps> = ({
 
     return (
         <div
-            className={cn(styles.header, className, {
+            className={cn(styles.header, headerClassName, {
                 [styles.justifyEnd]: !title,
                 [styles.highlighted]: headerHighlighted && sticky,
                 [styles.sticky]: sticky,