composite-checkout: Make review step always visible (1) #42678
Conversation
We make it always "inactive" and "complete" so that it displays a checkmark as its icon and then show its content with `completeStepContent`.
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: Sections (~228 bytes removed 📉 [gzipped]) Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. Legend What is parsed and gzip size?Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Generated by performance advisor bot at iscalypsofastyet.com. |
|
I made a minor style and copy tweak but otherwise looks great! Here's an updated screenshot:
|
michaeldcain
added
[Feature] Checkout
sirbrillig
deleted the
update/composite-checkout-review-step-always-active
branch
|
This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/3684653 Thank you @sirbrillig for including a screenshot in the description! This is really helpful for our translators. |
sirbrillig
changed the title
* Bring back InactiveOrderReview from #42678 * Remove `totalStep` prop from `CheckoutStepBody` This was only used for some computational CSS that was being overwritten in the same rule and could be achieved with a :last-of-type selector. * stepNumber isn't required * Add areStepsActive prop to CheckoutSteps component * Allow checkout review to be editable and default to summary view * Move nextStepNumber logic to CheckoutStep for progress control * Prevent coupon field from redirecting steps on complete This is leftover from when the first step was the Payment Method step. Adding a coupon happened in the final step, and could require more information from the payment method step. It doesn't break anything currently, but could be buggy in the future. * Use WPCheckoutOrderReview and isSummaryVisible prop for inactive step * Rename isSummaryVisible to isSummary * Move summary styles to class selector * Remove unused inactive step component * goToNextStep should be undefined, when condition fails * Pass couponFieldStateProps to WPCheckoutOrderReview in summary view * Update strings * Make inactive CheckoutStep(s) grey * Update summary styles to match design * Update those tests * Updated font sizing and cleaned up spacing around coupon field * Set CheckoutSteps to active when step is edited * Use CheckoutSingleStep data provider to hide edit button on inactive steps * Incorrect prop name Co-authored-by: fditrapani <filippo.di.trapani@a8c.com>
|
Translation for this Pull Request has now been finished. |
Changes proposed in this Pull Request
This PR is an experimental design change which modifies the first step of checkout so that it is always visible and active. This means that it no longer has a "Continue" button and will never be hidden when another step is active.
Testing instructions
View composite checkout and make sure that it looks and works as expected. Notable things to try: