Merge pull request #9932 from TylerAPfledderer/feat/new-table-theme

feat(Table): add component, theme, and story

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Table.ts

@@ -0,0 +1,93 @@
+import { tableAnatomy } from "@chakra-ui/anatomy"
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  defineStyle,
+} from "@chakra-ui/react"
+import { defineMergeStyles, tableDefaultTheme } from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(tableAnatomy.keys)
+
+const $bgColor = cssVar("bg-color")
+
+const cellPadding = defineStyle({
+  p: 4,
+})
+
+const baseStyle = defineMergeStyles(
+  tableDefaultTheme.baseStyle,
+  definePartsStyle({
+    table: {
+      [$bgColor.variable]: "colors.background.highlight",
+      minW: "556px",
+    },
+    th: {
+      borderBottom: "1px",
+      borderColor: "body.base",
+      color: "body.base",
+      textTransform: "capitalize",
+      verticalAlign: "bottom",
+      ...cellPadding,
+    },
+    tr: {
+      "th, td": {
+        _notLast: {
+          borderRight: "2px",
+          borderRightColor: "background.base",
+        },
+      },
+    },
+    td: {
+      ...cellPadding,
+    },
+    tbody: {
+      tr: {
+        verticalAlign: "top",
+        _hover: {
+          /**
+           * Override specificity when hovering
+           * over even rows in 'striped' variant.
+           */
+          bg: $bgColor.reference,
+        },
+      },
+    },
+  })
+)
+
+const variantMinimalStriped = definePartsStyle({
+  tbody: {
+    tr: {
+      _even: {
+        bg: $bgColor.reference,
+      },
+    },
+  },
+})
+
+const variantSimpleStriped = definePartsStyle({
+  ...variantMinimalStriped,
+  thead: {
+    bg: $bgColor.reference,
+  },
+})
+
+const variantSimple = definePartsStyle({
+  thead: {
+    bg: $bgColor.reference,
+  },
+})
+
+export const Table = defineMultiStyleConfig({
+  baseStyle,
+  variants: {
+    minimal: {},
+    "minimal-striped": variantMinimalStriped,
+    simple: variantSimple,
+    "simple-striped": variantSimpleStriped,
+  },
+  defaultProps: {
+    variant: "simple",
+  },
+})

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -8,6 +8,7 @@ import { Modal } from "./Modal"
 import { Checkbox } from "./Checkbox"
 import { Progress } from "./Progress"
 import { Tabs } from "./Tabs"
+import { Table } from "./Table"
 import { Radio } from "./Radio"
 import { Select } from "./Select"
 import { Switch } from "./Switch"
@@ -24,7 +25,6 @@ import {
   headingDefaultTheme,
   menuDefaultTheme,
   spinnerDefaultTheme,
-  tableDefaultTheme,
 } from "./components.utils"
 
 export default {
@@ -51,7 +51,7 @@ export default {
   Select,
   Spinner: spinnerDefaultTheme,
   Switch,
-  Table: tableDefaultTheme,
+  Table,
   Tabs,
   Tag,
 }

src/components/MarkdownTable.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import {
+  Table as ChakraTable,
+  TableContainer,
+  Td,
+  Th,
+  Tr,
+  ThemingProps,
+  Tbody,
+  Thead,
+} from "@chakra-ui/react"
+import { MDXProviderComponentsProp } from "@mdx-js/react"
+
+/*
+ * TODO: Currently, there are cell spacing issues with some table content.
+ * Prefer `layout="fixed"` in the future when content has been addressed
+ * to provide equal cell widths.
+ */
+
+interface TableProps extends ThemingProps<"Table"> {
+  children: React.ReactNode
+}
+
+const Table = (props: TableProps) => {
+  const { variant, ...rest } = props
+  return (
+    <TableContainer whiteSpace="normal">
+      <ChakraTable variant={variant} {...rest} />
+    </TableContainer>
+  )
+}
+
+export const mdxTableComponents: MDXProviderComponentsProp = {
+  table: Table,
+  th: ({ align, ...rest }) => <Th textAlign={align} {...rest} />,
+  td: ({ align, ...rest }) => <Td textAlign={align} {...rest} />,
+  tr: (props) => <Tr {...props} />,
+  tbody: (props) => <Tbody {...props} />,
+  thead: (props) => <Thead {...props} />,
+}
+
+export default Table

src/components/Table/index.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { Flex } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+import TableComponent from ".."
+import {
+  MdxDemoData,
+  MdxEnergyConsumpData,
+  MdxTypesOfBridgesData,
+} from "./mockMdxData"
+
+type TableType = typeof TableComponent
+
+const meta: Meta<TableType> = {
+  title: "Molecules / Display Content / Tables",
+  component: TableComponent,
+  decorators: [
+    (Story) => (
+      <Flex flexDir="column" gap={16} maxW="container.md">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<TableType>
+
+export const Tables: Story = {
+  args: {
+    children: <MdxDemoData />,
+  },
+  render: (args) => (
+    <>
+      <TableComponent {...args} />
+      <TableComponent {...args} variant="minimal" />
+      <TableComponent {...args} variant="minimal-striped" />
+      <TableComponent {...args} variant="simple-striped" />
+    </>
+  ),
+}
+
+export const MockDocContent: Story = {
+  render: () => (
+    <>
+      <TableComponent children={<MdxEnergyConsumpData />} variant="simple" />
+      <TableComponent children={<MdxTypesOfBridgesData />} />
+    </>
+  ),
+}