From 47493f12f055937d3fd0f8220256602177be1bee Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Mon, 16 Oct 2023 14:37:47 +0100
Subject: [PATCH 1/4] Move Label component to components package

---
 packages/components/index.js                                     | 1 +
 {assets/js/base => packages}/components/label/index.tsx          | 0
 .../components/label/test/__snapshots__/index.js.snap            | 0
 {assets/js/base => packages}/components/label/test/index.js      | 0
 4 files changed, 1 insertion(+)
 rename {assets/js/base => packages}/components/label/index.tsx (100%)
 rename {assets/js/base => packages}/components/label/test/__snapshots__/index.js.snap (100%)
 rename {assets/js/base => packages}/components/label/test/index.js (100%)

diff --git a/packages/components/index.js b/packages/components/index.js
index f26fcde77ba..78369d615ec 100644
--- a/packages/components/index.js
+++ b/packages/components/index.js
@@ -1,3 +1,4 @@
 export { default as CheckboxList } from './checkbox-list';
+export { default as Label } from './label';
 export { default as FormattedMonetaryAmount } from './formatted-monetary-amount';
 export { Chip, RemovableChip } from './chip';
diff --git a/assets/js/base/components/label/index.tsx b/packages/components/label/index.tsx
similarity index 100%
rename from assets/js/base/components/label/index.tsx
rename to packages/components/label/index.tsx
diff --git a/assets/js/base/components/label/test/__snapshots__/index.js.snap b/packages/components/label/test/__snapshots__/index.js.snap
similarity index 100%
rename from assets/js/base/components/label/test/__snapshots__/index.js.snap
rename to packages/components/label/test/__snapshots__/index.js.snap
diff --git a/assets/js/base/components/label/test/index.js b/packages/components/label/test/index.js
similarity index 100%
rename from assets/js/base/components/label/test/index.js
rename to packages/components/label/test/index.js

From 293a54b9cee8371a43d586a87b8842af622cacbc Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Mon, 16 Oct 2023 15:57:14 +0100
Subject: [PATCH 2/4] Update imports of the Label component

---
 assets/js/atomic/blocks/product-elements/sale-badge/block.tsx | 2 +-
 .../cart-checkout/order-summary/order-summary-item.tsx        | 2 +-
 .../cart-checkout/shipping-rates-control-package/index.tsx    | 2 +-
 assets/js/base/components/filter-element-label/index.tsx      | 2 +-
 assets/js/base/components/filter-reset-button/index.tsx       | 2 +-
 assets/js/base/components/filter-submit-button/index.tsx      | 2 +-
 assets/js/base/components/load-more-button/index.tsx          | 2 +-
 assets/js/base/components/pagination/index.tsx                | 2 +-
 assets/js/base/components/sort-select/index.tsx               | 2 +-
 assets/js/blocks/active-filters/block.tsx                     | 2 +-
 assets/js/blocks/active-filters/utils.tsx                     | 3 +--
 .../cart-checkout-shared/payment-methods/payment-methods.js   | 2 +-
 packages/checkout/components/label/index.ts                   | 4 ++--
 13 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx b/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
index 5cd31f51f14..9284e5581ab 100644
--- a/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
diff --git a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
index 968192ed6b6..9e02428bf73 100644
--- a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { sprintf, _n } from '@wordpress/i18n';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import ProductName from '@woocommerce/base-components/product-name';
 import {
diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
index d5bc392cf3e..ab373d2ca75 100644
--- a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
+++ b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { _n, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Panel } from '@woocommerce/blocks-checkout';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 import { useCallback } from '@wordpress/element';
 import { useShippingData } from '@woocommerce/base-context/hooks';
 import { sanitizeHTML } from '@woocommerce/utils';
diff --git a/assets/js/base/components/filter-element-label/index.tsx b/assets/js/base/components/filter-element-label/index.tsx
index 4806d3bfb59..05e073367f0 100644
--- a/assets/js/base/components/filter-element-label/index.tsx
+++ b/assets/js/base/components/filter-element-label/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { _n, sprintf } from '@wordpress/i18n';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/filter-reset-button/index.tsx b/assets/js/base/components/filter-reset-button/index.tsx
index 17bbb3434b3..514af9077a6 100644
--- a/assets/js/base/components/filter-reset-button/index.tsx
+++ b/assets/js/base/components/filter-reset-button/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/filter-submit-button/index.tsx b/assets/js/base/components/filter-submit-button/index.tsx
index d1ab3cd2ef1..c332ad3807c 100644
--- a/assets/js/base/components/filter-submit-button/index.tsx
+++ b/assets/js/base/components/filter-submit-button/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/load-more-button/index.tsx b/assets/js/base/components/load-more-button/index.tsx
index 2c3f35e3ead..bc51c12331b 100644
--- a/assets/js/base/components/load-more-button/index.tsx
+++ b/assets/js/base/components/load-more-button/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 import type { MouseEventHandler } from 'react';
 
 /**
diff --git a/assets/js/base/components/pagination/index.tsx b/assets/js/base/components/pagination/index.tsx
index fcd03b0c787..c707e216a42 100644
--- a/assets/js/base/components/pagination/index.tsx
+++ b/assets/js/base/components/pagination/index.tsx
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import classNames from 'classnames';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/sort-select/index.tsx b/assets/js/base/components/sort-select/index.tsx
index 219cedbb27b..4deccbbdc0f 100644
--- a/assets/js/base/components/sort-select/index.tsx
+++ b/assets/js/base/components/sort-select/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 import { withInstanceId } from '@wordpress/compose';
 import type { ChangeEventHandler } from 'react';
 
diff --git a/assets/js/blocks/active-filters/block.tsx b/assets/js/blocks/active-filters/block.tsx
index a14786b2edb..7b6c03e10c7 100644
--- a/assets/js/blocks/active-filters/block.tsx
+++ b/assets/js/blocks/active-filters/block.tsx
@@ -6,7 +6,7 @@ import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
 import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
 import { useMemo, useEffect, useState } from '@wordpress/element';
 import classnames from 'classnames';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 import {
 	isAttributeQueryCollection,
 	isBoolean,
diff --git a/assets/js/blocks/active-filters/utils.tsx b/assets/js/blocks/active-filters/utils.tsx
index fc11d5f441e..0d641e98c97 100644
--- a/assets/js/blocks/active-filters/utils.tsx
+++ b/assets/js/blocks/active-filters/utils.tsx
@@ -3,8 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { formatPrice } from '@woocommerce/price-format';
-import { RemovableChip } from '@woocommerce/blocks-components';
-import Label from '@woocommerce/base-components/label';
+import { Label, RemovableChip } from '@woocommerce/blocks-components';
 import { getQueryArgs, addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { changeUrl } from '@woocommerce/utils';
 import { Icon, closeSmall } from '@wordpress/icons';
diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js
index b4b207cfc8b..5a69daa4a8f 100644
--- a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js
+++ b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
 import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 
diff --git a/packages/checkout/components/label/index.ts b/packages/checkout/components/label/index.ts
index d6294e80c0f..b74c7e6df27 100644
--- a/packages/checkout/components/label/index.ts
+++ b/packages/checkout/components/label/index.ts
@@ -1,6 +1,6 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import Label from '@woocommerce/base-components/label';
+import Label from '../../../components/label';
 
 export default Label;

From 1452447e47c38315c8189652b61cda7660be63f4 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Tue, 17 Oct 2023 14:16:13 +0100
Subject: [PATCH 3/4] Import label component directly from package for
 non-checkout uses

This is because importing from the package also loads the data stores. This is in itself not an issue in the real world, but it does mean several unit tests would require a re-write to mock the data correctly.
---
 assets/js/base/components/load-more-button/index.tsx | 2 +-
 assets/js/base/components/sort-select/index.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/base/components/load-more-button/index.tsx b/assets/js/base/components/load-more-button/index.tsx
index bc51c12331b..da185a9d88d 100644
--- a/assets/js/base/components/load-more-button/index.tsx
+++ b/assets/js/base/components/load-more-button/index.tsx
@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Label } from '@woocommerce/blocks-components';
 import type { MouseEventHandler } from 'react';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import Label from '../../../../../packages/components/label';
 
 interface LoadMoreButtonProps {
 	onClick: MouseEventHandler;
diff --git a/assets/js/base/components/sort-select/index.tsx b/assets/js/base/components/sort-select/index.tsx
index 4deccbbdc0f..2a5309fc4c5 100644
--- a/assets/js/base/components/sort-select/index.tsx
+++ b/assets/js/base/components/sort-select/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import { Label } from '@woocommerce/blocks-components';
 import { withInstanceId } from '@wordpress/compose';
 import type { ChangeEventHandler } from 'react';
 
@@ -10,6 +9,7 @@ import type { ChangeEventHandler } from 'react';
  * Internal dependencies
  */
 import './style.scss';
+import Label from '../../../../../packages/components/label';
 
 interface SortSelectProps {
 	/**

From ff813f33c952212ee07d048ea76a41a4c974dd84 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Tue, 17 Oct 2023 15:21:15 +0100
Subject: [PATCH 4/4] Add comments about local imports

---
 assets/js/base/components/load-more-button/index.tsx | 2 +-
 assets/js/base/components/sort-select/index.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/base/components/load-more-button/index.tsx b/assets/js/base/components/load-more-button/index.tsx
index da185a9d88d..d5d3f7b767d 100644
--- a/assets/js/base/components/load-more-button/index.tsx
+++ b/assets/js/base/components/load-more-button/index.tsx
@@ -8,7 +8,7 @@ import type { MouseEventHandler } from 'react';
  * Internal dependencies
  */
 import './style.scss';
-import Label from '../../../../../packages/components/label';
+import Label from '../../../../../packages/components/label'; // Imported like this because importing from the components package loads the data stores unnecessarily - not a problem in the front end but would require a lot of unit test rewrites to prevent breaking tests due to incorrect mocks.
 
 interface LoadMoreButtonProps {
 	onClick: MouseEventHandler;
diff --git a/assets/js/base/components/sort-select/index.tsx b/assets/js/base/components/sort-select/index.tsx
index 2a5309fc4c5..f543b164d4c 100644
--- a/assets/js/base/components/sort-select/index.tsx
+++ b/assets/js/base/components/sort-select/index.tsx
@@ -9,7 +9,7 @@ import type { ChangeEventHandler } from 'react';
  * Internal dependencies
  */
 import './style.scss';
-import Label from '../../../../../packages/components/label';
+import Label from '../../../../../packages/components/label'; // Imported like this because importing from the components package loads the data stores unnecessarily - not a problem in the front end but would require a lot of unit test rewrites to prevent breaking tests due to incorrect mocks.
 
 interface SortSelectProps {
 	/**