Skip to content

Commit f3a475f

Browse files
adrianptrvadrianptrv
committed
fix(tooltip): new design changes to the advanced sample
1 parent fe17f50 commit f3a475f

2 files changed

Lines changed: 52 additions & 32 deletions

File tree

‎samples/inputs/tooltip/advanced/src/index.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33

44
.container {
55
display: flex;
6+
flex-wrap: wrap;
7+
max-height: 320px;
8+
max-width: max-content;
69
}
710

811
.sample {
@@ -25,7 +28,7 @@ igc-tooltip::part(base) {
2528
border: 1px solid var(--ig-gray-300);
2629
width: 280px;
2730
height: max-content;
28-
margin-top: 1.5rem;
31+
margin-top: 1rem;
2932

3033
igc-list-item {
3134
padding: 8px 16px;
@@ -95,12 +98,6 @@ igc-tooltip::part(base) {
9598
width: 100%;
9699
height: 100%;
97100
}
98-
99-
.helper {
100-
margin: 5px 0 0 5px;
101-
font-size: 12px;
102-
color: var(--ig-gray-500);
103-
}
104101
}
105102

106103
.trigger:nth-of-type(1) {
@@ -111,8 +108,12 @@ igc-tooltip::part(base) {
111108
cursor: pointer;
112109
}
113110

111+
.trigger:nth-of-type(n+5) {
112+
margin-left: 1.5rem;
113+
}
114+
114115
.helper {
115-
margin: 5px 0 0 5px;
116+
margin: 0.25rem 0 0 1.8rem;
116117
font-size: 12px;
117118
color: var(--ig-gray-500);
118119
width: max-content;
@@ -273,7 +274,6 @@ igc-tooltip::part(base) {
273274
border-right-color: var(--ig-error-50);
274275
}
275276

276-
277277
.multiline {
278278

279279
igc-icon {

‎samples/inputs/tooltip/advanced/src/index.tsx‎

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,44 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
33
import "./index.css";
4-
import {IgrList, IgrListItem, IgrListHeader, IgrBadge, IgrButton, IgrCard, IgrAvatar, IgrTooltip, IgrIcon, registerIconFromText } from "igniteui-react";
5-
import { IgrCategoryChartModule, IgrCategoryChart } from "igniteui-react-charts";
6-
import { IncomeTaxes } from './IncomeTaxes';
4+
import {
5+
IgrList,
6+
IgrListItem,
7+
IgrListHeader,
8+
IgrBadge,
9+
IgrButton,
10+
IgrCard,
11+
IgrAvatar,
12+
IgrTooltip,
13+
IgrIcon,
14+
registerIconFromText,
15+
} from "igniteui-react";
16+
import {
17+
IgrCategoryChartModule,
18+
IgrCategoryChart,
19+
} from "igniteui-react-charts";
20+
import { IncomeTaxes } from "./IncomeTaxes";
721
import "igniteui-webcomponents/themes/light/material.css";
822

923
IgrCategoryChartModule.register();
1024

11-
const dollarIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M444-200h70v-50q50-9 86-39t36-89q0-42-24-77t-96-61q-60-20-83-35t-23-41q0-26 18.5-41t53.5-15q32 0 50 15.5t26 38.5l64-26q-11-35-40.5-61T516-710v-50h-70v50q-50 11-78 44t-28 74q0 47 27.5 76t86.5 50q63 23 87.5 41t24.5 47q0 33-23.5 48.5T486-314q-33 0-58.5-20.5T390-396l-66 26q14 48 43.5 77.5T444-252v52Zm36 120q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>'
25+
const dollarIcon =
26+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M444-200h70v-50q50-9 86-39t36-89q0-42-24-77t-96-61q-60-20-83-35t-23-41q0-26 18.5-41t53.5-15q32 0 50 15.5t26 38.5l64-26q-11-35-40.5-61T516-710v-50h-70v50q-50 11-78 44t-28 74q0 47 27.5 76t86.5 50q63 23 87.5 41t24.5 47q0 33-23.5 48.5T486-314q-33 0-58.5-20.5T390-396l-66 26q14 48 43.5 77.5T444-252v52Zm36 120q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>';
1227

13-
const filterIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z"/></svg>'
28+
const filterIcon =
29+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z"/></svg>';
1430

15-
const linkIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#999999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"/></svg>'
31+
const linkIcon =
32+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#999999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"/></svg>';
1633

17-
const infoIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#999999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'
34+
const infoIcon =
35+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#999999"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>';
1836

19-
const blockIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>'
37+
const blockIcon =
38+
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#999999"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>';
2039

21-
const btcIcon = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.339 11.5126C12.339 12.9126 9.93898 12.7486 9.17798 12.7476L9.18298 10.2676C9.94498 10.2686 12.34 10.0526 12.339 11.5126ZM11.82 8.01263C11.82 6.68463 9.82001 6.88363 9.18701 6.88363V9.13263C9.81901 9.13263 11.817 9.28463 11.82 8.01163V8.01263ZM20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10ZM12.952 9.406C13.6673 9.0676 14.0651 8.29005 13.921 7.512C13.8 6.177 12.644 5.728 11.189 5.6V3.749H10.062V5.549C9.762 5.549 9.462 5.549 9.162 5.559V3.745H8.036V5.595C7.792 5.6 7.553 5.604 7.319 5.604V5.6H5.765V6.8C5.765 6.8 6.597 6.785 6.584 6.8C6.89841 6.76025 7.18651 6.98023 7.231 7.294L7.223 12.365C7.20855 12.5849 7.01895 12.7517 6.799 12.738C6.813 12.751 5.98 12.738 5.98 12.738L5.754 14.083C6.308 14.083 7.488 14.083 8.025 14.093V15.966H9.15V14.113C9.459 14.12 9.758 14.123 10.05 14.123V15.967H11.177V14.098C13.072 13.992 14.398 13.517 14.565 11.739C14.6866 11.213 14.581 10.6602 14.274 10.2161C13.967 9.77207 13.487 9.47797 12.952 9.406Z" fill="#DF1B74"/></svg>'
40+
const btcIcon =
41+
'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.339 11.5126C12.339 12.9126 9.93898 12.7486 9.17798 12.7476L9.18298 10.2676C9.94498 10.2686 12.34 10.0526 12.339 11.5126ZM11.82 8.01263C11.82 6.68463 9.82001 6.88363 9.18701 6.88363V9.13263C9.81901 9.13263 11.817 9.28463 11.82 8.01163V8.01263ZM20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10ZM12.952 9.406C13.6673 9.0676 14.0651 8.29005 13.921 7.512C13.8 6.177 12.644 5.728 11.189 5.6V3.749H10.062V5.549C9.762 5.549 9.462 5.549 9.162 5.559V3.745H8.036V5.595C7.792 5.6 7.553 5.604 7.319 5.604V5.6H5.765V6.8C5.765 6.8 6.597 6.785 6.584 6.8C6.89841 6.76025 7.18651 6.98023 7.231 7.294L7.223 12.365C7.20855 12.5849 7.01895 12.7517 6.799 12.738C6.813 12.751 5.98 12.738 5.98 12.738L5.754 14.083C6.308 14.083 7.488 14.083 8.025 14.093V15.966H9.15V14.113C9.459 14.12 9.758 14.123 10.05 14.123V15.967H11.177V14.098C13.072 13.992 14.398 13.517 14.565 11.739C14.6866 11.213 14.581 10.6602 14.274 10.2161C13.967 9.77207 13.487 9.47797 12.952 9.406Z" fill="#DF1B74"/></svg>';
2242

2343
registerIconFromText("dollar", dollarIcon);
2444
registerIconFromText("filter", filterIcon);
@@ -55,7 +75,7 @@ export default class TooltipAdvanced extends React.Component<any, any> {
5575
placement="right"
5676
hideDelay={0}
5777
showDelay={0}
58-
offset={20}
78+
offset={20}
5979
>
6080
<IgrList>
6181
<p>Credits</p>
@@ -89,7 +109,7 @@ export default class TooltipAdvanced extends React.Component<any, any> {
89109
placement="right"
90110
hideDelay={0}
91111
showDelay={0}
92-
offset={20}
112+
offset={20}
93113
>
94114
<p className="title">Individual Income Taxes</p>
95115
<IgrCategoryChart
@@ -137,7 +157,7 @@ export default class TooltipAdvanced extends React.Component<any, any> {
137157
placement="right"
138158
hideDelay={0}
139159
showDelay={0}
140-
offset={20}
160+
offset={20}
141161
>
142162
<div className="avatarWrapper">
143163
<IgrAvatar
@@ -162,15 +182,15 @@ export default class TooltipAdvanced extends React.Component<any, any> {
162182
<div className="avatarWrapper" slot="start">
163183
<IgrAvatar
164184
id="avatar"
165-
src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/10.jpg"
185+
src="https://www.infragistics.com/angular-demos-lob/assets/images/avatar/5.jpg"
166186
shape="circle"
167187
></IgrAvatar>
168188
<IgrBadge>
169189
<IgrIcon name="block"></IgrIcon>
170190
</IgrBadge>
171191
</div>
172192
<div className="textWrapper">
173-
<p className="title">Eliza Morales</p>
193+
<p className="title">Aron Watson</p>
174194
</div>
175195
</IgrListItem>
176196
</IgrList>
@@ -180,12 +200,12 @@ export default class TooltipAdvanced extends React.Component<any, any> {
180200
placement="right"
181201
hideDelay={0}
182202
showDelay={0}
183-
offset={20}
203+
offset={20}
184204
>
185205
<IgrIcon name="block"></IgrIcon>
186206
<p>
187-
Notifications are silenced while I focus.
188-
Please reach out only for urgent matters
207+
Notifications are silenced while I focus. Please reach out only for
208+
urgent matters.
189209
</p>
190210
</IgrTooltip>
191211

@@ -206,7 +226,7 @@ export default class TooltipAdvanced extends React.Component<any, any> {
206226
placement="right"
207227
hideDelay={0}
208228
showDelay={0}
209-
offset={20}
229+
offset={20}
210230
>
211231
<IgrCard className="contentWrapper">
212232
<div className="titleWrapper">
@@ -229,18 +249,18 @@ export default class TooltipAdvanced extends React.Component<any, any> {
229249
</IgrTooltip>
230250

231251
<IgrList className="trigger">
232-
<IgrListItem >
252+
<IgrListItem>
233253
<div className="headingWrapper" slot="start">
234254
<IgrIcon name="btc"></IgrIcon>
235255
<h2 className="heading">BTC</h2>
236256
</div>
237257
<p slot="end" className="secondary">
238-
Daily: + $45
258+
Daily: + 2,6%
239259
</p>
240-
<div className="clickArea" id="trigger6"></div>
260+
<div className="clickArea" id="trigger6"></div>
241261
</IgrListItem>
242262
</IgrList>
243-
<p className="helper">Click to view details</p>
263+
<p className="helper">Click to view details</p>
244264
<IgrTooltip
245265
className="btc"
246266
anchor="trigger6"
@@ -249,7 +269,7 @@ export default class TooltipAdvanced extends React.Component<any, any> {
249269
placement="right"
250270
hideDelay={0}
251271
showDelay={0}
252-
offset={20}
272+
offset={20}
253273
>
254274
<IgrCard className="contentWrapper">
255275
<div className="titleWrapper">

0 commit comments

Comments
 (0)