@vkontakte/vkui 4.20.0 → 4.22.1

package/src/components/Link/Link.tsx

@@ -4,7 +4,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import Tappable, { TappableProps } from '../Tappable/Tappable';
 import './Link.css';
 
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLElement>, TappableProps {}
+export type LinkProps = TappableProps;
 
 const Link: React.FC<LinkProps> = ({
   children,

package/src/components/MiniInfoCell/Readme.md

@@ -1,4 +1,4 @@
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 function MiniInfoCellExample() {
   const platform = usePlatform();
   const [activeModal, setActiveModal] = React.useState(null);
@@ -72,67 +72,71 @@ function MiniInfoCellExample() {
   );
 
   return (
-    <View activePanel="information_cell" modal={modal}>
-      <Panel id="information_cell">
-        <PanelHeader>
-          Ячейка информации
-        </PanelHeader>
-    
-        <Group>
-          <MiniInfoCell
-            before={<Icon20ArticleOutline />}
-            textWrap="short"
-          >
-            ВКонтакте начинался как сайт для выпускников вузов, а сейчас это огромная экосистема с безграничными возможностями и миллионами пользователей.
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20FollowersOutline />}
-            after={
-              <UsersStack
-                photos={[
-                  getAvatarUrl('user_mm'),
-                  getAvatarUrl('user_arthurstam'),
-                  getAvatarUrl('user_xyz'),
-                ]}
-              />
-            }
-          >
-            514,7K подписчиков · 77 друзей
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20GlobeOutline />}
-          >
-            <Link href="https://vk.com/team">vk.com/team</Link>
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20WorkOutline />}
-            after={<Avatar size={24} src="https://sun9-29.userapi.com/c623616/v623616034/1c184/MnbEYczHxSY.jpg?ava=1" />}
-          >
-            Место работы: Команда ВКонтакте
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20WorkOutline />}
-            mode="add"
-            onClick={() => console.log('Указать место учёбы')}
-          >
-            Укажите место учёбы
-          </MiniInfoCell>
-    
-          <MiniInfoCell
-            before={<Icon20Info />}
-            mode="more"
-            onClick={handleExtendedInfoClick}
-          >
-            Подробная информация
-          </MiniInfoCell>
-    
-        </Group>
-      </Panel>
-    </View>
+    <SplitLayout modal={modal}>
+      <SplitCol>
+      <View activePanel="information_cell">
+        <Panel id="information_cell">
+          <PanelHeader>
+            Ячейка информации
+          </PanelHeader>
+      
+          <Group>
+            <MiniInfoCell
+              before={<Icon20ArticleOutline />}
+              textWrap="short"
+            >
+              ВКонтакте начинался как сайт для выпускников вузов, а сейчас это огромная экосистема с безграничными возможностями и миллионами пользователей.
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20FollowersOutline />}
+              after={
+                <UsersStack
+                  photos={[
+                    getAvatarUrl('user_mm'),
+                    getAvatarUrl('user_arthurstam'),
+                    getAvatarUrl('user_xyz'),
+                  ]}
+                />
+              }
+            >
+              514,7K подписчиков · 77 друзей
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20GlobeOutline />}
+            >
+              <Link href="https://vk.com/team">vk.com/team</Link>
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20WorkOutline />}
+              after={<Avatar size={24} src="https://sun9-29.userapi.com/c623616/v623616034/1c184/MnbEYczHxSY.jpg?ava=1" />}
+            >
+              Место работы: Команда ВКонтакте
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20WorkOutline />}
+              mode="add"
+              onClick={() => console.log('Указать место учёбы')}
+            >
+              Укажите место учёбы
+            </MiniInfoCell>
+      
+            <MiniInfoCell
+              before={<Icon20Info />}
+              mode="more"
+              onClick={handleExtendedInfoClick}
+            >
+              Подробная информация
+            </MiniInfoCell>
+      
+          </Group>
+        </Panel>
+      </View>
+      </SplitCol>
+    </SplitLayout>
   );
 }
 

package/src/components/ModalDismissButton/Readme.md

@@ -1,8 +1,7 @@
 Кнопка для закрытия модальных окон на широком экране.
 Для правильной отрисовки нужно расположить в контейнере с `position: "relative"` и отображать при достаточной ширине экрана (от `ViewWidth.SMALL_TABLET`)
 
-```jsx
-
+```jsx { "props": { "layout": false, "adaptivity": true } }
 const CustomPopout = withAdaptivity(({ onClose, viewWidth }) => {
   return (
     <PopoutWrapper onClick={onClose}>
@@ -29,14 +28,18 @@ const Example = () => {
   );
 
   return (
-    <View popout={popout} activePanel="popout">
-      <Panel id="popout">
-        <PanelHeader>ModalDismissButton</PanelHeader>
-        <Group>
-          <CellButton onClick={onClick}>Открыть модальное окно</CellButton>
-        </Group>
-      </Panel>
-    </View>
+    <SplitLayout popout={popout}>
+      <SplitCol>
+      <View activePanel="popout">
+        <Panel id="popout">
+          <PanelHeader>ModalDismissButton</PanelHeader>
+          <Group>
+            <CellButton onClick={onClick}>Открыть модальное окно</CellButton>
+          </Group>
+        </Panel>
+      </View>
+      </SplitCol>
+    </SplitLayout>
   );
 }