feat: add datalist component

.changeset/fluffy-eggs-protect.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react": minor
+---
+
+Add `DataList` component

packages/react/__stories__/data-list.stories.tsx

@@ -0,0 +1,88 @@
+import { Badge, DataList, For, useSlotRecipe } from "../src"
+import { PlaygroundTable } from "./shared/playground-table"
+
+export default {
+  title: "Components / Data List",
+}
+
+export const Sizes = () => {
+  const recipe = useSlotRecipe("DataList")
+  return (
+    <PlaygroundTable>
+      <thead>
+        <tr>
+          <td />
+          <For each={recipe.variantMap.size}>{(v) => <td>{v}</td>}</For>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td />
+          <For each={recipe.variantMap.size}>
+            {(v) => (
+              <td>
+                <DataList.Root size={v}>
+                  <DataList.Item>
+                    <DataList.ItemLabel>Name</DataList.ItemLabel>
+                    <DataList.ItemValue>John Doe</DataList.ItemValue>
+                  </DataList.Item>
+                  <DataList.Item>
+                    <DataList.ItemLabel>Email</DataList.ItemLabel>
+                    <DataList.ItemValue>john@test.com</DataList.ItemValue>
+                  </DataList.Item>
+                  <DataList.Item>
+                    <DataList.ItemLabel>Status</DataList.ItemLabel>
+                    <DataList.ItemValue>
+                      <Badge colorPalette="teal">Active</Badge>
+                    </DataList.ItemValue>
+                  </DataList.Item>
+                </DataList.Root>
+              </td>
+            )}
+          </For>
+        </tr>
+      </tbody>
+    </PlaygroundTable>
+  )
+}
+
+export const Orientation = () => {
+  const recipe = useSlotRecipe("DataList")
+  return (
+    <PlaygroundTable>
+      <thead>
+        <tr>
+          <td />
+          <For each={recipe.variantMap.size}>{(v) => <td>{v}</td>}</For>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td />
+          <For each={recipe.variantMap.size}>
+            {(v) => (
+              <td>
+                <DataList.Root orientation="horizontal" size={v}>
+                  <DataList.Item>
+                    <DataList.ItemLabel>Name</DataList.ItemLabel>
+                    <DataList.ItemValue>John Doe</DataList.ItemValue>
+                  </DataList.Item>
+                  <DataList.Item>
+                    <DataList.ItemLabel>Email</DataList.ItemLabel>
+                    <DataList.ItemValue>john@test.com</DataList.ItemValue>
+                  </DataList.Item>
+                  <DataList.Item>
+                    <DataList.ItemLabel>Status</DataList.ItemLabel>
+                    <DataList.ItemValue>
+                      <Badge colorPalette="teal">Active</Badge>
+                    </DataList.ItemValue>
+                  </DataList.Item>
+                </DataList.Root>
+              </td>
+            )}
+          </For>
+        </tr>
+      </tbody>
+    </PlaygroundTable>
+  )
+}

packages/react/src/components/data-list/data-list.ts

@@ -0,0 +1,54 @@
+import {
+  type HTMLChakraProps,
+  type SlotRecipeProps,
+  type UnstyledProp,
+  createStyleContext,
+} from "../../styled-system"
+
+////////////////////////////////////////////////////////////////////////////////////
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useDataListStyles,
+} = createStyleContext("DataList")
+
+export { useDataListStyles }
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DataListRootProps
+  extends HTMLChakraProps<"dl", SlotRecipeProps<"DataList">>,
+    UnstyledProp {}
+
+export const DataListRoot = withProvider<HTMLDListElement, DataListRootProps>(
+  "dl",
+  "root",
+)
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DataListItemProps extends HTMLChakraProps<"div"> {}
+
+export const DataListItem = withContext<HTMLDivElement, DataListItemProps>(
+  "div",
+  "item",
+)
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DataListItemLabelProps extends HTMLChakraProps<"dt"> {}
+
+export const DataListItemLabel = withContext<
+  HTMLDivElement,
+  DataListItemLabelProps
+>("dt", "itemLabel")
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DataListItemValueProps extends HTMLChakraProps<"dd"> {}
+
+export const DataListItemValue = withContext<
+  HTMLDivElement,
+  DataListItemValueProps
+>("dd", "itemValue")

packages/react/src/components/data-list/index.ts

@@ -0,0 +1,17 @@
+export {
+  DataListItem,
+  DataListItemLabel,
+  DataListItemValue,
+  DataListRoot,
+} from "./data-list"
+
+export type {
+  DataListItemLabelProps,
+  DataListItemProps,
+  DataListItemValueProps,
+  DataListRootProps,
+} from "./data-list"
+
+export { useDataListStyles } from "./data-list"
+
+export * as DataList from "./namespace"

packages/react/src/components/data-list/namespace.ts

@@ -0,0 +1,13 @@
+export {
+  DataListRoot as Root,
+  DataListItem as Item,
+  DataListItemLabel as ItemLabel,
+  DataListItemValue as ItemValue,
+} from "./data-list"
+
+export type {
+  DataListRootProps as RootProps,
+  DataListItemProps as ItemProps,
+  DataListItemLabelProps as ItemLabelProps,
+  DataListItemValueProps as ItemValueProps,
+} from "./data-list"

packages/react/src/components/index.ts

@@ -14,13 +14,15 @@ export * from "./client-only"
 export * from "./code"
 export * from "./collapsible"
 export * from "./container"
+export * from "./data-list"
 export * from "./dialog"
 export * from "./drawer"
 export * from "./editable"
 export * from "./env"
 export * from "./field"
 export * from "./file-upload"
 export * from "./flex"
+export * from "./float"
 export * from "./focus-lock"
 export * from "./for"
 export * from "./grid"
@@ -29,7 +31,6 @@ export * from "./highlight"
 export * from "./hover-card"
 export * from "./icon"
 export * from "./image"
-export * from "./float"
 export * from "./input"
 export * from "./kbd"
 export * from "./link"

packages/react/src/styled-system/generated/recipes.gen.ts

@@ -570,6 +570,15 @@ export interface CircularProgressVariantProps {
   size?: "xs" | "sm" | "md" | "lg"
 }
 
+// DataList
+
+export type DataListSlot = "root" | "item" | "itemLabel" | "itemValue"
+
+export interface DataListVariantProps {
+  orientation?: "horizontal" | "vertical"
+  size?: "sm" | "md" | "lg"
+}
+
 export interface ConfigSlotRecipes {
   Accordion: SystemSlotRecipeFn<AccordionSlot, AccordionVariantProps>
   Alert: SystemSlotRecipeFn<AlertSlot, AlertVariantProps>
@@ -604,6 +613,7 @@ export interface ConfigSlotRecipes {
     CircularProgressSlot,
     CircularProgressVariantProps
   >
+  DataList: SystemSlotRecipeFn<DataListSlot, DataListVariantProps>
 }
 
 export interface ConfigRecipeSlots {
@@ -637,6 +647,7 @@ export interface ConfigRecipeSlots {
   Toast: ToastSlot
   Tooltip: TooltipSlot
   CircularProgress: CircularProgressSlot
+  DataList: DataListSlot
 }
 
 export type SlotRecipeRecord<T, K> = T extends keyof ConfigRecipeSlots

packages/react/src/theme/recipes/data-list.ts

@@ -0,0 +1,75 @@
+import { defineSlotRecipe } from "../../styled-system"
+
+export const dataListSlotRecipe = defineSlotRecipe({
+  slots: ["root", "item", "itemLabel", "itemValue"],
+  base: {
+    itemLabel: {
+      color: "fg.subtle",
+      lineClamp: 1,
+    },
+    itemValue: {
+      display: "flex",
+      minWidth: "0",
+      flex: "1",
+    },
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          display: "flex",
+          flexDirection: "column",
+        },
+        item: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4",
+        },
+        itemLabel: {
+          minWidth: "120px",
+        },
+      },
+      vertical: {
+        root: {
+          display: "flex",
+          flexDirection: "column",
+        },
+        item: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "1",
+        },
+      },
+    },
+    size: {
+      sm: {
+        root: {
+          gap: "2",
+        },
+        item: {
+          fontSize: "xs",
+        },
+      },
+      md: {
+        root: {
+          gap: "4",
+        },
+        item: {
+          fontSize: "sm",
+        },
+      },
+      lg: {
+        root: {
+          gap: "5",
+        },
+        item: {
+          fontSize: "md",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+    orientation: "vertical",
+  },
+})

packages/react/src/theme/slot-recipes.ts

@@ -5,6 +5,7 @@ import { blockquoteSlotRecipe } from "./recipes/blockquote"
 import { breadcrumbSlotRecipe } from "./recipes/breadcrumb"
 import { cardSlotRecipe } from "./recipes/card"
 import { checkboxSlotRecipe } from "./recipes/checkbox"
+import { dataListSlotRecipe } from "./recipes/data-list"
 import { dialogSlotRecipe } from "./recipes/dialog"
 import { drawerSlotRecipe } from "./recipes/drawer"
 import { editableSlotRecipe } from "./recipes/editable"
@@ -60,4 +61,5 @@ export const slotRecipes = {
   Toast: toastSlotRecipe,
   Tooltip: tooltipSlotRecipe,
   CircularProgress: circularProgressSlotRecipe,
+  DataList: dataListSlotRecipe,
 }