docs(DataTable): add reference stories for row actions (#2978)

* docs(DataTable): add reference stories for row actions

* chore: clean-up ts types

* fix: add guards for optional id and field

* docs: add story ids to DataTable docs json

* Update generated/components.json

---------

Co-authored-by: Josh Black <[email protected]>

Author: joshblack

generated/components.json

@@ -1868,6 +1868,18 @@
           "id": "components-datatable-features--with-action",
           "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories\">\n      Repositories\n    </Table.Title>\n    <Table.Actions>\n      <Button>Action</Button>\n    </Table.Actions>\n    <Table.Divider />\n    <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n      A subtitle could appear here to give extra context to the data.\n    </Table.Subtitle>\n    <DataTable\n      aria-labelledby=\"repositories\"\n      aria-describedby=\"repositories-subtitle\"\n      data={data}\n      columns={[\n        {\n          header: 'Repository',\n          field: 'name',\n          rowHeader: true,\n        },\n        {\n          header: 'Type',\n          field: 'type',\n          renderCell: (row) => {\n            return <Label>{uppercase(row.type)}</Label>\n          },\n        },\n        {\n          header: 'Updated',\n          field: 'updatedAt',\n          renderCell: (row) => {\n            return <RelativeTime date={new Date(row.updatedAt)} />\n          },\n        },\n        {\n          header: 'Dependabot',\n          field: 'securityFeatures.dependabot',\n          renderCell: (row) => {\n            return row.securityFeatures.dependabot.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.dependabot.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n        {\n          header: 'Code scanning',\n          field: 'securityFeatures.codeScanning',\n          renderCell: (row) => {\n            return row.securityFeatures.codeScanning.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.codeScanning.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n      ]}\n    />\n  </Table.Container>\n)"
         },
+        {
+          "id": "components-datatable-features--with-row-action",
+          "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories\">\n      Repositories\n    </Table.Title>\n    <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n      A subtitle could appear here to give extra context to the data.\n    </Table.Subtitle>\n    <DataTable\n      aria-labelledby=\"repositories\"\n      aria-describedby=\"repositories-subtitle\"\n      data={data}\n      columns={[\n        {\n          header: 'Repository',\n          field: 'name',\n          rowHeader: true,\n        },\n        {\n          header: 'Type',\n          field: 'type',\n          renderCell: (row) => {\n            return <Label>{uppercase(row.type)}</Label>\n          },\n        },\n        {\n          header: 'Updated',\n          field: 'updatedAt',\n          renderCell: (row) => {\n            return <RelativeTime date={new Date(row.updatedAt)} />\n          },\n        },\n        {\n          header: 'Dependabot',\n          field: 'securityFeatures.dependabot',\n          renderCell: (row) => {\n            return row.securityFeatures.dependabot.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.dependabot.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n        {\n          header: 'Code scanning',\n          field: 'securityFeatures.codeScanning',\n          renderCell: (row) => {\n            return row.securityFeatures.codeScanning.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.codeScanning.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n        {\n          id: 'actions',\n          header: () => <VisuallyHidden>Actions</VisuallyHidden>,\n          renderCell: (row) => {\n            return (\n              <IconButton\n                aria-label={`Download: ${row.name}`}\n                title={`Download: ${row.name}`}\n                icon={DownloadIcon}\n                variant=\"invisible\"\n                onClick={() => {\n                  action('Download')(row)\n                }}\n              />\n            )\n          },\n        },\n      ]}\n    />\n  </Table.Container>\n)"
+        },
+        {
+          "id": "components-datatable-features--with-row-actions",
+          "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories\">\n      Repositories\n    </Table.Title>\n    <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n      A subtitle could appear here to give extra context to the data.\n    </Table.Subtitle>\n    <DataTable\n      aria-labelledby=\"repositories\"\n      aria-describedby=\"repositories-subtitle\"\n      data={data}\n      columns={[\n        {\n          header: 'Repository',\n          field: 'name',\n          rowHeader: true,\n        },\n        {\n          header: 'Type',\n          field: 'type',\n          renderCell: (row) => {\n            return <Label>{uppercase(row.type)}</Label>\n          },\n        },\n        {\n          header: 'Updated',\n          field: 'updatedAt',\n          renderCell: (row) => {\n            return <RelativeTime date={new Date(row.updatedAt)} />\n          },\n        },\n        {\n          header: 'Dependabot',\n          field: 'securityFeatures.dependabot',\n          renderCell: (row) => {\n            return row.securityFeatures.dependabot.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.dependabot.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n        {\n          header: 'Code scanning',\n          field: 'securityFeatures.codeScanning',\n          renderCell: (row) => {\n            return row.securityFeatures.codeScanning.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.codeScanning.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n        {\n          id: 'actions',\n          header: () => <VisuallyHidden>Actions</VisuallyHidden>,\n          renderCell: (row) => {\n            return (\n              <>\n                <IconButton\n                  aria-label={`Edit: ${row.name}`}\n                  title={`Edit: ${row.name}`}\n                  icon={PencilIcon}\n                  variant=\"invisible\"\n                  onClick={() => {\n                    action('Edit')(row)\n                  }}\n                />\n                <IconButton\n                  aria-label={`Delete: ${row.name}`}\n                  title={`Delete: ${row.name}`}\n                  icon={TrashIcon}\n                  variant=\"invisible\"\n                  onClick={() => {\n                    action('Delete')(row)\n                  }}\n                />\n              </>\n            )\n          },\n        },\n      ]}\n    />\n  </Table.Container>\n)"
+        },
+        {
+          "id": "components-datatable-features--with-row-action-menu",
+          "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories\">\n      Repositories\n    </Table.Title>\n    <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n      A subtitle could appear here to give extra context to the data.\n    </Table.Subtitle>\n    <DataTable\n      aria-labelledby=\"repositories\"\n      aria-describedby=\"repositories-subtitle\"\n      data={data}\n      columns={[\n        {\n          header: 'Repository',\n          field: 'name',\n          rowHeader: true,\n        },\n        {\n          header: 'Type',\n          field: 'type',\n          renderCell: (row) => {\n            return <Label>{uppercase(row.type)}</Label>\n          },\n        },\n        {\n          header: 'Updated',\n          field: 'updatedAt',\n          renderCell: (row) => {\n            return <RelativeTime date={new Date(row.updatedAt)} />\n          },\n        },\n        {\n          header: 'Dependabot',\n          field: 'securityFeatures.dependabot',\n          renderCell: (row) => {\n            return row.securityFeatures.dependabot.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.dependabot.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n        {\n          header: 'Code scanning',\n          field: 'securityFeatures.codeScanning',\n          renderCell: (row) => {\n            return row.securityFeatures.codeScanning.length > 0 ? (\n              <LabelGroup>\n                {row.securityFeatures.codeScanning.map((feature) => {\n                  return <Label key={feature}>{uppercase(feature)}</Label>\n                })}\n              </LabelGroup>\n            ) : null\n          },\n        },\n        {\n          id: 'actions',\n          header: () => <VisuallyHidden>Actions</VisuallyHidden>,\n          renderCell: (row) => {\n            return (\n              <ActionMenu>\n                <ActionMenu.Anchor>\n                  <IconButton\n                    aria-label={`Actions: ${row.name}`}\n                    title={`Actions: ${row.name}`}\n                    icon={KebabHorizontalIcon}\n                    variant=\"invisible\"\n                  />\n                </ActionMenu.Anchor>\n                <ActionMenu.Overlay>\n                  <ActionList>\n                    <ActionList.Item\n                      onSelect={() => {\n                        action('Copy')(row)\n                      }}\n                    >\n                      Copy row\n                    </ActionList.Item>\n                    <ActionList.Item>Edit row</ActionList.Item>\n                    <ActionList.Item>Export row as CSV</ActionList.Item>\n                    <ActionList.Divider />\n                    <ActionList.Item variant=\"danger\">\n                      Delete row\n                    </ActionList.Item>\n                  </ActionList>\n                </ActionMenu.Overlay>\n              </ActionMenu>\n            )\n          },\n        },\n      ]}\n    />\n  </Table.Container>\n)"
+        },
         {
           "id": "components-datatable-features--with-custom-heading",
           "code": "() => (\n  <>\n    <Heading as=\"h2\" id=\"repositories\">\n      Security coverage\n    </Heading>\n    <p id=\"repositories-subtitle\">\n      Organization members can only see data for the most recently-updated\n      repositories. To see all repositories, talk to your organization\n      administrator about becoming a security manager.\n    </p>\n    <Table.Container>\n      <DataTable\n        aria-labelledby=\"repositories\"\n        aria-describedby=\"repositories-subtitle\"\n        data={data}\n        columns={[\n          {\n            header: 'Repository',\n            field: 'name',\n            rowHeader: true,\n          },\n          {\n            header: 'Type',\n            field: 'type',\n            renderCell: (row) => {\n              return <Label>{uppercase(row.type)}</Label>\n            },\n          },\n          {\n            header: 'Updated',\n            field: 'updatedAt',\n            renderCell: (row) => {\n              return <RelativeTime date={new Date(row.updatedAt)} />\n            },\n          },\n          {\n            header: 'Dependabot',\n            field: 'securityFeatures.dependabot',\n            renderCell: (row) => {\n              return row.securityFeatures.dependabot.length > 0 ? (\n                <LabelGroup>\n                  {row.securityFeatures.dependabot.map((feature) => {\n                    return <Label key={feature}>{uppercase(feature)}</Label>\n                  })}\n                </LabelGroup>\n              ) : null\n            },\n          },\n          {\n            header: 'Code scanning',\n            field: 'securityFeatures.codeScanning',\n            renderCell: (row) => {\n              return row.securityFeatures.codeScanning.length > 0 ? (\n                <LabelGroup>\n                  {row.securityFeatures.codeScanning.map((feature) => {\n                    return <Label key={feature}>{uppercase(feature)}</Label>\n                  })}\n                </LabelGroup>\n              ) : null\n            },\n          },\n        ]}\n      />\n    </Table.Container>\n  </>\n)"

src/DataTable/DataTable.docs.json

@@ -19,6 +19,15 @@
     {
       "id": "components-datatable-features--with-action"
     },
+    {
+      "id": "components-datatable-features--with-row-action"
+    },
+    {
+      "id": "components-datatable-features--with-row-actions"
+    },
+    {
+      "id": "components-datatable-features--with-row-action-menu"
+    },
     {
       "id": "components-datatable-features--with-custom-heading"
     }