Give better tests and fix types

packages/components/src/base-field/hook.js

@@ -26,10 +26,10 @@ import * as styles from './styles';
  * @property {boolean} [isSubtle=false] Renders a subtle variant.
  */
 
-/** @typedef {import('../Flex/useFlex').FlexProps & OwnProps} Props */
+/** @typedef {import('../flex/types').FlexProps & OwnProps} Props */
 
 /**
- * @param {import('@wp-g2/create-styles').ViewOwnProps<Props, 'div'>} props
+ * @param {import('../ui/context').PolymorphicComponentProps<Props, 'div'>} props
  */
 export function useBaseField( props ) {
 	const {
@@ -41,6 +41,7 @@ export function useBaseField( props ) {
 		isSubtle = false,
 		// eslint-disable-next-line no-unused-vars
 		defaultValue, // extract this because useFlex doesn't accept it
+		disabled,
 		...flexProps
 	} = useContextSystem( props, 'BaseField' );
 
@@ -70,5 +71,9 @@ export function useBaseField( props ) {
 		]
 	);
 
-	return useFlex( { ...flexProps, className: classes } );
+	return {
+		...useFlex( { ...flexProps, className: classes } ),
+		disabled,
+		defaultValue,
+	};
 }

packages/components/src/base-field/test/__snapshots__/index.js.snap

@@ -1,6 +1,123 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`props should render correctly 1`] = `
+exports[`base field props should render clickable styles 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -15,11 +15,10 @@
+      "background": "#fff",
+      "border": "1px solid",
+      "border-color": "#757575",
+      "border-radius": "2px",
+      "box-shadow": "transparent",
+-     "cursor": "pointer",
+      "display": "flex",
+      "flex": "1",
+      "flex-direction": "row",
+      "font-size": "13px",
+      "justify-content": "space-between",
+`;
+
+exports[`base field props should render error styles 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -12,11 +12,11 @@
+      "-webkit-justify-content": "space-between",
+      "-webkit-transition": "border-color 100ms ease",
+      "align-items": "center",
+      "background": "#fff",
+      "border": "1px solid",
+-     "border-color": "#d94f4f",
++     "border-color": "#757575",
+      "border-radius": "2px",
+      "box-shadow": "transparent",
+      "display": "flex",
+      "flex": "1",
+      "flex-direction": "row",
+`;
+
+exports[`base field props should render focused styles 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -12,21 +12,20 @@
+      "-webkit-justify-content": "space-between",
+      "-webkit-transition": "border-color 100ms ease",
+      "align-items": "center",
+      "background": "#fff",
+      "border": "1px solid",
+-     "border-color": "theme:var( --wp-admin-theme-color,#00669b)",
++     "border-color": "#757575",
+      "border-radius": "2px",
+-     "box-shadow": "0 0 0,0.5px,[object Object]",
++     "box-shadow": "transparent",
+      "display": "flex",
+      "flex": "1",
+      "flex-direction": "row",
+      "font-size": "13px",
+      "justify-content": "space-between",
+      "outline": "none",
+      "padding": "0 8px",
+      "position": "relative",
+-     "theme-dark10": "var( --wp-admin-theme-color-darker-10,#007cba)",
+      "transition": "border-color 100ms ease",
+      "width": "100%",
+    },
+  ]
+`;
+
+exports[`base field props should render inline styles 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -15,18 +15,17 @@
+      "background": "#fff",
+      "border": "1px solid",
+      "border-color": "#757575",
+      "border-radius": "2px",
+      "box-shadow": "transparent",
+-     "display": "inline-flex",
++     "display": "flex",
+      "flex": "1",
+      "flex-direction": "row",
+      "font-size": "13px",
+      "justify-content": "space-between",
+      "outline": "none",
+      "padding": "0 8px",
+      "position": "relative",
+      "transition": "border-color 100ms ease",
+-     "vertical-align": "baseline",
+-     "width": "auto",
++     "width": "100%",
+    },
+  ]
+`;
+
+exports[`base field props should render subtle styles 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -11,11 +11,10 @@
+      "-webkit-flex-direction": "row",
+      "-webkit-justify-content": "space-between",
+      "-webkit-transition": "border-color 100ms ease",
+      "align-items": "center",
+      "background": "#fff",
+-     "background-color": "transparent",
+      "border": "1px solid",
+      "border-color": "#757575",
+      "border-radius": "2px",
+      "box-shadow": "transparent",
+      "display": "flex",
+`;
+
+exports[`base field should render correctly 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;

packages/components/src/base-field/test/index.js

@@ -6,11 +6,73 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { BaseField } from '../index';
+import { BaseField, useBaseField } from '../index';
 
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const { container } = render( <BaseField /> );
-		expect( container.firstChild ).toMatchSnapshot();
+describe( 'base field', () => {
+	let base;
+
+	beforeEach( () => {
+		base = render( <BaseField /> ).container;
+	} );
+
+	it( 'should render correctly', () => {
+		expect( base.firstChild ).toMatchSnapshot();
+	} );
+
+	describe( 'props', () => {
+		it( 'should render error styles', () => {
+			const { container } = render( <BaseField error /> );
+			expect( container.firstChild ).toMatchStyleDiffSnapshot(
+				base.firstChild
+			);
+		} );
+
+		it( 'should render clickable styles', () => {
+			const { container } = render( <BaseField isClickable /> );
+			expect( container.firstChild ).toMatchStyleDiffSnapshot(
+				base.firstChild
+			);
+		} );
+
+		it( 'should render focused styles', () => {
+			const { container } = render( <BaseField isFocused /> );
+			expect( container.firstChild ).toMatchStyleDiffSnapshot(
+				base.firstChild
+			);
+		} );
+
+		it( 'should render inline styles', () => {
+			const { container } = render( <BaseField isInline /> );
+			expect( container.firstChild ).toMatchStyleDiffSnapshot(
+				base.firstChild
+			);
+		} );
+
+		it( 'should render subtle styles', () => {
+			const { container } = render( <BaseField isSubtle /> );
+			expect( container.firstChild ).toMatchStyleDiffSnapshot(
+				base.firstChild
+			);
+		} );
+	} );
+
+	describe( 'useBaseField', () => {
+		it( 'should pass through disabled and defaultValue props', () => {
+			// wrap this in a component so that `useContext` calls don't fail inside the hook
+			// assertions will still run as normal when we `render` the component :)
+			const Component = () => {
+				const disabled = Symbol.for( 'disabled' );
+				const defaultValue = Symbol.for( 'defaultValue' );
+
+				const result = useBaseField( { disabled, defaultValue } );
+
+				expect( result.disabled ).toBe( disabled );
+				expect( result.defaultValue ).toBe( defaultValue );
+
+				return null;
+			};
+
+			render( <Component /> );
+		} );
 	} );
 } );

packages/components/src/utils/browsers.js

@@ -4,21 +4,6 @@
 import { css } from 'emotion';
 
 /* eslint-disable jsdoc/no-undefined-types */
-/**
- * @param {TemplateStringsArray} strings
- * @param  {import('create-emotion').Interpolation[]} interpolations
- */
-export function ieOnly( strings, ...interpolations ) {
-	const interpolatedStyles = css( strings, ...interpolations );
-
-	return css`
-		@media screen and ( -ms-high-contrast: active ),
-			( -ms-high-contrast: none ) {
-			${ interpolatedStyles };
-		}
-	`;
-}
-
 /**
  * @param {TemplateStringsArray} strings
  * @param  {import('create-emotion').Interpolation[]} interpolations

packages/components/src/utils/config-values.js

@@ -39,7 +39,6 @@ export default {
 	controlPaddingX: CONTROL_PADDING_X,
 	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
 	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
-	controlBorderRadius: '2px',
 	controlBackgroundColor: COLORS.white,
 	controlBorderRadius: '2px',
 	controlBorderColor: COLORS.gray[ 700 ],

packages/components/tsconfig.json

@@ -19,6 +19,7 @@
 	"include": [
 		"src/animate/**/*",
 		"src/base-control/**/*",
+		"src/base-field/**/*",
 		"src/dashicon/**/*",
 		"src/disabled/**/*",
 		"src/divider/**/*",