Skip to content

Commit 3e0ad52

Browse files
atrakhConvex, Inc.
atrakh
authored and
Convex, Inc.
committed
dashboard: design system tweaks (#36428)
- reduce padding in Button, Combobox, MultiselectCombobox, TextInput, DateRangePicker - Fix some dependencies for chef - Replace CaretSortIcon with chevron in comboboxes - Add optionsHeader to Combobox GitOrigin-RevId: 15bdaea0714ef0642193a713f56ad427b5027b52
1 parent 68df464 commit 3e0ad52

File tree

12 files changed

+67
-46
lines changed

12 files changed

+67
-46
lines changed

‎npm-packages/@convex-dev/design-system/.eslintrc.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ module.exports = {
99
},
1010
settings: {
1111
tailwindcss: {
12-
config: "./tailwind.config.ts",
12+
config: "./src/tailwind.config.ts",
1313
},
1414
},
1515
};

‎npm-packages/@convex-dev/design-system/package.json‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@convex-dev/design-system",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"type": "module",
55
"sideEffects": false,
66
"files": [
@@ -25,23 +25,21 @@
2525
"@radix-ui/react-tooltip": "~1.1.0",
2626
"classnames": "^2.3.2",
2727
"fuzzy": "~0.1.3",
28-
"lodash": "~4.17.21",
2928
"react-dom": "^18.0.0",
3029
"react-popper": "^2.3.0",
3130
"react-use": "~17.6.0",
3231
"tailwind-merge": "^1.14.0",
33-
"tailwind-variants": "~0.2.0"
32+
"tailwind-variants": "~0.2.0",
33+
"lodash-es": "~4.17.21"
3434
},
3535
"devDependencies": {
3636
"@jest/types": "^29.6.0",
3737
"@storybook/react": "^7.6.16",
38-
"@tailwindcss/forms": "^0.5.6",
3938
"@testing-library/dom": "~10.4.0",
4039
"@testing-library/jest-dom": "~6.6.0",
4140
"@testing-library/react": "~16.2.0",
4241
"@testing-library/user-event": "~14.6.0",
4342
"@types/jest": "^27.0.0",
44-
"@types/lodash": "~4.17.0",
4543
"@types/node": "^18.17.0",
4644
"@types/react": "^18.0.0",
4745
"@types/react-dom": "^18.0.0",
@@ -64,10 +62,9 @@
6462
"postcss": "^8.4.19",
6563
"prettier": "3.5.2",
6664
"prettier-plugin-tailwindcss": "~0.3.0",
67-
"tailwindcss": "^3.2.4",
68-
"tailwind-scrollbar": "3.0.3",
6965
"typescript": "~5.0.3",
70-
"tsc-alias": "~1.8.15"
66+
"tsc-alias": "~1.8.15",
67+
"@types/lodash-es": "~4.17.12"
7168
},
7269
"exports": {
7370
"./Button": {

‎npm-packages/@convex-dev/design-system/src/Button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
107107
});
108108

109109
const button = tv({
110-
base: "inline-flex animate-fadeInFromLoading select-none items-center whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:border focus-visible:border-border-selected focus-visible:outline-none",
110+
base: "inline-flex animate-fadeInFromLoading select-none items-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:border focus-visible:border-border-selected focus-visible:outline-none",
111111
variants: {
112112
variant: {
113113
primary:
@@ -137,7 +137,7 @@ const button = tv({
137137
},
138138
size: {
139139
xs: "p-1",
140-
sm: "px-2.5 py-2",
140+
sm: "p-1.5",
141141
md: "px-4 py-3",
142142
lg: "rounded-lg px-6 py-[1.125rem]",
143143
},

‎npm-packages/@convex-dev/design-system/src/Combobox.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import { useState, useEffect } from "react";
22
import { Combobox as HeadlessCombobox } from "@headlessui/react";
3-
import { CaretSortIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
3+
import { ChevronDownIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
44
import { cn } from "@ui/cn";
5-
import isEqual from "lodash/isEqual";
6-
import { test } from "fuzzy";
5+
import { isEqual } from "lodash-es";
6+
import fuzzy from "fuzzy";
77
import { Button, ButtonProps } from "@ui/Button";
88
import { createPortal } from "react-dom";
99
import { usePopper } from "react-popper";
1010

11+
const { test } = fuzzy;
12+
1113
export type Option<T> = { label: string; value: T };
1214

1315
export function Combobox<T>({
1416
options,
17+
optionsHeader,
1518
optionsWidth = "fixed",
1619
selectedOption,
1720
setSelectedOption,
@@ -35,6 +38,7 @@ export function Combobox<T>({
3538
label: React.ReactNode;
3639
labelHidden?: boolean;
3740
className?: string;
41+
optionsHeader?: React.ReactNode;
3842
options: Readonly<Option<T>[]>;
3943
placeholder?: string;
4044
searchPlaceholder?: string;
@@ -157,13 +161,13 @@ export function Combobox<T>({
157161
data-testid={`combobox-button-${label}`}
158162
className={cn(
159163
"flex gap-1 w-full items-center group",
160-
"truncate relative text-left text-content-primary rounded disabled:bg-background-tertiary disabled:text-content-secondary disabled:cursor-not-allowed",
164+
"truncate relative text-left text-content-primary rounded-md disabled:bg-background-tertiary disabled:text-content-secondary disabled:cursor-not-allowed",
161165
"border focus-visible:z-10 focus-visible:border-border-selected focus-visible:outline-none bg-background-secondary text-sm",
162166
"hover:bg-background-tertiary",
163167
"cursor-pointer",
164168
open && "border-border-selected z-10",
165-
size === "sm" && "py-1 px-2 text-xs",
166-
size === "md" && "py-2 px-3",
169+
size === "sm" && "py-1 px-1.5 text-xs",
170+
size === "md" && "p-1.5",
167171
innerButtonClasses,
168172
)}
169173
{...buttonProps}
@@ -190,8 +194,11 @@ export function Combobox<T>({
190194
)}
191195
</div>
192196
{size === "md" && (
193-
<CaretSortIcon
194-
className={cn("text-content-primary", "ml-auto size-5")}
197+
<ChevronDownIcon
198+
className={cn(
199+
"text-content-primary ml-auto size-4 transition-all",
200+
open && "rotate-180",
201+
)}
195202
/>
196203
)}
197204
</HeadlessCombobox.Button>
@@ -210,12 +217,15 @@ export function Combobox<T>({
210217
<HeadlessCombobox.Options
211218
static
212219
className={cn(
213-
"mt-1 max-h-[14.75rem] overflow-auto rounded bg-background-secondary pb-1 text-xs shadow scrollbar border",
220+
"mt-1 max-h-[14.75rem] overflow-auto rounded-md bg-background-secondary pb-1 text-xs shadow scrollbar border",
214221
)}
215222
ref={(el) => {
216223
el && "scrollTo" in el && el.scrollTo(0, 0);
217224
}}
218225
>
226+
{optionsHeader && (
227+
<div className="border-b p-1 pb-2">{optionsHeader}</div>
228+
)}
219229
<div className="min-w-fit">
220230
{!disableSearch && (
221231
<div className="sticky top-0 z-10 flex w-full items-center gap-2 border-b bg-background-secondary px-3 pt-1">

‎npm-packages/@convex-dev/design-system/src/ConfirmationDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function ConfirmationDialog({
4949
: false;
5050

5151
return (
52-
<Modal title={dialogTitle} onClose={onClose}>
52+
<Modal title={dialogTitle} onClose={onClose} size="sm">
5353
<div className="pb-3">
5454
{dialogBody}{" "}
5555
{validationText && (

‎npm-packages/@convex-dev/design-system/src/MultiSelectCombobox.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
CheckIcon,
3-
CaretSortIcon,
3+
ChevronDownIcon,
44
MagnifyingGlassIcon,
55
} from "@radix-ui/react-icons";
66
import { Combobox } from "@headlessui/react";
@@ -125,14 +125,19 @@ export function MultiSelectCombobox({
125125
<Combobox.Button
126126
className={classNames(
127127
"flex gap-2 w-full justify-between",
128-
"truncate relative rounded py-2 px-3 text-left text-sm text-content-primary disabled:bg-background-tertiary disabled:text-content-secondary disabled:cursor-not-allowed",
128+
"truncate relative rounded-md py-1.5 px-1.5 text-left text-sm text-content-primary disabled:bg-background-tertiary disabled:text-content-secondary disabled:cursor-not-allowed",
129129
"border",
130130
"focus:border-border-selected focus:outline-none bg-background-secondary hover:bg-background-tertiary",
131131
open && "border-border-selected",
132132
)}
133133
>
134134
{displayValue}
135-
<CaretSortIcon className="relative z-30 -ml-6 h-5 w-5 text-content-primary" />
135+
<ChevronDownIcon
136+
className={cn(
137+
"relative z-30 -ml-6 h-5 w-5 text-content-primary transition-all",
138+
open && "rotate-180",
139+
)}
140+
/>
136141
</Combobox.Button>
137142
</div>
138143

@@ -149,7 +154,7 @@ export function MultiSelectCombobox({
149154
>
150155
<Combobox.Options
151156
static
152-
className="max-h-60 w-fit min-w-full max-w-80 overflow-auto rounded border bg-background-secondary pb-1 text-xs shadow scrollbar focus:outline-none"
157+
className="max-h-60 w-fit min-w-full max-w-80 overflow-auto rounded-md border bg-background-secondary pb-1 text-xs shadow scrollbar focus:outline-none"
153158
>
154159
<div className="min-w-fit">
155160
{!disableSearch && (

‎npm-packages/@convex-dev/design-system/src/TextInput.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const TextInput = forwardRef<
6767
)}
6868
>
6969
{(type === "search" || leftAddon !== undefined) && (
70-
<div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
70+
<div className="pointer-events-none absolute inset-y-0 left-1.5 flex items-center">
7171
{leftAddon ??
7272
(SearchIcon ? (
7373
<SearchIcon className="text-content-secondary" />
@@ -85,13 +85,13 @@ export const TextInput = forwardRef<
8585
className={cn(
8686
error && "focus:border-content-error",
8787
!error && "focus:border-border-selected text-content-primary",
88-
"block rounded bg-background-secondary",
89-
size === "sm" ? "px-2 py-1 text-xs" : "px-3 py-2 text-sm",
88+
"block rounded-md bg-background-secondary",
89+
size === "sm" ? "px-1.5 py-1 text-xs" : "p-1.5 px-2 text-sm",
9090
"disabled:text-content-secondary disabled:bg-background-tertiary placeholder-content-tertiary border focus:outline-none",
9191
"shrink grow disabled:cursor-not-allowed truncate",
9292
"min-w-0",
93-
(type === "search" || leftAddon !== undefined) && "pl-9",
94-
rightAddon !== undefined && "pr-9",
93+
(type === "search" || leftAddon !== undefined) && "pl-6",
94+
rightAddon !== undefined && "pr-6",
9595
className,
9696
)}
9797
{...rest}

‎npm-packages/common/config/rush/pnpm-lock.yaml‎

Lines changed: 20 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm-packages/dashboard-common/src/elements/DateRangePicker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ export function DateRangePicker({
3636
id="date"
3737
variant="neutral"
3838
className="w-fit justify-start text-left font-normal"
39+
icon={<CalendarIcon className="size-4" />}
3940
>
40-
<CalendarIcon className="h-4 w-4" />
4141
{from ? (
4242
to ? (
4343
<>

‎npm-packages/dashboard/jest.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const customJestConfig = {
1414
"^dashboard-common/(.*)$": "<rootDir>/../dashboard-common/src/$1",
1515
"^@common/(.*)$": "<rootDir>/../dashboard-common/src/$1",
1616
"^@ui/(.*)$": "<rootDir>/../@convex-dev/design-system/src/$1",
17+
"lodash-es": "<rootDir>/../dashboard/node_modules/lodash",
1718
},
1819
// Add roots for both packages to run all tests
1920
roots: ["<rootDir>", "<rootDir>/../dashboard-common"],

0 commit comments

Comments
 (0)