Skip to content

fix(my-account): v2 demo polish pass #4689

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
thomasguillot merged 18 commits into from
Apr 30, 2026
Merged

fix(my-account): v2 demo polish pass #4689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0ace0bb
fix(my-account): align newsletter row button widths
thomasguillot Apr 30, 2026
ad8d1f1
fix(my-account): add gap to sidebar nav footer items
thomasguillot Apr 30, 2026
3840ea5
fix(my-account): narrow delete-account success modal to small
thomasguillot Apr 30, 2026
d6834db
fix(my-account): tighten newsletter section header gap
thomasguillot Apr 30, 2026
b6f1976
fix(my-account): anchor donations billing history to bottom
thomasguillot Apr 30, 2026
0e5db5a
fix(my-account): polish donations sections and previous table
thomasguillot Apr 30, 2026
ec523c6
fix(my-account): swap donations billing history icon
thomasguillot Apr 30, 2026
3db1609
fix(my-account): correct donations min-height to avoid overflow
thomasguillot Apr 30, 2026
42d8709
fix(my-account): drop margin from donations billing card
thomasguillot Apr 30, 2026
8629876
fix(my-account): set donations card titles to small
thomasguillot Apr 30, 2026
6755314
fix(my-account): tighten billing card padding
thomasguillot Apr 30, 2026
798c3d9
fix(my-account): set donations sections gap to spacer-11
thomasguillot Apr 30, 2026
9dd2d37
fix(my-account): add hover state to donations billing card
thomasguillot Apr 30, 2026
47e3a11
fix(my-account): zero v1 section+section margin in donations
thomasguillot Apr 30, 2026
3bff3e3
fix(my-account): build billing card from secondary button
thomasguillot Apr 30, 2026
bf7557d
fix(my-account): stretch billing card label to full width
thomasguillot Apr 30, 2026
febf041
fix(my-account): bump section margin override to beat v1 rule
thomasguillot Apr 30, 2026
b62b552
fix(my-account): use button element for billing history card
thomasguillot Apr 30, 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
48 changes: 25 additions & 23 deletions includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/donations.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,18 +143,19 @@ static function ( $a, $b ) {
};
?>
<div
class="newspack-my-account-v2-demo-donations newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-9"
class="newspack-my-account-v2-demo-donations newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--justify-between"
data-newspack-my-account-v2-demo="donations"
>
<?php if ( empty( $active_recurring ) && empty( $previous ) ) : ?>
<div class="newspack-ui__notice">
<?php esc_html_e( 'You have no donations yet.', 'newspack-plugin' ); ?>
</div>
<?php endif; ?>
<div class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-11">
<?php if ( empty( $active_recurring ) && empty( $previous ) ) : ?>
<div class="newspack-ui__notice">
<?php esc_html_e( 'You have no donations yet.', 'newspack-plugin' ); ?>
</div>
<?php endif; ?>

<?php if ( ! empty( $active_recurring ) ) : ?>
<section class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-5" data-section-id="recurring">
<h2 class="newspack-ui__font--l newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php if ( ! empty( $active_recurring ) ) : ?>
<section class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-5" data-section-id="recurring">
<h2 class="newspack-ui__font--m newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php
echo esc_html(
_n(
Expand All @@ -179,7 +180,7 @@ class="newspack-my-account-v2-demo-donations newspack-ui__stack newspack-ui__sta
?>
<div class="newspack-ui__box newspack-ui__box--border newspack-ui__stack newspack-ui__stack--horizontal newspack-ui__stack--gap-5 newspack-ui__stack--align-center newspack-ui__stack--justify-between">
<div class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-1">
<span class="newspack-ui__font--m newspack-ui__font--bold"><?php echo esc_html( $amount_per ); ?></span>
<span class="newspack-ui__font--s newspack-ui__font--bold"><?php echo esc_html( $amount_per ); ?></span>
<?php if ( $next_payment ) : ?>
<span class="newspack-ui__font--xs newspack-ui__color--neutral-60">
<?php
Expand All @@ -205,7 +206,7 @@ class="newspack-ui__button newspack-ui__button--secondary"

<?php if ( ! empty( $previous ) ) : ?>
<section class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-3" data-section-id="previous">
<h2 class="newspack-ui__font--l newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<h2 class="newspack-ui__font--m newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php esc_html_e( 'Previous donations', 'newspack-plugin' ); ?>
</h2>
<table class="newspack-my-account-v2-demo-donations__previous-table">
Expand Down Expand Up @@ -250,11 +251,12 @@ class="newspack-ui__button newspack-ui__button--secondary"
</tbody>
</table>
</section>
<?php endif; ?>
<?php endif; ?>
</div>

<?php if ( $billing_history_inline ) : ?>
<section class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-3" data-section-id="billing-history">
<h2 class="newspack-ui__font--l newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<h2 class="newspack-ui__font--m newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php esc_html_e( 'Billing history', 'newspack-plugin' ); ?>
</h2>
<?php
Expand Down Expand Up @@ -310,22 +312,22 @@ static function ( $a, $b ) {
</table>
</section>
<?php elseif ( ! empty( $billing_history_button['enabled'] ) ) : ?>
<a
href="#"
class="newspack-ui__box newspack-ui__stack newspack-ui__stack--horizontal newspack-ui__stack--gap-5 newspack-ui__stack--align-center newspack-ui__stack--justify-between"
<button
type="button"
class="newspack-ui__button newspack-ui__button--secondary newspack-ui__button--wide newspack-ui__stack newspack-ui__stack--horizontal newspack-ui__stack--gap-5 newspack-ui__stack--align-center newspack-ui__stack--justify-between"
data-action="open-billing-history"
>
<div class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-1">
<span class="newspack-ui__font--m newspack-ui__font--bold">
<span class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-1">
<span class="newspack-ui__font--s newspack-ui__font--bold">
<?php echo esc_html( isset( $billing_history_button['title'] ) ? $billing_history_button['title'] : __( 'Billing history', 'newspack-plugin' ) ); ?>
</span>
<span class="newspack-ui__font--xs newspack-ui__color--neutral-60">
<span class="newspack-ui__font--xs newspack-ui__font--normal newspack-ui__color--neutral-60">
<?php echo esc_html( isset( $billing_history_button['description'] ) ? $billing_history_button['description'] : '' ); ?>
</span>
</div>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
<path d="M19 3H5C3.9 3 3 3.9 3 5v16l3-2 3 2 3-2 3 2 3-2 3 2V5c0-1.1-.9-2-2-2zm-1 14.5L17 17l-3 2-3-2-3 2-3-2-1 .5V5h14v12.5zM6 7h12v2H6V7zm0 4h12v2H6v-2zm0 4h7v2H6v-2z" fill="currentColor"/>
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
<path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M16.83 6.342l.602.3.625-.25.443-.176v12.569l-.443-.178-.625-.25-.603.301-1.444.723-2.41-.804-.475-.158-.474.158-2.41.803-1.445-.722-.603-.3-.625.25-.443.177V6.215l.443.178.625.25.603-.301 1.444-.722 2.41.803.475.158.474-.158 2.41-.803 1.445.722zM20 4l-1.5.6-1 .4-2-1-3 1-3-1-2 1-1-.4L5 4v17l1.5-.6 1-.4 2 1 3-1 3 1 2-1 1 .4 1.5.6V4zm-3.5 6.25v-1.5h-8v1.5h8zm0 3v-1.5h-8v1.5h8zm-8 3v-1.5h8v1.5h-8z"/>
</svg>
</a>
</button>
<?php endif; ?>
</div>
4 changes: 2 additions & 2 deletions includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/newsletters.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class="newspack-my-account-v2-demo-newsletters newspack-ui__stack newspack-ui__s
>
<?php foreach ( $sections as $section ) : ?>
<section class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-5" data-section-id="<?php echo esc_attr( $section['id'] ); ?>">
<header class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-1">
<header class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-0">
<h2 class="newspack-ui__font--m newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php echo esc_html( $section['label'] ); ?>
</h2>
Expand Down Expand Up @@ -68,7 +68,7 @@ class="newspack-my-account-v2-demo-newsletters newspack-ui__stack newspack-ui__s
class="newspack-my-account-v2-demo-newsletters__unsubscribe-all newspack-ui__stack newspack-ui__stack--horizontal newspack-ui__stack--gap-5 newspack-ui__stack--align-center newspack-ui__stack--justify-between"
data-section-id="unsubscribe-all"
>
<div class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-1">
<div class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-0">
<h2 class="newspack-ui__font--m newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php echo esc_html( $unsubscribe_from_all['title'] ); ?>
</h2>
Expand Down
6 changes: 5 additions & 1 deletion src/my-account-v2-demo/account-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,17 @@ function openModal( modal ) {
}

/**
* Switch the modal to its success ("check inbox") step.
* Switch the modal to its success ("check inbox") step. The success step
* narrows the inner modal to --small; init keeps the default width because
* its alternatives list needs the room.
*
* @param {HTMLElement} modal Modal container element.
*/
function showSuccessStep( modal ) {
modal.querySelectorAll( '[data-step]' ).forEach( step => {
step.hidden = step.dataset.step !== 'success';
} );
modal.querySelector( '.newspack-ui__modal' )?.classList.add( 'newspack-ui__modal--small' );
}

/**
Expand All @@ -49,6 +52,7 @@ function resetModal( modal ) {
modal.querySelectorAll( '[data-step]' ).forEach( step => {
step.hidden = step.dataset.step !== 'init';
} );
modal.querySelector( '.newspack-ui__modal' )?.classList.remove( 'newspack-ui__modal--small' );
}

/**
Expand Down
101 changes: 101 additions & 0 deletions src/my-account-v2-demo/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,97 @@
line-height: var(--newspack-ui-line-height-m);
}

// Sign up / Unsubscribe row buttons share the same width so the right
// edge stays steady as rows toggle between subscribed states (and so
// the loading-state spinner doesn't reveal a wider label after the
// flip). Targets only per-row buttons, not the bottom "Unsubscribe
// from all" CTA which sits in a different context.
.newspack-my-account-v2-demo-newsletters [data-list-id] > .newspack-ui__button {
min-width: 8rem;
}

// Donations list anchors the billing-history block to the bottom of
// the visible viewport (Figma 2636:46467). Sidebar is position:fixed
// 100vh, so our content has no parent to inherit height from — we
// pin a viewport-based min-height for justify-between to distribute.
// Subtract the WP admin bar offset and the .woocommerce wrapper's
// spacer-11 vertical padding (top + bottom = 128px) so the page
// doesn't overflow. Desktop only; below 768px the sidebar is an
// overlay and there's nothing to match.
.newspack-my-account-v2-demo-donations {
@media ( min-width: 768px ) {
min-height: calc(
100vh
- var(--wp-admin--admin-bar--height, 0px)
- var(--newspack-ui-spacer-11) * 2
);
}
}

// Section title font-size pin. The newspack-ui font-m utility
// compiles to a two-class selector and gets out-specificed by some
// theme rules on entry-content headings. Same fix as newsletters.
// Also zero margins so the parent stack's gap is the only spacing
// between sections (themes often ship h2 margin-top/bottom that
// stacks on top of __stack--gap-11).
.newspack-my-account-v2-demo-donations h2 {
font-size: var(--newspack-ui-font-size-m);
line-height: var(--newspack-ui-line-height-m);
margin: 0;
}

// __box ships with margin-bottom: spacer-5; inside a __stack the
// margin gets added on top of the gap, inflating the visible space
// between sections. Zero it inside donations so the stack gap is
// the single source of inter-section spacing.
.newspack-my-account-v2-demo-donations .newspack-ui__box {
margin-bottom: 0;
}

// Billing history Button Card label block fills the remaining width
// so the title/description stretch across the button instead of
// sitting at content width while justify-between leaves a wide gap
// before the icon. Mirrors Figma's `flex-[1_0_0]` on the label.
// newspack-ui has no flex-grow utility, so this stays as a scoped
// rule for the single instance.
.newspack-my-account-v2-demo-donations [data-action="open-billing-history"] > .newspack-ui__stack--vertical {
flex: 1;
min-width: 0;
}

// v1 ships a `.newspack-my-account .woocommerce-MyAccount-content
// :not(.__stack--gap-11) section + section { margin-top: spacer-11 }`
// rule that fires on our consecutive <section> elements because the
// outer wrapper isn't __stack--gap-11 (only the inner one is) — so
// it stacks an extra spacer-11 on top of __stack--gap-11. The v1
// selector has 3 classes; this override compounds the section's own
// __stack class to land at 4 classes and win the specificity battle.
.newspack-my-account-v2-demo-donations section.newspack-ui__stack + section.newspack-ui__stack {
margin-top: 0;
}

// Previous donations table polish (Figma 2636:46479). Header gets a
// stronger bottom border (--color-border, #ddd); rows get a lighter
// divider (neutral-5, #f0f0f0); rows are clickable so cursor flips
// to pointer; cell padding bumps row height closer to Figma's 48px.
.newspack-my-account-v2-demo-donations__previous-table {
thead th {
border-bottom: 1px solid var(--newspack-ui-color-border);
padding: var(--newspack-ui-spacer-2) 0;
}

tbody {
td {
border-bottom: 1px solid var(--newspack-ui-color-neutral-5);
padding: var(--newspack-ui-spacer-3) 0;
}

tr {
cursor: pointer;
}
}
}

// Phase 9 — Delete account modal action list. Three rows of
// label and description on the left, Manage button on the right,
// separated by hairlines. No newspack-ui primitive matches this
Expand Down Expand Up @@ -85,6 +176,16 @@
}
}

// Sidebar nav footer (secondary links + Sign out) renders as a stack
// with spacer-1 between items. v1's `_navigation.scss` controls the
// outer footer block but doesn't gap the children, so the v2-demo
// secondary links sit too tight against the Sign out row.
.newspack-my-account__navigation-footer ul {
display: flex;
flex-direction: column;
gap: var(--newspack-ui-spacer-1);
}
Comment thread
thomasguillot marked this conversation as resolved.

// Email-send icon at the top of the success step. Black filled
// circle, white icon — matches Figma frame 4865:92398.
.newspack-my-account-v2-demo-account-settings__success-icon {
Expand Down
Loading