Skip to content

Commit 9c9857b

Browse files
committed
Charts: Center funnel empty state via parent Stack alignment
The funnel empty state previously used `padding: 48px 24px` to push its text away from the container edges, but it sat at the top of the chart's fixed-height column rather than being vertically centered. The 48px vertical padding was also the only spacing literal in the package with no matching WPDS dimension token. Add `align="center" justify="center"` to the parent Stack in the empty-state branch so the message is centered both axes within the chart's resolved height, matching the centering pattern used by SvgEmptyState. Drop the now-unused padding from .empty-state. Verified centering against the EmptyData story: chart bounds (999.5, 492.75) and empty-state bounds match exactly on both axes.
1 parent 682353f commit 9c9857b

2 files changed

Lines changed: 2 additions & 1 deletion

File tree

projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@
124124

125125
.empty-state {
126126
text-align: center;
127-
padding: 48px var(--wpds-dimension-padding-2xl, 24px);
128127
color: #6b7280;
129128
font-size: var(--wpds-font-size-lg, 16px);
130129
}

projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,8 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
300300
return (
301301
<Stack
302302
direction="column"
303+
align="center"
304+
justify="center"
303305
data-testid="conversion-funnel-chart"
304306
className={ clsx(
305307
styles[ 'conversion-funnel-chart' ],

0 commit comments

Comments
 (0)