File size: 4,194 Bytes
9697ede | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | // @ts-nocheck
import { createSignal } from "solid-js"
import { Field as FieldV2 } from "./field-v2"
import { InlineInputV2 } from "./inline-input-v2"
const docs = `### Overview
Single-line field with an inline prefix label, vertical divider, and the same states as TextInput v2.
### API
- \`prefix\`: Inline label in the leading segment (required).
- \`labelWidth\`: Fixed prefix width (px number or CSS length). Omit for fit-content.
- Forwards native \`input\` props (\`value\`, \`defaultValue\`, \`placeholder\`, \`disabled\`, etc.).
- \`showCopyButton\`, \`copyLabel\`, \`onCopyClick\`: Optional trailing copy control.
- \`invalid\`: Error outline and danger text color.
- \`appearance\`: \`"base"\` (28px) or \`"large"\` (32px).
- \`numeric\`: Tabular numerals on prefix and value.
### States
- **Hover**, **Focus**, **Invalid**, **Disabled** — same as TextInput v2 on the outer shell.
### Field
Compose with \`Field\` for label, helper prefix/suffix, and tooltip — see the **Field** story.
`
export default {
title: "UI V2/InlineInput",
id: "components-inline-input-v2",
component: InlineInputV2,
tags: ["autodocs"],
parameters: {
frameHeight: "400px",
frameBackground: "#fff",
docs: {
description: {
component: docs,
},
},
},
args: {
prefix: "Label",
placeholder: "Text",
showCopyButton: true,
disabled: false,
invalid: false,
appearance: "base",
},
argTypes: {
prefix: {
control: "text",
},
labelWidth: {
control: "number",
},
appearance: {
control: "select",
options: ["base", "large"],
},
showCopyButton: {
control: "boolean",
},
disabled: {
control: "boolean",
},
invalid: {
control: "boolean",
},
placeholder: {
control: "text",
},
},
}
export const Playground = {}
export const Controlled = {
render: () => {
const [value, setValue] = createSignal("42")
return (
<div style={{ display: "grid", gap: "12px", width: "280px" }}>
<InlineInputV2
prefix="Amount"
value={value()}
onInput={(e) => setValue(e.currentTarget.value)}
placeholder="0.00"
numeric
/>
<div
style={{
"font-family": "var(--v2-font-family-sans)",
"font-size": "12px",
color: "var(--text-text-faint)",
}}
>
Value: {value()}
</div>
</div>
)
},
}
export const Appearances = {
render: () => (
<div style={{ display: "grid", gap: "20px", width: "280px" }}>
<InlineInputV2 prefix="Label" appearance="base" placeholder="Text" showCopyButton />
<InlineInputV2 prefix="Label" appearance="large" placeholder="Text" showCopyButton />
<InlineInputV2 prefix="Label" labelWidth={50} placeholder="Text" showCopyButton />
<InlineInputV2 prefix="Long label" placeholder="Text" showCopyButton />
</div>
),
}
export const Field = {
parameters: { frameHeight: "500px" },
render: () => (
<div style={{ display: "grid", gap: "24px", width: "280px" }}>
<FieldV2>
<FieldV2.Label tooltip="Additional context">Label</FieldV2.Label>
<FieldV2.Prefix>Prefix</FieldV2.Prefix>
<InlineInputV2 prefix="USD" placeholder="0.00" numeric showCopyButton />
<FieldV2.Suffix>Suffix</FieldV2.Suffix>
</FieldV2>
<FieldV2 invalid>
<FieldV2.Label>Label</FieldV2.Label>
<FieldV2.Prefix>Prefix</FieldV2.Prefix>
<InlineInputV2 prefix="USD" placeholder="0.00" defaultValue="Invalid" showCopyButton />
<FieldV2.Suffix>Suffix</FieldV2.Suffix>
</FieldV2>
</div>
),
}
export const States = {
render: () => (
<div style={{ display: "grid", gap: "20px", width: "280px" }}>
<InlineInputV2 prefix="Label" placeholder="Text" showCopyButton />
<InlineInputV2 prefix="Label" placeholder="Text" defaultValue="Hello" showCopyButton />
<InlineInputV2 prefix="Label" placeholder="Text" defaultValue="Invalid" invalid showCopyButton />
<InlineInputV2 prefix="Label" placeholder="Text" disabled showCopyButton />
</div>
),
}
|