Skip to content

Commit 0dbb585

Browse files
chandrasekhar1996Chandu Raman
chandrasekhar1996
and
Chandu Raman
authored
add capability to click on search icon to search (#3028)
* add capability to click on seach icon to search Signed-off-by: Chandu Raman <chandrasekhar.raman@yahooinc.com> * fix-lint Signed-off-by: Chandu Raman <chandrasekhar.raman@yahooinc.com> --------- Signed-off-by: Chandu Raman <chandrasekhar.raman@yahooinc.com> Co-authored-by: Chandu Raman <chandrasekhar.raman@yahooinc.com>
1 parent 24ca4e6 commit 0dbb585

File tree

48 files changed

+1560
-644
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1560
-644
lines changed

‎ui/src/__tests__/components/denali/SearchInput.test.js‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616
import React from 'react';
17-
import { render } from '@testing-library/react';
17+
import { render, fireEvent } from '@testing-library/react';
1818
import SearchInput from '../../../components/denali/SearchInput';
1919

2020
describe('SearchInput', () => {
@@ -35,4 +35,43 @@ describe('SearchInput', () => {
3535
expect(wrapper.querySelector('.input-icon')).not.toBeNull();
3636
expect(inputNode).toHaveAttribute('placeholder', 'Search!');
3737
});
38+
39+
it('should call onSearch when search icon is clicked', () => {
40+
const onChange = jest.fn();
41+
const onSearch = jest.fn();
42+
const { getByTestId } = render(
43+
<SearchInput
44+
name='search'
45+
placeholder='Search!'
46+
value=''
47+
onChange={onChange}
48+
onSearch={onSearch}
49+
/>
50+
);
51+
const wrapper = getByTestId('input-wrapper');
52+
// Find the div that has the onClick handler (the one with cursor: pointer style)
53+
const searchIconContainer = wrapper.querySelector(
54+
'.input-icon[style*="cursor: pointer"]'
55+
);
56+
57+
fireEvent.click(searchIconContainer);
58+
expect(onSearch).toHaveBeenCalledTimes(1);
59+
});
60+
61+
it('should not call onSearch when search icon is clicked without onSearch prop', () => {
62+
const onChange = jest.fn();
63+
const { getByTestId } = render(
64+
<SearchInput
65+
name='search'
66+
placeholder='Search!'
67+
value=''
68+
onChange={onChange}
69+
/>
70+
);
71+
const wrapper = getByTestId('input-wrapper');
72+
const searchIconContainer = wrapper.querySelector('.input-icon');
73+
74+
// This should not throw an error
75+
expect(() => fireEvent.click(searchIconContainer)).not.toThrow();
76+
});
3877
});

‎ui/src/__tests__/components/denali/__snapshots__/Input.test.js.snap‎

Lines changed: 58 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -673,6 +673,17 @@ exports[`Input should render a small input with an icon 1`] = `
673673
height: 28px;
674674
position: absolute;
675675
right: 6px;
676+
z-index: 1;
677+
}
678+
679+
.emotion-0 .input-icon[onclick] {
680+
cursor: pointer;
681+
-webkit-transition: opacity 0.2s ease-in-out;
682+
transition: opacity 0.2s ease-in-out;
683+
}
684+
685+
.emotion-0 .input-icon[onclick]:hover {
686+
opacity: 0.7;
676687
}
677688
678689
.emotion-1 {
@@ -970,6 +981,17 @@ exports[`Input should render an input with an icon 1`] = `
970981
height: 36px;
971982
position: absolute;
972983
right: 6px;
984+
z-index: 1;
985+
}
986+
987+
.emotion-0 .input-icon[onclick] {
988+
cursor: pointer;
989+
-webkit-transition: opacity 0.2s ease-in-out;
990+
transition: opacity 0.2s ease-in-out;
991+
}
992+
993+
.emotion-0 .input-icon[onclick]:hover {
994+
opacity: 0.7;
973995
}
974996
975997
.emotion-1 {
@@ -1109,58 +1131,58 @@ exports[`Input should render an input with error 1`] = `
11091131
color: #d01111;
11101132
}
11111133
1112-
.css-17w65qf-default-default-normal-default-input-subtitle-makeInputBaseClass.error input,
1113-
.css-17w65qf-default-default-normal-default-input-subtitle-makeInputBaseClass.error input.focused,
1114-
.css-17w65qf-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:active,
1115-
.css-17w65qf-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:focus {
1134+
.css-12k58ie-default-default-normal-default-input-subtitle-makeInputBaseClass.error input,
1135+
.css-12k58ie-default-default-normal-default-input-subtitle-makeInputBaseClass.error input.focused,
1136+
.css-12k58ie-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:active,
1137+
.css-12k58ie-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:focus {
11161138
border-bottom: 2px solid #d01111;
11171139
}
11181140
1119-
.css-17w65qf-default-default-normal-default-input-subtitle-makeInputBaseClass.error .message {
1141+
.css-12k58ie-default-default-normal-default-input-subtitle-makeInputBaseClass.error .message {
11201142
color: #d01111;
11211143
}
11221144
1123-
.css-zv347j-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input,
1124-
.css-zv347j-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input.focused,
1125-
.css-zv347j-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input:active,
1126-
.css-zv347j-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input:focus {
1145+
.css-16rwd5l-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input,
1146+
.css-16rwd5l-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input.focused,
1147+
.css-16rwd5l-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input:active,
1148+
.css-16rwd5l-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error input:focus {
11271149
border-bottom: 2px solid #d01111;
11281150
}
11291151
1130-
.css-zv347j-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error .message {
1152+
.css-16rwd5l-default-default-normal-default-input-subtitle-makeInputBaseClass-disabledCss-Input.error .message {
11311153
color: #d01111;
11321154
}
11331155
1134-
.css-qk5url-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input,
1135-
.css-qk5url-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input.focused,
1136-
.css-qk5url-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input:active,
1137-
.css-qk5url-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input:focus {
1156+
.css-gq9vo6-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input,
1157+
.css-gq9vo6-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input.focused,
1158+
.css-gq9vo6-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input:active,
1159+
.css-gq9vo6-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error input:focus {
11381160
border-bottom: 2px solid #d01111;
11391161
}
11401162
1141-
.css-qk5url-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error .message {
1163+
.css-gq9vo6-default-default-normal-default-input-subtitle-makeInputBaseClass-darkCss-Input.error .message {
11421164
color: #d01111;
11431165
}
11441166
1145-
.css-1pkkru2-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input,
1146-
.css-1pkkru2-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input.focused,
1147-
.css-1pkkru2-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input:active,
1148-
.css-1pkkru2-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input:focus {
1167+
.css-10j4dwf-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input,
1168+
.css-10j4dwf-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input.focused,
1169+
.css-10j4dwf-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input:active,
1170+
.css-10j4dwf-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error input:focus {
11491171
border-bottom: 2px solid #d01111;
11501172
}
11511173
1152-
.css-1pkkru2-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error .message {
1174+
.css-10j4dwf-default-default-normal-default-input-subtitle-makeInputBaseClass-darkDisabledCss-Input.error .message {
11531175
color: #d01111;
11541176
}
11551177
1156-
.css-5jacvs-default-default-normal-default-input-subtitle-makeInputBaseClass.error input,
1157-
.css-5jacvs-default-default-normal-default-input-subtitle-makeInputBaseClass.error input.focused,
1158-
.css-5jacvs-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:active,
1159-
.css-5jacvs-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:focus {
1178+
.css-1b6stm7-default-default-normal-default-input-subtitle-makeInputBaseClass.error input,
1179+
.css-1b6stm7-default-default-normal-default-input-subtitle-makeInputBaseClass.error input.focused,
1180+
.css-1b6stm7-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:active,
1181+
.css-1b6stm7-default-default-normal-default-input-subtitle-makeInputBaseClass.error input:focus {
11601182
border-bottom: 2px solid #d01111;
11611183
}
11621184
1163-
.css-5jacvs-default-default-normal-default-input-subtitle-makeInputBaseClass.error .message {
1185+
.css-1b6stm7-default-default-normal-default-input-subtitle-makeInputBaseClass.error .message {
11641186
color: #d01111;
11651187
}
11661188
@@ -1568,6 +1590,17 @@ exports[`Input should render icon with renderIcon function 1`] = `
15681590
height: 36px;
15691591
position: absolute;
15701592
right: 6px;
1593+
z-index: 1;
1594+
}
1595+
1596+
.emotion-0 .input-icon[onclick] {
1597+
cursor: pointer;
1598+
-webkit-transition: opacity 0.2s ease-in-out;
1599+
transition: opacity 0.2s ease-in-out;
1600+
}
1601+
1602+
.emotion-0 .input-icon[onclick]:hover {
1603+
opacity: 0.7;
15711604
}
15721605
15731606
.emotion-1 {

‎ui/src/__tests__/components/denali/__snapshots__/InputDropdown.test.js.snap‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,17 @@ exports[`InputDropdown opens the dropdown 1`] = `
116116
height: 36px;
117117
position: absolute;
118118
right: 6px;
119+
z-index: 1;
120+
}
121+
122+
.emotion-1 .input-icon[onclick] {
123+
cursor: pointer;
124+
-webkit-transition: opacity 0.2s ease-in-out;
125+
transition: opacity 0.2s ease-in-out;
126+
}
127+
128+
.emotion-1 .input-icon[onclick]:hover {
129+
opacity: 0.7;
119130
}
120131
121132
.emotion-2 {
@@ -296,6 +307,17 @@ exports[`InputDropdown renders a filterable dropdown 1`] = `
296307
height: 36px;
297308
position: absolute;
298309
right: 6px;
310+
z-index: 1;
311+
}
312+
313+
.emotion-1 .input-icon[onclick] {
314+
cursor: pointer;
315+
-webkit-transition: opacity 0.2s ease-in-out;
316+
transition: opacity 0.2s ease-in-out;
317+
}
318+
319+
.emotion-1 .input-icon[onclick]:hover {
320+
opacity: 0.7;
299321
}
300322
301323
.emotion-2 {
@@ -472,6 +494,17 @@ exports[`InputDropdown renders fluid dropdown 1`] = `
472494
height: 36px;
473495
position: absolute;
474496
right: 6px;
497+
z-index: 1;
498+
}
499+
500+
.emotion-1 .input-icon[onclick] {
501+
cursor: pointer;
502+
-webkit-transition: opacity 0.2s ease-in-out;
503+
transition: opacity 0.2s ease-in-out;
504+
}
505+
506+
.emotion-1 .input-icon[onclick]:hover {
507+
opacity: 0.7;
475508
}
476509
477510
.emotion-2 {
@@ -648,6 +681,17 @@ exports[`InputDropdown renders initial (closed) state 1`] = `
648681
height: 36px;
649682
position: absolute;
650683
right: 6px;
684+
z-index: 1;
685+
}
686+
687+
.emotion-1 .input-icon[onclick] {
688+
cursor: pointer;
689+
-webkit-transition: opacity 0.2s ease-in-out;
690+
transition: opacity 0.2s ease-in-out;
691+
}
692+
693+
.emotion-1 .input-icon[onclick]:hover {
694+
opacity: 0.7;
651695
}
652696
653697
.emotion-2 {
@@ -824,6 +868,17 @@ exports[`InputDropdown renders searchable input 1`] = `
824868
height: 36px;
825869
position: absolute;
826870
right: 6px;
871+
z-index: 1;
872+
}
873+
874+
.emotion-1 .input-icon[onclick] {
875+
cursor: pointer;
876+
-webkit-transition: opacity 0.2s ease-in-out;
877+
transition: opacity 0.2s ease-in-out;
878+
}
879+
880+
.emotion-1 .input-icon[onclick]:hover {
881+
opacity: 0.7;
827882
}
828883
829884
<div

‎ui/src/__tests__/components/denali/__snapshots__/SearchInput.test.js.snap‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,17 @@ exports[`SearchInput should render 1`] = `
108108
height: 36px;
109109
position: absolute;
110110
right: 6px;
111+
z-index: 1;
112+
}
113+
114+
.emotion-0 .input-icon[onclick] {
115+
cursor: pointer;
116+
-webkit-transition: opacity 0.2s ease-in-out;
117+
transition: opacity 0.2s ease-in-out;
118+
}
119+
120+
.emotion-0 .input-icon[onclick]:hover {
121+
opacity: 0.7;
111122
}
112123
113124
.emotion-1 {
@@ -130,22 +141,26 @@ exports[`SearchInput should render 1`] = `
130141
<div
131142
class="input-icon"
132143
>
133-
<svg
134-
class="emotion-1"
135-
data-testid="icon"
136-
data-wdio=""
137-
height="24px"
138-
id=""
139-
viewBox="0 0 1024 1024"
140-
width="24px"
144+
<div
145+
class="input-icon"
141146
>
142-
<title>
143-
search
144-
</title>
145-
<path
146-
d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
147-
/>
148-
</svg>
147+
<svg
148+
class="emotion-1"
149+
data-testid="icon"
150+
data-wdio=""
151+
height="24px"
152+
id=""
153+
viewBox="0 0 1024 1024"
154+
width="24px"
155+
>
156+
<title>
157+
search
158+
</title>
159+
<path
160+
d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
161+
/>
162+
</svg>
163+
</div>
149164
</div>
150165
<div
151166
class="message"

0 commit comments

Comments
 (0)