Fixing styles for custom callout stories (#33054)

microsoft · Oct 16, 2024 · ed80ac6 · ed80ac6
1 parent 1071e3d
commit ed80ac6
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 10 deletions.
diff --git a/...omponents/react-charts-preview/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx b/...omponents/react-charts-preview/stories/src/DonutChart/DonutChartCustomCallout.stories.tsx
@@ -7,7 +7,7 @@ import {
   getColorFromToken,
   IPopoverComponentProps,
 } from '@fluentui/react-charts-preview';
-import { Switch } from '@fluentui/react-components';
+import { Switch, tokens } from '@fluentui/react-components';
 
 export const DonutChartCustomCallout = () => {
   const [useCustomPopover, setUseCustomPopover] = React.useState(false);
@@ -53,10 +53,34 @@ export const DonutChartCustomCallout = () => {
     const xValue = props ? props.xAxisCalloutData! : 'X Value';
     const legend = props ? props.legend : 'Legend';
     return useCustomPopover ? (
-      <div style={{ border: '1.5px dotted black' }}>
-        <div style={{ color: getColorFromToken(DataVizPalette.color5), border: '1px black' }}>{xValue}</div>
-        <div style={{ color: getColorFromToken(DataVizPalette.color6), border: '1px black' }}>{legend}</div>
-        <div style={{ color: getColorFromToken(DataVizPalette.color7) }}>{yValue}</div>
+      <div style={{ border: `1.5px dotted ${getColorFromToken(DataVizPalette.color10)}`, padding: '10px' }}>
+        <div
+          style={{
+            color: getColorFromToken(DataVizPalette.warning),
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightBold,
+          }}
+        >
+          {xValue}
+        </div>
+        <div
+          style={{
+            color: getColorFromToken(DataVizPalette.color3),
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightBold,
+          }}
+        >
+          {legend}
+        </div>
+        <div
+          style={{
+            color: getColorFromToken(DataVizPalette.color2),
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightBold,
+          }}
+        >
+          {yValue}
+        </div>
       </div>
     ) : undefined;
   };

diff --git a/...charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx b/...charts-preview/stories/src/HorizontalBarChart/HorizontalBarChartCustomCallout.stories.tsx
@@ -8,7 +8,7 @@ import {
   IPopoverComponentProps,
 } from '@fluentui/react-charts-preview';
 // import * as d3 from 'd3-format';
-import { Switch } from '@fluentui/react-components';
+import { Switch, tokens } from '@fluentui/react-components';
 
 export const HorizontalBarCustomCallout = () => {
   const hideRatio: boolean[] = [true, false];
@@ -133,10 +133,34 @@ export const HorizontalBarCustomCallout = () => {
     const xValue = props ? props.xAxisCalloutData! : 'X Value';
     const legend = props ? props.legend : 'Legend';
     return useCustomPopover ? (
-      <div style={{ border: '1.5px dotted black' }}>
-        <div style={{ color: getColorFromToken(DataVizPalette.color5), border: '1px black' }}>{xValue}</div>
-        <div style={{ color: getColorFromToken(DataVizPalette.color6), border: '1px black' }}>{legend}</div>
-        <div style={{ color: getColorFromToken(DataVizPalette.color7) }}>{yValue}</div>
+      <div style={{ border: `1.5px dotted ${getColorFromToken(DataVizPalette.color10)}`, padding: '10px' }}>
+        <div
+          style={{
+            color: getColorFromToken(DataVizPalette.warning),
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightBold,
+          }}
+        >
+          {xValue}
+        </div>
+        <div
+          style={{
+            color: getColorFromToken(DataVizPalette.color3),
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightBold,
+          }}
+        >
+          {legend}
+        </div>
+        <div
+          style={{
+            color: getColorFromToken(DataVizPalette.color2),
+            fontSize: tokens.fontSizeBase400,
+            fontWeight: tokens.fontWeightBold,
+          }}
+        >
+          {yValue}
+        </div>
       </div>
     ) : undefined;
   };