Merge pull request #2054 from woocommerce/dev/1833-externalize-controls

Externalize all `*Control` components imported from `@wordpress/components`
woocommerce · Aug 15, 2023 · 31aae9f · 31aae9f
2 parents 561164e + 3343f91
commit 31aae9f
Show file tree

Hide file tree

Showing 20 changed files with 35 additions and 40 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/primitives","@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/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/primitives","@wordpress/priority-queue","@wordpress/url","extracted/@wordpress/components","lodash","moment","react","react-dom"]
diff --git a/js/src/components/app-input-control/index.js b/js/src/components/app-input-control/index.js
@@ -4,7 +4,7 @@
 import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import { __experimentalInputControl as InputControl } from '@wordpress/components';
+import { __experimentalInputControl as InputControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/app-radio-content-control/index.js b/js/src/components/app-radio-content-control/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { RadioControl } from '@wordpress/components';
+import { RadioControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/app-radio-content-control/index.scss b/js/src/components/app-radio-content-control/index.scss
@@ -10,6 +10,7 @@
 	// by placing them on the same brid.
 	.components-radio-control,
 	.components-base-control__field,
+	.components-base-control__field .components-flex,
 	.components-radio-control__option {
 		display: contents;
 	}

diff --git a/js/src/components/app-select-control/index.js b/js/src/components/app-select-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { SelectControl } from 'extracted/@wordpress/components';
 import classNames from 'classnames';
 
 /**

diff --git a/js/src/components/app-standalone-toggle-control/index.js b/js/src/components/app-standalone-toggle-control/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/app-standalone-toggle-control/index.scss b/js/src/components/app-standalone-toggle-control/index.scss
@@ -4,10 +4,12 @@
 	display: inline-block;
 
 	// remove the margins specified in ToggleControl component.
+	.components-base-control {
+		margin-bottom: 0;
+	}
+
 	.components-toggle-control {
 		.components-base-control__field {
-			margin-bottom: 0;
-
 			.components-form-toggle {
 				margin-right: 0;
 

diff --git a/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js b/js/src/components/contact-information/phone-number-card/edit-phone-number-content.js
@@ -4,8 +4,12 @@
 import { parsePhoneNumberFromString as parsePhoneNumber } from 'libphonenumber-js';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { RadioControl } from '@wordpress/components';
-import { Flex, FlexItem, FlexBlock } from 'extracted/@wordpress/components';
+import {
+	Flex,
+	FlexItem,
+	FlexBlock,
+	RadioControl,
+} from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/free-listings/choose-audience-section/choose-audience-section.js b/js/src/components/free-listings/choose-audience-section/choose-audience-section.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { RadioControl } from '@wordpress/components';
+import { RadioControl } from 'extracted/@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 

diff --git a/js/src/components/google-ads-account-card/terms-modal/index.js b/js/src/components/google-ads-account-card/terms-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 

diff --git a/js/src/components/google-mc-account-card/terms-modal/index.js b/js/src/components/google-mc-account-card/terms-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement, useState } from '@wordpress/element';
 

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

diff --git a/js/src/components/paid-ads/audience-section.js b/js/src/components/paid-ads/audience-section.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl } from 'extracted/@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/paid-ads/audience-section.scss b/js/src/components/paid-ads/audience-section.scss
@@ -3,20 +3,10 @@
 	// Repeat selector to make it higher priority.
 	.components-input-control__container.components-input-control__container {
 		.components-select-control__input {
-			min-height: $gla-size-control-height;
 			padding-left: $grid-unit-20;
 		}
 	}
 
-	// Adjust labels of <SelectControl> imported from @wordpress/components.
-	// Repeat selector to make it higher priority.
-	.components-base-control .components-select-control {
-		.components-input-control__label {
-			padding-bottom: 0;
-			margin-bottom: $grid-unit-10;
-		}
-	}
-
 	// Adjust help text of <SelectControl> imported from @wordpress/components.
 	.components-base-control__help {
 		margin: 0;

diff --git a/js/src/components/pre-launch-check-item/index.js b/js/src/components/pre-launch-check-item/index.js
@@ -2,8 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
-import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
+import {
+	Panel,
+	PanelBody,
+	PanelRow,
+	CheckboxControl,
+} from 'extracted/@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useRef } from '@wordpress/element';
 

diff --git a/js/src/css/shared/_gutenberg-components.scss b/js/src/css/shared/_gutenberg-components.scss
@@ -51,14 +51,9 @@
 			font-size: inherit;
 		}
 	}
-}
-
-// hack to fix radio button selected style bug caused by woocommerce-admin.
-.components-radio-control__input[type="radio"]:checked::before {
-	border: none;
-}
 
-// hack to fix InputControl suffix's empty right margin.
-.components-input-control__suffix {
-	margin-right: $grid-unit;
+	// Adjust InputControl suffix's empty right margin.
+	.components-input-control__suffix {
+		margin-right: $grid-unit;
+	}
 }
diff --git a/js/src/product-feed/product-feed-table-card/index.js b/js/src/product-feed/product-feed-table-card/index.js
@@ -3,8 +3,8 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { CheckboxControl } from '@wordpress/components';
 import {
+	CheckboxControl,
 	Card,
 	CardHeader,
 	CardBody,

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,8 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
-import { Notice } from 'extracted/@wordpress/components';
+import { CheckboxControl, Notice } from 'extracted/@wordpress/components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { recordEvent } from '@woocommerce/tracks';
 

diff --git a/js/src/reports/compare-table-card.js b/js/src/reports/compare-table-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { onQueryChange } from '@woocommerce/navigation';
 
 /**

diff --git a/js/src/settings/disconnect-modal/confirm-modal.js b/js/src/settings/disconnect-modal/confirm-modal.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl } from 'extracted/@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**