update tooltips stories

Automattic · Dec 6, 2024 · 75e9721 · 75e9721
1 parent 32052f9
commit 75e9721
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 29 deletions.
diff --git a/projects/js-packages/charts/src/components/tooltip/index.tsx b/projects/js-packages/charts/src/components/tooltip/index.tsx
@@ -7,15 +7,20 @@ import type { TooltipProps } from './types';
  * @param {TooltipProps} props - Component props
  * @return {JSX.Element|null} Rendered tooltip or null
  */
-const TooltipContent = ( { data }: TooltipProps ) => {
-	const { tooltipData, tooltipLeft, tooltipTop } = useTooltip();
+const TooltipContent = ( {
+	data,
+	top = 0,
+	left = 0,
+}: TooltipProps & { top?: number; left?: number } ) => {
+	// Try to get context values, but fall back to props if not available
+	const tooltip = useTooltip();
+	const tooltipTop = tooltip.tooltipTop ?? top;
+	const tooltipLeft = tooltip.tooltipLeft ?? left;
 
 	return (
-		tooltipData && (
-			<TooltipWithBounds top={ tooltipTop } left={ tooltipLeft }>
-				{ data.label }: { data.value }
-			</TooltipWithBounds>
-		)
+		<TooltipWithBounds top={ tooltipTop } left={ tooltipLeft }>
+			{ data.label }: { data.value }
+		</TooltipWithBounds>
 	);
 };
 

diff --git a/projects/js-packages/charts/src/components/tooltip/stories/index.stories.tsx b/projects/js-packages/charts/src/components/tooltip/stories/index.stories.tsx
@@ -1,4 +1,3 @@
-import BarChart from '../../bar-chart';
 import { Tooltip } from '../index';
 import type { Meta } from '@storybook/react';
 
@@ -11,33 +10,15 @@ export default {
 } satisfies Meta< typeof Tooltip >;
 
 /**
- * Story template for demonstrating the Tooltip component with a BarChart.
+ * Story template for demonstrating the Tooltip component.
  *
  * @param {object} args - Story arguments
  * @return {JSX.Element} The rendered story
  */
 function Template( args ) {
 	return (
-		<div style={ { width: 800, height: 400 } }>
-			<BarChart
-				width={ 800 }
-				height={ 400 }
-				data={ [
-					{ label: 'Jan', value: 30 },
-					{ label: 'Feb', value: 45 },
-					{ label: 'Mar', value: 25 },
-					{ label: 'Apr', value: 60 },
-					{ label: 'May', value: 38 },
-					{ label: 'Jun', value: 52 },
-					{ label: 'Jul', value: 65 },
-					{ label: 'Aug', value: 58 },
-					{ label: 'Sep', value: 42 },
-					{ label: 'Oct', value: 37 },
-					{ label: 'Nov', value: 45 },
-					{ label: 'Dec', value: 50 },
-				] }
-			/>
-			<Tooltip { ...args } />
+		<div style={ { position: 'relative', padding: '2rem', minHeight: '200px' } }>
+			<Tooltip { ...args } top={ 50 } left={ 100 } />
 		</div>
 	);
 }
@@ -49,3 +30,27 @@ Default.args = {
 		value: 42,
 	},
 };
+
+export const LongLabel = Template.bind( {} );
+LongLabel.args = {
+	data: {
+		label: 'Very Long Label That Might Need Special Handling',
+		value: 1234,
+	},
+};
+
+export const LargeValue = Template.bind( {} );
+LargeValue.args = {
+	data: {
+		label: 'Big Number',
+		value: 999999,
+	},
+};
+
+export const SmallValue = Template.bind( {} );
+SmallValue.args = {
+	data: {
+		label: 'Small Number',
+		value: 0.123,
+	},
+};