fix(Storybook): fix double scroll in controls panel (#8245)

VKCOM · Feb 6, 2025 · fcf48ad · fcf48ad
1 parent e52ba43
commit fcf48ad
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/packages/vkui/.storybook/addons/source-tab/SourceTab.tsx b/packages/vkui/.storybook/addons/source-tab/SourceTab.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { StoryId } from '@storybook/types';
-import { SyntaxHighlighter } from '@storybook/components';
+import { AddonPanel, SyntaxHighlighter } from '@storybook/components';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
 import { useChannel } from '@storybook/manager-api';
 
@@ -10,7 +10,7 @@ type SnippetRenderedArgs = {
   source: string;
 };
 
-export const SourceTab = () => {
+export const SourceTab: React.FC<{ active: boolean }> = ({ active }) => {
   const [{ source }, handleSnippetRendered] = React.useState<SnippetRenderedArgs>({
     id: '',
     args: {},
@@ -21,15 +21,21 @@ export const SourceTab = () => {
 
   const sourceAvailable = Boolean(source);
 
+  if (!active) {
+    return null;
+  }
+
   return (
-    <SyntaxHighlighter
-      padded
-      wrapLongLines
-      language="tsx"
-      copyable={sourceAvailable}
-      bordered={sourceAvailable}
-    >
-      {sourceAvailable ? source : 'Compiling...'}
-    </SyntaxHighlighter>
+    <AddonPanel active={true}>
+      <SyntaxHighlighter
+        padded
+        wrapLongLines
+        language="tsx"
+        copyable={sourceAvailable}
+        bordered={sourceAvailable}
+      >
+        {sourceAvailable ? source : 'Compiling...'}
+      </SyntaxHighlighter>
+    </AddonPanel>
   );
 };
diff --git a/packages/vkui/.storybook/addons/source-tab/register.tsx b/packages/vkui/.storybook/addons/source-tab/register.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { AddonPanel } from '@storybook/components';
 import { addons, types } from '@storybook/manager-api';
 import { SourceTab } from './SourceTab';
 import { ADDON_ID, PANEL_ID } from './constants';
@@ -9,10 +8,6 @@ addons.register(ADDON_ID, () => {
     type: types.PANEL,
     title: 'Source',
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^story$/)),
-    render: ({ active = false }) => (
-      <AddonPanel active={active}>
-        <SourceTab />
-      </AddonPanel>
-    ),
+    render: ({ active = false }) => <SourceTab active={active} />,
   });
 });