Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify hover card as per design #28617

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Modify hover card as per design #28617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ca5daa0
modify chart hover card as per design
krkshitij Jul 23, 2023
7a154f0
add change file
krkshitij Jul 23, 2023
47d6d61
modify multi value callout as per design
krkshitij Jul 27, 2023
26e7853
add test case for callout variant
krkshitij Jul 28, 2023
5fa18bf
remove updatedTime prop
krkshitij Jul 28, 2023
6db1724
update snapshots
krkshitij Aug 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-fd86b4aa-b2f7-413c-83e4-4cb434fe6a75.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Modify hover card as per design",
"packageName": "@fluentui/react-charting",
"email": "[email protected]",
"dependentChangeType": "patch"
}
129 changes: 61 additions & 68 deletions packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,38 +423,32 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-blend-mode: normal, luminosity;
background-color: #ffffff;
display: grid;
overflow: hidden;
padding-bottom: 10px;
color: #323130;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 11px;
padding-top: 16px;
}
>
<div
className=

{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 8px;
}
style={Object {}}
>
<div
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #605e5c;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
opacity: 0.8;
font-weight: 600;
}
data-is-focusable={false}
role="text"
Expand All @@ -467,69 +461,68 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
>
<div
data-is-focusable={false}
key="callout-content-0"
role="text"
style={Object {}}
style={
Object {
"marginBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
}
}
>
<div
style={Object {}}
>
<div>
<div
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
border-left: 4px solid red;
color: #323130;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: 400;
margin-top: 13px;
padding-left: 8px;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
forced-color-adjust: none;
align-items: center;
display: flex;
}
id="0_80"
>
<div>
<div
className=
<svg
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #605e5c;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
color: rgb(255, 255, 255);
}
>

metaData1
</div>
<div
className=
{
flex-shrink: 0;
margin-right: 8px;
}
height={14}
transform="rotate(0, 0, 0)"
viewBox="-1 -1 14 14"
width={14}
>
<path
d="M1 1 L12 1 L12 12 L1 12 L1 1 Z"
fill="red"
/>
</svg>
<div
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 22px;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
color: rgb(255, 255, 255);
}
>
80
</div>
{
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
style={
Object {
"marginRight": "24px",
}
}
>
metaData1
</div>
<div
className=

{
flex-shrink: 0;
font-weight: 600;
}
>
80
</div>
</div>
</div>
Expand Down
129 changes: 61 additions & 68 deletions packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -750,38 +750,32 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-blend-mode: normal, luminosity;
background-color: #ffffff;
display: grid;
overflow: hidden;
padding-bottom: 10px;
color: #323130;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 11px;
padding-top: 16px;
}
>
<div
className=

{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 8px;
}
style={Object {}}
>
<div
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #605e5c;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
opacity: 0.8;
font-weight: 600;
}
data-is-focusable={false}
role="text"
Expand All @@ -794,69 +788,68 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
>
<div
data-is-focusable={false}
key="callout-content-0"
role="text"
style={Object {}}
style={
Object {
"marginBottom": "0px",
"paddingLeft": "0px",
"paddingRight": "0px",
}
}
>
<div
style={Object {}}
>
<div>
<div
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
border-left: 4px solid red;
color: #323130;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: 400;
margin-top: 13px;
padding-left: 8px;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
forced-color-adjust: none;
align-items: center;
display: flex;
}
id="0_80"
>
<div>
<div
className=
<svg
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #605e5c;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
color: rgb(255, 255, 255);
}
>

metaData1
</div>
<div
className=
{
flex-shrink: 0;
margin-right: 8px;
}
height={14}
transform="rotate(0, 0, 0)"
viewBox="-1 -1 14 14"
width={14}
>
<path
d="M1 1 L12 1 L12 12 L1 12 L1 1 Z"
fill="red"
/>
</svg>
<div
className=

{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 22px;
}
@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
color: rgb(255, 255, 255);
}
>
80
</div>
{
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
style={
Object {
"marginRight": "24px",
}
}
>
metaData1
</div>
<div
className=

{
flex-shrink: 0;
font-weight: 600;
}
>
80
</div>
</div>
</div>
Expand Down
Loading