Add a component to render placeholder text in empty cells (#3071)

* adds a component to render placeholder text in empty cells

* adds changeset

* Update src/DataTable/Table.tsx

Co-authored-by: Josh Black <joshblack@github.com>

* Update src/DataTable/Table.tsx

Co-authored-by: Josh Black <joshblack@github.com>

* Update generated/components.json

* fixes linting error

---------

Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: mperrotti <mperrotti@users.noreply.github.com>

.changeset/olive-beds-train.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds a helper component for rendering placeholder text to explain why a DataTable cell has no content.

generated/components.json

@@ -5126,4 +5126,4 @@
       "subcomponents": []
     }
   }
-}
+}

src/DataTable/DataTable.features.stories.tsx

@@ -1132,6 +1132,73 @@ export const WithOverflow = () => (
   </div>
 )
 
+export const WithPlaceholderCells = () => (
+  <Table.Container>
+    <Table.Title as="h2" id="repositories">
+      Repositories
+    </Table.Title>
+    <Table.Subtitle as="p" id="repositories-subtitle">
+      A subtitle could appear here to give extra context to the data.
+    </Table.Subtitle>
+    <DataTable
+      aria-labelledby="repositories"
+      aria-describedby="repositories-subtitle"
+      data={data}
+      columns={[
+        {
+          header: 'Repository',
+          field: 'name',
+          rowHeader: true,
+        },
+        {
+          header: 'Type',
+          field: 'type',
+          renderCell: row => {
+            return <Label>{uppercase(row.type)}</Label>
+          },
+        },
+        {
+          header: 'Updated',
+          field: 'updatedAt',
+          renderCell: row => {
+            return <RelativeTime date={new Date(row.updatedAt)} />
+          },
+        },
+        {
+          header: 'Dependabot',
+          field: 'securityFeatures.dependabot',
+          renderCell: row => {
+            return row.securityFeatures.dependabot.length > 0 ? (
+              <LabelGroup>
+                {row.securityFeatures.dependabot.map(feature => {
+                  return <Label key={feature}>{uppercase(feature)}</Label>
+                })}
+              </LabelGroup>
+            ) : (
+              <Table.CellPlaceholder>Not configured</Table.CellPlaceholder>
+            )
+          },
+        },
+        {
+          header: 'Code scanning',
+          field: 'securityFeatures.codeScanning',
+          renderCell: row => {
+            return row.securityFeatures.codeScanning.length > 0 ? (
+              <LabelGroup>
+                {row.securityFeatures.codeScanning.map(feature => {
+                  return <Label key={feature}>{uppercase(feature)}</Label>
+                })}
+              </LabelGroup>
+            ) : (
+              <Table.CellPlaceholder>Not configured</Table.CellPlaceholder>
+            )
+          },
+        },
+      ]}
+    />
+  </Table.Container>
+)
+
 export const WithRightAlignedColumns = () => {
   const rows = Array.from(data).sort((a, b) => {
     return b.updatedAt - a.updatedAt

src/DataTable/Table.tsx

@@ -2,6 +2,7 @@ import {SortAscIcon, SortDescIcon} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
+import Text from '../Text'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {SortDirection} from './sorting'
@@ -342,6 +343,12 @@ function TableCell({align, children, scope, ...rest}: TableCellProps) {
   )
 }
 
+type TableCellPlaceholderProps = React.PropsWithChildren
+
+function TableCellPlaceholder({children}: TableCellPlaceholderProps) {
+  return <Text color="fg.subtle">{children}</Text>
+}
+
 // ----------------------------------------------------------------------------
 // TableContainer
 // ----------------------------------------------------------------------------
@@ -559,4 +566,5 @@ export {
   TableHeader,
   TableSortHeader,
   TableCell,
+  TableCellPlaceholder,
 }

src/DataTable/index.ts

@@ -6,6 +6,7 @@ import {
   TableRow,
   TableHeader,
   TableCell,
+  TableCellPlaceholder,
   TableContainer,
   TableTitle,
   TableSubtitle,
@@ -24,6 +25,7 @@ const Table = Object.assign(TableImpl, {
   Header: TableHeader,
   Row: TableRow,
   Cell: TableCell,
+  CellPlaceholder: TableCellPlaceholder,
 })
 
 export {DataTable, Table}