Skip to content

Commit 617c151

Browse files
alexcarpenteralexcarpenter
authored
refactor(ui): Remove variant and state props from <Field.Input /> (clerk#4391)
1 parent abeb659 commit 617c151

3 files changed

Lines changed: 57 additions & 51 deletions

File tree

‎.changeset/breezy-plums-wait.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/common/otp-field.tsx‎

Lines changed: 53 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import React from 'react';
33

44
import { Animated } from '~/primitives/animated';
55
import * as Field from '~/primitives/field';
6+
import { cx } from '~/utils/dva';
67

78
export function OTPField({
89
label,
910
resend,
1011
...props
11-
}: React.ComponentProps<typeof Common.Input> & {
12+
}: React.ComponentProps<'span'> & {
1213
/**
1314
* **Note:** this prop is required as the `label` differs depending on the context (e.g. email code vs. link code)
1415
*/
@@ -36,34 +37,59 @@ export function OTPField({
3637
className='flex justify-center gap-2'
3738
passwordManagerOffset={24}
3839
render={({ value, status }) => (
39-
<Field.Input
40-
variant='otp-digit'
41-
intent={state}
42-
state={
43-
(
44-
{
45-
cursor: 'focus-visible',
46-
selected: 'focus-visible',
47-
hovered: 'hover',
48-
none: 'native',
49-
} as const
50-
)[status]
51-
}
40+
<span
41+
className={cx(
42+
'py-[--field-input-py]',
43+
'ps-[--field-input-px]',
44+
// If an `InputGroup` exists, use the `pe` value, or fallback to the
45+
// standard input `px` value
46+
'pe-[var(--field-input-group-pe,var(--field-input-px))]',
47+
'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
48+
'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
49+
'disabled:cursor-not-allowed disabled:opacity-50',
50+
'supports-ios:text-[length:1rem] supports-ios:min-h-[1.875rem]',
51+
'aspect-square size-10 justify-center text-[calc(var(--cl-font-size)*1.4)] font-semibold',
52+
{
53+
none: 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.light)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
54+
hovered: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
55+
cursor:
56+
'ring-[--cl-field-input-ring,theme(ringColor.light)] ring-offset-[--cl-field-input-border-active]',
57+
selected:
58+
'ring-[--cl-field-input-ring,theme(ringColor.light)] ring-offset-[--cl-field-input-border-active]',
59+
}[status],
60+
{
61+
idle: [
62+
'[--cl-field-input-border:theme(colors.gray.a4)]',
63+
'[--cl-field-input-border-active:theme(colors.gray.a7)]',
64+
],
65+
info: [
66+
'[--cl-field-input-border:theme(colors.gray.a7)]',
67+
'[--cl-field-input-border-active:theme(colors.gray.a7)]',
68+
],
69+
error: [
70+
'[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
71+
'[--cl-field-input-border-active:theme(colors.danger.DEFAULT)]',
72+
'[--cl-field-input-ring:theme(colors.danger.DEFAULT/0.2)]',
73+
],
74+
success: [
75+
'[--cl-field-input-border:theme(colors.success.DEFAULT)]',
76+
'[--cl-field-input-border-active:theme(colors.success.DEFAULT)]',
77+
'[--cl-field-input-ring:theme(colors.success.DEFAULT/0.25)]', // (optically adjusted ring to 25 opacity)
78+
],
79+
warning: [
80+
'[--cl-field-input-border:theme(colors.warning.DEFAULT)]',
81+
'[--cl-field-input-border-active:theme(colors.warning.DEFAULT)]',
82+
'[--cl-field-input-ring:theme(colors.warning.DEFAULT/0.2)]',
83+
],
84+
}[state],
85+
)}
5286
{...props}
53-
asChild
5487
>
55-
<span>
56-
{status === 'cursor' && (
57-
<span
58-
data-otp-field-cursor=''
59-
// Note:
60-
// Opportunity to extract lineHeight to theme
61-
className='motion-safe:animate-blink h-[calc(theme(fontSize.base)*1.38462)] w-[2px] self-center rounded-full bg-current'
62-
/>
63-
)}
64-
{value}
65-
</span>
66-
</Field.Input>
88+
{status === 'cursor' && (
89+
<span className='motion-safe:animate-blink h-[calc(theme(fontSize.base)*1.38462)] w-[2px] self-center rounded-full bg-current' />
90+
)}
91+
{value}
92+
</span>
6793
)}
6894
/>
6995
)}

‎packages/ui/src/primitives/field.tsx‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
1515
) {
1616
return (
1717
<div
18-
data-field-root=''
1918
ref={forwardedRef}
2019
{...props}
2120
className={cx(
@@ -45,7 +44,6 @@ export const Label = React.forwardRef(function FieldLabel(
4544
) {
4645
return (
4746
<label
48-
data-field-label=''
4947
ref={forwardedRef}
5048
{...props}
5149
className={cx(
@@ -70,7 +68,6 @@ export const LabelEnd = React.forwardRef(function FieldLabelEnd(
7068
) {
7169
return (
7270
<span
73-
data-field-label-end=''
7471
ref={forwardedRef}
7572
{...props}
7673
className={cx('flex-grow self-end text-end', className)}
@@ -86,7 +83,6 @@ export const Hint = React.forwardRef(function FieldHint(
8683
) {
8784
return (
8885
<LabelEnd
89-
data-field-hint=''
9086
ref={forwardedRef}
9187
{...props}
9288
className={cx('text-gray-9 text-sm font-medium', className)}
@@ -102,7 +98,6 @@ export const Checkbox = React.forwardRef(function FieldCheckbox(
10298
) {
10399
return (
104100
<input
105-
data-field-checkbox=''
106101
ref={forwardedRef}
107102
type='checkbox'
108103
className={cx('accent-accent-9 mt-[0.1875em] size-3 cursor-pointer')}
@@ -117,7 +112,6 @@ export const InputGroup = React.forwardRef(function FieldInputGroup(
117112
) {
118113
return (
119114
<div
120-
data-field-input-group=''
121115
ref={ref}
122116
className={cx(
123117
'has-[[data-field-input-group-end]]:[--field-input-group-pe:--field-input-group-end-size]',
@@ -152,8 +146,6 @@ export const Input = React.forwardRef(function FieldInput(
152146
asChild,
153147
className,
154148
intent = 'idle',
155-
state = 'native',
156-
variant = 'default',
157149
...props
158150
}: React.InputHTMLAttributes<HTMLInputElement> & {
159151
asChild?: boolean;
@@ -167,32 +159,19 @@ export const Input = React.forwardRef(function FieldInput(
167159

168160
return (
169161
<Comp
170-
data-field-input=''
171162
ref={forwardedRef}
172163
className={cx(
164+
'w-full justify-start',
173165
'py-[--field-input-py]',
174166
'ps-[--field-input-px]',
175167
// If an `InputGroup` exists, use the `pe` value, or fallback to the
176168
// standard input `px` value
177169
'pe-[var(--field-input-group-pe,var(--field-input-px))]',
178170
'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
179171
'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
172+
'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.light)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
180173
'disabled:cursor-not-allowed disabled:opacity-50',
181174
'supports-ios:text-[length:1rem] supports-ios:min-h-[1.875rem]',
182-
// variant
183-
{
184-
default: 'w-full justify-start',
185-
'otp-digit': 'aspect-square size-10 justify-center text-[calc(var(--cl-font-size)*1.4)] font-semibold',
186-
}[variant],
187-
// state
188-
{
189-
native:
190-
'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.light)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
191-
hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
192-
'focus-visible':
193-
'ring-[--cl-field-input-ring,theme(ringColor.light)] ring-offset-[--cl-field-input-border-active]',
194-
}[state],
195-
// intent
196175
{
197176
idle: [
198177
'[--cl-field-input-border:theme(colors.gray.a4)]',
@@ -235,7 +214,6 @@ export const Message = React.forwardRef<
235214
>(function FieldMessage({ className, children, justify = 'start', intent = 'idle', ...props }, forwardedRef) {
236215
return (
237216
<p
238-
data-field-message=''
239217
ref={forwardedRef}
240218
{...props}
241219
className={cx(

0 commit comments

Comments
 (0)