Skip to content

Commit 5bfc85d

Browse files
flacoman91anselmbradford
flacoman91
and
anselmbradford
authored
Updated Advanced Search Tips (#459)
* working mouseover tooltips, updated input placeholder text * lookin good * fix text * unit tests * unit tests * Addressing feedback * add external link icon from design system * update node to v20 * forgot link --------- Co-authored-by: Ans <[email protected]>
1 parent 9bedfa7 commit 5bfc85d

File tree

12 files changed

+718
-185
lines changed

12 files changed

+718
-185
lines changed

‎.nvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
16.13.0
1+
v20

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@
9999
"prop-types": "^15.5.10",
100100
"query-string": "^5.0.0",
101101
"react": "^18.2.0",
102+
"react-bootstrap": "^2.6.0",
102103
"react-bootstrap-typeahead": "^6.0.0",
103104
"react-dom": "^18.2.0",
104105
"react-intl": "^6.2.0",

‎src/components/Common/TooltipWrapper/TooltipWrapper.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import './TooltipWrapper.less';
2+
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
3+
import PropTypes from 'prop-types';
4+
import Tooltip from 'react-bootstrap/Tooltip';
5+
6+
// We use react-bootstrap's tooltip instead of popperjs due to the overlay
7+
// and placement utilities that come with it.
8+
// See https://react-bootstrap.github.io/components/overlays/#overview
9+
export const TooltipWrapper = ({ children, placement, text }) => {
10+
return (
11+
<OverlayTrigger placement={placement} overlay={<Tooltip>{text}</Tooltip>}>
12+
{children}
13+
</OverlayTrigger>
14+
);
15+
};
16+
17+
TooltipWrapper.propTypes = {
18+
children: PropTypes.element.isRequired,
19+
placement: PropTypes.string,
20+
text: PropTypes.string.isRequired,
21+
};

‎src/components/Common/TooltipWrapper/TooltipWrapper.less

+282
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
// this was copied from bootstrap/dist/css
2+
// only including what we need so we don't add the rest of the bootstrap styles
3+
4+
.tooltip {
5+
--bs-tooltip-zindex: 1080;
6+
--bs-tooltip-max-width: 200px;
7+
--bs-tooltip-padding-x: 0.5rem;
8+
--bs-tooltip-padding-y: 0.25rem;
9+
--bs-tooltip-font-size: 0.875rem;
10+
--bs-tooltip-color: #fff;
11+
--bs-tooltip-bg: #000;
12+
--bs-tooltip-border-radius: 0.375rem;
13+
--bs-tooltip-opacity: 0.9;
14+
--bs-tooltip-arrow-width: 0.8rem;
15+
--bs-tooltip-arrow-height: 0.4rem;
16+
z-index: var(--bs-tooltip-zindex);
17+
display: block;
18+
padding: var(--bs-tooltip-arrow-height);
19+
margin: var(--bs-tooltip-margin);
20+
font-family: var(--bs-font-sans-serif);
21+
font-style: normal;
22+
font-weight: 400;
23+
line-height: 1.5;
24+
text-align: left;
25+
text-align: start;
26+
text-decoration: none;
27+
text-shadow: none;
28+
text-transform: none;
29+
letter-spacing: normal;
30+
word-break: normal;
31+
white-space: normal;
32+
word-spacing: normal;
33+
line-break: auto;
34+
font-size: var(--bs-tooltip-font-size);
35+
word-wrap: break-word;
36+
opacity: 0;
37+
}
38+
39+
.tooltip.show {
40+
opacity: var(--bs-tooltip-opacity);
41+
}
42+
43+
.tooltip .tooltip-arrow {
44+
display: block;
45+
width: var(--bs-tooltip-arrow-width);
46+
height: var(--bs-tooltip-arrow-height);
47+
}
48+
49+
.tooltip .tooltip-arrow::before {
50+
position: absolute;
51+
content: '';
52+
border-color: transparent;
53+
border-style: solid;
54+
}
55+
56+
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
57+
bottom: 0;
58+
}
59+
60+
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
61+
top: -1px;
62+
border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
63+
border-top-color: var(--bs-tooltip-bg);
64+
}
65+
66+
/* rtl:begin:ignore */
67+
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
68+
left: 0;
69+
width: var(--bs-tooltip-arrow-height);
70+
height: var(--bs-tooltip-arrow-width);
71+
}
72+
73+
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
74+
right: -1px;
75+
border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
76+
border-right-color: var(--bs-tooltip-bg);
77+
}
78+
79+
/* rtl:end:ignore */
80+
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
81+
top: 0;
82+
}
83+
84+
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
85+
bottom: -1px;
86+
border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
87+
border-bottom-color: var(--bs-tooltip-bg);
88+
}
89+
90+
/* rtl:begin:ignore */
91+
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
92+
right: 0;
93+
width: var(--bs-tooltip-arrow-height);
94+
height: var(--bs-tooltip-arrow-width);
95+
}
96+
97+
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
98+
left: -1px;
99+
border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
100+
border-left-color: var(--bs-tooltip-bg);
101+
}
102+
103+
/* rtl:end:ignore */
104+
.tooltip-inner {
105+
max-width: var(--bs-tooltip-max-width);
106+
padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
107+
color: var(--bs-tooltip-color);
108+
text-align: center;
109+
background-color: var(--bs-tooltip-bg);
110+
border-radius: var(--bs-tooltip-border-radius);
111+
}
112+
113+
.popover {
114+
--bs-popover-zindex: 1070;
115+
--bs-popover-max-width: 276px;
116+
--bs-popover-font-size: 0.875rem;
117+
--bs-popover-bg: #fff;
118+
--bs-popover-border-width: 1px;
119+
--bs-popover-border-color: var(--bs-border-color-translucent);
120+
--bs-popover-border-radius: 0.5rem;
121+
--bs-popover-inner-border-radius: calc(0.5rem - 1px);
122+
--bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
123+
--bs-popover-header-padding-x: 1rem;
124+
--bs-popover-header-padding-y: 0.5rem;
125+
--bs-popover-header-font-size: 1rem;
126+
--bs-popover-header-bg: #f0f0f0;
127+
--bs-popover-body-padding-x: 1rem;
128+
--bs-popover-body-padding-y: 1rem;
129+
--bs-popover-body-color: #212529;
130+
--bs-popover-arrow-width: 1rem;
131+
--bs-popover-arrow-height: 0.5rem;
132+
--bs-popover-arrow-border: var(--bs-popover-border-color);
133+
z-index: var(--bs-popover-zindex);
134+
display: block;
135+
max-width: var(--bs-popover-max-width);
136+
font-family: var(--bs-font-sans-serif);
137+
font-style: normal;
138+
font-weight: 400;
139+
line-height: 1.5;
140+
text-align: left;
141+
text-align: start;
142+
text-decoration: none;
143+
text-shadow: none;
144+
text-transform: none;
145+
letter-spacing: normal;
146+
word-break: normal;
147+
white-space: normal;
148+
word-spacing: normal;
149+
line-break: auto;
150+
font-size: var(--bs-popover-font-size);
151+
word-wrap: break-word;
152+
background-color: var(--bs-popover-bg);
153+
background-clip: padding-box;
154+
border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
155+
border-radius: var(--bs-popover-border-radius);
156+
}
157+
158+
.popover .popover-arrow {
159+
display: block;
160+
width: var(--bs-popover-arrow-width);
161+
height: var(--bs-popover-arrow-height);
162+
}
163+
164+
.popover .popover-arrow::before, .popover .popover-arrow::after {
165+
position: absolute;
166+
display: block;
167+
content: '';
168+
border-color: transparent;
169+
border-style: solid;
170+
border-width: 0;
171+
}
172+
173+
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
174+
bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
175+
}
176+
177+
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
178+
border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
179+
}
180+
181+
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
182+
bottom: 0;
183+
border-top-color: var(--bs-popover-arrow-border);
184+
}
185+
186+
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
187+
bottom: var(--bs-popover-border-width);
188+
border-top-color: var(--bs-popover-bg);
189+
}
190+
191+
/* rtl:begin:ignore */
192+
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
193+
left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
194+
width: var(--bs-popover-arrow-height);
195+
height: var(--bs-popover-arrow-width);
196+
}
197+
198+
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
199+
border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
200+
}
201+
202+
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
203+
left: 0;
204+
border-right-color: var(--bs-popover-arrow-border);
205+
}
206+
207+
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
208+
left: var(--bs-popover-border-width);
209+
border-right-color: var(--bs-popover-bg);
210+
}
211+
212+
/* rtl:end:ignore */
213+
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
214+
top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
215+
}
216+
217+
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
218+
border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
219+
}
220+
221+
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
222+
top: 0;
223+
border-bottom-color: var(--bs-popover-arrow-border);
224+
}
225+
226+
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
227+
top: var(--bs-popover-border-width);
228+
border-bottom-color: var(--bs-popover-bg);
229+
}
230+
231+
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
232+
position: absolute;
233+
top: 0;
234+
left: 50%;
235+
display: block;
236+
width: var(--bs-popover-arrow-width);
237+
margin-left: calc(-0.5 * var(--bs-popover-arrow-width));
238+
content: '';
239+
border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
240+
}
241+
242+
/* rtl:begin:ignore */
243+
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
244+
right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
245+
width: var(--bs-popover-arrow-height);
246+
height: var(--bs-popover-arrow-width);
247+
}
248+
249+
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
250+
border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
251+
}
252+
253+
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
254+
right: 0;
255+
border-left-color: var(--bs-popover-arrow-border);
256+
}
257+
258+
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
259+
right: var(--bs-popover-border-width);
260+
border-left-color: var(--bs-popover-bg);
261+
}
262+
263+
/* rtl:end:ignore */
264+
.popover-header {
265+
padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
266+
margin-bottom: 0;
267+
font-size: var(--bs-popover-header-font-size);
268+
color: var(--bs-popover-header-color);
269+
background-color: var(--bs-popover-header-bg);
270+
border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
271+
border-top-left-radius: var(--bs-popover-inner-border-radius);
272+
border-top-right-radius: var(--bs-popover-inner-border-radius);
273+
}
274+
275+
.popover-header:empty {
276+
display: none;
277+
}
278+
279+
.popover-body {
280+
padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
281+
color: var(--bs-popover-body-color);
282+
}

0 commit comments

Comments
 (0)