Skip to content

Commit d6c7d9a

Browse files
brianCollinsUIbrianCollinsUI
authored
feature/UIDS-430 Add props to allow Input trailingIcon to be clicked and submitted (#431)
1 parent d20a7e3 commit d6c7d9a

File tree

6 files changed

+217
-4
lines changed

6 files changed

+217
-4
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "1.21.1",
3+
"version": "1.21.2",
44
"dependencies": {
55
"react-router-dom": "^5.2.0",
66
"react-select": "^3.0.8",

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 137 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2966,7 +2966,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Leading And Trai
29662966
>
29672967
<div
29682968
className="FormGroup"
2969-
id="with-trailing-icon"
2969+
id="with-leading-and-trailing-icons"
29702970
>
29712971
<label
29722972
className="InputLabel"
@@ -3257,6 +3257,142 @@ exports[`Storyshots Design System/Form Elements/Form Group With Trailing Icon 1`
32573257
</div>
32583258
`;
32593259

3260+
exports[`Storyshots Design System/Form Elements/Form Group With Trailing Icon And Button 1`] = `
3261+
<div
3262+
style={
3263+
Object {
3264+
"padding": "1rem",
3265+
}
3266+
}
3267+
>
3268+
<div
3269+
className="FormGroup"
3270+
id="with-trailing-icon-and-button"
3271+
>
3272+
<label
3273+
className="InputLabel"
3274+
htmlFor="input"
3275+
>
3276+
Form Group with input trailing icon and button
3277+
</label>
3278+
<div
3279+
className="Input input-group"
3280+
>
3281+
<input
3282+
className="Input form-control Input--with-trailing-icon"
3283+
disabled={false}
3284+
id="input"
3285+
name="with-leading-icon-and-button"
3286+
onChange={[Function]}
3287+
placeholder="Placeholder text"
3288+
type="text"
3289+
value=""
3290+
/>
3291+
<button
3292+
className="trailing-icon-button"
3293+
onClick={[Function]}
3294+
type="button"
3295+
>
3296+
<div
3297+
className="input-group-text"
3298+
>
3299+
<svg
3300+
aria-hidden="true"
3301+
className="svg-inline--fa fa-search fa-w-16 "
3302+
data-icon="search"
3303+
data-prefix="fas"
3304+
focusable="false"
3305+
role="img"
3306+
style={Object {}}
3307+
viewBox="0 0 512 512"
3308+
xmlns="http://www.w3.org/2000/svg"
3309+
>
3310+
<path
3311+
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
3312+
fill="currentColor"
3313+
style={Object {}}
3314+
/>
3315+
</svg>
3316+
</div>
3317+
</button>
3318+
</div>
3319+
<div
3320+
className="FormGroup__helper-text"
3321+
>
3322+
with trailing icon and button
3323+
</div>
3324+
</div>
3325+
</div>
3326+
`;
3327+
3328+
exports[`Storyshots Design System/Form Elements/Form Group With Trailing Icon And Button With Submit 1`] = `
3329+
<div
3330+
style={
3331+
Object {
3332+
"padding": "1rem",
3333+
}
3334+
}
3335+
>
3336+
<div
3337+
className="FormGroup"
3338+
id="with-trailing-icon-and-button-with-submit"
3339+
>
3340+
<label
3341+
className="InputLabel"
3342+
htmlFor="input"
3343+
>
3344+
Form Group with input trailing icon and button with submit
3345+
</label>
3346+
<div
3347+
className="Input input-group"
3348+
>
3349+
<input
3350+
className="Input form-control Input--with-trailing-icon"
3351+
disabled={false}
3352+
id="input"
3353+
name="with-leading-icon-and-button"
3354+
onChange={[Function]}
3355+
placeholder="Placeholder text"
3356+
type="text"
3357+
value=""
3358+
/>
3359+
<button
3360+
className="trailing-icon-button"
3361+
onClick={[Function]}
3362+
type="submit"
3363+
>
3364+
<div
3365+
className="input-group-text"
3366+
>
3367+
<svg
3368+
aria-hidden="true"
3369+
className="svg-inline--fa fa-search fa-w-16 "
3370+
data-icon="search"
3371+
data-prefix="fas"
3372+
focusable="false"
3373+
role="img"
3374+
style={Object {}}
3375+
viewBox="0 0 512 512"
3376+
xmlns="http://www.w3.org/2000/svg"
3377+
>
3378+
<path
3379+
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
3380+
fill="currentColor"
3381+
style={Object {}}
3382+
/>
3383+
</svg>
3384+
</div>
3385+
</button>
3386+
</div>
3387+
<div
3388+
className="FormGroup__helper-text"
3389+
>
3390+
with trailing icon and button with submit
3391+
</div>
3392+
</div>
3393+
</div>
3394+
`;
3395+
32603396
exports[`Storyshots Design System/Form Elements/RadioButtonGroup Bordered Row 1`] = `
32613397
<div
32623398
style={

‎src/FormGroup/FormGroup.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,14 @@ helpful if they do!
5454
<Story id="design-system-form-elements-form-group--with-trailing-icon" />
5555
</Preview>
5656

57+
## Trailing Icon with Button
58+
59+
- This has a trailing icon wrapped in a button you can pass an onClick function to.
60+
61+
<Preview>
62+
<Story id="design-system-form-elements-form-group--with-trailing-icon-and-button" />
63+
</Preview>
64+
5765
## Leading & Trailing Icons
5866

5967
<Preview>

‎src/FormGroup/FormGroup.stories.jsx‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,45 @@ export const WithTrailingIcon = () => (
106106
</FormGroup>
107107
);
108108

109+
export const WithTrailingIconAndButton = () => (
110+
<FormGroup
111+
helperText="with trailing icon and button"
112+
id="with-trailing-icon-and-button"
113+
label="Form Group with input trailing icon and button"
114+
labelHtmlFor="input"
115+
>
116+
<InputComponent
117+
id="input"
118+
name="with-leading-icon-and-button"
119+
placeholder="Placeholder text"
120+
trailingIcon={faSearch}
121+
trailingIconOnClick={() => alert('Great job!')}
122+
/>
123+
</FormGroup>
124+
);
125+
126+
export const WithTrailingIconAndButtonWithSubmit = () => (
127+
<FormGroup
128+
helperText="with trailing icon and button with submit"
129+
id="with-trailing-icon-and-button-with-submit"
130+
label="Form Group with input trailing icon and button with submit"
131+
labelHtmlFor="input"
132+
>
133+
<InputComponent
134+
id="input"
135+
name="with-leading-icon-and-button"
136+
placeholder="Placeholder text"
137+
trailingIcon={faSearch}
138+
trailingIconOnClick={() => alert('Great job!')}
139+
trailingIconOnClickSubmit
140+
/>
141+
</FormGroup>
142+
);
143+
109144
export const WithLeadingAndTrailingIcons = () => (
110145
<FormGroup
111146
helperText="with leading and trailing icons"
112-
id="with-trailing-icon"
147+
id="with-leading-and-trailing-icons"
113148
label="Form Group with input leading and trailing icons"
114149
labelHtmlFor="input"
115150
>

‎src/Input/Input.jsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ const Input = React.forwardRef((props, ref) => {
1313
name,
1414
placeholder,
1515
trailingIcon,
16+
trailingIconOnClick,
17+
trailingIconOnClickSubmit,
1618
type,
1719
value,
1820
onChange,
@@ -44,7 +46,18 @@ const Input = React.forwardRef((props, ref) => {
4446
onChange={onChange}
4547
{...rest}
4648
/>
47-
{trailingIcon && (
49+
{(trailingIcon && trailingIconOnClick) && (
50+
<button
51+
className="trailing-icon-button"
52+
type={trailingIconOnClickSubmit ? 'submit' : 'button'}
53+
onClick={trailingIconOnClick}
54+
>
55+
<div className="input-group-text">
56+
<FontAwesomeIcon icon={trailingIcon} />
57+
</div>
58+
</button>
59+
)}
60+
{(trailingIcon && !trailingIconOnClick) && (
4861
<div className="input-group-text">
4962
<FontAwesomeIcon icon={trailingIcon} />
5063
</div>
@@ -60,6 +73,8 @@ Input.propTypes = {
6073
name: PropTypes.string.isRequired,
6174
placeholder: PropTypes.string,
6275
trailingIcon: PropTypes.object,
76+
trailingIconOnClick: PropTypes.func,
77+
trailingIconOnClickSubmit: PropTypes.bool,
6378
type: PropTypes.string,
6479
value: PropTypes.string,
6580
onChange: PropTypes.func,
@@ -70,6 +85,8 @@ Input.defaultProps = {
7085
leadingIcon: undefined,
7186
placeholder: '',
7287
trailingIcon: undefined,
88+
trailingIconOnClick: undefined,
89+
trailingIconOnClickSubmit: false,
7390
type: 'text',
7491
value: undefined,
7592
onChange: undefined,

‎src/Input/Input.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,21 @@
2323
.input-group-text {
2424
background-color: $ux-gray-100;
2525
}
26+
27+
.trailing-icon-button {
28+
padding: 0rem;
29+
border: none;
30+
border-radius: none;
31+
background-color: $ux-gray-100;
32+
}
33+
.trailing-icon-button > .input-group-text {
34+
width: 100%;
35+
height: 100%;
36+
border-top-left-radius: 0;
37+
border-bottom-left-radius: 0;
38+
&:hover {
39+
background-color: $ux-gray-200;
40+
}
41+
42+
}
2643
}

0 commit comments

Comments
 (0)