(
data-dowel-component="callout"
data-tone={tone}
>
- {icon ? (
+ {resolvedIcon ? (
- {icon}
+ {resolvedIcon}
) : null}
diff --git a/packages/dowel/src/components/data-table/data-table.stylex.ts b/packages/dowel/src/components/data-table/data-table.stylex.ts
index 109ff13..1847387 100644
--- a/packages/dowel/src/components/data-table/data-table.stylex.ts
+++ b/packages/dowel/src/components/data-table/data-table.stylex.ts
@@ -79,13 +79,13 @@ export const parts = stylex.create({
alignItems: "center",
display: "inline-flex",
flexShrink: 0,
- height: "0.875rem",
+ height: "1rem",
justifyContent: "center",
opacity: 0,
transitionDuration: tokens["--dowel-duration-fast"],
transitionProperty: "opacity, transform",
transitionTimingFunction: tokens["--dowel-ease-out"],
- width: "0.875rem",
+ width: "1rem",
},
sorted: {
opacity: 1,
@@ -244,12 +244,12 @@ export const parts = stylex.create({
boxSizing: "border-box",
color: tokens["--dowel-on-accent"],
display: "inline-flex",
- height: "0.875rem",
+ height: "1rem",
justifyContent: "center",
transitionDuration: tokens["--dowel-duration-fast"],
transitionProperty: "background-color, border-color, box-shadow",
transitionTimingFunction: tokens["--dowel-ease-out"],
- width: "0.875rem",
+ width: "1rem",
},
checkboxChecked: {
backgroundColor: tokens["--dowel-accent"],
diff --git a/packages/dowel/src/components/data-table/index.tsx b/packages/dowel/src/components/data-table/index.tsx
index 1900a87..0ff8770 100644
--- a/packages/dowel/src/components/data-table/index.tsx
+++ b/packages/dowel/src/components/data-table/index.tsx
@@ -18,6 +18,7 @@ import type {
SortingState,
Updater,
} from "@tanstack/react-table";
+import { CheckIcon, ChevronUpIcon, MinusIcon } from "@heroicons/react/16/solid";
import * as stylex from "@stylexjs/stylex";
import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
import type {
@@ -105,28 +106,9 @@ function applyUpdater(updater: Updater, current: T) {
: updater;
}
-function CheckIcon({ mixed = false }: { mixed?: boolean }) {
- return (
-
- );
+function SelectionIcon({ mixed = false }: { mixed?: boolean }) {
+ const Icon = mixed ? MinusIcon : CheckIcon;
+ return ;
}
type CheckboxProps = {
@@ -178,7 +160,9 @@ function Checkbox({
)}
aria-hidden="true"
>
- {checked || indeterminate ? : null}
+ {checked || indeterminate ? (
+
+ ) : null}
);
@@ -194,15 +178,7 @@ function SortIcon({ direction }: { direction: false | "asc" | "desc" }) {
)}
aria-hidden="true"
>
-
+
);
}
diff --git a/packages/dowel/src/components/empty-state/empty-state.stylex.ts b/packages/dowel/src/components/empty-state/empty-state.stylex.ts
new file mode 100644
index 0000000..436d75d
--- /dev/null
+++ b/packages/dowel/src/components/empty-state/empty-state.stylex.ts
@@ -0,0 +1,81 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const MOBILE = "@media (max-width: 639px)";
+
+export const root = stylex.create({
+ base: {
+ alignItems: "center",
+ boxSizing: "border-box",
+ color: tokens["--dowel-text-secondary"],
+ display: "flex",
+ flexDirection: "column",
+ fontFamily: tokens["--dowel-font-sans"],
+ justifyContent: "center",
+ textAlign: "center",
+ width: "100%",
+ },
+});
+
+export const size = stylex.create({
+ compact: {
+ gap: "0.625rem",
+ paddingBlock: "1.25rem",
+ paddingInline: "1rem",
+ },
+ default: {
+ gap: "0.875rem",
+ minHeight: "12rem",
+ paddingBlock: {
+ default: "2.5rem",
+ [MOBILE]: "2rem",
+ },
+ paddingInline: {
+ default: "2rem",
+ [MOBILE]: "1rem",
+ },
+ },
+});
+
+export const part = stylex.create({
+ icon: {
+ alignItems: "center",
+ color: tokens["--dowel-text-tertiary"],
+ display: "inline-flex",
+ flexShrink: 0,
+ height: "1.5rem",
+ justifyContent: "center",
+ width: "1.5rem",
+ },
+ copy: {
+ alignItems: "center",
+ display: "flex",
+ flexDirection: "column",
+ gap: "0.375rem",
+ maxWidth: "24rem",
+ minWidth: 0,
+ },
+ title: {
+ color: tokens["--dowel-text-primary"],
+ fontSize: "0.9375rem",
+ fontWeight: 550,
+ letterSpacing: "-0.0125rem",
+ lineHeight: 1.4,
+ margin: 0,
+ },
+ description: {
+ color: tokens["--dowel-text-tertiary"],
+ fontSize: "0.8125rem",
+ letterSpacing: "-0.0125rem",
+ lineHeight: 1.5,
+ margin: 0,
+ },
+ actions: {
+ alignItems: "center",
+ display: "flex",
+ flexWrap: "wrap",
+ gap: "0.5rem",
+ justifyContent: "center",
+ },
+});
diff --git a/packages/dowel/src/components/empty-state/empty-state.test.tsx b/packages/dowel/src/components/empty-state/empty-state.test.tsx
new file mode 100644
index 0000000..7963479
--- /dev/null
+++ b/packages/dowel/src/components/empty-state/empty-state.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/setup";
+import { Button } from "../button";
+import { EmptyState } from "./index";
+
+describe("EmptyState", () => {
+ it("renders structured copy and actions", () => {
+ render(
+
Connect repository}
+ />,
+ );
+ expect(
+ screen.getByRole("heading", { name: "No repositories", level: 3 }),
+ ).toBeDefined();
+ expect(
+ screen.getByText("Connect a repository to start mirroring code."),
+ ).toBeDefined();
+ expect(
+ screen.getByRole("button", { name: "Connect repository" }),
+ ).toBeDefined();
+ });
+
+ it("supports the surrounding page heading level", () => {
+ render();
+ expect(
+ screen.getByRole("heading", { name: "No results", level: 2 }),
+ ).toBeDefined();
+ });
+
+ it("ignores appearance props smuggled through a spread", () => {
+ const smuggled = { className: "evil", style: { color: "red" } };
+ render();
+ const state = screen
+ .getByRole("heading")
+ .closest("[data-dowel-component]")!;
+ expect(state.className).not.toContain("evil");
+ expect(state.getAttribute("style")).toBeNull();
+ });
+
+ it("has no accessibility violations", async () => {
+ const { container } = render(
+ ,
+ );
+ await expectNoA11yViolations(container);
+ });
+});
diff --git a/packages/dowel/src/components/empty-state/index.tsx b/packages/dowel/src/components/empty-state/index.tsx
new file mode 100644
index 0000000..5702302
--- /dev/null
+++ b/packages/dowel/src/components/empty-state/index.tsx
@@ -0,0 +1,64 @@
+import * as stylex from "@stylexjs/stylex";
+import { createElement, forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { withoutAppearanceProps } from "../_shared/props";
+import * as styles from "./empty-state.stylex";
+
+export interface EmptyStateProps
+ extends Omit<
+ ComponentPropsWithoutRef<"div">,
+ "children" | "className" | "style" | "title"
+ > {
+ title: ReactNode;
+ description?: ReactNode;
+ icon?: ReactNode;
+ actions?: ReactNode;
+ headingLevel?: 2 | 3 | 4;
+ size?: "compact" | "default";
+}
+
+export const EmptyState = forwardRef(
+ function EmptyState(
+ {
+ title,
+ description,
+ icon,
+ actions,
+ headingLevel = 3,
+ size = "default",
+ ...props
+ },
+ ref,
+ ) {
+ const safeProps = withoutAppearanceProps(props);
+ return (
+
+ {icon ? (
+
+ {icon}
+
+ ) : null}
+
+ {createElement(
+ `h${headingLevel}`,
+ stylex.props(styles.part.title),
+ title,
+ )}
+ {description ? (
+
{description}
+ ) : null}
+
+ {actions ? (
+
{actions}
+ ) : null}
+