Rework TextControlWithAffixes to keep BaseControl at the top of the component tree.

plugins/woocommerce-admin/packages/components/src/style.scss

@@ -28,4 +28,5 @@
 @import 'summary/style.scss';
 @import 'table/style.scss';
 @import 'tag/style.scss';
+@import 'text-control-with-affixes/style.scss';
 @import 'view-more-list/style.scss';

plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/index.js

@@ -5,22 +5,47 @@
 import { Component } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { TextControl } from '@wordpress/components';
+import { BaseControl } from '@wordpress/components';
+import { withInstanceId } from '@wordpress/compose';
 
 class TextControlWithAffixes extends Component {
-	render() {
-		const { noWrap, prefix, suffix, ...rest } = this.props;
+    render() {
+        const {
+            label,
+            value,
+            help,
+            className,
+            instanceId,
+            onChange,
+            noWrap,
+            prefix,
+            suffix,
+            type = 'text',
+            ...props
+        } = this.props;
 
-		return (
-			<div className={ classNames( 'text-control-with-affixes', { 'no-wrap': noWrap } ) }>
-				{ prefix && <span className="text-control-with-affixes__prefix">{ prefix }</span> }
+        const id = `inspector-text-control-with-affixes-${ instanceId }`;
+        const onChangeValue = ( event ) => onChange( event.target.value );
 
-				<TextControl { ...rest } />
+        return (
+            <BaseControl label={ label } id={ id } help={ help } className={ className }>
+                <div className={ classNames( 'text-control-with-affixes', { 'no-wrap': noWrap } ) }>
+                    { prefix && <span className="text-control-with-affixes__prefix">{ prefix }</span> }
 
-				{ suffix && <span className="text-control-with-affixes__suffix">{ suffix }</span> }
-			</div>
-		);
-	}
+                    <input className="components-text-control__input"
+                        type={ type }
+                        id={ id }
+                        value={ value }
+                        onChange={ onChangeValue }
+                        aria-describedby={ !! help ? id + '__help' : undefined }
+                        { ...props }
+                    />
+
+                    { suffix && <span className="text-control-with-affixes__suffix">{ suffix }</span> }
+                </div>
+            </BaseControl>
+        );
+    }
 }
 
 TextControlWithAffixes.propTypes = {
@@ -29,4 +54,4 @@ TextControlWithAffixes.propTypes = {
     suffix: PropTypes.node,
 };
 
-export default TextControlWithAffixes;
+export default withInstanceId( TextControlWithAffixes );

plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss

@@ -1,24 +1,25 @@
 .text-control-with-affixes {
 	display: inline-flex;
 	flex-direction: column;
-	width: 100%;
-
-	&.no-wrap {
+    width: 100%;
+    
+    &.no-wrap {
 		flex-direction: row;
 	}
 
-	@include breakpoint( ">480px" ) {
+    @include breakpoint( ">320px" ) {
 		flex-direction: row;
-	}
+    }
 
-	input[type="email"],
-	input[type="password"],
-	input[type="url"],
-	input[type="text"],
-	input[type="number"] {
-		flex-grow: 1;
+    input[type="email"],
+    input[type="password"],
+    input[type="url"],
+    input[type="text"],
+    input[type="number"] {
+        flex-grow: 1;
+        margin: 0;
 
-		&:focus {
+        &:focus {
 			// Fixes the right border of the box shadow displayed when this input element is focused which appears as
 			// cut off when this input has a suffix, or is stuck to another element that has a higher stacking order
 			// (fix found at http://stackoverflow.com/a/24728957)
@@ -29,14 +30,14 @@
 			border-right-width: 0;
 
 			& + .text-control-with-affixes__suffix {
-				border-left: 1px solid $gray-lighten-20;
+				border-left: 1px solid $core-grey-light-500;
 			}
 		}
-	}
+    }
 }
 
 @mixin no-prefix-wrap() {
-	border-bottom-left-radius: 2px;
+	border-bottom-left-radius: 4px;
 	border-right: none;
 	border-top-right-radius: 0;
 }
@@ -44,27 +45,27 @@
 @mixin no-suffix-wrap() {
 	border-bottom-left-radius: 0;
 	border-left: none;
-	border-top-right-radius: 2px;
+	border-top-right-radius: 4px;
 }
 
 .text-control-with-affixes__prefix,
 .text-control-with-affixes__suffix {
 	position: relative;
-	background: $gray-light;
-	border: 1px solid $gray-lighten-20;
-	color: $gray-darken-20;
-	padding: 8px 14px;
+	background: $core-grey-light-100;
+	border: 1px solid $core-grey-light-500;
+	color: $gray-text;
+	padding: 7px 14px;
 	white-space: nowrap;
 	flex: 1 0 auto;
-	font-size: 16px;
+	font-size: 14px;
 	line-height: 1.5;
 }
 
 .text-control-with-affixes__prefix {
-	border-top-left-radius: 2px;
-	border-top-right-radius: 2px;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
 
-	@include breakpoint( "<480px" ) {
+	@include breakpoint( "<320px" ) {
 		:not( .no-wrap ) > & {
 			border-bottom: none;
 		}
@@ -74,7 +75,7 @@
 		@include no-prefix-wrap();
 	}
 
-	@include breakpoint( ">480px" ) {
+	@include breakpoint( ">320px" ) {
 		@include no-prefix-wrap();
 	}
 
@@ -84,17 +85,17 @@
 	& + input[type="text"],
 	& + input[type="number"] {
 		&:disabled {
-			border-left-color: $gray-lighten-20;
+			border-left-color: $core-grey-light-500;
 			border-right-width: 1px;
 		}
 	}
 }
 
 .text-control-with-affixes__suffix {
-	border-bottom-left-radius: 2px;
-	border-bottom-right-radius: 2px;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
 
-	@include breakpoint( "<480px" ) {
+	@include breakpoint( "<320px" ) {
 		:not( .no-wrap ) > & {
 			border-top: none;
 		}
@@ -104,7 +105,7 @@
 		@include no-suffix-wrap();
 	}
 
-	@include breakpoint( ">480px" ) {
+	@include breakpoint( ">320px" ) {
 		@include no-suffix-wrap();
-	}
+    }
 }