Skip to content

Charts: Tokenize spacing and border values with WPDS dimension/border tokens #48019

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

Merged
adamwoodnz merged 9 commits into from
Apr 17, 2026
Merged

Charts: Tokenize spacing and border values with WPDS dimension/border tokens #48019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e93bbaa
Charts: Tokenize spacing and border values with WPDS dimension/border…
adamwoodnz Apr 9, 2026
bd724f9
Charts: Tokenize line-chart tooltip-date padding-bottom
adamwoodnz Apr 9, 2026
5c6bc41
Charts: Align tokenized fallbacks with WPDS spec values
adamwoodnz Apr 9, 2026
1f88552
Charts: Drop hardcoded 2px margin from funnel step-label
adamwoodnz Apr 9, 2026
2ca6b4b
Charts: Use Stack gap for funnel label/rate spacing
adamwoodnz Apr 9, 2026
0a13771
Charts: Center funnel empty state via parent Stack alignment
adamwoodnz Apr 9, 2026
c3d2512
Charts: Document leaderboard row-gap as a tokenization outlier
adamwoodnz Apr 9, 2026
a0a657f
Charts: Update changelog
adamwoodnz Apr 16, 2026
99abe91
Charts: Explain tooltip popover margin on line chart
adamwoodnz Apr 16, 2026
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
4 changes: 4 additions & 0 deletions projects/js-packages/charts/changelog/charts-199-spacing-border-tokenization
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: changed

Charts: Replace hardcoded spacing and border values in module SCSS with WPDS dimension and border design tokens.
20 changes: 7 additions & 13 deletions ...js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,36 +54,31 @@
.step-label {
color: #757575;
font-size: var(--wpds-font-size-sm, 12px);
font-style: normal;
font-weight: var(--wpds-font-weight-regular, 400);
line-height: var(--wpds-font-line-height-xs, 16px);
margin: 0 0 2px 0;
display: block;
white-space: nowrap;
Copy link
Copy Markdown
Contributor Author

@adamwoodnz adamwoodnz Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Completes the overflow handling styles. Without this text will wrap and not get ellipsis.

Copy link
Copy Markdown
Contributor

@dognose24 dognose24 Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes for text with spaces.

Before After
Image Image

overflow: hidden;
text-overflow: ellipsis;
}

.step-rate {
color: #1e1e1e;
font-size: var(--wpds-font-size-md, 13px);
font-style: normal;
font-weight: var(--wpds-font-weight-medium, 499);
line-height: var(--wpds-font-line-height-sm, 20px);
margin: 0;
display: block;
line-height: var(--wpds-font-line-height-xs, 16px);
Copy link
Copy Markdown
Contributor

@dognose24 dognose24 Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 👍🏼

Image

}

.bar-container {
flex: 1;
border-radius: 4px;
border-radius: var(--wpds-border-radius-md, 4px);
position: relative;
cursor: pointer;
}

.funnel-bar {
width: 100%;
min-height: 4px;
border-radius: 4px 4px 0 0;
border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;

&--animated {
transform-origin: bottom;
Expand All @@ -101,12 +96,12 @@
}

.tooltip-wrapper {
border-bottom: 1px solid var(--Gray-Gray-5, #dcdcde);
border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
background: var(--black-white-white, #fff);

// Override .visx-tooltip inline styles.
border-radius: 4px !important;
padding: 12px !important;
border-radius: var(--wpds-border-radius-md, 4px) !important;
padding: var(--wpds-dimension-padding-md, 12px) !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;

}
Expand All @@ -129,7 +124,6 @@

.empty-state {
text-align: center;
padding: 48px 24px;
Copy link
Copy Markdown
Contributor Author

@adamwoodnz adamwoodnz Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaced with a centered layout, matching other charts, eg. GeoChart

Copy link
Copy Markdown
Contributor

@dognose24 dognose24 Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

color: #6b7280;
font-size: var(--wpds-font-size-lg, 16px);
}
6 changes: 4 additions & 2 deletions projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,8 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
return (
<Stack
direction="column"
align="center"
Copy link
Copy Markdown
Contributor

@dognose24 dognose24 Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

justify="center"
data-testid="conversion-funnel-chart"
className={ clsx(
styles[ 'conversion-funnel-chart' ],
Expand Down Expand Up @@ -369,7 +371,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
gap="xl"
>
{ /* Step Label and Rate */ }
<div>
<Stack direction="column" gap="xs">
Copy link
Copy Markdown
Contributor

@dognose24 dognose24 Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

{ renderStepLabel ? (
renderStepLabel( {
step,
Expand All @@ -390,7 +392,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
{ formatPercentage( step.rate ) }
</span>
) }
</div>
</Stack>

{ /* Funnel Bar */ }
<Stack
Expand Down
8 changes: 6 additions & 2 deletions projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@
display: grid;
align-items: center;
grid-template-columns: 1fr;
// Outlier: not tokenized. The leaderboard's compact bar + gap + bar
// rhythm (6px bar, 6px row-gap, 6px bar) is intentional and does not
// map to any WPDS dimension token — gap-sm (8px) breaks the visual
// balance between the rows and the bars.
Comment on lines +24 to +27
Copy link
Copy Markdown
Contributor Author

@adamwoodnz adamwoodnz Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

Copy link
Copy Markdown
Contributor Author

@adamwoodnz adamwoodnz Apr 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

row-gap: 6px;
isolation: isolate;

Expand All @@ -34,7 +38,7 @@
}

.label {
padding-left: 8px;
padding-left: var(--wpds-dimension-padding-sm, 8px);
}
}

Expand Down Expand Up @@ -70,7 +74,7 @@
}

.emptyState {
padding: 32px 16px;
padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
text-align: center;
color: #666;
font-size: var(--wpds-font-size-md, 13px);
Expand Down
17 changes: 10 additions & 7 deletions projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@
&__tooltip,
&__annotation-label-popover {
background: #fff;
padding: 0.5rem;
padding: var(--wpds-dimension-padding-sm, 8px);
}

&__tooltip-date {
font-weight: var(--wpds-font-weight-medium, 499);
padding-bottom: 10px;
padding-bottom: var(--wpds-dimension-padding-md, 12px);
}

&__tooltip-row {
padding: 4px 0;
padding: var(--wpds-dimension-padding-xs, 4px) 0;
}

&__tooltip-label {
font-weight: var(--wpds-font-weight-medium, 499);
padding-right: 1rem;
padding-right: var(--wpds-dimension-padding-lg, 16px);
}

&__annotations-overlay {
Expand Down Expand Up @@ -61,11 +61,14 @@
min-width: 125px;
background: #fff;
border: none;
border-radius: 4px;
border-radius: var(--wpds-border-radius-md, 4px);
font-size: var(--wpds-font-size-md, 13px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
position: fixed;
margin: 0.5rem;
// Without margin set, the popover has margin:auto which upsets the
// positioning relative to the trigger button. A gap token is appropriate
// because it creates a gap to the trigger button.
margin: var(--wpds-dimension-gap-sm, 8px);
visibility: hidden;

&--visible {
Expand All @@ -79,7 +82,7 @@
}

&__annotation-label-popover-content {
padding: 0.5rem;
padding: var(--wpds-dimension-padding-sm, 8px);
}

&__annotation-label-popover-close-button {
Expand Down
2 changes: 1 addition & 1 deletion projects/js-packages/charts/src/components/legend/private/base-legend.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
&:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 4px;
border-radius: var(--wpds-border-radius-md, 4px);
}

&:focus:not(:focus-visible) {
Expand Down
4 changes: 2 additions & 2 deletions projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.tooltip {
padding: 0.5rem;
padding: var(--wpds-dimension-padding-sm, 8px);
background-color: rgba(0, 0, 0, 0.85);
color: #fff;
border-radius: 4px;
border-radius: var(--wpds-border-radius-md, 4px);
font-size: var(--wpds-font-size-md, 13px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
position: absolute;
Expand Down
Loading