Replace the icon of the button "close checkout" from `chevron-left` to `cross`

[southp]

Related to Automattic/dotcom-forge#7674

Proposed Changes

This PR updates the "close checkout" button icon from chevron-left to cross:

In production	In this PR

Why are these changes being made?

Using the chevron-left icon may lead to false expectation of what the button does like what we saw in the discussion in Automattic/dotcom-forge#7674. It looks like a back navigation button, while it's actually a close button if we hover on it:

The cross icon matches the intended behavior better in this case.

Testing Instructions

Go to the checkout screen and confirm that the icon has been updated accordingly.

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?
• [ ] 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 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)?

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-112333

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-112333&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-112333&env=a8c-for-agencies

[matticbot]

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

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

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/change-close-checkout-icon-as-close on your sandbox.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[southp]

@Automattic/shilling Could you help me confirm if this change makes sense? I'm wondering if there is any context justifying chevron-left that I'm not aware of :)

[jjchrisdiehl]

@Automattic/shilling Could you help me confirm if this change makes sense? I'm wondering if there is any context justifying chevron-left that I'm not aware of :)

I'm not sure of any historical context here other than "Jetpack and Akismet will not have a back button at all, but dotcom will."

IMO, I think the chevron looks more correct as it suggests directionality whereas a cross suggests "closing a modal or window" which isn't really the case here?

[michaeldcain]

The change from an "x" to the chevron was made as part of this design refresh: pbOQVh-3pj-p2

I believe @JanaMW27 requested the change, but it could have just been part of the alignment with other Calypso screens. I don't have any objection to this change back to an "x".

[southp]

@jjchrisdiehl Thanks for pitching in. It's very helpful to know that Jetpack and Akismet doesn't have that button at all :)

IMO, I think the chevron looks more correct as it suggests directionality whereas a cross suggests "closing a modal or window" which isn't really the case here?

The issue here is that it actually doesn't work as back naivgation, but as closing the checkout page like its tooltip suggested. On wp.com, the ideal behavior is to proceed to the next step as I outlined in this comment. For example, on the main onboarding flow, users go through: the user step -> the domain step -> the plans step -> (checkout if there is a paid item in the cart) -> launch pad. When they click that button, they should arrive the launch pad. Thus, it's great to know that by updating the icon here Jetpack and Akismet likely won't be affected, since I'm better aware of the wp.com side of things.

Does that make sense to you?