Add icons to argstable to match other empty states

storybookjs · Jan 15, 2024 · 2c95d3b · 2c95d3b
1 parent e5db6e1
commit 2c95d3b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
@@ -7,7 +7,7 @@ import { includeConditionalArg } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
 import { IconButton, ResetWrapper, Link } from '@storybook/components';
 
-import { UndoIcon } from '@storybook/icons';
+import { DocumentIcon, UndoIcon } from '@storybook/icons';
 import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';
 import type { ArgType, ArgTypes, Args, Globals } from './types';
@@ -323,7 +323,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
       <EmptyBlock>
         {error}&nbsp;
         <Link href="http://storybook.js.org/docs/" target="_blank" withArrow>
-          Read the docs
+          <DocumentIcon /> Read the docs
         </Link>
       </EmptyBlock>
     );

diff --git a/code/ui/blocks/src/components/ArgsTable/Empty.tsx b/code/ui/blocks/src/components/ArgsTable/Empty.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { Link } from '@storybook/components';
-import { VideoIcon } from '@storybook/icons';
+import { DocumentIcon, SupportIcon, VideoIcon } from '@storybook/icons';
 
 interface EmptyProps {
   inAddonPanel?: boolean;
@@ -92,21 +92,17 @@ export const Empty: FC<EmptyProps> = ({ inAddonPanel }) => {
             </Link>
             <Divider />
             <Link
-              href="https://storybook.js.org/docs/react/essentials/controls"
+              href="https://storybook.js.org/docs/essentials/controls"
               target="_blank"
               withArrow
             >
-              Read docs
+              <DocumentIcon /> Read docs
             </Link>
           </>
         )}
         {!inAddonPanel && (
-          <Link
-            href="https://storybook.js.org/docs/react/essentials/controls"
-            target="_blank"
-            withArrow
-          >
-            Learn how to set that up
+          <Link href="https://storybook.js.org/docs/essentials/controls" target="_blank" withArrow>
+            <SupportIcon /> Learn how to set that up
           </Link>
         )}
       </Links>