Skip to content

Commit afacc1d

Browse files
Shrinks99claude
Shrinks99
and
claude
authored
Light mode overhaul, table updates, & elevation floating removal (#75)
Co-authored-by: Claude <claude@users.noreply.github.com>
1 parent 2ca4c57 commit afacc1d

33 files changed

Lines changed: 285 additions & 491 deletions

‎packages/demo/src/components/demo/dialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,12 +134,12 @@ export const DialogWithTableDemo = () => {
134134
<DialogDescription>Dialog Description</DialogDescription>
135135
</DialogHeader>
136136
<DialogContent>
137-
<Card elevation={ELEVATION.FLOATING}>
137+
<Card elevation={ELEVATION.OVERLAY}>
138138
<CardContent>
139139
<div className="space-y-2">
140140
<h4 className="font-medium">Card</h4>
141141
<p className="text-text-secondary text-sm">
142-
This card has an elevation of Floating.
142+
This card has an elevation of Overlay.
143143
</p>
144144
</div>
145145
</CardContent>

‎packages/demo/src/components/demo/table.tsx‎

Lines changed: 69 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,51 @@
11
import type { Elevation } from "@eqtylab/equality";
22
import {
33
Badge,
4-
Button,
54
EmptyTableState,
5+
IconButton,
66
SortButton,
77
Table,
88
} from "@eqtylab/equality";
99

1010
interface TableDemoProps {
1111
variant?:
12-
| "unclickable"
12+
| "default"
1313
| "clickable"
14-
| "with-actions"
1514
| "with-border"
1615
| "with-sorter"
1716
| "empty-state"
1817
| "empty-state-custom";
19-
elevation: Elevation;
18+
elevation?: Elevation;
2019
}
2120

2221
export const TableDemo = ({
23-
variant = "unclickable",
22+
variant = "default",
2423
elevation,
2524
}: TableDemoProps) => {
2625
const columns = [
2726
{ key: "name", content: "Name" },
2827
{ key: "email", content: "Email" },
2928
{ key: "role", content: "Role" },
3029
{ key: "status", content: "Status" },
30+
{ key: "actions", content: "" },
3131
];
3232

33-
const demo_rows_unclickable = [
33+
const rows = [
3434
{
3535
key: "1",
3636
cells: [
3737
{ key: "name", content: "Alice Cooper" },
3838
{ key: "email", content: "alice@example.com" },
3939
{ key: "role", content: "Admin" },
4040
{ key: "status", content: <Badge variant="success">Active</Badge> },
41+
{
42+
key: "actions",
43+
content: <IconButton name="EllipsisVertical" label="Row actions" />,
44+
},
4145
],
46+
...(variant === "clickable" && {
47+
onClick: () => console.log("Clicked row 1"),
48+
}),
4249
},
4350
{
4451
key: "2",
@@ -47,188 +54,38 @@ export const TableDemo = ({
4754
{ key: "email", content: "bob@example.com" },
4855
{ key: "role", content: "User" },
4956
{ key: "status", content: <Badge variant="success">Active</Badge> },
57+
{
58+
key: "actions",
59+
content: <IconButton name="EllipsisVertical" label="Row actions" />,
60+
},
5061
],
62+
...(variant === "clickable" && {
63+
onClick: () => console.log("Clicked row 2"),
64+
}),
5165
},
5266
{
5367
key: "3",
5468
cells: [
5569
{ key: "name", content: "Charlie Brown" },
5670
{ key: "email", content: "charlie@example.com" },
5771
{ key: "role", content: "Viewer" },
58-
{ key: "status", content: <Badge variant="neutral">Inactive</Badge> },
72+
{
73+
key: "status",
74+
content: <Badge variant="neutral">Inactive</Badge>,
75+
},
76+
{
77+
key: "actions",
78+
content: <IconButton name="EllipsisVertical" label="Row actions" />,
79+
},
5980
],
81+
...(variant === "clickable" && {
82+
onClick: () => console.log("Clicked row 3"),
83+
}),
6084
},
6185
];
6286

63-
const demo_rows_clickable = [
64-
{
65-
key: "1",
66-
cells: [
67-
{ key: "name", content: "Alice Cooper" },
68-
{ key: "email", content: "alice@example.com" },
69-
{ key: "role", content: "Admin" },
70-
{ key: "status", content: "Active" },
71-
],
72-
onClick: () => console.log("Clicked row 1"),
73-
},
74-
{
75-
key: "2",
76-
cells: [
77-
{ key: "name", content: "Bob Smith" },
78-
{ key: "email", content: "bob@example.com" },
79-
{ key: "role", content: "User" },
80-
{ key: "status", content: "Active" },
81-
],
82-
onClick: () => console.log("Clicked row 2"),
83-
},
84-
{
85-
key: "3",
86-
cells: [
87-
{ key: "name", content: "Charlie Brown" },
88-
{ key: "email", content: "charlie@example.com" },
89-
{ key: "role", content: "Viewer" },
90-
{ key: "status", content: "Inactive" },
91-
],
92-
onClick: () => console.log("Clicked row 3"),
93-
},
94-
];
95-
96-
if (variant === "unclickable") {
97-
return (
98-
<Table
99-
columns={columns}
100-
rows={demo_rows_unclickable}
101-
elevation={elevation}
102-
/>
103-
);
104-
}
105-
106-
if (variant === "clickable") {
107-
return (
108-
<Table
109-
columns={columns}
110-
rows={demo_rows_clickable}
111-
elevation={elevation}
112-
/>
113-
);
114-
}
115-
116-
if (variant === "with-actions") {
117-
const columns_with_actions = [
118-
{ key: "name", content: "Name" },
119-
{ key: "email", content: "Email" },
120-
{ key: "role", content: "Role" },
121-
{ key: "status", content: "Status" },
122-
{ key: "actions", content: "Actions" },
123-
];
124-
125-
const demo_rows_with_actions = [
126-
{
127-
key: "1",
128-
cells: [
129-
{ key: "name", content: "Alice Cooper" },
130-
{ key: "email", content: "alice@example.com" },
131-
{ key: "role", content: "Admin" },
132-
{ key: "status", content: "Active" },
133-
{
134-
key: "actions",
135-
content: (
136-
<Button variant="tertiary" size="sm">
137-
View
138-
</Button>
139-
),
140-
},
141-
],
142-
},
143-
{
144-
key: "2",
145-
cells: [
146-
{ key: "name", content: "Bob Smith" },
147-
{ key: "email", content: "bob@example.com" },
148-
{ key: "role", content: "User" },
149-
{ key: "status", content: "Active" },
150-
{
151-
key: "actions",
152-
content: (
153-
<Button variant="tertiary" size="sm">
154-
View
155-
</Button>
156-
),
157-
},
158-
],
159-
},
160-
{
161-
key: "3",
162-
cells: [
163-
{ key: "name", content: "Charlie Brown" },
164-
{ key: "email", content: "charlie@example.com" },
165-
{ key: "role", content: "Viewer" },
166-
{ key: "status", content: "Inactive" },
167-
{
168-
key: "actions",
169-
content: (
170-
<Button variant="tertiary" size="sm">
171-
View
172-
</Button>
173-
),
174-
},
175-
],
176-
},
177-
];
178-
return (
179-
<Table
180-
columns={columns_with_actions}
181-
rows={demo_rows_with_actions}
182-
elevation={elevation}
183-
/>
184-
);
185-
}
186-
187-
if (variant === "with-border") {
188-
return (
189-
<Table
190-
columns={columns}
191-
rows={demo_rows_unclickable}
192-
border
193-
elevation={elevation}
194-
/>
195-
);
196-
}
197-
198-
if (variant === "empty-state") {
199-
return (
200-
<Table
201-
columns={columns}
202-
rows={[]}
203-
border
204-
elevation={elevation}
205-
emptyState="No data available"
206-
/>
207-
);
208-
}
209-
210-
if (variant === "empty-state-custom") {
211-
return (
212-
<Table
213-
columns={columns}
214-
rows={[]}
215-
border
216-
elevation={elevation}
217-
emptyState={
218-
<EmptyTableState
219-
icon="SearchX"
220-
title="No Members Found"
221-
description="Try refining your search terms or clearing filters."
222-
showClearButton
223-
onClear={() => {}}
224-
/>
225-
}
226-
/>
227-
);
228-
}
229-
23087
if (variant === "with-sorter") {
231-
const columns_with_sorter = [
88+
const sortColumns = [
23289
{
23390
key: "name",
23491
content: (
@@ -281,16 +138,50 @@ export const TableDemo = ({
281138
</SortButton>
282139
),
283140
},
141+
{ key: "actions", content: "" },
284142
];
285143

144+
return <Table columns={sortColumns} rows={rows} elevation={elevation} />;
145+
}
146+
147+
if (variant === "empty-state") {
286148
return (
287149
<Table
288-
columns={columns_with_sorter}
289-
rows={demo_rows_unclickable}
150+
columns={columns}
151+
rows={[]}
152+
border
290153
elevation={elevation}
154+
emptyState="No data available"
155+
/>
156+
);
157+
}
158+
159+
if (variant === "empty-state-custom") {
160+
return (
161+
<Table
162+
columns={columns}
163+
rows={[]}
164+
border
165+
elevation={elevation}
166+
emptyState={
167+
<EmptyTableState
168+
icon="SearchX"
169+
title="No Members Found"
170+
description="Try refining your search terms or clearing filters."
171+
showClearButton
172+
onClear={() => {}}
173+
/>
174+
}
291175
/>
292176
);
293177
}
294178

295-
return null;
179+
return (
180+
<Table
181+
columns={columns}
182+
rows={rows}
183+
border={variant === "with-border"}
184+
elevation={elevation}
185+
/>
186+
);
296187
};

‎packages/demo/src/components/header.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ThemeToggle } from "@demo/components/ui/theme-toggle";
55
---
66

77
<header
8-
class="border-text-primary/10 bg-background-floating fixed top-0 left-0 z-50 flex w-full items-center justify-between border-b px-4 py-3.5"
8+
class="border-text-primary/10 bg-background-overlay fixed top-0 left-0 z-50 flex w-full items-center justify-between border-b px-4 py-3.5"
99
>
1010
<div class="flex items-center gap-3">
1111
<div class="lg:hidden">

‎packages/demo/src/content/components/card.mdx‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -179,19 +179,3 @@ import {
179179
</CardContent>
180180
</Card>
181181
}
182-
183-
### Floating
184-
185-
{
186-
187-
<Card elevation={ELEVATION.FLOATING}>
188-
<CardContent>
189-
<div className="space-y-2">
190-
<h4 className="font-medium">Card</h4>
191-
<p className="text-text-secondary text-sm">
192-
This card has an elevation of Floating.
193-
</p>
194-
</div>
195-
</CardContent>
196-
</Card>
197-
}

‎packages/demo/src/content/components/display-field.mdx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,3 @@ import { ELEVATION } from "@eqtylab/equality";
8888
elevation={ELEVATION.OVERLAY}
8989
withinCard
9090
/>
91-
92-
### Floating
93-
94-
<DisplayFieldWithSlotDemo
95-
prefix="Key"
96-
client:only="react"
97-
elevation={ELEVATION.FLOATING}
98-
withinCard
99-
/>

‎packages/demo/src/content/components/icon.mdx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,3 @@ import { ELEVATION } from "@eqtylab/equality";
9494
background="square"
9595
elevation={ELEVATION.OVERLAY}
9696
/>
97-
98-
### Floating
99-
100-
<Icon
101-
icon="Shield"
102-
client:only="react"
103-
background="square"
104-
elevation={ELEVATION.FLOATING}
105-
/>

0 commit comments

Comments
 (0)