Skip to content

Commit 38b8213

Browse files
adarshpastakiaadarshpastakia
committed
ops: fixes for hiding clear when disabled, monospace input font option
1 parent b933bb6 commit 38b8213

File tree

17 files changed

+80
-72
lines changed

17 files changed

+80
-72
lines changed

‎packages/form/css/_field.css

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -127,23 +127,47 @@
127127
line-height: 1;
128128
}
129129

130-
> :not(:first-child) {
131-
&,
132-
& > div,
133-
& > [role="button"],
134-
& > [data-ref="button"] > [role="button"] {
135-
border-start-start-radius: 0;
136-
border-end-start-radius: 0;
130+
&[data-vertical="false"] {
131+
> :not(:first-child) {
132+
&,
133+
& > div,
134+
& > [role="button"],
135+
& > [data-ref="button"] > [role="button"] {
136+
border-start-start-radius: 0;
137+
border-end-start-radius: 0;
138+
}
139+
}
140+
141+
> :not(:last-child) {
142+
&,
143+
& > div,
144+
& > [role="button"],
145+
& > [data-ref="button"] > [role="button"] {
146+
border-start-end-radius: 0;
147+
border-end-end-radius: 0;
148+
}
137149
}
138150
}
139151

140-
> :not(:last-child) {
141-
&,
142-
& > div,
143-
& > [role="button"],
144-
& > [data-ref="button"] > [role="button"] {
145-
border-start-end-radius: 0;
146-
border-end-end-radius: 0;
152+
&[data-vertical="true"] {
153+
> :not(:first-child) {
154+
&,
155+
& > div,
156+
& > [role="button"],
157+
& > [data-ref="button"] > [role="button"] {
158+
border-start-start-radius: 0;
159+
border-start-end-radius: 0;
160+
}
161+
}
162+
163+
> :not(:last-child) {
164+
&,
165+
& > div,
166+
& > [role="button"],
167+
& > [data-ref="button"] > [role="button"] {
168+
border-end-start-radius: 0;
169+
border-end-end-radius: 0;
170+
}
147171
}
148172
}
149173
}

‎packages/form/src/form/Form.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const Form = <K extends KeyValue>({
9090
});
9191

9292
const [, startTransition] = useTransition();
93-
const changeHandler = useDebounce(onChange, [onChange]);
93+
const changeHandler = useDebounce(onChange, [onChange], 300);
9494
useEffect(() => {
9595
const subscription = form.watch((value) => {
9696
startTransition(() => changeHandler?.(value as K));

‎packages/form/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export {
3939
} from "./types/schema";
4040

4141
export { ArrayInput } from "./input/ArrayInput";
42+
export { AvatarInput } from "./input/AvatarInput";
4243
export { Checkbox } from "./input/Checkbox";
4344
export { ColorInput } from "./input/ColorInput";
4445
export { ColorPicker } from "./input/ColorPicker";

‎packages/form/src/input/ColorInput.tsx

Lines changed: 13 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,6 @@ import {
3535
} from "@floating-ui/react";
3636
import { CoreIcons, Icon } from "@react-fabric/core";
3737
import { type RefProp } from "@react-fabric/core/dist/types/types";
38-
import { isString } from "@react-fabric/utilities";
39-
import classNames from "classnames";
4038
import {
4139
startTransition,
4240
useCallback,
@@ -45,6 +43,7 @@ import {
4543
useRef,
4644
useState,
4745
} from "react";
46+
import { InputWrapper } from "../internal/InputWrapper";
4847
import { type InputProps } from "../types";
4948
import { ColorPicker, type ColorProps } from "./ColorPicker";
5049

@@ -62,14 +61,12 @@ export const ColorInput = ({
6261
ref,
6362
required,
6463
disabled,
65-
allowClear,
64+
readOnly,
6665
invalid,
6766
error,
6867
value,
6968
showPicker,
7069
defaultColor = "",
71-
decorateEnd,
72-
decorateStart,
7370
onBlur,
7471
onFocus,
7572
onChange,
@@ -113,7 +110,7 @@ export const ColorInput = ({
113110
],
114111
});
115112
const click = useClick(context, {
116-
enabled: !disabled,
113+
enabled: !disabled && !readOnly,
117114
});
118115
const dismiss = useDismiss(context, {
119116
referencePress: true,
@@ -125,23 +122,16 @@ export const ColorInput = ({
125122
]);
126123

127124
return (
128-
<div
129-
className={classNames(
130-
"flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded",
131-
!disabled && "bg-base",
132-
!noOutline && "bg-(--fabric-input) outline overflow-hidden",
133-
)}
125+
<InputWrapper
126+
showClear={actualValue !== defaultColor && !disabled && !readOnly}
127+
onClear={handleChange}
128+
invalid={invalid}
129+
readOnly={readOnly}
130+
disabled={disabled}
131+
required={required}
132+
error={error}
133+
{...rest}
134134
>
135-
{decorateStart && (
136-
<div
137-
className={classNames(
138-
"text-muted leading-none flex-content",
139-
isString(decorateStart) && "px-2",
140-
)}
141-
>
142-
{decorateStart}
143-
</div>
144-
)}
145135
<button
146136
data-ref="button"
147137
className="flex-1 flex items-center"
@@ -206,25 +196,6 @@ export const ColorInput = ({
206196
}
207197
/>
208198
)}
209-
{decorateEnd && (
210-
<div
211-
className={classNames(
212-
"text-muted leading-none flex-content",
213-
isString(decorateEnd) && "px-2",
214-
)}
215-
>
216-
{decorateEnd}
217-
</div>
218-
)}
219-
{!disabled && allowClear && actualValue !== defaultColor && (
220-
<Icon
221-
icon={CoreIcons.close}
222-
onClick={() => handleChange()}
223-
className={classNames(
224-
"text-tint-500 hover:text-tint-700 p-[0.25em] flex-content",
225-
)}
226-
/>
227-
)}
228-
</div>
199+
</InputWrapper>
229200
);
230201
};

‎packages/form/src/input/DateInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export const DateInput = ({
186186

187187
return (
188188
<InputWrapper
189-
showClear={!!actualValue}
189+
showClear={!!actualValue && !disabled && !readOnly}
190190
onClear={handleChange}
191191
invalid={invalid}
192192
readOnly={readOnly}

‎packages/form/src/input/Field.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export const Field = ({
9090
"flex-1 rounded",
9191
!vertical && "flex",
9292
)}
93+
data-vertical={!!vertical}
9394
>
9495
{cloneChildren(children, (child: AnyObject) =>
9596
cloneElement(child, {

‎packages/form/src/input/File.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export const FileInput = ({
151151

152152
return (
153153
<InputWrapper
154-
showClear={!isEmpty(actualValue)}
154+
showClear={!isEmpty(actualValue) && !disabled && !readOnly}
155155
onClear={handleChange}
156156
invalid={invalid}
157157
readOnly={readOnly}

‎packages/form/src/input/Input.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
import { InputWrapper } from "../internal/InputWrapper";
3434
import { type InputProps } from "../types";
3535
import { handleEnter } from "../utils";
36+
import classNames from "classnames";
3637

3738
export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
3839
/**
@@ -52,6 +53,7 @@ export const Input = ({
5253
placeholder,
5354
autoFocus,
5455
error,
56+
monospace,
5557
type = "text",
5658
onBlur,
5759
onFocus,
@@ -82,7 +84,7 @@ export const Input = ({
8284

8385
return (
8486
<InputWrapper
85-
showClear={!!actualValue}
87+
showClear={!!actualValue && !disabled && !readOnly}
8688
onClear={handleChange}
8789
invalid={invalid}
8890
readOnly={readOnly}
@@ -92,7 +94,10 @@ export const Input = ({
9294
{...rest}
9395
>
9496
<input
95-
className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
97+
className={classNames(
98+
"appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
99+
monospace && "font-mono text-sm",
100+
)}
96101
aria-invalid={invalid}
97102
aria-disabled={disabled}
98103
aria-readonly={readOnly}

‎packages/form/src/input/Number.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const Number = ({
9393

9494
return (
9595
<InputWrapper
96-
showClear={!!actualValue}
96+
showClear={!!actualValue && !disabled && !readOnly}
9797
onClear={handleChange}
9898
invalid={invalid}
9999
readOnly={readOnly}

‎packages/form/src/input/Password.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const Password = ({
9292

9393
return (
9494
<InputWrapper
95-
showClear={!!actualValue}
95+
showClear={!!actualValue && !disabled && !readOnly}
9696
onClear={handleChange}
9797
invalid={invalid}
9898
readOnly={readOnly}

‎packages/form/src/input/RangeSlider.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ export const RangeSlider = ({
190190
>
191191
<div
192192
className={classNames(
193-
"flex-auto order-3 flex items-center select-none z-0",
193+
"flex-1 order-3 flex items-center select-none z-0",
194194
vertical && "flex-col w-8",
195195
invalid ? "text-danger-500" : "text-primary-600",
196196
)}
@@ -201,7 +201,7 @@ export const RangeSlider = ({
201201
<div
202202
ref={rangerInstance.trackElRef}
203203
className={classNames(
204-
"flex-auto relative flex items-center",
204+
"flex-1 relative flex items-center",
205205
vertical ? "my-2 w-8" : "mx-2 h-8",
206206
)}
207207
style={{ height: vertical ? height : undefined }}

‎packages/form/src/input/Search.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export const Search = ({
113113

114114
return (
115115
<InputWrapper
116-
showClear={!!actualValue}
116+
showClear={!!actualValue && !disabled && !readOnly}
117117
onClear={handleChange}
118118
allowClear={allowClear}
119119
invalid={invalid}

‎packages/form/src/input/Slider.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ export const Slider = ({
194194
>
195195
<div
196196
className={classNames(
197-
"flex-auto order-3 flex items-center select-none relative z-0",
197+
"flex-1 order-3 flex items-center select-none relative z-0",
198198
vertical && "flex-col w-8",
199199
invalid ? "text-danger-500" : "text-primary-600",
200200
)}
@@ -205,7 +205,7 @@ export const Slider = ({
205205
<div
206206
ref={rangerInstance.trackElRef}
207207
className={classNames(
208-
"flex-auto relative flex items-center",
208+
"flex-1 relative flex items-center",
209209
vertical ? "my-2 w-8" : "mx-2 h-8",
210210
)}
211211
style={{ height: vertical ? height : undefined }}

‎packages/form/src/input/Textarea.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export const Textarea = ({
104104

105105
return (
106106
<InputWrapper
107-
showClear={!!actualValue}
107+
showClear={!!actualValue && !disabled && !readOnly}
108108
onClear={handleChange}
109109
invalid={invalid}
110110
readOnly={readOnly}

‎packages/form/src/internal/InputWrapper.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export const InputWrapper = ({
108108
invalid && "fabric-invalidWrapper",
109109
!noOutline &&
110110
!noBorder &&
111-
"bg-(--fabric-input) outline -outline-offset-1 overflow-hidden",
111+
"bg-(--fabric-input) outline overflow-hidden",
112112
"flex flex-nowrap items-center flex-1",
113113
textarea ? "rounded-capped group" : "rounded",
114114
isExpanded
@@ -117,7 +117,7 @@ export const InputWrapper = ({
117117
? "absolute inset-x-0"
118118
: "relative",
119119
!noOutline &&
120-
"after:absolute after:bottom-0 after:h-[2px] after:bg-primary-500 after:mx-auto",
120+
"after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
121121
)}
122122
onKeyDown={(e) =>
123123
e.key === "Escape" &&
@@ -190,7 +190,10 @@ export const InputWrapper = ({
190190
<Wrapper {...wrapperProps}>
191191
<div
192192
ref={elRef}
193-
className="flex-1 relative min-h-8 flex flex-col flex-nowrap"
193+
className={classNames(
194+
"relative min-h-8 flex flex-col flex-nowrap",
195+
width ? "flex-auto" : "flex-1",
196+
)}
194197
style={{ width, flexBasis: width }}
195198
>
196199
{el}

‎packages/form/src/select/useSelect.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,7 @@ export const useSelect = ({
338338
});
339339
},
340340
[onQuery],
341+
300,
341342
);
342343

343344
// handlers

‎packages/form/src/types/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@ export interface InputProps<V = string> extends TestProps {
8080
*/
8181
info?: string;
8282

83+
monospace?: boolean;
84+
8385
/**
8486
* required
8587
*/

0 commit comments

Comments
 (0)