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

Commit a6cd529

Browse files
AljulluAljullu
authored
Update @wordpress/components to v. 11.1.1 and @wordpress/base-styles to v. 3.2.0 (#3457)
* Update @wordpress/components and @wordpress/base-styles * Fix JS warning in Select/downshift * Remove color definitions that are now imported from @wordpress/base-styles. Fixes #3311 * Use -unit values from @wordpress/base-styles. Fixes #3313 * Update snapshots * Fix payment methods test * Don't extract dependencies that are not available in WP 5.3 * Avoid extracting @wordpress/compose since last version doesn't have resize observer * Remove unnecessary uses of @wordpress/compose in a frontend scripts * Add missing spaces
1 parent e05daaa commit a6cd529

File tree

11 files changed

+302
-455
lines changed

11 files changed

+302
-455
lines changed

‎assets/css/abstracts/_colors.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
11
@import "node_modules/@wordpress/base-styles/colors";
22
@import "node_modules/@automattic/color-studio/dist/color-variables";
33

4-
// @todo remove when `@woocommerce/base-styles` is updated.
5-
// Greys
6-
$black: #000; // Use only when you truly need pure black. For UI, use $gray-900.
7-
$gray-100: #f0f0f0; // Used for light gray backgrounds.
8-
$gray-200: #e0e0e0; // Used sparingly for light borders.
9-
$gray-300: #ddd; // Used for most borders.
10-
$gray-400: #ccc;
11-
$gray-600: #949494; // Meets 3:1 UI or large text contrast against white.
12-
$gray-700: #757575; // Meets 4.6:1 text contrast against white.
13-
$gray-900: #1e1e1e;
14-
$white: #fff;
15-
164
// Bright colors
175
$no-stock-color: $alert-red;
186
$low-stock-color: $alert-yellow;

‎assets/css/abstracts/_variables.scss‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
@import "node_modules/@wordpress/base-styles/variables";
22

3-
// @todo replace with $grid-unit values when `@woocommerce/base-styles` is updated.
4-
// see: https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36
5-
$gap-largest: 40px; // $grid-unit-50
6-
$gap-larger: 36px;
7-
$gap-large: 24px; // $grid-unit-30
8-
$gap: 16px; // $grid-unit-20
9-
$gap-small: 12px; // $grid-unit-15
10-
$gap-smaller: 8px; // $grid-unit-10
11-
$gap-smallest: 4px; // $grid-unit-05
3+
$gap-largest: $grid-unit-50;
4+
$gap-larger: 4.5 * $grid-unit;
5+
$gap-large: $grid-unit-30;
6+
$gap: $grid-unit-20;
7+
$gap-small: $grid-unit-15;
8+
$gap-smaller: $grid-unit-10;
9+
$gap-smallest: $grid-unit-05;
1210

1311
// Cart block
1412
$cart-image-width: 5rem;

‎assets/js/atomic/blocks/product-elements/add-to-cart/frontend.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* External dependencies
33
*/
4-
import { compose } from '@wordpress/compose';
54
import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
65

76
/**
@@ -10,4 +9,4 @@ import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attribu
109
import Block from './block';
1110
import attributes from './attributes';
1211

13-
export default compose( withFilteredAttributes( attributes ) )( Block );
12+
export default withFilteredAttributes( attributes )( Block );

‎assets/js/atomic/blocks/product-elements/image/frontend.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* External dependencies
33
*/
4-
import { compose } from '@wordpress/compose';
54
import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
65

76
/**
@@ -10,4 +9,4 @@ import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attribu
109
import Block from './block';
1110
import attributes from './attributes';
1211

13-
export default compose( withFilteredAttributes( attributes ) )( Block );
12+
export default withFilteredAttributes( attributes )( Block );

‎assets/js/atomic/blocks/product-elements/title/frontend.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* External dependencies
33
*/
4-
import { compose } from '@wordpress/compose';
54
import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
65

76
/**
@@ -10,4 +9,4 @@ import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attribu
109
import Block from './block';
1110
import attributes from './attributes';
1211

13-
export default compose( withFilteredAttributes( attributes ) )( Block );
12+
export default withFilteredAttributes( attributes )( Block );

‎assets/js/base/components/chip/test/__snapshots__/index.js.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,9 @@ exports[`RemovableChip should render custom aria label 1`] = `
106106
onKeyDown={[Function]}
107107
>
108108
<svg
109-
aria-hidden="true"
109+
aria-hidden={true}
110110
className="wc-block-components-chip__remove-icon"
111-
focusable="false"
111+
focusable={false}
112112
height={16}
113113
role="img"
114114
viewBox="0 0 20 20"
@@ -148,9 +148,9 @@ exports[`RemovableChip should render default aria label if text is a node 1`] =
148148
onKeyDown={[Function]}
149149
>
150150
<svg
151-
aria-hidden="true"
151+
aria-hidden={true}
152152
className="wc-block-components-chip__remove-icon"
153-
focusable="false"
153+
focusable={false}
154154
height={16}
155155
role="img"
156156
viewBox="0 0 20 20"
@@ -188,9 +188,9 @@ exports[`RemovableChip should render screen reader text aria label 1`] = `
188188
onKeyDown={[Function]}
189189
>
190190
<svg
191-
aria-hidden="true"
191+
aria-hidden={true}
192192
className="wc-block-components-chip__remove-icon"
193-
focusable="false"
193+
focusable={false}
194194
height={16}
195195
role="img"
196196
viewBox="0 0 20 20"
@@ -223,9 +223,9 @@ exports[`RemovableChip should render text and the remove button 1`] = `
223223
onKeyDown={[Function]}
224224
>
225225
<svg
226-
aria-hidden="true"
226+
aria-hidden={true}
227227
className="wc-block-components-chip__remove-icon"
228-
focusable="false"
228+
focusable={false}
229229
height={16}
230230
role="img"
231231
viewBox="0 0 20 20"
@@ -258,9 +258,9 @@ exports[`RemovableChip should render with disabled remove button 1`] = `
258258
onKeyDown={[Function]}
259259
>
260260
<svg
261-
aria-hidden="true"
261+
aria-hidden={true}
262262
className="wc-block-components-chip__remove-icon"
263-
focusable="false"
263+
focusable={false}
264264
height={16}
265265
role="img"
266266
viewBox="0 0 20 20"
@@ -294,9 +294,9 @@ exports[`RemovableChip with removeOnAnyClick should be a button when removeOnAny
294294
className="wc-block-components-chip__remove"
295295
>
296296
<svg
297-
aria-hidden="true"
297+
aria-hidden={true}
298298
className="wc-block-components-chip__remove-icon"
299-
focusable="false"
299+
focusable={false}
300300
height={16}
301301
role="img"
302302
viewBox="0 0 20 20"

‎assets/js/base/components/payment-methods/test/payment-methods.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,12 @@ describe( 'PaymentMethods', () => {
5353
);
5454

5555
await waitFor( () => {
56-
const noPaymentMethods = screen.queryByText(
56+
const noPaymentMethods = screen.queryAllByText(
5757
/no payment methods available/
5858
);
59-
expect( noPaymentMethods ).not.toBeNull();
59+
// We might get more than one match because the `speak()` function
60+
// creates an extra `div` with the notice contents used for a11y.
61+
expect( noPaymentMethods.length ).toBeGreaterThanOrEqual( 1 );
6062
} );
6163
} );
6264

‎assets/js/base/components/select/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Select = ( {
3232
onChange( selectedItem.key );
3333
} }
3434
options={ options }
35-
value={ value }
35+
value={ value || null }
3636
/>
3737
{ feedback }
3838
</div>

‎bin/webpack-helpers.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@ const path = require( 'path' );
66
const NODE_ENV = process.env.NODE_ENV || 'development';
77
const FORCE_MAP = process.env.FORCE_MAP || false;
88

9+
// Some packages are not available in legacy versions of WordPress, so we don't
10+
// want to extract them.
11+
const requiredPackagesInWPLegacy = [
12+
'@wordpress/compose', // WP 5.3 version doesn't include `useResizeObserver`.
13+
'@wordpress/primitives', // Not included in WP 5.3.
14+
'@wordpress/warning', // Not included in WP 5.3.
15+
];
16+
917
const wcDepMap = {
1018
'@woocommerce/blocks-registry': [ 'wc', 'wcBlocksRegistry' ],
1119
'@woocommerce/settings': [ 'wc', 'wcSettings' ],
@@ -93,12 +101,18 @@ function findModuleMatch( module, match ) {
93101
}
94102

95103
const requestToExternal = ( request ) => {
104+
if ( requiredPackagesInWPLegacy.includes( request ) ) {
105+
return false;
106+
}
96107
if ( wcDepMap[ request ] ) {
97108
return wcDepMap[ request ];
98109
}
99110
};
100111

101112
const requestToHandle = ( request ) => {
113+
if ( requiredPackagesInWPLegacy.includes( request ) ) {
114+
return false;
115+
}
102116
if ( wcHandleMap[ request ] ) {
103117
return wcHandleMap[ request ];
104118
}

0 commit comments

Comments
 (0)