Skip to content

Commit 544c899

Browse files
matt-aitkenmatt-aitken
committed
Input field now has accessory instead of shortcut
1 parent d35f32d commit 544c899

File tree

3 files changed

+35
-26
lines changed

3 files changed

+35
-26
lines changed

‎apps/webapp/app/components/primitives/Input.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,55 +9,51 @@ const containerBase =
99
const inputBase =
1010
"h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none";
1111

12-
const shortcutBase =
13-
"grid h-fit place-content-center border border-dimmed/40 font-normal text-text-dimmed";
14-
1512
const variants = {
1613
large: {
1714
container:
1815
"px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
1916
input: "px-2 text-sm",
2017
iconSize: "size-4 ml-1",
21-
shortcut: "mr-1 min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem] select-none",
18+
accessory: "pr-1",
2219
},
2320
medium: {
2421
container:
2522
"px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
2623
input: "px-1.5 rounded text-sm",
2724
iconSize: "size-4 ml-0.5",
28-
shortcut: "min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem]",
25+
accessory: "pr-1",
2926
},
3027
small: {
3128
container:
3229
"px-1 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
3330
input: "px-1 rounded text-xs",
3431
iconSize: "size-3 ml-0.5",
35-
shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
32+
accessory: "pr-0.5",
3633
},
3734
tertiary: {
3835
container: "px-1 h-6 w-full rounded hover:bg-charcoal-750",
3936
input: "px-1 rounded text-xs",
4037
iconSize: "size-3 ml-0.5",
41-
shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
38+
accessory: "pr-0.5",
4239
},
4340
};
4441

4542
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
4643
variant?: keyof typeof variants;
4744
icon?: RenderIcon;
48-
shortcut?: string;
45+
accessory?: React.ReactNode;
4946
fullWidth?: boolean;
5047
};
5148

5249
const Input = React.forwardRef<HTMLInputElement, InputProps>(
53-
({ className, type, shortcut, fullWidth = true, variant = "medium", icon, ...props }, ref) => {
50+
({ className, type, accessory, fullWidth = true, variant = "medium", icon, ...props }, ref) => {
5451
const innerRef = useRef<HTMLInputElement>(null);
5552
useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
5653

5754
const containerClassName = variants[variant].container;
5855
const inputClassName = variants[variant].input;
5956
const iconClassName = variants[variant].iconSize;
60-
const shortcutClassName = variants[variant].shortcut;
6157

6258
return (
6359
<div
@@ -80,7 +76,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
8076
ref={innerRef}
8177
{...props}
8278
/>
83-
{shortcut && <div className={cn(shortcutBase, shortcutClassName)}>{shortcut}</div>}
79+
{accessory && <div className={cn(variants[variant].accessory)}>{accessory}</div>}
8480
</div>
8581
);
8682
}

‎apps/webapp/app/routes/storybook.input-fields/route.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
22
import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
33
import { Input } from "~/components/primitives/Input";
4+
import { ShortcutKey } from "~/components/primitives/ShortcutKey";
45

56
export default function Story() {
67
return (
@@ -26,28 +27,28 @@ function InputFieldSet({ disabled }: { disabled?: boolean }) {
2627
variant="large"
2728
placeholder="Search"
2829
icon={MagnifyingGlassIcon}
29-
shortcut="⌘K"
30+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="medium" />}
3031
/>
3132
<Input
3233
disabled={disabled}
3334
variant="medium"
3435
placeholder="Search"
3536
icon={MagnifyingGlassIcon}
36-
shortcut="⌘K"
37+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
3738
/>
3839
<Input
3940
disabled={disabled}
4041
variant="small"
4142
placeholder="Search"
4243
icon={MagnifyingGlassIcon}
43-
shortcut="⌘K"
44+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
4445
/>
4546
<Input
4647
disabled={disabled}
4748
variant="tertiary"
4849
placeholder="Search"
4950
icon={MagnifyingGlassIcon}
50-
shortcut="⌘K"
51+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
5152
/>
5253
</div>
5354
<div className="m-8 flex w-64 flex-col gap-4">
@@ -56,42 +57,42 @@ function InputFieldSet({ disabled }: { disabled?: boolean }) {
5657
variant="large"
5758
placeholder="Search"
5859
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
59-
shortcut="⌘K"
60+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="medium" />}
6061
/>
6162
<Input
6263
disabled={disabled}
6364
variant="medium"
6465
placeholder="Search"
6566
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
66-
shortcut="⌘K"
67+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="medium" />}
6768
/>
6869
<Input
6970
disabled={disabled}
7071
variant="small"
7172
placeholder="Search"
7273
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
73-
shortcut="⌘K"
74+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
7475
/>
7576
<Input
7677
disabled={disabled}
7778
variant="tertiary"
7879
placeholder="Search"
7980
icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
80-
shortcut="⌘K"
81+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
8182
/>
8283
<Input
8384
disabled={disabled}
8485
variant="tertiary"
8586
placeholder="Search"
8687
icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
87-
shortcut="⌘K"
88+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
8889
/>
8990
<Input
9091
disabled={disabled}
9192
variant="tertiary"
9293
placeholder="Search"
9394
icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
94-
shortcut="⌘K"
95+
accessory={<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />}
9596
/>
9697
</div>
9798
</div>

‎apps/webapp/app/routes/storybook.search-fields/route.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Fieldset } from "~/components/primitives/Fieldset";
55
import { Input } from "~/components/primitives/Input";
66
import { InputGroup } from "~/components/primitives/InputGroup";
77
import { Label } from "~/components/primitives/Label";
8+
import { ShortcutKey } from "~/components/primitives/ShortcutKey";
89

910
export default function Story() {
1011
return (
@@ -18,17 +19,22 @@ export default function Story() {
1819
placeholder="Search"
1920
required={true}
2021
icon={MagnifyingGlassIcon}
21-
shortcut="⌘K"
22+
accessory={
23+
<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />
24+
}
2225
/>
2326
</InputGroup>
27+
2428
<InputGroup>
2529
<Label>Small search input</Label>
2630
<Input
2731
placeholder="Search"
2832
required={true}
2933
variant="small"
3034
icon={MagnifyingGlassIcon}
31-
shortcut="⌘K"
35+
accessory={
36+
<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />
37+
}
3238
fullWidth={false}
3339
/>
3440
</InputGroup>
@@ -48,7 +54,9 @@ export default function Story() {
4854
placeholder="Search"
4955
required={true}
5056
icon={MagnifyingGlassIcon}
51-
shortcut="⌘K"
57+
accessory={
58+
<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />
59+
}
5260
/>
5361
</InputGroup>
5462
<InputGroup>
@@ -57,7 +65,9 @@ export default function Story() {
5765
placeholder="Search"
5866
required={true}
5967
icon={MagnifyingGlassIcon}
60-
shortcut="⌘K"
68+
accessory={
69+
<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />
70+
}
6171
/>
6272
</InputGroup>
6373
<InputGroup>
@@ -66,7 +76,9 @@ export default function Story() {
6676
placeholder="Search"
6777
required={true}
6878
icon={MagnifyingGlassIcon}
69-
shortcut="⌘K"
79+
accessory={
80+
<ShortcutKey shortcut={{ key: "k", modifiers: ["meta"] }} variant="small" />
81+
}
7082
/>
7183
</InputGroup>
7284
</Fieldset>

0 commit comments

Comments
 (0)