Skip to content

Commit

Permalink
feat: set tooltip dom classname has g2- prefix (#5066)
Browse files Browse the repository at this point in the history 
* feat: set tooltip dom classname has g2- prefix

* chore: update tooltip test case snapshots
  • Loading branch information
@hustcc
hustcc authored May 23, 2023
1 parent e2e8a5f commit c8b62f6
Show file tree
Hide file tree
Showing 91 changed files with 1,240 additions and 1,237 deletions.
4 changes: 2 additions & 2 deletions __tests__/integration/api-chart-emit-item-tooltip.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ describe('chart.emit', () => {

// chart.emit("tooltip:show", options) should show tooltip.
await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
selector: '.tooltip',
selector: '.g2-tooltip',
});

// chart.emit("tooltip:hide") should hide tooltip.
chart.emit('tooltip:hide');
await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
selector: '.tooltip',
selector: '.g2-tooltip',
});

chart.off();
Expand Down
2 changes: 1 addition & 1 deletion __tests__/integration/api-chart-emit-pie-tooltip.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('chart.emit', () => {

// chart.emit("tooltip:show", options) should show tooltip.
await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
selector: '.tooltip',
selector: '.g2-tooltip',
});
});

Expand Down
4 changes: 2 additions & 2 deletions __tests__/integration/api-chart-emit-series-tooltip.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ describe('chart.emit', () => {

// chart.emit("tooltip:show", options) should show tooltip.
await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
selector: '.tooltip',
selector: '.g2-tooltip',
});

// chart.emit("tooltip:hide") should hide tooltip.
chart.emit('tooltip:hide');
await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
selector: '.tooltip',
selector: '.g2-tooltip',
});

chart.off();
Expand Down
2 changes: 1 addition & 1 deletion __tests__/integration/api-mark-change-data-tooltip.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ describe('mark.changeData tooltip', () => {
}),
);
await expect(canvas).toMatchDOMSnapshot(dir, render.name, {
selector: `.tooltip`,
selector: '.g2-tooltip',
});
});

Expand Down
16 changes: 8 additions & 8 deletions __tests__/integration/snapshots/api/chart-emit-item-tooltip/step0.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="tooltip"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 226.7156883688534px; top: 380.10715157645086px;"
>
<div
class="tooltip-title"
class="g2-tooltip-title"
style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Strategy
</div>
<ul
class="tooltip-list"
class="g2-tooltip-list"
style="margin: 0px; list-style-type: none; padding: 0px;"
>
<li
class="tooltip-list-item"
class="g2-tooltip-list-item"
data-index="0"
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
>
<span
class="tooltip-list-item-name"
class="g2-tooltip-list-item-name"
style="display: flex; align-items: center; max-width: 216px;"
>
<span
class="tooltip-list-item-marker"
class="g2-tooltip-list-item-marker"
style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
/>
<span
class="tooltip-list-item-name-label"
class="g2-tooltip-list-item-name-label"
title="sold"
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
sold
</span>
</span>
<span
class="tooltip-list-item-value"
class="g2-tooltip-list-item-value"
title="115"
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Expand Down
16 changes: 8 additions & 8 deletions __tests__/integration/snapshots/api/chart-emit-item-tooltip/step1.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="tooltip"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 226.7156883688534px; top: 380.10715157645086px;"
>
<div
class="tooltip-title"
class="g2-tooltip-title"
style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Strategy
</div>
<ul
class="tooltip-list"
class="g2-tooltip-list"
style="margin: 0px; list-style-type: none; padding: 0px;"
>
<li
class="tooltip-list-item"
class="g2-tooltip-list-item"
data-index="0"
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
>
<span
class="tooltip-list-item-name"
class="g2-tooltip-list-item-name"
style="display: flex; align-items: center; max-width: 216px;"
>
<span
class="tooltip-list-item-marker"
class="g2-tooltip-list-item-marker"
style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
/>
<span
class="tooltip-list-item-name-label"
class="g2-tooltip-list-item-name-label"
title="sold"
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
sold
</span>
</span>
<span
class="tooltip-list-item-value"
class="g2-tooltip-list-item-value"
title="115"
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Expand Down
14 changes: 7 additions & 7 deletions __tests__/integration/snapshots/api/chart-emit-pie-tooltip/step0.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="tooltip"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 432.4999842680868px; top: 166.8005px;"
>
<ul
class="tooltip-list"
class="g2-tooltip-list"
style="margin: 0px; list-style-type: none; padding: 0px;"
>
<li
class="tooltip-list-item"
class="g2-tooltip-list-item"
data-index="0"
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
>
<span
class="tooltip-list-item-name"
class="g2-tooltip-list-item-name"
style="display: flex; align-items: center; max-width: 216px;"
>
<span
class="tooltip-list-item-marker"
class="g2-tooltip-list-item-marker"
style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
/>
<span
class="tooltip-list-item-name-label"
class="g2-tooltip-list-item-name-label"
title="sold"
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
sold
</span>
</span>
<span
class="tooltip-list-item-value"
class="g2-tooltip-list-item-value"
title="275"
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Expand Down
16 changes: 8 additions & 8 deletions __tests__/integration/snapshots/api/chart-emit-series-tooltip/step0.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="tooltip"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 454.78197172373046px; top: 241.0857864376269px;"
>
<div
class="tooltip-title"
class="g2-tooltip-title"
style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Tue, 16 Nov 2010 00:00:00 GMT
</div>
<ul
class="tooltip-list"
class="g2-tooltip-list"
style="margin: 0px; list-style-type: none; padding: 0px;"
>
<li
class="tooltip-list-item"
class="g2-tooltip-list-item"
data-index="0"
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
>
<span
class="tooltip-list-item-name"
class="g2-tooltip-list-item-name"
style="display: flex; align-items: center; max-width: 216px;"
>
<span
class="tooltip-list-item-marker"
class="g2-tooltip-list-item-marker"
style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
/>
<span
class="tooltip-list-item-name-label"
class="g2-tooltip-list-item-name-label"
title="close"
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
close
</span>
</span>
<span
class="tooltip-list-item-value"
class="g2-tooltip-list-item-value"
title="300.5"
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Expand Down
16 changes: 8 additions & 8 deletions __tests__/integration/snapshots/api/chart-emit-series-tooltip/step1.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="tooltip"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: hidden; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 454.78197172373046px; top: 241.0857864376269px;"
>
<div
class="tooltip-title"
class="g2-tooltip-title"
style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Tue, 16 Nov 2010 00:00:00 GMT
</div>
<ul
class="tooltip-list"
class="g2-tooltip-list"
style="margin: 0px; list-style-type: none; padding: 0px;"
>
<li
class="tooltip-list-item"
class="g2-tooltip-list-item"
data-index="0"
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
>
<span
class="tooltip-list-item-name"
class="g2-tooltip-list-item-name"
style="display: flex; align-items: center; max-width: 216px;"
>
<span
class="tooltip-list-item-marker"
class="g2-tooltip-list-item-marker"
style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
/>
<span
class="tooltip-list-item-name-label"
class="g2-tooltip-list-item-name-label"
title="close"
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
close
</span>
</span>
<span
class="tooltip-list-item-value"
class="g2-tooltip-list-item-value"
title="300.5"
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Expand Down
16 changes: 8 additions & 8 deletions __tests__/integration/snapshots/api/markChangeDataTooltip.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="tooltip"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 210px; top: 310px;"
>
<div
class="tooltip-title"
class="g2-tooltip-title"
style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
test2
</div>
<ul
class="tooltip-list"
class="g2-tooltip-list"
style="margin: 0px; list-style-type: none; padding: 0px;"
>
<li
class="tooltip-list-item"
class="g2-tooltip-list-item"
data-index="0"
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
>
<span
class="tooltip-list-item-name"
class="g2-tooltip-list-item-name"
style="display: flex; align-items: center; max-width: 216px;"
>
<span
class="tooltip-list-item-marker"
class="g2-tooltip-list-item-marker"
style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
/>
<span
class="tooltip-list-item-name-label"
class="g2-tooltip-list-item-name-label"
title="frequency"
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
frequency
</span>
</span>
<span
class="tooltip-list-item-value"
class="g2-tooltip-list-item-value"
title="11"
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Expand Down
16 changes: 8 additions & 8 deletions __tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<div
xmlns="http://www.w3.org/1999/xhtml"
class="tooltip"
class="g2-tooltip"
style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 110px; top: 98px;"
>
<div
class="tooltip-title"
class="g2-tooltip-title"
style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Thu, 10 Jan 2008 00:00:00 GMT
</div>
<ul
class="tooltip-list"
class="g2-tooltip-list"
style="margin: 0px; list-style-type: none; padding: 0px;"
>
<li
class="tooltip-list-item"
class="g2-tooltip-list-item"
data-index="0"
style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
>
<span
class="tooltip-list-item-name"
class="g2-tooltip-list-item-name"
style="display: flex; align-items: center; max-width: 216px;"
>
<span
class="tooltip-list-item-marker"
class="g2-tooltip-list-item-marker"
style="background: black; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
/>
<span
class="tooltip-list-item-name-label"
class="g2-tooltip-list-item-name-label"
title="close"
style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
close
</span>
</span>
<span
class="tooltip-list-item-value"
class="g2-tooltip-list-item-value"
title="NaN"
style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
>
Expand Down
Loading

0 comments on commit c8b62f6

Please sign in to comment.