refactor(ui-table): allow falsy children for Table.Row, sort docs params and theme variables

Also do not render the 'default' column in docs if nothing has a defult value

Author: matyasf

packages/__docs__/src/ComponentTheme/index.tsx

@@ -71,18 +71,20 @@ class ComponentTheme extends Component<ComponentThemeProps> {
     const { componentTheme, themeVariables } = this.props
     const colorPrimitives = themeVariables.colors.primitives
 
-    return Object.keys(componentTheme).map((name) => {
-      return (
-        <Table.Row key={name}>
-          <Table.Cell>
-            <code>{name}</code>
-          </Table.Cell>
-          <Table.Cell>
-            {this.renderValueCell(componentTheme[name], colorPrimitives)}
-          </Table.Cell>
-        </Table.Row>
-      )
-    })
+    return Object.keys(componentTheme)
+      .sort((a, b) => a.localeCompare(b))
+      .map((name) => {
+        return (
+          <Table.Row key={name}>
+            <Table.Cell>
+              <code>{name}</code>
+            </Table.Cell>
+            <Table.Cell>
+              {this.renderValueCell(componentTheme[name], colorPrimitives)}
+            </Table.Cell>
+          </Table.Row>
+        )
+      })
   }
 
   render() {

packages/__docs__/src/Params/index.tsx

@@ -36,7 +36,7 @@ class Params extends Component<ParamsProps> {
     layout: 'small'
   }
 
-  renderRows() {
+  renderRows(hasDefault: boolean) {
     return this.props.params?.map((param) => {
       return (
         <Table.Row key={param.name}>
@@ -46,9 +46,11 @@ class Params extends Component<ParamsProps> {
           <Table.Cell>
             <code>{param?.type}</code>
           </Table.Cell>
-          <Table.Cell>
-            <code>{param?.defaultValue}</code>
-          </Table.Cell>
+          {hasDefault && (
+            <Table.Cell>
+              <code>{param?.defaultValue}</code>
+            </Table.Cell>
+          )}
           <Table.Cell>{this.renderDescription(param.description)}</Table.Cell>
         </Table.Row>
       )
@@ -108,6 +110,15 @@ class Params extends Component<ParamsProps> {
         </>
       )
     }
+    let hasDefault = false
+    if (this.props.params) {
+      for (const param of this.props.params) {
+        if (param.defaultValue) {
+          hasDefault = true
+          break
+        }
+      }
+    }
     return (
       <>
         <Table
@@ -119,11 +130,13 @@ class Params extends Component<ParamsProps> {
             <Table.Row>
               <Table.ColHeader id="Param">Param</Table.ColHeader>
               <Table.ColHeader id="Type">Type</Table.ColHeader>
-              <Table.ColHeader id="Default">Default</Table.ColHeader>
+              {hasDefault && (
+                <Table.ColHeader id="Default">Default</Table.ColHeader>
+              )}
               <Table.ColHeader id="Description">Description</Table.ColHeader>
             </Table.Row>
           </Table.Head>
-          <Table.Body>{this.renderRows()}</Table.Body>
+          <Table.Body>{this.renderRows(hasDefault)}</Table.Body>
         </Table>
         {genericParamsTable}
       </>

packages/__docs__/src/Properties/index.tsx

@@ -62,7 +62,7 @@ class Properties extends Component<PropertiesProps> {
     return string.includes('(...args: any[]) => any')
   }
 
-  renderRows() {
+  renderRows(hasDefaultOrRequired: boolean) {
     const { props } = this.props
     const propsToIgnore = ['styles', 'makeStyles', 'dir']
 
@@ -81,6 +81,7 @@ class Properties extends Component<PropertiesProps> {
           !propsToIgnore.includes(name)
         )
       })
+      .sort((a, b) => a.localeCompare(b))
       .map((name, idx) => {
         const prop = props[name]
         return (
@@ -91,7 +92,9 @@ class Properties extends Component<PropertiesProps> {
             <Table.Cell>
               {prop.tsType && <code>{this.renderTSType(prop.tsType)}</code>}
             </Table.Cell>
-            <Table.Cell>{this.renderDefault(prop)}</Table.Cell>
+            {hasDefaultOrRequired && (
+              <Table.Cell>{this.renderDefault(prop)}</Table.Cell>
+            )}
             <Table.Cell>{this.renderDescription(prop)}</Table.Cell>
           </Table.Row>
         )
@@ -263,6 +266,13 @@ class Properties extends Component<PropertiesProps> {
   render() {
     const { styles } = this.props
     const { layout } = this.props
+    let hasDefaultOrRequired = false
+    for (const i in this.props.props) {
+      if (this.props.props[i].required || this.props.props[i].defaultValue) {
+        hasDefaultOrRequired = true
+        break
+      }
+    }
     return (
       <div css={styles?.properties}>
         <Table
@@ -273,11 +283,13 @@ class Properties extends Component<PropertiesProps> {
             <Table.Row>
               <Table.ColHeader id="Prop">Prop</Table.ColHeader>
               <Table.ColHeader id="Type">Type</Table.ColHeader>
-              <Table.ColHeader id="Default">Default</Table.ColHeader>
+              {hasDefaultOrRequired && (
+                <Table.ColHeader id="Default">Default</Table.ColHeader>
+              )}
               <Table.ColHeader id="Description">Description</Table.ColHeader>
             </Table.Row>
           </Table.Head>
-          <Table.Body>{this.renderRows()}</Table.Body>
+          <Table.Body>{this.renderRows(hasDefaultOrRequired)}</Table.Body>
         </Table>
       </div>
     )

packages/ui-table/src/Table/Row/props.ts

@@ -37,9 +37,17 @@ type TableRowOwnProps = {
    * A row's children should be table cells. Its children should have the
    * `header` prop to render the column header in `stacked` layout
    *
-   * By default `Table.ColHeader` or `Table.RowHeader` or `Table.Cell`
+   * By default, `Table.ColHeader` or `Table.RowHeader` or `Table.Cell`.
+   *
+   * Falsy values are also allowed to be able to use syntax like
+   * `{condition && <Table.Cell>bla<Table.Cell>}`
    */
-  children?: React.ReactElement | React.ReactElement[]
+  children?:
+    | React.ReactElement
+    | null
+    | undefined
+    | boolean
+    | (React.ReactElement | null | undefined | boolean)[]
 
   /**
    * Controls the hover state of the row.

packages/ui-table/src/Table/__tests__/Table.test.tsx

@@ -155,7 +155,6 @@ describe('<Table />', async () => {
     render(
       <Table caption="Test table" layout="stacked">
         <Table.Head>
-          {/* @ts-expect-error error is normal here */}
           <Table.Row>
             <Table.Cell>Foo</Table.Cell>
             {}