Help Center: fix "Get help" button styling while resolving - #113358
Merged
Conversation
The footer button rendered with `isBusy` and `aria-disabled` while the support status and connection health checks were in flight, which replaced its blue border with WordPress components' near-invisible `#dbdbdb` disabled border and painted a striped gradient over the background. The button stopped reading as a button. Drop `isBusy` and keep the accent border, accent text, and a dimmed opacity for the disabled state. The click guard stays so the button can't navigate before the human-support route is resolved. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
WordPress.com
Automattic for Agencies
|
matticbot
added
the
[Status] Needs Review
escapemanuele
marked this pull request as ready for review
August 7, 2026 07:17
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request adjusts the Help Center footer “Get help” button’s loading/disabled presentation so it remains visually recognisable as a button while the human-support routing checks are still resolving.
Changes:
- Removed the WordPress
ButtonisBusystate to avoid the striped/gradient busy treatment during route resolution. - Added disabled/aria-disabled styling to preserve the accent border/text (dimmed via
opacity) instead of inheriting the default greyed-out disabled styles.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/help-center/src/components/help-center-footer.tsx | Removes isBusy from the “Get help” button while resolving the support route. |
| packages/help-center/src/components/help-center-footer.scss | Overrides disabled/aria-disabled styles to keep accent border/text with reduced opacity during resolution. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
github-actions
Bot
removed
the
[Status] Needs Review
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes https://linear.app/a8c/issue/DOTCOM-18169/get-help-button-in-help-center-has-no-borderbackground-in-my-home
Proposed Changes
The Help Center footer's “Get help” button now keeps looking like a button while it waits for the support checks to finish.
isBusy, which painted the WordPress components striped-gradient loader across the button.opacity: 0.6, instead of inheriting the near-invisible#dbdbdbdisabled border.Why are these changes being made?
When you open the Help Center, the footer button briefly waits on two background checks before it knows whether to send you to the AI assistant or straight to a Happiness Engineer. During that wait it was rendered in a “busy + disabled” state, and the styling for that state wiped out everything that made it read as a button: the blue outline turned an almost-invisible grey, the label went grey, and a diagonal grey barber-pole pattern was drawn over the whole thing.
The result looked less like a button and more like a broken placeholder or a stuck loading skeleton, so people didn't recognise it as the way to get help (DOTCOM-18169). The wait is short and the button's destination is the same in the overwhelming majority of cases, so a loud loading treatment was never worth the confusion it caused.
Testing Instructions
Calypso
yarn start.Simple/Atomic/CIAB
widgets.wp.com.cd apps/help-center && yarn dev --sync.