Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Split Checkout block component into smaller files #3062

Merged
merged 9 commits into from
Aug 31, 2020
Merged

Split Checkout block component into smaller files #3062

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a6fa273
Rename CheckoutForm to Form
Aljullu Aug 27, 2020
0a47227
Create CheckoutForm component
Aljullu Aug 27, 2020
5d0e91b
Simplify directory structure
Aljullu Aug 27, 2020
ac54fcf
Add docs about class name changes
Aljullu Aug 27, 2020
9f7701c
Add PropTypes to CheckoutForm
Aljullu Aug 27, 2020
fbb5d2e
Update skeleton class name
Aljullu Aug 27, 2020
39c2824
Extract LoginPrompt
Aljullu Aug 27, 2020
bc03b89
Move loginToCheckoutUrl to a constant
Aljullu Aug 31, 2020
0710e73
Move replaced class name docs to 3.4.0 specific file
Aljullu Aug 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions assets/js/base/components/cart-checkout/form-step/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.wc-block-components-checkout-form {
.wc-block-components-form {
counter-reset: checkout-step;
}

.wc-block-components-checkout-form .wc-block-components-checkout-step {
.wc-block-components-form .wc-block-components-checkout-step {
position: relative;
border: none;
padding: 0 0 0 $gap-larger;
Expand All @@ -22,7 +22,7 @@
padding-bottom: em($gap-large);
}

.wc-block-components-checkout-form .wc-block-components-checkout-step:disabled {
.wc-block-components-form .wc-block-components-checkout-step:disabled {
opacity: 0.6;
}

Expand Down
4 changes: 0 additions & 4 deletions assets/js/base/components/cart-checkout/form/style.scss
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion assets/js/base/components/cart-checkout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
export { default as AddressForm } from './address-form';
export { default as CheckoutForm } from './form';
export { default as FormStep } from './form-step';
export { default as OrderSummary } from './order-summary';
export { default as PlaceOrderButton } from './place-order-button';
Expand Down
11 changes: 2 additions & 9 deletions ...se/components/cart-checkout/form/index.js → assets/js/base/components/form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,6 @@
import classnames from 'classnames';
import PropTypes from 'prop-types';

/**
* Internal dependencies
*/
import './style.scss';

const CheckoutForm = ( {
className,
children,
Expand All @@ -18,12 +13,10 @@ const CheckoutForm = ( {
event.preventDefault();
onSubmit( event );
};

return (
<form
className={ classnames(
'wc-block-components-checkout-form',
className
) }
className={ classnames( 'wc-block-components-form', className ) }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting this change - not just a refactor, this changes the classname for form (and others). Is there any potential theme impact? Is this form component abstract or is it somewhat coupled to checkout?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

e.g. is this NumberedForm - where are the checkout-specific styles/behaviour (vs generic)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assumed this is superseded by #3062 (comment), correct? 🙂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this form component abstract or is it somewhat coupled to checkout?
e.g. is this NumberedForm - where are the checkout-specific styles/behaviour (vs generic)?

I assumed this is superseded by #3062 (comment), correct? 🙂

Yes ish - though I am still curious how generic this Form component is, might need more work/tweaks when used elsewhere (not in Checkout). We can iterate when that happens, if it is an issue.

onSubmit={ formOnSubmit }
>
{ children }
Expand Down
Loading