Staging sites redesign: Focus add staging site button #105130
Conversation
Jetpack Cloud live (direct link)
Automattic for Agencies live (direct link)
|
|
|
||
| setTimeout( () => { | ||
| button.classList.remove( 'staging-button-highlighted' ); | ||
| }, 3000 ); |
There was a problem hiding this comment.
Not sure if three seconds is enough or not, leaving it here for feedback
There was a problem hiding this comment.
Just based on my testing, I think the 3 seconds is plenty, I'll add a video of it to my review.
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
|
For now, I just did one button to experiment with how this might look like. This is very much open to feedback cc @epeicher |
There was a problem hiding this comment.
The changes works nicely and the Add staging site + button gets highlighted as expected. 👌🏼🙂
When a staging site is already created, the link is gone as it should be:
I left one code suggestion inline.
Not related to the code itself: I have a little bit mixed feelings about using this specific pattern of a click highlighting another button.
It indeed helps focusing attention to the right place. I don't think we have used anything like this anywhere in Calypso before though (if I am not mistaken). I see that Marina is pinged in the related Linear issue so curious to hear what designers think too.
| <button | ||
| onClick={ onLocationClick } | ||
| style={ { | ||
| background: 'none', | ||
| border: 'none', | ||
| padding: 0, | ||
| textDecoration: 'none', | ||
| cursor: 'pointer', | ||
| color: '#3858e9', | ||
| font: 'inherit', | ||
| } } | ||
| > | ||
| { item.location } | ||
| </button> |
There was a problem hiding this comment.
What if we used the Button component with its link variant instead? https://wordpress.github.io/gutenberg/?path=/docs/components-button--docs
Less styling should be necessary:
diff --git a/client/sites/staging-site/components/staging-site-management-move-info/index.tsx b/client/sites/staging-site/components/staging-site-management-move-info/index.tsx
index 924ff94d3b7..f4203a24a97 100644
--- a/client/sites/staging-site/components/staging-site-management-move-info/index.tsx
+++ b/client/sites/staging-site/components/staging-site-management-move-info/index.tsx
@@ -3,6 +3,7 @@ import {
Card,
CardBody,
Icon,
+ Button,
__experimentalText as Text,
__experimentalHeading as Heading,
__experimentalVStack as VStack,
@@ -126,20 +127,13 @@ const InfoCard: FunctionComponent< InfoCardProps > = ( { item, onLocationClick }
</a>
) }
{ onLocationClick && ! item.link && (
- <button
+ <Button
onClick={ onLocationClick }
- style={ {
- background: 'none',
- border: 'none',
- padding: 0,
- textDecoration: 'none',
- cursor: 'pointer',
- color: '#3858e9',
- font: 'inherit',
- } }
+ variant="link"
+ style={ { textDecoration: 'none' } }
>
{ item.location }
- </button>
+ </Button>
) }
{ ! item.link && ! onLocationClick && item.location }
</Text>There was a problem hiding this comment.
IMO the highlight works well and the 3 second duration is enough to get my attention:
CleanShot.2025-08-08.at.16.16.47.mp4
When clicking the Add button while it's highlighted, the highlight class is removed as described. However, the focused state of the button looks very similar to the highlight. Maybe we should reset the focus state as well when the button is disabled. 🤔
|
|
||
| setTimeout( () => { | ||
| button.classList.remove( 'staging-button-highlighted' ); | ||
| }, 3000 ); |
There was a problem hiding this comment.
Just based on my testing, I think the 3 seconds is plenty, I'll add a video of it to my review.
I like the functionality, as it indicates to the user where to click, helping with the transition to the new dashboard. I updated the priority to Low as this is a temporary banner, and @wojtekn suggested not to overcomplicate it. But if we improve UX, I would go for it as long the complexity is encapsulated in the components that will be deleted in the future 🙁 |
Related to DOTCOM-14115
Proposed Changes
This PR adds a highlight around the
Add staging sitebutton when you click onLocated in top navigationbutton in theCreate new staging sitecard. It should be available only on production and not on staging sites:Testing Instructions
/staging-site/{yourAtomicSite}Staging sitetabCreate staging site cardLocated in the top navigationAdd staging sitegets highlightedPre-merge Checklist