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

Commit 96d363a

Browse files
AljulluAljullu
authored
Update item count badge styles (#2619)
* Update item count badge styles * Make sure item count badge doesn't break in multiple lines * Make item count badge have white background * Add docs * Move order summary CSS properties outside of the sidebar class to reduce specificity * Move Order summary to its own component
1 parent bb6a78c commit 96d363a

File tree

7 files changed

+111
-93
lines changed

7 files changed

+111
-93
lines changed

‎assets/js/base/components/cart-checkout/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export { default as AddressForm } from './address-form';
22
export { default as Button } from './button';
33
export { default as CheckoutForm } from './form';
44
export { default as FormStep } from './form-step';
5+
export { default as OrderSummary } from './order-summary';
56
export { default as PlaceOrderButton } from './place-order-button';
67
export { default as Policies } from './policies';
78
export { default as ProductImage } from './product-image';

assets/js/blocks/cart-checkout/checkout/sidebar/order-summary.js renamed to assets/js/base/components/cart-checkout/order-summary/index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import Panel from '@woocommerce/base-components/panel';
99
/**
1010
* Internal dependencies
1111
*/
12-
import CheckoutOrderSummaryItem from './order-summary-item.js';
12+
import OrderSummaryItem from './order-summary-item.js';
1313

14-
const CheckoutOrderSummary = ( { cartItems = [] } ) => {
14+
const OrderSummary = ( { cartItems = [] } ) => {
1515
const { isLarge, hasContainerWidth } = useContainerWidthContext();
1616

1717
if ( ! hasContainerWidth ) {
@@ -20,19 +20,19 @@ const CheckoutOrderSummary = ( { cartItems = [] } ) => {
2020

2121
return (
2222
<Panel
23-
className="wc-block-order-summary"
23+
className="wc-block-components-order-summary"
2424
initialOpen={ isLarge }
2525
title={
26-
<span className="wc-block-order-summary__button-text">
26+
<span className="wc-block-components-order-summary__button-text">
2727
{ __( 'Order summary', 'woo-gutenberg-products-block' ) }
2828
</span>
2929
}
3030
titleTag="h2"
3131
>
32-
<div className="wc-block-order-summary__content">
32+
<div className="wc-block-order-components-summary__content">
3333
{ cartItems.map( ( cartItem ) => {
3434
return (
35-
<CheckoutOrderSummaryItem
35+
<OrderSummaryItem
3636
key={ cartItem.key }
3737
cartItem={ cartItem }
3838
/>
@@ -43,10 +43,10 @@ const CheckoutOrderSummary = ( { cartItems = [] } ) => {
4343
);
4444
};
4545

46-
CheckoutOrderSummary.propTypes = {
46+
OrderSummary.propTypes = {
4747
cartItems: PropTypes.arrayOf(
4848
PropTypes.shape( { key: PropTypes.string.isRequired } )
4949
),
5050
};
5151

52-
export default CheckoutOrderSummary;
52+
export default OrderSummary;

assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js renamed to assets/js/base/components/cart-checkout/order-summary/order-summary-item.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import PropTypes from 'prop-types';
1515
import Dinero from 'dinero.js';
1616

17-
const CheckoutOrderSummaryItem = ( { cartItem } ) => {
17+
const OrderSummaryItem = ( { cartItem } ) => {
1818
const {
1919
images,
2020
low_stock_remaining: lowStockRemaining = null,
@@ -37,9 +37,9 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
3737
.getAmount();
3838

3939
return (
40-
<div className="wc-block-order-summary-item">
41-
<div className="wc-block-order-summary-item__image">
42-
<div className="wc-block-order-summary-item__quantity">
40+
<div className="wc-block-components-order-summary-item">
41+
<div className="wc-block-components-order-summary-item__image">
42+
<div className="wc-block-components-order-summary-item__quantity">
4343
<Label
4444
label={ quantity }
4545
screenReaderLabel={ sprintf(
@@ -51,11 +51,11 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
5151
</div>
5252
<ProductImage image={ images.length ? images[ 0 ] : {} } />
5353
</div>
54-
<div className="wc-block-order-summary-item__description">
55-
<div className="wc-block-order-summary-item__header">
54+
<div className="wc-block-components-order-summary-item__description">
55+
<div className="wc-block-components-order-summary-item__header">
5656
<ProductName permalink={ permalink } name={ name } />
5757
<ProductPrice
58-
className="wc-block-order-summary-item__total-price"
58+
className="wc-block-components-order-summary-item__total-price"
5959
currency={ currency }
6060
value={ linePrice }
6161
/>
@@ -71,7 +71,7 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
7171
);
7272
};
7373

74-
CheckoutOrderSummaryItem.propTypes = {
74+
OrderSummaryItem.propTypes = {
7575
cartItems: PropTypes.shape( {
7676
images: PropTypes.array,
7777
low_stock_remaining: PropTypes.number,
@@ -87,4 +87,4 @@ CheckoutOrderSummaryItem.propTypes = {
8787
} ),
8888
};
8989

90-
export default CheckoutOrderSummaryItem;
90+
export default OrderSummaryItem;

‎assets/js/blocks/cart-checkout/checkout/sidebar/index.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* External dependencies
33
*/
44
import {
5+
OrderSummary,
56
SubtotalsItem,
67
TotalsFeesItem,
78
TotalsCouponCodeInput,
@@ -18,11 +19,6 @@ import {
1819
} from '@woocommerce/block-settings';
1920
import { useStoreCartCoupons } from '@woocommerce/base-hooks';
2021

21-
/**
22-
* Internal dependencies
23-
*/
24-
import OrderSummary from './order-summary.js';
25-
2622
const CheckoutSidebar = ( {
2723
cartCoupons = [],
2824
cartItems = [],

‎assets/js/blocks/cart-checkout/checkout/style.scss‎

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -22,94 +22,94 @@
2222
.wc-block-checkout__sidebar {
2323
.wc-block-product-name {
2424
color: inherit;
25+
flex-grow: 1;
26+
// Required by IE11.
27+
flex-basis: 0;
2528
}
29+
}
2630

27-
.wc-block-order-summary {
28-
border: 0;
29-
}
30-
31-
.wc-block-order-summary__content {
32-
display: table;
33-
width: 100%;
34-
}
31+
.wc-block-components-order-summary {
32+
border: 0;
33+
}
3534

36-
.wc-block-order-summary-item {
37-
display: table-row;
38-
width: 100%;
35+
.wc-block-components-order-summary__content {
36+
display: table;
37+
width: 100%;
38+
}
3939

40-
> div {
41-
border-bottom: 1px solid $core-grey-light-600;
42-
}
40+
.wc-block-components-order-summary-item {
41+
display: table-row;
42+
width: 100%;
4343

44-
&:last-child {
45-
> div {
46-
border-bottom: none;
47-
padding-bottom: 0;
48-
}
49-
}
44+
> div {
45+
border-bottom: 1px solid $core-grey-light-600;
5046
}
5147

52-
.wc-block-order-summary-item__image,
53-
.wc-block-order-summary-item__description {
54-
display: table-cell;
55-
vertical-align: top;
48+
&:last-child {
49+
> div {
50+
border-bottom: none;
51+
padding-bottom: 0;
52+
}
5653
}
54+
}
5755

58-
.wc-block-order-summary-item__image {
59-
width: #{$gap-large * 2};
60-
padding-top: $gap;
61-
padding-bottom: $gap;
62-
position: relative;
56+
.wc-block-components-order-summary-item__image,
57+
.wc-block-components-order-summary-item__description {
58+
display: table-cell;
59+
vertical-align: top;
60+
}
6361

64-
> img {
65-
width: #{$gap-large * 2};
66-
max-width: #{$gap-large * 2};
67-
}
68-
}
62+
.wc-block-components-order-summary-item__image {
63+
width: #{$gap-large * 2};
64+
padding-top: $gap;
65+
padding-bottom: $gap;
66+
position: relative;
6967

70-
.wc-block-order-summary-item__quantity {
71-
@include font-size(smaller);
72-
align-items: center;
73-
background: #fff;
74-
border: 2px solid currentColor;
75-
border-radius: 50%;
76-
// Use box-shadow to apply an extra border to the quantity.
77-
// This distinguishes it from the product image.
78-
box-shadow: 0 0 0 2px #fff;
79-
display: flex;
80-
line-height: 1;
81-
min-height: 22px;
82-
position: absolute;
83-
justify-content: center;
84-
min-width: 22px;
85-
right: -10px;
86-
margin: -10px 0 0 0;
68+
> img {
69+
width: #{$gap-large * 2};
70+
max-width: #{$gap-large * 2};
8771
}
72+
}
8873

89-
.wc-block-order-summary-item__description {
90-
padding-left: $gap-large;
91-
padding-top: $gap;
92-
padding-bottom: $gap;
93-
line-height: 1.375;
74+
.wc-block-components-order-summary-item__quantity {
75+
@include font-size(smaller);
76+
align-items: center;
77+
background: #fff;
78+
border: 2px solid;
79+
border-radius: 1em;
80+
box-shadow: 0 0 0 2px #fff;
81+
color: #000;
82+
display: flex;
83+
line-height: 1;
84+
min-height: 20px;
85+
padding: 0 0.4em;
86+
position: absolute;
87+
justify-content: center;
88+
min-width: 20px;
89+
right: 0;
90+
top: $gap;
91+
transform: translate(50%, -50%);
92+
white-space: nowrap;
93+
z-index: 1;
94+
}
9495

95-
p,
96-
.wc-block-product-metadata {
97-
line-height: 1.375;
98-
margin-top: #{ ( $gap-large - $gap ) / 2 };
99-
}
100-
}
96+
.wc-block-components-order-summary-item__description {
97+
padding-left: $gap-large;
98+
padding-top: $gap;
99+
padding-bottom: $gap;
100+
line-height: 1.375;
101101

102-
.wc-block-order-summary-item__header {
103-
display: flex;
104-
flex-wrap: wrap;
105-
justify-content: space-between;
102+
p,
103+
.wc-block-product-metadata {
104+
line-height: 1.375;
105+
margin-top: #{ ( $gap-large - $gap ) / 2 };
106106
}
107+
}
107108

108-
.wc-block-product-name {
109-
flex-grow: 1;
110-
// Required by IE11.
111-
flex-basis: 0;
112-
}
109+
.wc-block-components-order-summary-item__header {
110+
display: flex;
111+
flex-wrap: wrap;
112+
justify-content: space-between;
113113
}
114114

115115
.wc-block-components-express-checkout-continue-rule {

‎docs/theming/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22

33
This page includes all documentation regarding WooCommerce Blocks and themes.
44

5+
- [Cart and Checkout](./cart-and-checkout.md)
56
- [Product grid blocks style update in 2.7.0](./product-grid-270.md)

‎docs/theming/cart-and-checkout.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Cart and Checkout Blocks theming
2+
3+
## Item quantity badge
4+
5+
The item quantity badge is the number that appears next to the image in the _Order summary_ section of the _Checkout_ block sidebar.
6+
7+
<img src="https://user-images.githubusercontent.com/3616980/83862844-c8559500-a722-11ea-9653-2fc8bcd544d2.png" alt="Order summary screenshot" width="234" />
8+
9+
By default, it uses a combination of black and white borders and shadows so it has enough contrast with themes with light and dark backgrounds. Themes can modify the colors with their own palette with a single CSS selector and four properties. For example:
10+
11+
```CSS
12+
.wc-block-components-order-summary-item__quantity {
13+
background: #f9f4ee;
14+
border-color: #4b3918;
15+
box-shadow: 0 0 0 2px #f9f4ee;
16+
color: #4b3918;
17+
}
18+
```
19+
20+
<img src="https://user-images.githubusercontent.com/3616980/83863109-2e421c80-a723-11ea-9bf7-2033a96cf5b2.png" alt="Order summary screenshot with custom styles for the item quantity badge" width="231" />

0 commit comments

Comments
 (0)