UI: Fix ArgsTable empty state on docs

code/ui/blocks/src/blocks/DocsPage.stories.tsx

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
 import { DocsPage } from './DocsPage';
 
 const meta = {
   component: DocsPage,
   parameters: {
     docsStyles: true,
+    chromatic: {
+      disableSnapshot: true,
+    },
   },
 } satisfies Meta<typeof DocsPage>;
 
@@ -17,20 +19,8 @@ export const Default: Story = {
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
   },
-  play: async ({ canvasElement }) => {
-    // This play function's sole purpose is to add a "chromatic ignore" region to a flaky row.
-    const canvas = within(canvasElement);
-    const sizeCell = await canvas.findByText('How large should the button be?');
-    const sizeRow = sizeCell.parentElement?.parentElement?.parentElement;
-    if (sizeRow?.nodeName === 'TR') {
-      sizeRow.setAttribute('data-chromatic', 'ignore');
-    } else {
-      throw new Error('the DOM structure changed, please update this test');
-    }
-  },
 };
 export const SingleStory: Story = {
-  ...Default,
   parameters: {
     relativeCsfPaths: ['../examples/DocsPageParameters.stories'],
   },

code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx

@@ -346,7 +346,8 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   const hasNoUngrouped = groups.ungrouped.length === 0;
   const hasNoSections = Object.entries(groups.sections).length === 0;
   const hasNoUngroupedSubsections = Object.entries(groups.ungroupedSubsections).length === 0;
-  if (hasNoUngrouped && hasNoSections && hasNoUngroupedSubsections) return <Empty />;
+  if (hasNoUngrouped && hasNoSections && hasNoUngroupedSubsections)
+    return <Empty inAddonPanel={inAddonPanel} />;
 
   let colSpan = 1;
   if (updateArgs) colSpan += 1;

code/ui/blocks/src/components/ArgsTable/Empty.tsx

@@ -3,14 +3,23 @@ import React, { useEffect, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { Icon, Link } from '@storybook/components/experimental';
 
-const Wrapper = styled.div({
-  height: '100%',
+interface EmptyProps {
+  inAddonPanel?: boolean;
+}
+
+const Wrapper = styled.div<{ inAddonPanel?: boolean }>(({ inAddonPanel, theme }) => ({
+  height: inAddonPanel ? '100%' : 'auto',
   display: 'flex',
+  border: inAddonPanel ? 'none' : `1px solid ${theme.appBorderColor}`,
+  borderRadius: inAddonPanel ? 0 : theme.appBorderRadius,
+  padding: inAddonPanel ? 0 : 40,
   alignItems: 'center',
   justifyContent: 'center',
   flexDirection: 'column',
   gap: 15,
-});
+  background: theme.background.content,
+  boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0',
+}));
 
 const Content = styled.div({
   display: 'flex',
@@ -45,16 +54,16 @@ const Divider = styled.div(({ theme }) => ({
 }));
 
 const VideoIcon = styled.div(({ theme }) => ({
-  width: 24,
-  height: 18,
+  width: 22,
+  height: 16,
   borderRadius: theme.appBorderRadius,
   border: `1px solid ${theme.color.secondary}`,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 }));
 
-export const Empty: FC = () => {
+export const Empty: FC<EmptyProps> = ({ inAddonPanel }) => {
   const [isLoading, setIsLoading] = useState(true);
 
   // We are adding a small delay to avoid flickering when the story is loading.
@@ -71,35 +80,52 @@ export const Empty: FC = () => {
   if (isLoading) return null;
 
   return (
-    <Wrapper>
+    <Wrapper inAddonPanel={inAddonPanel}>
       <Content>
-        <Title>Interactive story playground</Title>
+        <Title>
+          {inAddonPanel
+            ? 'Interactive story playground'
+            : "Args table with interactive controls couldn't be auto-generated"}
+        </Title>
         <Description>
           Controls give you an easy to use interface to test your components. Set your story args
           and you&apos;ll see controls appearing here automatically.
         </Description>
       </Content>
       <Links>
-        <Link
-          href="https://youtu.be/0gOfS6K0x0E"
-          target="_blank"
-          icon={
-            <VideoIcon>
-              <Icon.Play size={10} />
-            </VideoIcon>
-          }
-          withArrow
-        >
-          Watch 5m video
-        </Link>
-        <Divider />
-        <Link
-          href="https://storybook.js.org/docs/react/essentials/controls"
-          target="_blank"
-          withArrow
-        >
-          Read docs
-        </Link>
+        {inAddonPanel && (
+          <>
+            <Link
+              href="https://youtu.be/0gOfS6K0x0E"
+              target="_blank"
+              icon={
+                <VideoIcon>
+                  <Icon.Play size={8} />
+                </VideoIcon>
+              }
+              withArrow
+            >
+              Watch 5m video
+            </Link>
+            <Divider />
+            <Link
+              href="https://storybook.js.org/docs/react/essentials/controls"
+              target="_blank"
+              withArrow
+            >
+              Read docs
+            </Link>
+          </>
+        )}
+        {!inAddonPanel && (
+          <Link
+            href="https://storybook.js.org/docs/react/essentials/controls"
+            target="_blank"
+            withArrow
+          >
+            Learn how to set that up
+          </Link>
+        )}
       </Links>
     </Wrapper>
   );

code/ui/components/src/new/Link/Link.tsx

@@ -39,7 +39,6 @@ const StyledLink = styled.a<Omit<LinkProps, 'children'>>(({ theme, variant = 'pr
   display: 'inline-flex',
   gap: 4,
   alignItems: 'center',
-  fontSize: theme.typography.size.s2 - 1,
   transition: 'all 150ms ease-out',
   textDecoration: 'none',
   lineHeight: 1,
@@ -70,8 +69,9 @@ const StyledLink = styled.a<Omit<LinkProps, 'children'>>(({ theme, variant = 'pr
   },
 }));
 
-const StyledLeft = styled.span({
+const StyledLeft = styled.span(({ theme }) => ({
   display: 'inline-flex',
   gap: 6,
   alignItems: 'center',
-});
+  fontSize: theme.typography.size.s2 - 1,
+}));