Skip to content

Commit 1bee798

Browse files
aaronshekeyaaronshekey
authored
Further input and select revisions (#110)
* Input styling * So many colors * Disable hovers on disabled states * Remove reference to success * Better hover and active colors Go to 500/5 and 500/10 * Pointer events, not disallow * No hover states on inputs * Normalize disabled states * Fix the icon getting squished in selects * Dark overrides to ensure the hover states darken * Simplify examples
1 parent cce5851 commit 1bee798

File tree

7 files changed

+61
-40
lines changed

7 files changed

+61
-40
lines changed

‎app/components/layout.tsx

+17-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { Button } from "@/button";
12
import { cx } from "@/cx";
2-
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/select";
3+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger } from "@/select";
34
import { isTheme, theme, useTheme } from "@/theme-provider";
45
import { WithStyleProps } from "@/types/with-style-props";
56
import { List } from "@phosphor-icons/react/List";
@@ -35,16 +36,18 @@ export function Layout({ children, className, style }: Props) {
3536
return (
3637
<main className={cx("mx-auto h-full max-w-7xl sm:px-4", className)} style={style}>
3738
<header className="flex h-24 items-center gap-4 px-4 sm:px-0">
38-
<button
39-
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 md:hidden"
39+
<Button
40+
appearance="outline"
41+
priority="muted"
42+
className="w-11 sm:w-9 md:hidden"
4043
onClick={() => {
4144
setShowNavigation((s) => !s);
4245
}}
4346
>
44-
{!showNavigation && <List className="h-6 w-6" />}
47+
{!showNavigation && <List className="h-6 w-6 shrink-0" />}
4548

46-
{showNavigation && <X className="h-6 w-6" />}
47-
</button>
49+
{showNavigation && <X className="h-6 w-6 shrink-0" />}
50+
</Button>
4851

4952
<Link to="/">
5053
<MantleLogo />
@@ -67,11 +70,14 @@ export function Layout({ children, className, style }: Props) {
6770
</SelectTrigger>
6871
</div>
6972
<SelectContent>
70-
<SelectItem value={theme("system")}>System</SelectItem>
71-
<SelectItem value={theme("light")}>Light</SelectItem>
72-
<SelectItem value={theme("dark")}>Dark</SelectItem>
73-
<SelectItem value={theme("light-high-contrast")}>Light High Contrast</SelectItem>
74-
<SelectItem value={theme("dark-high-contrast")}>Dark High Contrast</SelectItem>
73+
<SelectGroup>
74+
<SelectLabel>Choose a theme</SelectLabel>
75+
<SelectItem value={theme("system")}>System</SelectItem>
76+
<SelectItem value={theme("light")}>Light</SelectItem>
77+
<SelectItem value={theme("dark")}>Dark</SelectItem>
78+
<SelectItem value={theme("light-high-contrast")}>Light High Contrast</SelectItem>
79+
<SelectItem value={theme("dark-high-contrast")}>Dark High Contrast</SelectItem>
80+
</SelectGroup>
7581
</SelectContent>
7682
</Select>
7783
</header>

‎app/routes/components.input.tsx

+29-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import { Button } from "@/button";
12
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
23
import { code } from "@/code-block/code";
34
import { Input } from "@/input";
5+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/select";
6+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table";
47
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
58
import { Example } from "~/components/example";
69

@@ -23,15 +26,39 @@ export default function Page() {
2326
<h1 className="text-5xl font-medium">Input</h1>
2427
<p className="mt-4 text-xl text-gray-600">Fundamental component for inputs.</p>
2528

26-
<Example className="mt-4">
27-
<Input placeholder="Enter a username" />
29+
<Example className="mt-4 flex-col gap-4">
30+
<Input className="max-w-64" placeholder="Enter a username" />
31+
<Input className="max-w-64" placeholder="Enter a username" state="danger" />
2832
</Example>
2933
<CodeBlock className="rounded-b-lg rounded-t-none">
3034
<CodeBlockBody>
3135
<CodeBlockCopyButton />
3236
<CodeBlockCode language="tsx">{code`<Input placeholder="Enter a username" />`}</CodeBlockCode>
3337
</CodeBlockBody>
3438
</CodeBlock>
39+
40+
<h2 className="mt-16 text-3xl font-medium">API Reference</h2>
41+
<div className="z-10 mt-4 overflow-hidden rounded-lg border border-gray-300">
42+
<Table>
43+
<TableHeader>
44+
<TableRow>
45+
<TableHead>Prop</TableHead>
46+
<TableHead>Type</TableHead>
47+
<TableHead>Default</TableHead>
48+
</TableRow>
49+
</TableHeader>
50+
<TableBody className="font-mono text-xs text-gray-600">
51+
<TableRow>
52+
<TableCell className="align-top font-medium">state</TableCell>
53+
<TableCell className="space-y-2 align-top text-xs">
54+
<p>default</p>
55+
<p>danger</p>
56+
</TableCell>
57+
<TableCell className="align-top">default</TableCell>
58+
</TableRow>
59+
</TableBody>
60+
</Table>
61+
</div>
3562
</div>
3663
);
3764
}

‎app/routes/components.select.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default function Page() {
2727

2828
<Example className="mt-4">
2929
<Select>
30-
<SelectTrigger className="w-[180px]">
30+
<SelectTrigger className="max-w-64">
3131
<SelectValue placeholder="Select a fruit" />
3232
</SelectTrigger>
3333
<SelectContent>

‎components/button/index.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ const buttonVariants = cva(
1111
variants: {
1212
appearance: {
1313
outline:
14-
"border-blue-600 text-blue-600 hover:bg-blue-600/10 active:bg-blue-600/20 focus-visible:ring-blue-500/25",
14+
"bg-white dark:bg-gray-50 border-blue-600 text-blue-600 hover:bg-blue-500/5 dark:hover:bg-blue-500/5 active:bg-blue-500/10 focus-visible:ring-blue-500/25",
1515
solid:
16-
"border-transparent bg-blue-500 text-button hover:bg-blue-600 active:bg-blue-700 focus-visible:border-blue-600 focus-visible:ring-blue-500/25",
16+
"border-transparent bg-blue-500 text-button hover:bg-blue-600 dark:hover:bg-blue-400 active:bg-blue-700 dark:active:bg-blue-300 focus-visible:border-blue-600 focus-visible:ring-blue-500/25",
1717
ghost:
18-
"border-transparent text-blue-600 hover:bg-blue-600/10 active:bg-blue-600/20 focus-visible:ring-blue-500/25",
18+
"border-transparent text-blue-600 hover:bg-blue-500/5 active:bg-blue-500/10 focus-visible:ring-blue-500/25",
1919
},
2020
priority: {
2121
default: "",
@@ -30,37 +30,37 @@ const buttonVariants = cva(
3030
{
3131
appearance: "ghost",
3232
priority: "danger",
33-
class: "border-transparent text-red-600 hover:bg-red-600/10 active:bg-red-600/20 focus-visible:ring-red-500/25",
33+
class: "border-transparent text-red-600 hover:bg-red-500/5 active:bg-red-500/10 focus-visible:ring-red-500/25",
3434
},
3535
{
3636
appearance: "outline",
3737
priority: "danger",
3838
class:
39-
"border-transparent border-red-600 text-red-600 hover:bg-red-600/10 active:bg-red-600/20 focus-visible:ring-red-500/25",
39+
"bg-white dark:bg-gray-50 border-red-600 text-red-600 dark:hover:bg-red-500/5 hover:bg-red-500/5 active:bg-red-500/10 focus-visible:ring-red-500/25",
4040
},
4141
{
4242
appearance: "solid",
4343
priority: "danger",
4444
class:
45-
"border-transparent bg-red-500 hover:bg-red-600 active:bg-red-700 focus-visible:ring-red-500/25 focus-visible:border-red-600",
45+
"border-transparent bg-red-500 hover:bg-red-600 active:bg-red-700 focus-visible:ring-red-500/25 focus-visible:border-red-600 dark:hover:bg-red-400 dark:active:bg-red-300",
4646
},
4747
{
4848
appearance: "ghost",
4949
priority: "muted",
5050
class:
51-
"border-transparent text-gray-900 hover:bg-gray-600/10 active:bg-gray-600/20 focus-visible:ring-blue-500/25",
51+
"border-transparent text-gray-900 hover:bg-gray-500/5 active:bg-gray-500/10 focus-visible:ring-blue-500/25",
5252
},
5353
{
5454
appearance: "outline",
5555
priority: "muted",
5656
class:
57-
"border-gray-400 text-gray-900 hover:bg-gray-600/10 active:bg-gray-600/20 focus-visible:ring-blue-500/25 focus-visible:border-blue-600",
57+
"bg-white dark:bg-gray-50 border-gray-300 text-gray-900 hover:bg-gray-500/5 dark:hover:bg-gray-500/5 active:bg-gray-500/10 focus-visible:ring-blue-500/25 focus-visible:border-blue-600",
5858
},
5959
{
6060
appearance: "solid",
6161
priority: "muted",
6262
class:
63-
"border-transparent bg-gray-500 hover:bg-gray-600 active:bg-gray-700 focus-visible:ring-gray-500/25 focus-visible:border-gray-600",
63+
"border-transparent bg-gray-500 hover:bg-gray-600 active:bg-gray-700 focus-visible:ring-gray-500/25 focus-visible:border-gray-600 dark:hover:bg-gray-400 dark:active:bg-gray-300",
6464
},
6565
],
6666
},

‎components/input/index.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,12 @@ import type { VariantProps } from "../types/variant-props";
66
import type { AutoComplete, InputType } from "./types";
77

88
const inputVariants = cva(
9-
"flex h-10 w-full rounded-md border bg-white px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-4 disabled:cursor-not-allowed disabled:opacity-50",
9+
"flex h-11 sm:h-9 w-full rounded-md border bg-white dark:bg-gray-50 px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:text-sm",
1010
{
1111
variants: {
1212
state: {
13-
default:
14-
"text-gray-900 border-gray-300 placeholder:text-gray-400 focus:border-blue-500 focus-visible:ring-blue-600/25",
15-
danger:
16-
"text-red-900 border-red-500 placeholder:text-red-400 focus:border-red-500 focus-visible:ring-red-600/25",
17-
success:
18-
"text-green-900 border-green-500 placeholder:text-green-400 focus:border-green-500 focus-visible:ring-green-600/25",
13+
default: "text-gray-900 border-gray-300 placeholder:text-gray-400 focus:border-blue-600 focus:ring-blue-500/25",
14+
danger: "border-red-600 focus:border-red-600 focus:ring-red-500/25",
1915
},
2016
},
2117
defaultVariants: {

‎components/input/input.stories.tsx

-8
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,3 @@ export const Danger: Story = {
2525
state: "danger",
2626
},
2727
};
28-
29-
export const Success: Story = {
30-
render: (args) => <Input {...args} />,
31-
args: {
32-
value: "@aaronshekey",
33-
state: "success",
34-
},
35-
};

‎components/select/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ const SelectTrigger = forwardRef<
1919
<SelectPrimitive.Trigger
2020
ref={ref}
2121
className={cx(
22-
"flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
22+
"flex h-11 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 placeholder:text-gray-300 hover:bg-gray-500/5 focus:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-500/25 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:hover:bg-gray-500/5 sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left",
2323
className,
2424
)}
2525
{...props}
2626
>
2727
{children}
2828
<SelectPrimitive.Icon asChild>
29-
<CaretDown className="h-4 w-4" weight="bold" />
29+
<CaretDown className="h-4 w-4 shrink-0" weight="bold" />
3030
</SelectPrimitive.Icon>
3131
</SelectPrimitive.Trigger>
3232
));

0 commit comments

Comments
 (0)