docs: fix PopupBase, ModalBase docs

salute-developers · Nov 22, 2023 · 2b580c9 · 2b580c9
1 parent 3277051
commit 2b580c9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 25 deletions.
diff --git a/website/plasma-web-docs/docs/components/ModalBase.mdx b/website/plasma-web-docs/docs/components/ModalBase.mdx
@@ -5,7 +5,7 @@ title: ModalBase
 
 import { PropsTable, Description, StorybookLink } from '@site/src/components';
 
-# Popover
+# ModalBase
 <Description name="ModalBase" />
 <PropsTable name="ModalBase" />
 <StorybookLink name="ModalBase" />
@@ -14,21 +14,12 @@ import { PropsTable, Description, StorybookLink } from '@site/src/components';
 
 Перед использованием убедитесь, что `PopupBaseProvider` подключен.
 Компонент ModalBase во многом схож с PopupBase, добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус.
-На данный момент для определения цвета подложки необходимо прокинуть глобальные стили:
 
-``` tsx
-const ModalOverlayVariables = createGlobalStyle`
-    body {
-        --plasma-modal-blur-overlay-color: ${darkOverlayBlur};
-        --plasma-modal-overlay-color: ${overlaySoft};
-    }
-`;
-```
 
 ```tsx live
 import React from 'react';
 import styled from 'styled-components';
-import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-tokens-web';
+import { surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 import { SSRProvider, Button, ModalBase, PopupBaseProvider } from '@salutejs/plasma-web';
 
 export function App() {
@@ -49,7 +40,7 @@ export function App() {
                         placement="center"
                         offset={[0, 0]}
                     >
-                        <div>
+                        <div style={{ background: `${surfaceSolid02}`, padding: "1rem" }}>
                             <Button onClick={() => setIsOpenA(false)}>Close</Button>
                             <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
                             Content
@@ -61,7 +52,7 @@ export function App() {
                             placement="right"
                             offset={[0, 0]}
                         >
-                            <div>
+                            <div style={{ background: `${surfaceSolid02}`, padding: "1rem" }}>
                                 <Button onClick={() => setIsOpenB(false)}>Close</Button>
                                 Content
                             </div>
@@ -76,22 +67,22 @@ export function App() {
 
 ## Подключение анимации
 
-Подключение анимации аналогично тому, как это происходит в `PopupBase` - через свойство `withAnimation`(управление через `endAnimationClass`/`endTransitionClass`).
-Для добавления анимации в оверлей необходимо использовать класс `.modal-base-overlay` через переменную `modalBaseOverlayClass` из пакета.
+Подключение анимации аналогично тому, как это происходит в `PopupBase` - через свойство `withAnimation`(управление через `popupBaseClasses`, `modalBaseClasses`).
+Для добавления анимации в оверлей необходимо использовать класс `.modal-base-overlay` через переменную `modalBaseClasses.overlay` из пакета.
 
 Пример:
 
 ```tsx
 const StyledModal = styled(ModalBase)`
-    && > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
+    && > .${popupBaseClasses.root}, .${modalBaseClasses.overlay} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${modalBaseOverlayClass} {
+    &&.${popupBaseClasses.endAnimation} .${modalBaseClasses.overlay} {
         animation: fadeOut 1s forwards;
     }
 

diff --git a/website/plasma-web-docs/docs/components/PopupBase.mdx b/website/plasma-web-docs/docs/components/PopupBase.mdx
@@ -5,7 +5,7 @@ title: PopupBase
 
 import { PropsTable, Description, StorybookLink } from '@site/src/components';
 
-# Popover
+# PopupBase
 <Description name="PopupBase" />
 <PropsTable name="PopupBase" />
 <StorybookLink name="PopupBase" />
@@ -123,19 +123,19 @@ export function App() {
 ## Подключение анимации
 
 Для подключения анимации нужно добавить параметр `withAnimation`.
-Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupClasses` для `PopupBase`.
-Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupClasses.root` из пакета.
+Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
+Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
 
 Пример:
 
 ```tsx
 const StyledPopupTransition = styled(PopupBase)`
-    && > .${popupClasses.root} {
+    && > .${popupBaseClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${popupClasses.endTransition} > .${popupClasses.root} {
+    &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }
@@ -146,11 +146,11 @@ const StyledPopupTransition = styled(PopupBase)`
 
 ```tsx
 const StyledPopupAnimation = styled(PopupBase)`
-    && > .${popupClasses.root} {
+    && > .${popupBaseClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${popupClasses.endAnimation} > .${popupClasses.root} {
+    &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }