Merge pull request #2037 from woocommerce/dev/1833-externalize-icons-…

…notice-tip Externalize `Dashicon`, `Icon`, `Notice` and `Tip` components imported from `@wordpress/components`
woocommerce · Aug 9, 2023 · ebca4f5 · ebca4f5
2 parents ec72227 + d507cb9
commit ebca4f5
Show file tree

Hide file tree

Showing 18 changed files with 23 additions and 203 deletions.
diff --git a/.externalized.json b/.externalized.json
@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/a11y","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/escape-html","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/priority-queue","@wordpress/rich-text","@wordpress/url","@wordpress/warning","extracted/@wordpress/components","lodash","moment","react","react-dom"]
+["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/a11y","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/escape-html","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/primitives","@wordpress/priority-queue","@wordpress/rich-text","@wordpress/url","@wordpress/warning","extracted/@wordpress/components","lodash","moment","react","react-dom"]
diff --git a/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js b/js/src/components/contact-information/phone-number-card/verify-phone-number-content.js
@@ -9,7 +9,7 @@ import {
 	useRef,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { Notice } from '@wordpress/components';
+import { Notice } from 'extracted/@wordpress/components';
 import { Flex } from 'extracted/@wordpress/components';
 
 /**

diff --git a/js/src/components/different-currency-notice.js b/js/src/components/different-currency-notice.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from '@wordpress/components';
+import { Notice } from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**

diff --git a/js/src/components/dismissible-notice/index.js b/js/src/components/dismissible-notice/index.js
diff --git a/js/src/components/dismissible-notice/index.test.js b/js/src/components/dismissible-notice/index.test.js
diff --git a/js/src/components/google-mc-account-card/reclaim-url-card/index.js b/js/src/components/google-mc-account-card/reclaim-url-card/index.js
@@ -3,8 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Notice } from '@wordpress/components';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider, Notice } from 'extracted/@wordpress/components';
 import { noop } from 'lodash';
 import { getSetting } from '@woocommerce/settings'; // eslint-disable-line import/no-unresolved
 // The above is an unpublished package, delivered with WC, we use Dependency Extraction Webpack Plugin to import it.

diff --git a/js/src/components/paid-ads/asset-group/asset-group-section.js b/js/src/components/paid-ads/asset-group/asset-group-section.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Tip } from '@wordpress/components';
+import { Tip } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/paid-ads/budget-section/budget-recommendation/index.js b/js/src/components/paid-ads/budget-section/budget-recommendation/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Tip } from '@wordpress/components';
+import { Tip } from 'extracted/@wordpress/components';
 import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 
 /**

diff --git a/js/src/get-started-page/get-started-with-video-card/index.js b/js/src/get-started-page/get-started-with-video-card/index.js
@@ -1,8 +1,12 @@
 /**
  * External dependencies
  */
-import { Tip } from '@wordpress/components';
-import { FlexBlock, Card, CardBody } from 'extracted/@wordpress/components';
+import {
+	FlexBlock,
+	Card,
+	CardBody,
+	Tip,
+} from 'extracted/@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 

diff --git a/js/src/get-started-page/unsupported-notices/index.js b/js/src/get-started-page/unsupported-notices/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice, Icon } from '@wordpress/components';
+import { Notice, Icon } from 'extracted/@wordpress/components';
 import { external as externalIcon } from '@wordpress/icons';
 import { Link } from '@woocommerce/components';
 import { createInterpolateElement } from '@wordpress/element';

diff --git a/js/src/product-feed/issues-table-card/issues-solved.js b/js/src/product-feed/issues-table-card/issues-solved.js
@@ -3,7 +3,7 @@
  */
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Dashicon } from '@wordpress/components';
+import { Dashicon } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/product-feed/product-feed-table-card/edit-visibility-action.js b/js/src/product-feed/product-feed-table-card/edit-visibility-action.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
+import { Icon } from 'extracted/@wordpress/components';
 import { SelectControl } from '@woocommerce/components';
 import { edit as editIcon } from '@wordpress/icons';
 
@@ -68,7 +68,7 @@ export default function EditVisibilityAction( {
 					'google-listings-and-ads'
 				) }
 			>
-				<Icon icon={ editIcon } size={ 24 } />
+				<Icon icon={ editIcon } />
 			</AppTooltip>
 		);
 	}

diff --git a/js/src/product-feed/product-feed-table-card/index.scss b/js/src/product-feed/product-feed-table-card/index.scss
@@ -12,7 +12,7 @@
 		}
 	}
 
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		// Clear the 4px space gap for SVG
 		line-height: 0;
 

diff --git a/js/src/product-feed/review-request/review-request-modal.js b/js/src/product-feed/review-request/review-request-modal.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl, Notice } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { Notice } from 'extracted/@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 

diff --git a/js/src/reports/programs/campaign-name-cell.scss b/js/src/reports/programs/campaign-name-cell.scss
@@ -1,5 +1,5 @@
 .gla-reports__tooltip-campaign-name {
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		width: 100%;
 	}
 }
diff --git a/js/src/settings/reconnect-google-account/disconnect-google-account-card.js b/js/src/settings/reconnect-google-account/disconnect-google-account-card.js
@@ -2,8 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Notice } from '@wordpress/components';
-import { CardDivider } from 'extracted/@wordpress/components';
+import { CardDivider, Notice } from 'extracted/@wordpress/components';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import { getNewPath } from '@woocommerce/navigation';
 

diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.scss b/js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.scss
@@ -16,7 +16,7 @@
 	}
 
 	&__product-quantity-separator,
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		font-size: $gla-font-smallest;
 		font-weight: normal;
 		color: $gray-700;
@@ -28,7 +28,7 @@
 		margin: 0 $grid-unit-10;
 	}
 
-	.app-tooltip__children-container {
+	.gla-tooltip__children-container {
 		padding-bottom: calc($grid-unit-05 / 2);
 		line-height: 1;
 		border-bottom: $border-width dashed $gray-600;

diff --git a/webpack.config.js b/webpack.config.js
@@ -28,7 +28,6 @@ const requestToExternal = ( request ) => {
 		// WP 5.4 is the min version for <Card* />, <TabPanel />
 		'@wordpress/compose',
 		'@wordpress/components',
-		'@wordpress/primitives',
 		// Opt-out WooCommerce packages.
 		'@woocommerce/currency',
 		'@woocommerce/date',