Skip to content

Commit c1e4b32

Browse files
Help Center: fix "Get help" button styling while resolving (#113358)
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>
1 parent b8e6fd2 commit c1e4b32

2 files changed

Lines changed: 10 additions & 1 deletion

File tree

packages/help-center/src/components/help-center-footer.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@
2323
&:hover {
2424
box-shadow: none;
2525
}
26+
27+
// Keep the button recognisable while the destination is still resolving:
28+
// the default disabled style greys the border out to near-invisibility.
29+
&:disabled,
30+
&[aria-disabled="true"],
31+
&[aria-disabled="true"]:hover {
32+
border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, $help-center-blue));
33+
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, $help-center-blue));
34+
opacity: 0.6;
35+
}
2636
}
2737
}
2838

packages/help-center/src/components/help-center-footer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@ export const HelpCenterContactButton = () => {
9292
variant="secondary"
9393
className="button help-center-contact-page__button"
9494
disabled={ isResolvingHumanRoute }
95-
isBusy={ isResolvingHumanRoute }
9695
accessibleWhenDisabled
9796
__next40pxDefaultSize
9897
>

0 commit comments

Comments
 (0)