Empty state

Author: fongandrew

src/components.tsx

@@ -9,6 +9,7 @@ import { ButtonsDemo } from '~/demos/buttons-demo';
 import { sidebarHighlight } from '~/demos/callbacks/sidebar';
 import { CheckboxesDemo } from '~/demos/checkboxes-demo';
 import { DetailsDemo } from '~/demos/details-demo';
+import { EmptyStateDemo } from '~/demos/empty-state-demo';
 import { ErrorFallbackDemo } from '~/demos/error-fallback-demo';
 import { FormSubmitDemo } from '~/demos/form-submit-demo';
 import { FormValidationGroupDemo } from '~/demos/form-validation-group-demo';
@@ -66,15 +67,15 @@ export function Components(props: ComponentsProps) {
 						</SidebarListLink>
 						<SidebarListLink href="#button-links-demo">
 							<Box />
-							Button Links
+							Button links
 						</SidebarListLink>
 						<SidebarListLink href="#alerts-demo">
 							<Box />
 							Alerts
 						</SidebarListLink>
 						<SidebarListLink href="#badge-and-count-demo">
 							<Box />
-							Badge and Count
+							Badge and count
 						</SidebarListLink>
 						<SidebarListLink href="#checkboxes-demo">
 							<Box />
@@ -84,6 +85,10 @@ export function Components(props: ComponentsProps) {
 							<Box />
 							Details
 						</SidebarListLink>
+						<SidebarListLink href="#empty-state-demo">
+							<Box />
+							Empty state
+						</SidebarListLink>
 						<SidebarListLink href="#error-fallback-demo">
 							<Box />
 							Error fallback
@@ -198,6 +203,7 @@ export function Components(props: ComponentsProps) {
 						<BadgeAndCountDemo />
 						<CheckboxesDemo />
 						<DetailsDemo />
+						<EmptyStateDemo />
 						<ErrorFallbackDemo />
 						<FormSubmitDemo />
 						<FormValidationGroupDemo />

src/demos/empty-state-demo.desktop.e2e.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+import { describeComponent } from '~/demos/test-utils/demo-e2e-helpers';
+
+describeComponent('empty-state-demo', (getContainer) => {
+	test('renders empty state', async () => {
+		const container = getContainer();
+		const emptyState = container.locator('.o-empty-state');
+		await expect(emptyState).toBeVisible();
+	});
+});

src/demos/empty-state-demo.tsx

@@ -0,0 +1,25 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from '~/shared/components/card';
+
+export function EmptyStateDemo() {
+	return (
+		<Card id="empty-state-demo">
+			<CardHeader>
+				<CardTitle>Empty State Demo</CardTitle>
+				<CardDescription>Plain box used to indicate content missing</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div class="o-stack">
+					<div class="o-empty-state">
+						<p>There’s nothing here yet.</p>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

src/shared/styles/objects/empty-state.css

@@ -0,0 +1,19 @@
+/* Badge styles for displaying status or notifications */
+@define-mixin o-empty-state {
+	@mixin v-text-muted;
+	@mixin t-radius-outer;
+	@mixin t-border;
+
+	display: flex;
+	align-items: center;
+	min-height: 6lh;
+	justify-content: center;
+	padding: var(--v-spacing);
+}
+
+@layer objects {
+	.o-empty-state {
+		@mixin v-colors-card;
+		@mixin o-empty-state;
+	}
+}

src/shared/styles/objects/index.css

@@ -1,6 +1,7 @@
 @import './badge.css';
 @import './box.css';
 @import './container.css';
+@import './empty-state.css';
 @import './grid.css';
 @import './group.css';
 @import './stack.css';