fix/bottom sheet footer gap

.changeset/seven-donkeys-watch.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-bottom-sheet': minor
+'@alfalab/core-components': minor
+---
+
+Добавлен отступ футера

packages/bottom-sheet/package.json

@@ -23,6 +23,9 @@
         "tslib": "^2.4.0",
         "use-sync-external-store": "^1.4.0"
     },
+    "devDependencies": {
+        "@alfalab/core-components-button": "^12.0.0"
+    },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"

packages/bottom-sheet/src/__snapshots__/component.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`Bottom sheet Snapshots tests should match snapshot 1`] = `
           class="component modal appear appearActive"
         >
           <div
-            class="content hasHeader"
+            class="content hasFooter hasHeader"
           >
             <div
               class="wrapper"
@@ -74,6 +74,9 @@ exports[`Bottom sheet Snapshots tests should match snapshot 1`] = `
                       Bottom sheet content
                     </div>
                   </div>
+                  <div
+                    class="footer sticky"
+                  />
                 </div>
               </div>
             </div>

packages/bottom-sheet/src/component.tsx

@@ -110,6 +110,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             backButtonProps,
             iOSLock = false,
             virtualKeyboard = false,
+            showFooter = true,
         },
         ref,
     ) => {
@@ -667,10 +668,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                             ref={mergeRefs([scrollableContainer, scrollableContainerRef])}
                         >
                             {!hideHeader && !emptyHeader && (
-                                <Header
-                                    {...headerProps}
-                                    showSwipeMarker={showSwipeMarker}
-                                />
+                                <Header {...headerProps} showSwipeMarker={showSwipeMarker} />
                             )}
 
                             <div
@@ -684,7 +682,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                                 {children}
                             </div>
 
-                            {actionButton && (
+                            {showFooter && (
                                 <Footer
                                     sticky={stickyFooter}
                                     className={cn(bgClassName, footerClassName)}

packages/bottom-sheet/src/components/footer/index.module.css

@@ -2,19 +2,23 @@
 @import '../../vars.css';
 
 .footer {
-    padding: var(--gap-16) var(--gap-16);
+    padding-top: var(--gap-16);
     background-color: var(--color-light-modal-bg-primary);
-}
 
-.sticky {
-    position: sticky;
-    bottom: var(--gap-0);
-    z-index: 1;
-}
+    &.sticky {
+        position: sticky;
+        bottom: var(--gap-0);
+        z-index: 1;
+    }
+
+    &:not(:empty) {
+        padding: var(--gap-16);
 
-.highlighted {
-    border-top: var(--bottom-sheet-footer-border-top);
-    background-color: var(--bottom-sheet-footer-background-color);
+        &.highlighted {
+            border-top: var(--bottom-sheet-footer-border-top);
+            background-color: var(--bottom-sheet-footer-background-color);
+        }
+    }
 }
 
 @mixin bg-class-list;

packages/bottom-sheet/src/docs/Component.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof BottomSheet> = {
 
 type Story = StoryObj<typeof BottomSheet>;
 
-const BACKGROUND = ['primary', 'secondary', undefined];
+const BACKGROUND = ['primary', 'secondary', undefined] as const;
 
 const shortText =
     'Пользуйтесь сразу: реквизиты виртуальной и пластиковой карты будут доступны уже через 60 секунд после после оформления.';

packages/bottom-sheet/src/types.ts

@@ -361,4 +361,11 @@ export type BottomSheetProps = {
      * Учитывать высоту виртуальной клавиатуры
      */
     virtualKeyboard?: boolean;
+
+    /**
+     * Показывать футер
+     *
+     * @default true
+     */
+    showFooter?: boolean;
 };

packages/bottom-sheet/tsconfig.build.json

@@ -13,6 +13,8 @@
             "@alfalab/core-components-base-modal/*": ["../base-modal/src/*"],
             "@alfalab/core-components-bottom-sheet": ["./src"],
             "@alfalab/core-components-bottom-sheet/*": ["./src/*"],
+            "@alfalab/core-components-button": ["../button/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-navigation-bar-private": ["../navigation-bar-private/src"],
             "@alfalab/core-components-navigation-bar-private/*": [
                 "../navigation-bar-private/src/*"
@@ -26,6 +28,7 @@
     "references": [
         { "path": "../backdrop/tsconfig.build.json" },
         { "path": "../base-modal/tsconfig.build.json" },
+        { "path": "../button/tsconfig.build.json" },
         { "path": "../navigation-bar-private/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../types/tsconfig.build.json" }

packages/bottom-sheet/tsconfig.json

@@ -12,6 +12,8 @@
             "@alfalab/core-components-base-modal/*": ["../base-modal/src/*"],
             "@alfalab/core-components-bottom-sheet": ["./src"],
             "@alfalab/core-components-bottom-sheet/*": ["./src/*"],
+            "@alfalab/core-components-button": ["../button/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-navigation-bar-private": ["../navigation-bar-private/src"],
             "@alfalab/core-components-navigation-bar-private/*": [
                 "../navigation-bar-private/src/*"
@@ -29,6 +31,7 @@
     "references": [
         { "path": "../backdrop/tsconfig.build.json" },
         { "path": "../base-modal/tsconfig.build.json" },
+        { "path": "../button/tsconfig.build.json" },
         { "path": "../navigation-bar-private/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },

packages/input-autocomplete/src/mobile/Component.mobile.tsx

@@ -118,6 +118,7 @@ export const InputAutocompleteMobile = React.forwardRef(
             [isBottomSheet ? 'containerProps' : 'componentDivProps']: {
                 onTouchMove: handleOptionsListTouchMove,
             },
+            showFooter: false,
         };
 
         const clear = inputProps?.clear ?? false;

packages/picker-button/src/__snapshots__/Component.test.tsx.snap

@@ -330,7 +330,7 @@ exports[`Snapshots tests should display opened correctly 4`] = `
         class="component modal appear appearActive"
       >
         <div
-          class="content hasHeader"
+          class="content hasFooter hasHeader"
         >
           <div
             class="wrapper"
@@ -1354,6 +1354,9 @@ exports[`Snapshots tests should display opened correctly 4`] = `
                     </div>
                   </div>
                 </div>
+                <div
+                  class="footer sticky"
+                />
               </div>
             </div>
           </div>
@@ -1444,7 +1447,7 @@ exports[`Snapshots tests should display opened correctly 6`] = `
         class="component modal appear appearActive"
       >
         <div
-          class="content hasHeader"
+          class="content hasFooter hasHeader"
         >
           <div
             class="wrapper"
@@ -2468,6 +2471,9 @@ exports[`Snapshots tests should display opened correctly 6`] = `
                     </div>
                   </div>
                 </div>
+                <div
+                  class="footer sticky"
+                />
               </div>
             </div>
           </div>

packages/select-with-tags/src/components/base-select-with-tags/Component.tsx

@@ -225,6 +225,7 @@ export const BaseSelectWithTags = forwardRef<HTMLInputElement, BaseSelectWithTag
                                   },
                               },
                               bottomSheetProps: {
+                                  showFooter: false,
                                   showSwipeMarker: false,
                                   onClose: handleClose,
                                   containerProps: {

packages/select/src/mobile/Component.mobile.tsx

@@ -123,6 +123,7 @@ export const SelectMobile = forwardRef(
                           bottomSheetProps: {
                               bottomAddons,
                               showSwipeMarker: false,
+                              showFooter: !multiple,
                               ...restProps.bottomSheetProps,
                           },
                       })}