BREAKING CHANGE(AppearanceProvider): replace appearance with value (#…

…6147)
VKCOM · Nov 28, 2023 · b8991d3 · b8991d3
1 parent 88fab5f
commit b8991d3
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 9 deletions.
diff --git a/packages/vkui/src/components/AppRoot/AppRootPortal.tsx b/packages/vkui/src/components/AppRoot/AppRootPortal.tsx
@@ -43,7 +43,7 @@ export const AppRootPortal = ({
 
   return shouldUsePortal && portalContainer ? (
     createPortal(
-      <AppearanceProvider appearance={appearance}>
+      <AppearanceProvider value={appearance}>
         <div className={className}>{children}</div>
       </AppearanceProvider>,
       portalContainer,

diff --git a/packages/vkui/src/components/AppearanceProvider/AppearanceProvider.tsx b/packages/vkui/src/components/AppearanceProvider/AppearanceProvider.tsx
@@ -5,19 +5,19 @@ import { TokensClassProvider } from '../../lib/tokensClassProvider';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 
 export interface AppearanceProviderProps {
-  appearance: AppearanceType;
+  value: AppearanceType;
   children: React.ReactNode;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
  */
-export const AppearanceProvider = ({ appearance, children }: AppearanceProviderProps) => {
+export const AppearanceProvider = ({ value, children }: AppearanceProviderProps) => {
   const platform = usePlatform();
 
   return (
-    <ConfigProviderOverride appearance={appearance}>
-      <TokensClassProvider platform={platform} appearance={appearance}>
+    <ConfigProviderOverride appearance={value}>
+      <TokensClassProvider platform={platform} appearance={value}>
         {children}
       </TokensClassProvider>
     </ConfigProviderOverride>

diff --git a/packages/vkui/src/components/Textarea/Textarea.e2e-playground.tsx b/packages/vkui/src/components/Textarea/Textarea.e2e-playground.tsx
@@ -51,7 +51,7 @@ export const TextareaStatePlayground = ({ appearance }: ComponentPlaygroundProps
         width: BREAKPOINTS.MOBILE,
       }}
     >
-      <AppearanceProvider appearance={appearance}>
+      <AppearanceProvider value={appearance}>
         <AdaptivityProvider sizeY="regular">
           <Div style={{ padding: 10 }}>
             <Textarea id="textarea" />

diff --git a/styleguide/Components/Preview.js b/styleguide/Components/Preview.js
@@ -116,7 +116,7 @@ class Preview extends PreviewParent {
           return (
             <Profiler id={exampleId} onRender={logPerf}>
               <PlatformProvider value={styleGuideContext.platform}>
-                <AppearanceProvider appearance={styleGuideContext.appearance}>
+                <AppearanceProvider value={styleGuideContext.appearance}>
                   <div
                     className={classNames(
                       'Preview',

diff --git a/styleguide/config.js b/styleguide/config.js
@@ -346,6 +346,12 @@ const baseConfig = {
           name: 'Migration',
           content: './pages/migration_v5.md',
         },
+
+        {
+          title: 'Миграция с v5 на v6',
+          name: 'Migrations',
+          content: './pages/migration_v6.md',
+        },
         {
           name: 'Unstable',
           content: './pages/unstable.md',

diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md
@@ -57,6 +57,15 @@
   - `webviewType={WebviewType.INTERNAL}` -> `hasCustomPanelHeaderAfter={false}`.
   - `webviewType={WebviewType.VKAPPS}` -> `hasCustomPanelHeaderAfter={true}`. При необходимости передайте `customPanelHeaderAfterMinWidth={<value>}` (по умолчанию `90`).
 
+## [AppearanceProvider](#/AppearanceProvider)
+
+По аналогии с остальными провайдерами свойство `appearance` заменено на `value`
+
+```diff
+- <AppearanceProvider appearance={appearance}>...</AppearanceProvider>
++ <AppearanceProvider value={appearance}>...</AppearanceProvider>
+```
+
 ## ~`withInsets`~
 
 Используйте вместо него хук `useInsets()` из [@vkontakte/vk-bridge-react](https://www.npmjs.com/package/@vkontakte/vk-bridge-react).

diff --git a/styleguide/pages/platforms_and_themes.md b/styleguide/pages/platforms_and_themes.md
@@ -64,7 +64,7 @@
 Если вам необходимо переопределить тему для отдельных компонентов приложения, то это можно сделать через `AppearanceProvider`.
 
 ```jsx static
-<AppearanceProvider appearance="dark">
+<AppearanceProvider value="dark">
   <Snackbar action="Поделиться">Поделиться</Snackbar>
 </AppearanceProvider>
 ```
@@ -85,4 +85,4 @@ const appearance = useAppearance();
 <Div>{appearance === 'light' ? 'Out of the blue' : 'And into the black'}</Div>;
 ```
 
-Appearance можно пригодиться для замены изображений на инвертированную версию в темных темах.
+`Appearance` может пригодиться для замены изображений на инвертированную версию в темных темах.