@toptal/picasso-input 5.0.1 → 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/Input/Input.d.ts +2 -0
- package/dist-package/src/Input/Input.d.ts.map +1 -1
- package/dist-package/src/Input/Input.js +2 -2
- package/dist-package/src/Input/Input.js.map +1 -1
- package/package.json +2 -2
- package/src/Input/Input.tsx +4 -0
- package/src/Input/story/ResetButtonVisibility.example.tsx +31 -0
- package/src/Input/story/index.jsx +8 -0
- package/src/Input/test.tsx +43 -0
|
@@ -51,6 +51,8 @@ export interface Props extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElem
|
|
|
51
51
|
size?: SizeType<'small' | 'medium' | 'large'>;
|
|
52
52
|
/** Whether to render reset icon when there is a value in the input */
|
|
53
53
|
enableReset?: boolean;
|
|
54
|
+
/** Controls when the reset button is visible. `hover` shows it only on hover/focus when the input has a value; `always` keeps it visible regardless of hover or content. Only applies when `enableReset` is true. */
|
|
55
|
+
resetVisibility?: 'hover' | 'always';
|
|
54
56
|
/** Callback invoked when reset button was clicked */
|
|
55
57
|
onResetClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
|
|
56
58
|
/** Ref of the input outline */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -73,14 +73,14 @@ const purifyProps = (props) => {
|
|
|
73
73
|
};
|
|
74
74
|
export const Input = forwardRef(function Input(_a, ref) {
|
|
75
75
|
var { autoComplete = 'none', counter = 'remaining', iconPosition = 'start', multiline = false, size = 'medium', width = 'auto', onResetClick = () => { }, status = 'default' } = _a, props = __rest(_a, ["autoComplete", "counter", "iconPosition", "multiline", "size", "width", "onResetClick", "status"]);
|
|
76
|
-
const _b = purifyProps(props), { id, name, defaultValue, onChange = () => { }, value, placeholder, disabled, icon, inputProps, children, multilineResizable, autoFocus, className, style, rows, rowsMax, type, onClick, startAdornment, endAdornment, limit, enableReset, outlineRef, testIds, setHasMultilineCounter, highlight } = _b, rest = __rest(_b, ["id", "name", "defaultValue", "onChange", "value", "placeholder", "disabled", "icon", "inputProps", "children", "multilineResizable", "autoFocus", "className", "style", "rows", "rowsMax", "type", "onClick", "startAdornment", "endAdornment", "limit", "enableReset", "outlineRef", "testIds", "setHasMultilineCounter", "highlight"]);
|
|
76
|
+
const _b = purifyProps(props), { id, name, defaultValue, onChange = () => { }, value, placeholder, disabled, icon, inputProps, children, multilineResizable, autoFocus, className, style, rows, rowsMax, type, onClick, startAdornment, endAdornment, limit, enableReset, resetVisibility, outlineRef, testIds, setHasMultilineCounter, highlight } = _b, rest = __rest(_b, ["id", "name", "defaultValue", "onChange", "value", "placeholder", "disabled", "icon", "inputProps", "children", "multilineResizable", "autoFocus", "className", "style", "rows", "rowsMax", "type", "onClick", "startAdornment", "endAdornment", "limit", "enableReset", "resetVisibility", "outlineRef", "testIds", "setHasMultilineCounter", "highlight"]);
|
|
77
77
|
const charsLength = value ? value.length : 0;
|
|
78
78
|
const showCounter = !!charsLength && hasCounter({ counter, limit });
|
|
79
79
|
useHasMultilineCounter(name, showCounter && multiline, setHasMultilineCounter);
|
|
80
80
|
return (React.createElement(React.Fragment, null,
|
|
81
81
|
React.createElement(OutlinedInput, { ref: outlineRef, inputRef: ref, className: className, style: style, highlight: highlight, multiline: multiline, multilineResizable: multilineResizable, id: id, name: name, defaultValue: defaultValue, value: value, placeholder: placeholder, status: status, disabled: disabled, autoFocus: autoFocus, rows: rows, rowsMax: rowsMax, type: type, width: width, size: size, onClick: onClick,
|
|
82
82
|
// html attributes
|
|
83
|
-
inputProps: Object.assign(Object.assign(Object.assign({}, rest), inputProps), { autoComplete }), startAdornment: startAdornment || (React.createElement(StartAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled })), endAdornment: endAdornment || (React.createElement(EndAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled, limit: limit, charsLength: charsLength, multiline: multiline, counter: counter, status: status, testIds: testIds, showCounter: showCounter })), onChange: onChange, enableReset: enableReset, onResetClick: onResetClick, testIds: testIds }, children),
|
|
83
|
+
inputProps: Object.assign(Object.assign(Object.assign({}, rest), inputProps), { autoComplete }), startAdornment: startAdornment || (React.createElement(StartAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled })), endAdornment: endAdornment || (React.createElement(EndAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled, limit: limit, charsLength: charsLength, multiline: multiline, counter: counter, status: status, testIds: testIds, showCounter: showCounter })), onChange: onChange, enableReset: enableReset, resetVisibility: resetVisibility, onResetClick: onResetClick, testIds: testIds }, children),
|
|
84
84
|
hasMultilineAdornment({
|
|
85
85
|
multiline,
|
|
86
86
|
status,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;AAOA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAE/D,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAMrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-input",
|
|
3
|
-
"version": "5.0
|
|
3
|
+
"version": "5.1.0",
|
|
4
4
|
"description": "Toptal UI components library - Input",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"@toptal/picasso-form": "7.0.1",
|
|
23
23
|
"@toptal/picasso-icons": "1.15.3",
|
|
24
24
|
"@toptal/picasso-input-adornment": "4.0.1",
|
|
25
|
-
"@toptal/picasso-outlined-input": "5.0
|
|
25
|
+
"@toptal/picasso-outlined-input": "5.1.0",
|
|
26
26
|
"@toptal/picasso-shared": "16.0.0",
|
|
27
27
|
"@toptal/picasso-utils": "4.0.1"
|
|
28
28
|
},
|
package/src/Input/Input.tsx
CHANGED
|
@@ -78,6 +78,8 @@ export interface Props
|
|
|
78
78
|
size?: SizeType<'small' | 'medium' | 'large'>
|
|
79
79
|
/** Whether to render reset icon when there is a value in the input */
|
|
80
80
|
enableReset?: boolean
|
|
81
|
+
/** Controls when the reset button is visible. `hover` shows it only on hover/focus when the input has a value; `always` keeps it visible regardless of hover or content. Only applies when `enableReset` is true. */
|
|
82
|
+
resetVisibility?: 'hover' | 'always'
|
|
81
83
|
/** Callback invoked when reset button was clicked */
|
|
82
84
|
onResetClick?: (
|
|
83
85
|
event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>
|
|
@@ -268,6 +270,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(function Input(
|
|
|
268
270
|
endAdornment,
|
|
269
271
|
limit,
|
|
270
272
|
enableReset,
|
|
273
|
+
resetVisibility,
|
|
271
274
|
outlineRef,
|
|
272
275
|
testIds,
|
|
273
276
|
setHasMultilineCounter,
|
|
@@ -338,6 +341,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(function Input(
|
|
|
338
341
|
}
|
|
339
342
|
onChange={onChange}
|
|
340
343
|
enableReset={enableReset}
|
|
344
|
+
resetVisibility={resetVisibility}
|
|
341
345
|
onResetClick={onResetClick}
|
|
342
346
|
testIds={testIds}
|
|
343
347
|
>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Input } from '@toptal/picasso'
|
|
3
|
+
|
|
4
|
+
const ResetButtonVisibilityExample = () => {
|
|
5
|
+
const [value, setValue] = useState('Text')
|
|
6
|
+
|
|
7
|
+
const handleChange = (
|
|
8
|
+
event: React.ChangeEvent<
|
|
9
|
+
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
|
10
|
+
>
|
|
11
|
+
) => {
|
|
12
|
+
setValue(event.target.value)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const handleResetClick = () => {
|
|
16
|
+
setValue('')
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Input
|
|
21
|
+
enableReset
|
|
22
|
+
resetVisibility='always'
|
|
23
|
+
onResetClick={handleResetClick}
|
|
24
|
+
value={value}
|
|
25
|
+
placeholder='Placeholder'
|
|
26
|
+
onChange={handleChange}
|
|
27
|
+
/>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default ResetButtonVisibilityExample
|
|
@@ -64,6 +64,14 @@ page
|
|
|
64
64
|
},
|
|
65
65
|
'base/Input'
|
|
66
66
|
)
|
|
67
|
+
.addExample(
|
|
68
|
+
'Input/story/ResetButtonVisibility.example.tsx',
|
|
69
|
+
{
|
|
70
|
+
title: 'With reset button always visible',
|
|
71
|
+
takeScreenshot: false,
|
|
72
|
+
},
|
|
73
|
+
'base/Input'
|
|
74
|
+
)
|
|
67
75
|
.addExample(
|
|
68
76
|
'Input/story/Refs.example.tsx',
|
|
69
77
|
{
|
package/src/Input/test.tsx
CHANGED
|
@@ -101,6 +101,49 @@ describe('Input', () => {
|
|
|
101
101
|
expect(container).toMatchSnapshot()
|
|
102
102
|
})
|
|
103
103
|
|
|
104
|
+
describe('reset button visibility', () => {
|
|
105
|
+
it('defaults to hover visibility (hidden until hover/focus)', () => {
|
|
106
|
+
const { getByTestId } = renderInput({
|
|
107
|
+
enableReset: true,
|
|
108
|
+
value: 'Some value',
|
|
109
|
+
testIds: { resetButton: testIds.resetButton },
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
const resetAdornment = getByTestId(testIds.resetButton)
|
|
113
|
+
|
|
114
|
+
expect(resetAdornment).toHaveClass('invisible')
|
|
115
|
+
expect(resetAdornment).not.toHaveClass('visible')
|
|
116
|
+
})
|
|
117
|
+
|
|
118
|
+
it('stays visible when resetVisibility is "always", even without a value', () => {
|
|
119
|
+
const { getByTestId } = renderInput({
|
|
120
|
+
enableReset: true,
|
|
121
|
+
resetVisibility: 'always',
|
|
122
|
+
value: '',
|
|
123
|
+
testIds: { resetButton: testIds.resetButton },
|
|
124
|
+
})
|
|
125
|
+
|
|
126
|
+
const resetAdornment = getByTestId(testIds.resetButton)
|
|
127
|
+
|
|
128
|
+
expect(resetAdornment).toHaveClass('visible')
|
|
129
|
+
expect(resetAdornment).not.toHaveClass('invisible')
|
|
130
|
+
})
|
|
131
|
+
|
|
132
|
+
it('matches hover behavior when resetVisibility is "hover"', () => {
|
|
133
|
+
const { getByTestId } = renderInput({
|
|
134
|
+
enableReset: true,
|
|
135
|
+
resetVisibility: 'hover',
|
|
136
|
+
value: 'Some value',
|
|
137
|
+
testIds: { resetButton: testIds.resetButton },
|
|
138
|
+
})
|
|
139
|
+
|
|
140
|
+
const resetAdornment = getByTestId(testIds.resetButton)
|
|
141
|
+
|
|
142
|
+
expect(resetAdornment).toHaveClass('invisible')
|
|
143
|
+
expect(resetAdornment).toHaveClass('group-hover:visible')
|
|
144
|
+
})
|
|
145
|
+
})
|
|
146
|
+
|
|
104
147
|
it('should show manual resize handler', () => {
|
|
105
148
|
const { container } = renderInput({
|
|
106
149
|
multiline: true,
|