Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Store: Update ProductSearch component for better variation support, multiple selections #19531

Merged
merged 28 commits into from
Nov 9, 2017
Merged

Store: Update ProductSearch component for better variation support, multiple selections #19531

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
766b65a
Remove existing `ProductSearch` component & style, copy over `Applies…
ryelle Nov 2, 2017
e02af8f
Split each product row into a new component, `ProductSearchRow`, whic…
ryelle Nov 2, 2017
4c79b30
Pull in product variations
ryelle Nov 3, 2017
d123a70
Style the variations form
ryelle Nov 3, 2017
7421d53
Clean up component, bring in the price display
ryelle Nov 3, 2017
7a8b10a
Update row display when a variation is selected
ryelle Nov 3, 2017
ead4472
Increase number of variations we can load
ryelle Nov 3, 2017
dd7df28
Move general functions into a helper utils file
ryelle Nov 3, 2017
1e04682
Clean up component
ryelle Nov 3, 2017
8f1f4b8
Add support for passing arrays to add/remove product IDs
ryelle Nov 4, 2017
988d6ac
Pull row-rendering into a separate function, so we can use the same t…
ryelle Nov 4, 2017
1dafc04
Handle selecting variations when the parent is unselected, delete uns…
ryelle Nov 4, 2017
c87bba0
Split up row-rendering function into smaller functions
ryelle Nov 6, 2017
74ee098
Add button to “Customize” variable products
ryelle Nov 6, 2017
3ecada0
Retain selected variations even if the components are hidden by search
ryelle Nov 6, 2017
aa5733b
Add attribute support into search by collapsing all attributes into a…
ryelle Nov 6, 2017
ecebc67
Fix singular display/interactions
ryelle Nov 6, 2017
ae3e2d9
Fix “Customize” button behavior
ryelle Nov 6, 2017
94a3b97
Update README
ryelle Nov 6, 2017
3a4188f
Fix props destructuring, use the correct name but map to the new/old …
ryelle Nov 7, 2017
c05afa8
Style the variation selector
jameskoster Nov 8, 2017
6e14d29
Bring back FormLabel for accessibility, update variation form button …
ryelle Nov 8, 2017
5528e92
Address PR feedback
ryelle Nov 8, 2017
24a6c25
Fix destructuring of new/old props
ryelle Nov 8, 2017
69a0cea
Fix issue where selecting an already-selected variation clears the re…
ryelle Nov 8, 2017
a3370f8
Update label text & the default select text.
ryelle Nov 8, 2017
d488f4b
Reset the form back to initial state after selecting a variation
ryelle Nov 8, 2017
fd909c2
Address PR feedback: don’t assign to this.state directly, update opti…
ryelle Nov 8, 2017
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
Prev Previous commit
Next Next commit
Style the variation selector 
Adds a class to the variations wrapper
Puts the variations notice inside a `Notice`
  • Loading branch information
@jameskoster @ryelle
jameskoster authored and ryelle committed Nov 8, 2017
commit c05afa8372e6cf78099fdbdd2c4d10993cbac3d0
2 changes: 1 addition & 1 deletion client/extensions/woocommerce/components/product-search/row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ class ProductSearchRow extends Component {
}

return (
<div>
<div className="product-search__variation-selections-and-form">
{ this.renderSelectedVariations() }
<ProductVariations product={ this.props.product } onChange={ this.updateItem } />
</div>
Expand Down
35 changes: 29 additions & 6 deletions client/extensions/woocommerce/components/product-search/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@
cursor: pointer;
border-bottom: 1px solid $gray-light;

&:hover {
background: lighten( $gray-light, 2% );
}

&:last-child {
border-bottom: 0;
}
Expand Down Expand Up @@ -68,6 +64,14 @@
}
}

.count {
width: 16px;
}

.form-checkbox + .product-search__list-image {
margin-left: 26px;
}

.button {
position: absolute;
top: 12px;
Expand All @@ -76,8 +80,23 @@
}
}

.product-search__variation-selections-and-form {
background: lighten( $gray, 35% );
border-top: 1px solid $gray-light;

&:empty {
border: 0;
}
}

.product-search__variations {
padding: 8px 24px 16px;
padding: 16px;
padding-left: 58px;
border-top: 1px solid $gray-light;

.notice {
margin-bottom: 16px;
}

.form-legend {
font-weight: 400;
Expand All @@ -100,7 +119,11 @@
.product-search__variation-field {
flex: 0 1 calc(50% - 10px);
max-width: calc(50% - 10px);
margin-bottom: 20px;
margin-bottom: 16px;

&:last-child {
margin-bottom: 0;
}
}
}
}
6 changes: 3 additions & 3 deletions client/extensions/woocommerce/components/product-search/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { localize } from 'i18n-calypso';
*/
import FormFieldset from 'components/forms/form-fieldset';
import FormLabel from 'components/forms/form-label';
import FormLegend from 'components/forms/form-legend';
import FormSelect from 'components/forms/form-select';
import Notice from 'components/notice';

class ProductVariations extends Component {
static propTypes = {
Expand Down Expand Up @@ -67,12 +67,12 @@ class ProductVariations extends Component {
return (
<div className="product-search__variations">
<FormFieldset>
<FormLegend>
<Notice showDismiss={ false }>
{ translate(
'%(product)s has variations. Select a specific customization, or add the base product.',
{ args: { product: product.name } }
) }
</FormLegend>
</Notice>
<div className="product-search__variation-fields">
{ attributes.map( this.renderAttribute ) }
</div>
Expand Down