update PropTable and StateTable from main

Author: devongovett

packages/dev/s2-docs/src/PropTable.tsx

@@ -1,8 +1,8 @@
 import {Code, styles as codeStyles} from './Code';
+import {CSSVariables, StateTable} from './StateTable';
 import {DisclosureRow} from './DisclosureRow';
 import React from 'react';
 import {renderHTMLfromMarkdown, setLinks, TComponent, TInterface, TType, Type} from './types';
-import {StateTable} from './StateTable';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from './Table';
 
@@ -104,9 +104,9 @@ export function PropTable({component, links, showDescription, hideRenderProps, s
           style={!defaultClassName ? {marginTop: 16} : undefined}
           properties={renderProps.properties}
           showOptional={showOptionalRenderProps}
-          hideSelector={hideSelector}
-          cssVariables={cssVariables} />
-       ) : null}
+          hideSelector={hideSelector} />
+      ) : null}
+      {cssVariables && <CSSVariables cssVariables={cssVariables} />}
     </>
   );
 }

packages/dev/s2-docs/src/StateTable.tsx

@@ -61,32 +61,38 @@ export function StateTable({properties, links, showOptional, hideSelector, cssVa
     table = (
       <>
         {table}
-        <Table style={{marginTop: 16}}>
-          <TableHeader>
-            <TableRow>
-              <TableColumn role="columnheader">CSS Variable</TableColumn>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {Object.entries(cssVariables).map(([name, description]) => (
-              <Fragment key={name}>
-                <TableRow>
-                  <TableCell role="rowheader" hideBorder>
-                    <code className={codeStyle}>
-                      <span className={codeStyles.property}>{name}</span>
-                    </code>
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell>{renderHTMLfromMarkdown(description, {forceInline: true})}</TableCell>
-                </TableRow>
-              </Fragment>
-            ))}
-          </TableBody>
-        </Table>
+        <CSSVariables cssVariables={cssVariables} />
       </>
     );
   }
 
   return table;
 }
+
+export function CSSVariables({cssVariables}: {cssVariables: {[name: string]: string}}) {
+  return (
+    <Table style={{marginTop: 16}}>
+      <TableHeader>
+        <TableRow>
+          <TableColumn role="columnheader">CSS Variable</TableColumn>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Object.entries(cssVariables).map(([name, description]) => (
+          <Fragment key={name}>
+            <TableRow>
+              <TableCell role="rowheader" hideBorder>
+                <code className={codeStyle}>
+                  <span className={codeStyles.property}>{name}</span>
+                </code>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>{renderHTMLfromMarkdown(description, {forceInline: true})}</TableCell>
+            </TableRow>
+          </Fragment>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}