@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/ModalDismissButton/ModalDismissButton.css

@@ -8,7 +8,7 @@
   padding: 18px;
   box-sizing: border-box;
   color: var(--white);
-  transition: opacity .15s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
 .ModalDismissButton::before {
@@ -18,7 +18,7 @@
   right: 14px;
   bottom: 14px;
   left: 14px;
-  background-color: rgba(0, 0, 0, .35);
+  background-color: rgba(0, 0, 0, 0.35);
   border-radius: 50%;
   position: absolute;
 }
@@ -29,7 +29,7 @@
 }
 
 .ModalDismissButton--hover {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .ModalDismissButton--active {

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,18 +1,20 @@
-import * as React from 'react';
-import { Icon20Cancel } from '@vkontakte/icons';
-import Tappable from '../Tappable/Tappable';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import './ModalDismissButton.css';
+import * as React from "react";
+import { Icon20Cancel } from "@vkontakte/icons";
+import Tappable from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./ModalDismissButton.css";
 
 export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
 
-const ModalDismissButton: React.FC<ModalDismissButtonProps> = (props: ModalDismissButtonProps) => {
+const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
+  props: ModalDismissButtonProps
+) => {
   const platform = usePlatform();
 
   return (
     <Tappable
-      vkuiClass={getClassName('ModalDismissButton', platform)}
+      vkuiClass={getClassName("ModalDismissButton", platform)}
       {...props}
       activeMode="ModalDismissButton--active"
       hoverMode="ModalDismissButton--hover"
@@ -23,7 +25,7 @@ const ModalDismissButton: React.FC<ModalDismissButtonProps> = (props: ModalDismi
 };
 
 ModalDismissButton.defaultProps = {
-  'aria-label': 'Закрыть',
+  "aria-label": "Закрыть",
 };
 
 export default ModalDismissButton;

package/src/components/ModalDismissButton/Readme.md

@@ -2,46 +2,52 @@
 Для правильной отрисовки нужно расположить в контейнере с `position: "relative"` и отображать при достаточной ширине экрана (от `ViewWidth.SMALL_TABLET`)
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
-const CustomPopout = withAdaptivity(({ onClose, viewWidth }) => {
-  return (
-    <PopoutWrapper onClick={onClose}>
-      <div style={{
-        backgroundColor: "var(--background_content)",
-        borderRadius: 8,
-        position: "relative",
-        padding: "12px"
-      }}>
-        <h4>Кастомное модальное окно</h4>
-        {viewWidth >= ViewWidth.SMALL_TABLET && <ModalDismissButton onClick={onClose} />}
-      </div>
-    </PopoutWrapper>
-  )
-}, {
-  viewWidth: true
-})
+const CustomPopout = withAdaptivity(
+  ({ onClose, viewWidth }) => {
+    return (
+      <PopoutWrapper onClick={onClose}>
+        <div
+          style={{
+            backgroundColor: "var(--background_content)",
+            borderRadius: 8,
+            position: "relative",
+            padding: "12px",
+          }}
+        >
+          <h4>Кастомное модальное окно</h4>
+          {viewWidth >= ViewWidth.SMALL_TABLET && (
+            <ModalDismissButton onClick={onClose} />
+          )}
+        </div>
+      </PopoutWrapper>
+    );
+  },
+  {
+    viewWidth: true,
+  }
+);
 
 const Example = () => {
   const [popout, setPopout] = React.useState(null);
-  
-  const onClick = () => setPopout(
-    <CustomPopout onClose={() => setPopout(null)} />
-  );
+
+  const onClick = () =>
+    setPopout(<CustomPopout onClose={() => setPopout(null)} />);
 
   return (
     <SplitLayout popout={popout}>
       <SplitCol>
-      <View activePanel="popout">
-        <Panel id="popout">
-          <PanelHeader>ModalDismissButton</PanelHeader>
-          <Group>
-            <CellButton onClick={onClick}>Открыть модальное окно</CellButton>
-          </Group>
-        </Panel>
-      </View>
+        <View activePanel="popout">
+          <Panel id="popout">
+            <PanelHeader>ModalDismissButton</PanelHeader>
+            <Group>
+              <CellButton onClick={onClick}>Открыть модальное окно</CellButton>
+            </Group>
+          </Panel>
+        </View>
       </SplitCol>
     </SplitLayout>
   );
-}
+};
 
-<Example />
+<Example />;
 ```

package/src/components/ModalPage/ModalPage.css

@@ -127,9 +127,7 @@
 .ModalPage--desktop .ModalPage__in {
   height: auto;
   max-height: 640px;
-  box-shadow:
-    0 16px 16px rgba(0, 0, 0, .16),
-    0 0 8px rgba(0, 0, 0, .12);
+  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16), 0 0 8px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
 }
 

package/src/components/ModalPage/ModalPage.tsx

@@ -1,17 +1,28 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
-import { usePlatform } from '../../hooks/usePlatform';
-import { withAdaptivity, AdaptivityProps, ViewHeight, ViewWidth } from '../../hoc/withAdaptivity';
-import ModalDismissButton from '../ModalDismissButton/ModalDismissButton';
-import { multiRef } from '../../lib/utils';
-import { ModalType } from '../ModalRoot/types';
-import { getNavId, NavIdProps } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
-import './ModalPage.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import {
+  ModalRootContext,
+  useModalRegistry,
+} from "../ModalRoot/ModalRootContext";
+import { usePlatform } from "../../hooks/usePlatform";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  ViewHeight,
+  ViewWidth,
+} from "../../hoc/withAdaptivity";
+import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { multiRef } from "../../lib/utils";
+import { ModalType } from "../ModalRoot/types";
+import { getNavId, NavIdProps } from "../../lib/getNavId";
+import { warnOnce } from "../../lib/warnOnce";
+import "./ModalPage.css";
 
-export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps, NavIdProps {
+export interface ModalPageProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps,
+    NavIdProps {
   /**
    * Шапка модальной страницы, `<ModalPageHeader />`
    */
@@ -28,7 +39,7 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Ad
   getModalContentRef?: React.Ref<HTMLDivElement>;
 }
 
-const warn = warnOnce('ModalPage');
+const warn = warnOnce("ModalPage");
 const ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {
   const platform = usePlatform();
   const { updateModalHeight } = React.useContext(ModalRootContext);
@@ -51,7 +62,9 @@ const ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {
     updateModalHeight();
   }, [children]);
 
-  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
   const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
 
   const modalContext = React.useContext(ModalRootContext);
@@ -60,9 +73,13 @@ const ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(getClassName('ModalPage', platform), `ModalPage--sizeX-${sizeX}`, {
-        'ModalPage--desktop': isDesktop,
-      })}
+      vkuiClass={classNames(
+        getClassName("ModalPage", platform),
+        `ModalPage--sizeX-${sizeX}`,
+        {
+          "ModalPage--desktop": isDesktop,
+        }
+      )}
     >
       <div vkuiClass="ModalPage__in-wrap" ref={refs.innerElement}>
         <div vkuiClass="ModalPage__in">
@@ -71,13 +88,19 @@ const ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {
           </div>
 
           <div vkuiClass="ModalPage__content-wrap">
-            <div vkuiClass="ModalPage__content" ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}>
-              <div vkuiClass="ModalPage__content-in">
-                {children}
-              </div>
+            <div
+              vkuiClass="ModalPage__content"
+              ref={multiRef<HTMLDivElement>(
+                refs.contentElement,
+                getModalContentRef
+              )}
+            >
+              <div vkuiClass="ModalPage__content-in">{children}</div>
             </div>
           </div>
-          {canShowCloseBtn && <ModalDismissButton onClick={onClose || modalContext.onClose} />}
+          {canShowCloseBtn && (
+            <ModalDismissButton onClick={onClose || modalContext.onClose} />
+          )}
         </div>
       </div>
     </div>

package/src/components/ModalPageHeader/ModalPageHeader.css

@@ -44,7 +44,6 @@
 .ModalPageHeader__content-in {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 800;
 }
 
 .ModalPageHeader__right {
@@ -82,12 +81,16 @@
 .ModalPageHeader--ios .ModalPageHeader__content {
   position: relative;
   z-index: 1;
-  font-family: var(--font-tt);
   flex: 2 1;
-  font-size: 21px;
   justify-content: center;
 }
 
+.ModalPageHeader--ios .ModalPageHeader__content-in {
+  font-size: 21px;
+  font-family: var(--font-display);
+  font-weight: 500;
+}
+
 @media (min-width: 320px) {
   .ModalPageHeader--ios .ModalPageHeader__content {
     flex-grow: 3;
@@ -101,7 +104,9 @@
   font-size: 17px;
 }
 
-.ModalPageHeader--ios .ModalPageHeader__right .PanelHeaderButton:not(:first-child) {
+.ModalPageHeader--ios
+  .ModalPageHeader__right
+  .PanelHeaderButton:not(:first-child) {
   padding-left: 12px;
 }
 
@@ -114,11 +119,13 @@
   padding: 0 8px;
 }
 
-.ModalPageHeader--ios.ModalPageHeader--sizeX-regular .ModalPageHeader__left:not(:empty) {
+.ModalPageHeader--ios.ModalPageHeader--sizeX-regular
+  .ModalPageHeader__left:not(:empty) {
   padding-left: 0;
 }
 
-.ModalPageHeader--ios.ModalPageHeader--sizeX-regular .ModalPageHeader__right:not(:empty) {
+.ModalPageHeader--ios.ModalPageHeader--sizeX-regular
+  .ModalPageHeader__right:not(:empty) {
   padding-right: 0;
 }
 
@@ -149,8 +156,9 @@
 }
 
 .ModalPageHeader--android .ModalPageHeader__content-in {
-  font-size: 20px;
-  font-family: var(--font-tt);
+  font-size: 23px;
+  font-family: var(--font-display);
+  font-weight: 500;
 }
 
 .ModalPageHeader--android .ModalPageHeader__right,
@@ -170,7 +178,8 @@
   padding-right: 14px;
 }
 
-.ModalPageHeader--android.ModalPageHeader--sizeX-regular .ModalPageHeader__left:not(:empty) {
+.ModalPageHeader--android.ModalPageHeader--sizeX-regular
+  .ModalPageHeader__left:not(:empty) {
   padding-left: 0;
 }
 
@@ -178,7 +187,8 @@
   padding-left: 14px;
 }
 
-.ModalPageHeader--android.ModalPageHeader--sizeX-regular .ModalPageHeader__right:not(:empty) {
+.ModalPageHeader--android.ModalPageHeader--sizeX-regular
+  .ModalPageHeader__right:not(:empty) {
   padding-right: 0;
 }
 

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,15 +1,17 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { HasRef } from '../../types';
-import { isPrimitiveReactNode } from '../../lib/utils';
-import { VKCOM } from '../../lib/platform';
-import Separator from '../Separator/Separator';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import './ModalPageHeader.css';
-
-export interface ModalPageHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { HasRef } from "../../types";
+import { isPrimitiveReactNode } from "../../lib/utils";
+import { VKCOM } from "../../lib/platform";
+import Separator from "../Separator/Separator";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import "./ModalPageHeader.css";
+
+export interface ModalPageHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
   /**
    * Иконки, отображаемые слева
    */
@@ -21,7 +23,9 @@ export interface ModalPageHeaderProps extends React.HTMLAttributes<HTMLDivElemen
   separator?: boolean;
 }
 
-const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = (props: ModalPageHeaderProps) => {
+const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = (
+  props: ModalPageHeaderProps
+) => {
   const platform = usePlatform();
   const { sizeX } = useAdaptivity();
   const { left, right, children, separator, getRef, ...restProps } = props;
@@ -31,13 +35,14 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = (props: M
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(getClassName('ModalPageHeader', platform), `ModalPageHeader--sizeX-${sizeX}`)}
+      vkuiClass={classNames(
+        getClassName("ModalPageHeader", platform),
+        `ModalPageHeader--sizeX-${sizeX}`
+      )}
       ref={getRef}
     >
       <div vkuiClass="ModalPageHeader__in">
-        <div vkuiClass="ModalPageHeader__left">
-          {left}
-        </div>
+        <div vkuiClass="ModalPageHeader__left">{left}</div>
 
         <div vkuiClass="ModalPageHeader__content">
           <div vkuiClass="ModalPageHeader__content-in">
@@ -45,12 +50,12 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = (props: M
           </div>
         </div>
 
-        <div vkuiClass="ModalPageHeader__right">
-          {right}
-        </div>
+        <div vkuiClass="ModalPageHeader__right">{right}</div>
       </div>
 
-      {hasSeparator && <Separator wide vkuiClass="ModalPageHeader__separator" />}
+      {hasSeparator && (
+        <Separator wide vkuiClass="ModalPageHeader__separator" />
+      )}
     </div>
   );
 };

package/src/components/ModalPageHeader/Readme.md

@@ -3,34 +3,44 @@
 
 ### Требования по расположению кнопок
 
-* На Android **слева** может быть [`PanelHeaderClose`](#!/PanelHeaderClose).
-* На iOS **справа** должна быть кнопка закрытия. Это может быть либо [`PanelHeaderButton`](#!/PanelHeaderButton) с иконкой `<Icon24Dismiss />`, либо [`PanelHeaderClose`](#!/PanelHeaderClose) или [`PanelHeaderSubmit`](#!/PanelHeaderSubmit).
-* Если произойдёт навигация вперёд внутри модального окна, то **слева** в шапке останется **только** кнопка назад.
+- На Android **слева** может быть [`PanelHeaderClose`](#!/PanelHeaderClose).
+- На iOS **справа** должна быть кнопка закрытия. Это может быть либо [`PanelHeaderButton`](#!/PanelHeaderButton) с иконкой `<Icon24Dismiss />`, либо [`PanelHeaderClose`](#!/PanelHeaderClose) или [`PanelHeaderSubmit`](#!/PanelHeaderSubmit).
+- Если произойдёт навигация вперёд внутри модального окна, то **слева** в шапке останется **только** кнопка назад.
 
 Также на Android могут быть какие-то дополнительные кнопки-иконки справа, а на iOS – слева.
 
 ```jsx static
-import { ModalPageHeader, ANDROID, IOS, usePlatform } from '@vkontakte/vkui';
+import { ModalPageHeader, ANDROID, IOS, usePlatform } from "@vkontakte/vkui";
 
 const platform = usePlatform();
 
 return (
   <ModalPageHeader
-    left={(
+    left={
       <Fragment>
-        {(platform === ANDROID || platform === VKCOM) && <PanelHeaderButton onClick={this.backModal}><Icon24Cancel /></PanelHeaderButton>}
+        {(platform === ANDROID || platform === VKCOM) && (
+          <PanelHeaderButton onClick={this.backModal}>
+            <Icon24Cancel />
+          </PanelHeaderButton>
+        )}
       </Fragment>
-    )}
-    right={(
+    }
+    right={
       <Fragment>
-        {(platform === ANDROID || platform === VKCOM) && <PanelHeaderButton onClick={this.backModal}><Icon24Done /></PanelHeaderButton>}
-        {platform === IOS && <PanelHeaderButton onClick={this.backModal}>Готово</PanelHeaderButton>}
+        {(platform === ANDROID || platform === VKCOM) && (
+          <PanelHeaderButton onClick={this.backModal}>
+            <Icon24Done />
+          </PanelHeaderButton>
+        )}
+        {platform === IOS && (
+          <PanelHeaderButton onClick={this.backModal}>Готово</PanelHeaderButton>
+        )}
       </Fragment>
-    )}
+    }
   >
     Заголовок модальной страницы
   </ModalPageHeader>
-)
+);
 ```
 
 Пример использования показан в компоненте `ModalRoot`.

package/src/components/ModalRoot/ModalRoot.css

@@ -10,10 +10,10 @@
   position: absolute;
   left: 0;
   top: 0;
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, 0.4);
   user-select: none;
   transition: opacity 167ms ease-out;
-  animation: vkui-animation-fadeIn .32s ease;
+  animation: vkui-animation-fadeIn 0.32s ease;
 }
 
 .ModalRoot--touched .ModalRoot__mask {
@@ -38,11 +38,13 @@
   top: var(--safe-area-inset-top);
 }
 
-:not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android .ModalRoot__viewport {
+:not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android
+  .ModalRoot__viewport {
   top: var(--panelheader_height_android);
 }
 
-:not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios .ModalRoot__viewport {
+:not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios
+  .ModalRoot__viewport {
   top: calc(var(--safe-area-inset-top) + var(--panelheader_height_ios));
 }