TextField house keeping 🧹 (#16668)

* TextField house keeping updates

* ButtonIcon prop name update and uncontrolled fix

* Updating snapshot

ui/components/component-library/component-library-components.scss

@@ -23,7 +23,6 @@
 // Molecules
 @import 'picker-network/picker-network';
 @import 'tag-url/tag-url';
-@import 'text-field/text-field';
 @import 'text-field-base/text-field-base';
 @import 'text-field-search/text-field-search';
 @import 'form-text-field/form-text-field';

ui/components/component-library/text-field/README.mdx

@@ -1,5 +1,7 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
+import { TextFieldBase } from '../text-field-base';
+
 import { TextField } from './text-field';
 
 # TextField
@@ -12,15 +14,20 @@ The `TextField` component lets users enter and edit text as well as adding a sho
 
 ## Props
 
-The `TextField` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) and [TextFieldBase](/docs/ui-components-component-library-text-field-base-text-field-base-stories-js--default-story#props) component props
+The `TextField` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
 
 <ArgsTable of={TextField} />
 
+`TextField` accepts all [TextFieldBase](/docs/ui-components-component-library-text-field-base-text-field-base-stories-js--default-story#props)
+component props
+
+<ArgsTable of={TextFieldBase} />
+
 ### Show Clear Button
 
-Use the `showClearButton` prop to display a clear button when `TextField` has a value. Use the `clearButtonOnClick` prop to pass an `onClick` event handler to clear the value of the input.
+Use the `showClearButton` prop to display a clear button when `TextField` has a value. Use the `clearButtonOnClick` prop to pass an `onClick` event handler to clear the value of the input. Otherwise the clear button will not do anything.
 
-The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-icon-button-icon-stories-js--default-story) and accepts all props from that component.
+The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-icon-button-icon-stories-js--default-story) and accepts all `ButtonIcon` props.
 
 **NOTE: The `showClearButton` only works with a controlled input.**
 
@@ -29,7 +36,7 @@ The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-
 </Canvas>
 
 ```jsx
-import { TextField } from '../../ui/components/component-library';
+import { TextField } from '../../component-library';
 
 const [value, setValue] = useState('show clear');
 
@@ -66,7 +73,7 @@ import {
   BORDER_RADIUS,
 } from '../../../helpers/constants/design-system';
 
-import { TextField } from '../../ui/components/component-library';
+import { TextField } from '../../component-library';
 
 const [value, setValue] = useState('show clear');
 

ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextField should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-text-field-base mm-text-field-base--size-md mm-text-field-base--truncate mm-text-field box--display-inline-flex box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid"
+  >
+    <input
+      autocomplete="off"
+      class="box mm-text mm-text-field-base__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent"
+      focused="false"
+      type="text"
+      value=""
+    />
+  </div>
+</div>
+`;

ui/components/component-library/text-field/text-field.scss

@@ -1,10 +0,0 @@
-.mm-text-field {
-  // TOD: remove most of these styles when replaced by ButtonIcon
-  &__button-clear {
-    height: 24px;
-    width: 24px;
-    max-width: 24px;
-    flex: 0 0 24px;
-    margin-left: -24px;
-  }
-}

ui/components/component-library/text-field/text-field.stories.js

@@ -178,6 +178,7 @@ export default {
     size: SIZES.MD,
     type: 'text',
     truncate: false,
+    value: '',
   },
 };
 
@@ -209,13 +210,6 @@ ShowClearButton.args = {
   showClearButton: true,
 };
 
-export const ClearButtonOnClick = Template.bind({});
-
-ShowClearButton.args = {
-  placeholder: 'Enter text to show clear',
-  showClearButton: true,
-};
-
 export const ClearButtonProps = Template.bind({});
 ClearButtonProps.args = {
   value: 'clear button props',

ui/components/component-library/text-field/text-field.test.js

@@ -11,8 +11,9 @@ import { TextField } from './text-field';
 
 describe('TextField', () => {
   it('should render correctly', () => {
-    const { getByRole } = render(<TextField />);
+    const { getByRole, container } = render(<TextField />);
     expect(getByRole('textbox')).toBeDefined();
+    expect(container).toMatchSnapshot();
   });
   it('should render and be able to input text', async () => {
     const { user, getByRole } = renderWithUserEvent(<TextField />);