fix(modal): return adaptivity by AdaptivityProvider (#8200) (#8206)

Возвращаем адаптивность через AdaptivityProvider для: - `ModalOutlet` - определяем классы `hostDesktop` и `hostMobile`; - передаём `isDesktop` из `ModalPage` и `ModalCard`. - `ModalPage` - определяем классы `hostDesktop` и `hostMobile`; – также возвращаем ограничение по высоте, которое потерялось. - `ModalPageHeader` - определяем класс `hostDesktop`. - `ModalPageFooter` - определяем классы `hostDesktop` и `hostMobile`. - `ModalCard` - определяем классы `hostDesktop` и `hostMobile`; – по аналогии с `ModalPage` для **desktop** значение св-ва `box-sizing` заменено с `border-box` на `content-box`, чтобы не высчитывать `padding` из `max-width`. Для `ModalOverlay` не стал применять `useAdaptivityWithJSMediaQueries`, дабы не усложнять его. Привязку времени анимации к `@media` считаем допустимым.
VKCOM · Jan 29, 2025 · 36b3437 · 36b3437
1 parent 755525c
commit 36b3437
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 174 deletions.
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.module.css b/packages/vkui/src/components/ModalCard/ModalCard.module.css
@@ -2,80 +2,78 @@
   padding: var(--vkui--spacing_size_m);
   margin-inline: auto;
   inline-size: 100%;
-  box-sizing: border-box;
 }
 
 .host:focus {
   outline: none;
 }
 
 .hostMaxWidthS {
-  max-inline-size: calc(400px + var(--vkui--spacing_size_2xl));
+  max-inline-size: 400px;
 }
 
 .hostMaxWidthM {
-  max-inline-size: calc(414px + var(--vkui--spacing_size_2xl));
+  max-inline-size: 414px;
 }
 
 .hostMaxWidthL {
-  max-inline-size: calc(440px + var(--vkui--spacing_size_2xl));
+  max-inline-size: 440px;
 }
 
 /* Mobile */
-@media (--viewWidth-smallTabletMinus) {
-  .host {
-    --vkui_internal_ModalCard--translateY: 100%;
-    --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
+.hostMobile {
+  --vkui_internal_ModalCard--translateY: 100%;
+  --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
-    transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
-    transition: transform 0.4s var(--vkui_internal--spring-easing);
-  }
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+  transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
+  transition: transform 0.4s var(--vkui_internal--spring-easing);
+  box-sizing: border-box;
+}
 
-  .hostStateEnter {
-    transform: translate3d(0, 100%, 0);
-    transition: none;
-  }
+.hostMobile.hostStateEnter {
+  transform: translate3d(0, 100%, 0);
+  transition: none;
+}
 
-  .hostStateEntering {
-    transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
-  }
+.hostMobile.hostStateEntering {
+  transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
+}
 
-  .hostStateExiting {
-    transform: translate3d(0, 100%, 0);
-    transition: transform 0.2s ease;
-  }
+.hostMobile.hostStateExiting {
+  transform: translate3d(0, 100%, 0);
+  transition: transform 0.2s ease;
+}
 
-  .hostStateExited {
-    transform: translate3d(0, 100%, 0);
-    transition: none;
-  }
+.hostMobile.hostStateExited {
+  transform: translate3d(0, 100%, 0);
+  transition: none;
 }
+
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .host {
-    margin-block: auto;
-    opacity: 1;
-    transition: opacity 340ms var(--vkui--animation_easing_platform);
-  }
+.hostDesktop {
+  margin-block: auto;
+  opacity: 1;
+  transition: opacity 340ms var(--vkui--animation_easing_platform);
+  box-sizing: content-box;
+}
 
-  .hostStateEnter {
-    opacity: 0;
-    transition-property: none;
-  }
+.hostDesktop.hostStateEnter {
+  opacity: 0;
+  transition-property: none;
+}
 
-  .hostStateEntering {
-    opacity: 1;
-  }
+.hostDesktop.hostStateEntering {
+  opacity: 1;
+}
 
-  .hostStateExiting {
-    opacity: 0;
-  }
+.hostDesktop.hostStateExiting {
+  opacity: 0;
+}
 
-  .hostStateExited {
-    opacity: 0;
-  }
+.hostDesktop.hostStateExited {
+  opacity: 0;
 }
diff --git a/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx b/packages/vkui/src/components/ModalCard/ModalCardInternal.tsx
@@ -139,7 +139,7 @@ export const ModalCardInternal = ({
   useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });
 
   return (
-    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>
+    <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>
       {modalOverlay}
       <ModalCardBase
         {...restProps}
@@ -150,6 +150,7 @@ export const ModalCardInternal = ({
         style={style}
         className={classNames(
           styles.host,
+          isDesktop ? styles.hostDesktop : styles.hostMobile,
           sizeByPlatformClassNames[platform],
           transitionStateClassNames[transitionState],
           className,

diff --git a/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css b/packages/vkui/src/components/ModalOutlet/ModalOutlet.module.css
@@ -7,10 +7,8 @@
 }
 
 /* Desktop */
-@media (--viewWidth-smallTabletPlus) {
-  .host:not([hidden]) {
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
+.hostDesktop:not([hidden]) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
 }
diff --git a/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx b/packages/vkui/src/components/ModalOutlet/ModalOutlet.tsx
@@ -5,6 +5,7 @@ import styles from './ModalOutlet.module.css';
 export interface ModalOutletProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {
   hidden?: boolean;
+  isDesktop?: boolean;
 }
 
 /**
@@ -13,14 +14,15 @@ export interface ModalOutletProps
 export const ModalOutlet = ({
   className,
   hidden,
+  isDesktop,
   children,
   getRootRef,
   ...restProps
 }: ModalOutletProps) => {
   return (
     <div
       ref={getRootRef}
-      className={classNames(className, styles.host)}
+      className={classNames(className, styles.host, isDesktop && styles.hostDesktop)}
       hidden={hidden}
       aria-hidden={hidden}
       {...restProps}