Skip to content

ui: Stepper CSS cleanups from #111036 review feedback - #111616

Merged
bogiii merged 2 commits into
trunkfrom
update/stepper-css-cleanups
Jun 15, 2026
Merged

bogiii merged 2 commits into
trunkfrom
update/stepper-css-cleanups

Conversation

@bogiii

@bogiii bogiii commented Jun 12, 2026 •

Copy link
Copy Markdown
Contributor

Part of the follow-up work for the Stepper review feedback in #111036.

Proposed Changes

  • Remove the dead color declaration from the base .title rule. It never applied: the stepper root always renders data-indicator-variant, so the higher-specificity [data-indicator-variant] .title rules always win. Addresses this comment.
  • Replace the magic margin: 1px on the bullet indicator variant (current and completed states) with calc( ( var( --a8c-ui-stepper-indicator-size ) - var( --a8c-ui-stepper-indicator-size-sm ) ) * 0.5 ), so the centre-alignment compensation is derived from the size variables instead of a hardcoded number. Addresses this comment.

Why are these changes being made?

Testing Instructions

  • Run the Stepper Storybook stories for VerticalStepper and HorizontalStepper with the bullet indicator variant.
  • Verify the bullet indicators stay vertically centre-aligned across upcoming, current, and completed states (computed margin should still resolve to 1px: (18px - 16px) / 2).
  • Verify step title colors are unchanged in all states (upcoming, current, completed, hover, disabled).

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • For UI changes, have you tested the affected components in dark mode?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

…e tokens

Follow-up to review feedback on #111036:
- The base `.title` color never applied; it is always overridden by the
  higher-specificity `[data-indicator-variant] .title` rules since the
  root always renders `data-indicator-variant`.
- Replace the magic `margin: 1px` on bullet indicators with a calc()
  derived from the indicator size variables, so the centre alignment
  stays correct if the sizes ever change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@bogiii bogiii self-assigned this Jun 12, 2026
@matticbot

matticbot commented Jun 12, 2026 •

Copy link
Copy Markdown
Contributor

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • help-center
  • notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/stepper-css-cleanups on your sandbox.

@github-actions

Copy link
Copy Markdown

Looks like one of the E2E tests has failed.

You can fix them following these steps:

  1. Check out this branch locally:
    gh pr checkout 111616
  2. Start Claude Code in the repo:
    claude
  3. Run the /fix-e2e-tests skill, passing this PR number:
    /fix-e2e-tests 111616
    

@bogiii
bogiii marked this pull request as ready for review June 12, 2026 11:46
@bogiii
bogiii requested a review from ciampo June 12, 2026 21:38
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 12, 2026

@ciampo ciampo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 🚀

Left an optional comment, feel free to address it and merge without the need for another round of review 👍

Comment thread packages/ui/src/stepper/style.module.scss Outdated
Replace the duplicated margin calc on current/completed bullet indicators
with a single --a8c-ui-stepper-indicator-offset token.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@bogiii
bogiii merged commit e231e18 into trunk Jun 15, 2026
14 checks passed
@bogiii
bogiii deleted the update/stepper-css-cleanups branch June 15, 2026 20:39
@github-actions github-actions Bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants