Skip to content

Commit c5054bf

Browse files
matheuspsmatheusps
authored
Merge pull request #1251 from vtex/feature/add-size-prop
Feature/add size prop
2 parents 2469168 + 11ef5ac commit c5054bf

File tree

8 files changed

+455
-6
lines changed

8 files changed

+455
-6
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
## [Unreleased]
99

10+
## [9.123.0] - 2020-06-26
11+
12+
### Added
13+
14+
- `size` prop to AutocompleteInput
15+
1016
## [9.122.0] - 2020-06-25
1117

1218
### Fixed

‎manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"vendor": "vtex",
33
"name": "styleguide",
44
"title": "VTEX Styleguide",
5-
"version": "9.122.0",
5+
"version": "9.123.0",
66
"description": "The VTEX Styleguide components for the Render framework",
77
"builders": {
88
"react": "3.x"

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vtex/styleguide",
3-
"version": "9.122.0",
3+
"version": "9.123.0",
44
"scripts": {
55
"lint": "eslint react --ext js,jsx,ts,tsx",
66
"test": "node config/test.js",

‎react/components/AutocompleteInput/README.md

+97
Original file line numberDiff line numberDiff line change
@@ -273,3 +273,100 @@ const DisabledAutocompleteInput = () => (
273273

274274
;<DisabledAutocompleteInput />
275275
```
276+
277+
#### Size
278+
279+
```jsx
280+
import { uniq } from 'lodash'
281+
import { useState, useRef } from 'react'
282+
283+
const allUsers = [
284+
'Ana Clara',
285+
'Ana Luiza',
286+
{ value: 1, label: 'Bruno' },
287+
'Carlos',
288+
'Daniela',
289+
]
290+
291+
const UsersAutocomplete = () => {
292+
const [term, setTerm] = useState('')
293+
const [loading, setLoading] = useState(false)
294+
const timeoutRef = useRef(null)
295+
296+
const optionsSmall = {
297+
onSelect: (...args) => console.log('onSelect: ', ...args),
298+
loading,
299+
value: !term.length
300+
? []
301+
: allUsers.filter(user =>
302+
typeof user === 'string'
303+
? user.toLowerCase().includes(term.toLowerCase())
304+
: user.label.toLowerCase().includes(term.toLowerCase())
305+
),
306+
size: 'small',
307+
}
308+
309+
const optionsRegular = {
310+
onSelect: (...args) => console.log('onSelect: ', ...args),
311+
loading,
312+
value: !term.length
313+
? []
314+
: allUsers.filter(user =>
315+
typeof user === 'string'
316+
? user.toLowerCase().includes(term.toLowerCase())
317+
: user.label.toLowerCase().includes(term.toLowerCase())
318+
),
319+
size: 'regular',
320+
}
321+
322+
const optionsLarge = {
323+
onSelect: (...args) => console.log('onSelect: ', ...args),
324+
loading,
325+
value: !term.length
326+
? []
327+
: allUsers.filter(user =>
328+
typeof user === 'string'
329+
? user.toLowerCase().includes(term.toLowerCase())
330+
: user.label.toLowerCase().includes(term.toLowerCase())
331+
),
332+
size: 'large',
333+
}
334+
335+
const input = {
336+
onChange: term => {
337+
if (term) {
338+
setLoading(true)
339+
if (timeoutRef.current) {
340+
clearTimeout(timeoutRef.current)
341+
}
342+
timeoutRef.current = setTimeout(() => {
343+
setLoading(false)
344+
setTerm(term)
345+
timeoutRef.current = null
346+
}, 1000)
347+
} else {
348+
setTerm(term)
349+
}
350+
},
351+
onSearch: (...args) => console.log('onSearch:', ...args),
352+
onClear: () => setTerm(''),
353+
placeholder: 'Search user... (e.g.: Ana)',
354+
value: term,
355+
}
356+
return (
357+
<div>
358+
<span className="mr4">
359+
<AutocompleteInput input={input} options={optionsSmall} />
360+
</span>
361+
<span className="mr4">
362+
<AutocompleteInput input={input} options={optionsRegular} />
363+
</span>
364+
<span className="mr4">
365+
<AutocompleteInput input={input} options={optionsLarge} />
366+
</span>
367+
</div>
368+
)
369+
}
370+
371+
;<UsersAutocomplete />
372+
```

‎react/components/AutocompleteInput/SearchInput/index.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,19 @@ const propTypes = {
2424
onBlur: PropTypes.func,
2525
/** Determine if the input and the button should be disabled */
2626
disabled: PropTypes.bool,
27+
/** Determine the search bar size */
28+
size: PropTypes.oneOf(['small', 'regular', 'large']),
2729
}
2830

2931
const defaultProps = {
3032
roundedBottom: true,
3133
}
3234

3335
const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
34-
Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value'>> = props => {
36+
Omit<
37+
React.HTMLProps<HTMLInputElement>,
38+
'onChange' | 'value' | 'size'
39+
>> = props => {
3540
const {
3641
onClear,
3742
onSearch,
@@ -41,6 +46,7 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
4146
onFocus,
4247
onBlur,
4348
disabled,
49+
size,
4450
...inputProps
4551
} = props
4652

@@ -63,18 +69,20 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
6369
setFocused(false)
6470
onBlur && onBlur(e)
6571
}
66-
72+
const regularSize = size !== 'small' && size !== 'large'
6773
const activeClass = classNames({
6874
'b--muted-3': focused,
6975
'b--muted-4': !focused,
7076
'br--top': !roundedBottom,
7177
'bg-disabled c-disabled': disabled,
7278
'bg-base c-on-base': !disabled,
79+
[`h-${size}`]: !regularSize,
80+
'h-regular': regularSize,
7381
})
7482

7583
const buttonClasses = classNames(
7684
activeClass,
77-
'bg-base br2 br--right h-regular w3 bw1 ba pa0 bl-0',
85+
'bg-base br2 br--right w3 bw1 ba pa0 bl-0',
7886
{
7987
'c-link pointer': !disabled,
8088
'c-disabled': disabled,
@@ -85,7 +93,7 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
8593
<div className="flex flex-row">
8694
<div className="relative w-100">
8795
<input
88-
className={`${activeClass} w-100 ma0 border-box bw1 br2 ba outline-0 t-body h-regular ph5 pr8 br--left`}
96+
className={`${activeClass} w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left`}
8997
value={value}
9098
onFocus={handleFocus}
9199
onBlur={handleBlur}

‎react/components/AutocompleteInput/__snapshots__/index.test.tsx.snap

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`AutocompleteInput should render a regular version of search bar if size prop isnt small, regular or large 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="flex flex-column w-100"
7+
>
8+
<div
9+
class="flex flex-row"
10+
>
11+
<div
12+
class="relative w-100"
13+
>
14+
<input
15+
class="b--muted-4 bg-base c-on-base h-regular w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
16+
placeholder=""
17+
value=""
18+
/>
19+
</div>
20+
<button
21+
class="b--muted-4 bg-base c-on-base h-regular bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
22+
>
23+
<svg
24+
class="vtex__icon-search "
25+
fill="none"
26+
height="16"
27+
viewBox="0 0 16 16"
28+
width="16"
29+
xmlns="http://www.w3.org/2000/svg"
30+
xmlns:xlink="http://www.w3.org/1999/xlink"
31+
>
32+
<path
33+
d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
34+
fill="currentColor"
35+
/>
36+
</svg>
37+
</button>
38+
</div>
39+
</div>
40+
</DocumentFragment>
41+
`;
42+
43+
exports[`AutocompleteInput should render with a large size bar 1`] = `
44+
<DocumentFragment>
45+
<div
46+
class="flex flex-column w-100"
47+
>
48+
<div
49+
class="flex flex-row"
50+
>
51+
<div
52+
class="relative w-100"
53+
>
54+
<input
55+
class="b--muted-4 bg-base c-on-base h-large w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
56+
placeholder=""
57+
value=""
58+
/>
59+
</div>
60+
<button
61+
class="b--muted-4 bg-base c-on-base h-large bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
62+
>
63+
<svg
64+
class="vtex__icon-search "
65+
fill="none"
66+
height="16"
67+
viewBox="0 0 16 16"
68+
width="16"
69+
xmlns="http://www.w3.org/2000/svg"
70+
xmlns:xlink="http://www.w3.org/1999/xlink"
71+
>
72+
<path
73+
d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
74+
fill="currentColor"
75+
/>
76+
</svg>
77+
</button>
78+
</div>
79+
</div>
80+
</DocumentFragment>
81+
`;
82+
83+
exports[`AutocompleteInput should render with a regular size bar 1`] = `
84+
<DocumentFragment>
85+
<div
86+
class="flex flex-column w-100"
87+
>
88+
<div
89+
class="flex flex-row"
90+
>
91+
<div
92+
class="relative w-100"
93+
>
94+
<input
95+
class="b--muted-4 bg-base c-on-base h-regular w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
96+
placeholder=""
97+
value=""
98+
/>
99+
</div>
100+
<button
101+
class="b--muted-4 bg-base c-on-base h-regular bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
102+
>
103+
<svg
104+
class="vtex__icon-search "
105+
fill="none"
106+
height="16"
107+
viewBox="0 0 16 16"
108+
width="16"
109+
xmlns="http://www.w3.org/2000/svg"
110+
xmlns:xlink="http://www.w3.org/1999/xlink"
111+
>
112+
<path
113+
d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
114+
fill="currentColor"
115+
/>
116+
</svg>
117+
</button>
118+
</div>
119+
</div>
120+
</DocumentFragment>
121+
`;
122+
123+
exports[`AutocompleteInput should render with a regular size bar when prop is absent 1`] = `
124+
<DocumentFragment>
125+
<div
126+
class="flex flex-column w-100"
127+
>
128+
<div
129+
class="flex flex-row"
130+
>
131+
<div
132+
class="relative w-100"
133+
>
134+
<input
135+
class="b--muted-4 bg-base c-on-base h-regular w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
136+
placeholder=""
137+
value=""
138+
/>
139+
</div>
140+
<button
141+
class="b--muted-4 bg-base c-on-base h-regular bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
142+
>
143+
<svg
144+
class="vtex__icon-search "
145+
fill="none"
146+
height="16"
147+
viewBox="0 0 16 16"
148+
width="16"
149+
xmlns="http://www.w3.org/2000/svg"
150+
xmlns:xlink="http://www.w3.org/1999/xlink"
151+
>
152+
<path
153+
d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
154+
fill="currentColor"
155+
/>
156+
</svg>
157+
</button>
158+
</div>
159+
</div>
160+
</DocumentFragment>
161+
`;
162+
163+
exports[`AutocompleteInput should render with a small size bar 1`] = `
164+
<DocumentFragment>
165+
<div
166+
class="flex flex-column w-100"
167+
>
168+
<div
169+
class="flex flex-row"
170+
>
171+
<div
172+
class="relative w-100"
173+
>
174+
<input
175+
class="b--muted-4 bg-base c-on-base h-small w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
176+
placeholder=""
177+
value=""
178+
/>
179+
</div>
180+
<button
181+
class="b--muted-4 bg-base c-on-base h-small bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
182+
>
183+
<svg
184+
class="vtex__icon-search "
185+
fill="none"
186+
height="16"
187+
viewBox="0 0 16 16"
188+
width="16"
189+
xmlns="http://www.w3.org/2000/svg"
190+
xmlns:xlink="http://www.w3.org/1999/xlink"
191+
>
192+
<path
193+
d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
194+
fill="currentColor"
195+
/>
196+
</svg>
197+
</button>
198+
</div>
199+
</div>
200+
</DocumentFragment>
201+
`;

0 commit comments

Comments
 (0)