Merge branch 'develop' into lock-icon

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

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

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

@@ -1,6 +1,6 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
-import { TextField, TextFieldBase } from '../';
+import { TextField } from '../';
 import { FormTextField } from './form-text-field';
 
 # FormTextField
@@ -22,10 +22,10 @@ component props
 
 <ArgsTable of={TextField} />
 
-`FormTextField` accepts all [TextFieldBase](/docs/components-componentlibrary-textfield--default-story#props)
+`FormTextField` accepts all [TextField](/docs/components-componentlibrary-textfield--default-story#props)
 component props
 
-<ArgsTable of={TextFieldBase} />
+<ArgsTable of={TextField} />
 
 ### Id
 
@@ -305,7 +305,7 @@ import {
 <FormTextField
   id="custom-spending-cap"
   placeholder="Enter a number"
-  rightAccessory={<ButtonLink>Max</ButtonLink>}
+  endAccessory={<ButtonLink>Max</ButtonLink>}
   marginBottom={4}
   type={TEXT_FIELD_TYPES.NUMBER}
 />

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

@@ -6,11 +6,11 @@ exports[`FormTextField should render correctly 1`] = `
     class="box mm-form-text-field box--display-flex box--flex-direction-column"
   >
     <div
-      class="box mm-text-field-base mm-text-field-base--size-md mm-text-field-base--truncate mm-text-field mm-form-text-field__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"
+      class="box mm-text-field mm-text-field--size-md mm-text-field--truncate mm-form-text-field__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"
+        class="box mm-text mm-text-field__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=""

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

@@ -28,7 +28,7 @@ export const FormTextField = ({
   inputRef,
   label,
   labelProps,
-  leftAccessory,
+  startAccessory,
   maxLength,
   name,
   onBlur,
@@ -37,13 +37,10 @@ export const FormTextField = ({
   placeholder,
   readOnly,
   required,
-  rightAccessory,
+  endAccessory,
   size = Size.MD,
   textFieldProps,
   truncate,
-  showClearButton,
-  clearButtonOnClick,
-  clearButtonProps,
   type = 'text',
   value,
   ...props
@@ -86,7 +83,7 @@ export const FormTextField = ({
         id,
         inputProps,
         inputRef,
-        leftAccessory,
+        startAccessory,
         maxLength,
         name,
         onBlur,
@@ -95,10 +92,7 @@ export const FormTextField = ({
         placeholder,
         readOnly,
         required,
-        rightAccessory,
-        showClearButton,
-        clearButtonOnClick,
-        clearButtonProps,
+        endAccessory,
         size,
         truncate,
         type,

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

@@ -73,18 +73,6 @@ export default {
     helpTextProps: {
       control: 'object',
     },
-    showClearButton: {
-      control: 'boolean',
-      table: { category: 'text field props' },
-    },
-    clearButtonOnClick: {
-      action: 'clearButtonOnClick',
-      table: { category: 'text field props' },
-    },
-    clearButtonProps: {
-      control: 'object',
-      table: { category: 'text field props' },
-    },
     autoComplete: {
       control: 'boolean',
       table: { category: 'text field base props' },
@@ -113,7 +101,7 @@ export default {
       control: 'object',
       table: { category: 'text field base props' },
     },
-    leftAccessory: {
+    startAccessory: {
       control: 'text',
       table: { category: 'text field base props' },
     },
@@ -157,7 +145,7 @@ export default {
       control: 'boolean',
       table: { category: 'text field base props' },
     },
-    rightAccessory: {
+    endAccessory: {
       control: 'text',
       table: { category: 'text field base props' },
     },
@@ -209,17 +197,7 @@ const Template = (args) => {
   const handleOnChange = (e) => {
     updateArgs({ value: e.target.value });
   };
-  const handleOnClear = () => {
-    updateArgs({ value: '' });
-  };
-  return (
-    <FormTextField
-      {...args}
-      value={value}
-      onChange={handleOnChange}
-      clearButtonOnClick={handleOnClear}
-    />
-  );
+  return <FormTextField {...args} value={value} onChange={handleOnChange} />;
 };
 
 export const DefaultStory = Template.bind({});
@@ -245,17 +223,13 @@ export const HelpTextStory = (args) => {
   const handleOnChange = (e) => {
     updateArgs({ value: e.target.value });
   };
-  const handleOnClear = () => {
-    updateArgs({ value: '' });
-  };
   return (
     <>
       <FormTextField
         {...args}
         id="input-with-help-text"
         value={value}
         onChange={handleOnChange}
-        clearButtonOnClick={handleOnClear}
         marginBottom={4}
       />
       <FormTextField
@@ -265,7 +239,6 @@ export const HelpTextStory = (args) => {
         helpText="When error is true the help text will be rendered as an error message"
         value={value}
         onChange={handleOnChange}
-        clearButtonOnClick={handleOnClear}
       />
     </>
   );
@@ -447,7 +420,7 @@ export const CustomLabelOrHelpText = () => (
     <FormTextField
       id="custom-spending-cap"
       placeholder="Enter a number"
-      rightAccessory={<ButtonLink>Max</ButtonLink>}
+      endAccessory={<ButtonLink>Max</ButtonLink>}
       marginBottom={4}
       type={TEXT_FIELD_TYPES.NUMBER}
     />

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

@@ -2,10 +2,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import {
-  renderControlledInput,
-  renderWithUserEvent,
-} from '../../../../test/lib/render-helpers';
+import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
 
 import { Size } from '../../../helpers/constants/design-system';
 
@@ -81,7 +78,7 @@ describe('FormTextField', () => {
         helpText="test help text"
       />,
     );
-    expect(getByTestId('text-field')).toHaveClass('mm-text-field-base--error');
+    expect(getByTestId('text-field')).toHaveClass('mm-text-field--error');
     expect(getByText('test help text')).toHaveClass(
       'mm-text--color-error-default',
     );
@@ -154,17 +151,17 @@ describe('FormTextField', () => {
       'mm-form-text-field__label test',
     );
   });
-  // leftAccessory, // rightAccessory
+  // startAccessory, // endAccessory
   it('should render with right and left accessories', () => {
     const { getByRole, getByText } = render(
       <FormTextField
-        leftAccessory={<div>left accessory</div>}
-        rightAccessory={<div>right accessory</div>}
+        startAccessory={<div>start accessory</div>}
+        endAccessory={<div>end accessory</div>}
       />,
     );
     expect(getByRole('textbox')).toBeDefined();
-    expect(getByText('left accessory')).toBeDefined();
-    expect(getByText('right accessory')).toBeDefined();
+    expect(getByText('start accessory')).toBeDefined();
+    expect(getByText('end accessory')).toBeDefined();
   });
   // maxLength;
   it('should render with maxLength and not allow more than the set characters', async () => {
@@ -230,7 +227,7 @@ describe('FormTextField', () => {
         readOnly
         value="test value"
         data-testid="read-only"
-        inputProps={{ 'data-testid': 'text-field-base-readonly' }}
+        inputProps={{ 'data-testid': 'text-field-readonly' }}
       />,
     );
     await user.type(getByRole('textbox'), 'test');
@@ -266,9 +263,9 @@ describe('FormTextField', () => {
         />
       </>,
     );
-    expect(getByTestId('sm')).toHaveClass('mm-text-field-base--size-sm');
-    expect(getByTestId('md')).toHaveClass('mm-text-field-base--size-md');
-    expect(getByTestId('lg')).toHaveClass('mm-text-field-base--size-lg');
+    expect(getByTestId('sm')).toHaveClass('mm-text-field--size-sm');
+    expect(getByTestId('md')).toHaveClass('mm-text-field--size-md');
+    expect(getByTestId('lg')).toHaveClass('mm-text-field--size-lg');
   });
   // textFieldProps
   it('should render with textFieldProps', () => {
@@ -288,45 +285,11 @@ describe('FormTextField', () => {
         />
       </>,
     );
-    expect(getByTestId('truncate')).toHaveClass('mm-text-field-base--truncate');
+    expect(getByTestId('truncate')).toHaveClass('mm-text-field--truncate');
     expect(getByTestId('no-truncate')).not.toHaveClass(
-      'mm-text-field-base--truncate',
+      'mm-text-field--truncate',
     );
   });
-  // showClearButton
-  it('should render showClearButton button when showClearButton is true and value exists', async () => {
-    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
-    const { user, getByRole } = renderControlledInput(FormTextField, {
-      showClearButton: true,
-    });
-    await user.type(getByRole('textbox'), 'test value');
-    expect(getByRole('textbox')).toHaveValue('test value');
-    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
-  });
-  // clearButtonOnClick
-  it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => {
-    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
-    const fn = jest.fn();
-    const { user, getByRole } = renderControlledInput(FormTextField, {
-      showClearButton: true,
-      clearButtonOnClick: fn,
-    });
-    await user.type(getByRole('textbox'), 'test value');
-    await user.click(getByRole('button', { name: /Clear/u }));
-    expect(fn).toHaveBeenCalledTimes(1);
-  });
-  // clearButtonProps,
-  it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => {
-    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
-    const fn = jest.fn();
-    const { user, getByRole } = renderControlledInput(FormTextField, {
-      showClearButton: true,
-      clearButtonProps: { onClick: fn },
-    });
-    await user.type(getByRole('textbox'), 'test value');
-    await user.click(getByRole('button', { name: /Clear/u }));
-    expect(fn).toHaveBeenCalledTimes(1);
-  });
   // type,
   it('should render with different types', () => {
     const { getByTestId } = render(

ui/components/component-library/icon/icon.stories.js

@@ -180,7 +180,7 @@ export const DefaultStory = (args) => {
                     textAlign: TEXT_ALIGN.CENTER,
                   }}
                   backgroundColor={BackgroundColor.backgroundAlternative}
-                  rightAccessory={
+                  endAccessory={
                     <ButtonIcon
                       iconName={ICON_NAMES.COPY}
                       size={Size.SM}

ui/components/component-library/index.js

@@ -28,11 +28,6 @@ export { Tag } from './tag';
 export { TagUrl } from './tag-url';
 export { Text, TEXT_DIRECTIONS } from './text';
 export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
-export {
-  TextFieldBase,
-  TEXT_FIELD_BASE_SIZES,
-  TEXT_FIELD_BASE_TYPES,
-} from './text-field-base';
 export { TextFieldSearch } from './text-field-search';
 
 // Molecules

ui/components/component-library/label/README.mdx

@@ -62,7 +62,7 @@ Use the `htmlFor` prop to allow the `Label` to focus on an input with the same i
 </Canvas>
 
 ```jsx
-import { Label, TextFieldBase } from '../../component-library';
+import { Label, TextField } from '../../component-library';
 
 <Label htmlFor="add-network">Add network</Label>
 <TextField id="add-network" placeholder="Enter network name" />

ui/components/component-library/label/label.test.js

@@ -2,7 +2,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { Icon, ICON_NAMES } from '../icon';
-import { TextFieldBase } from '../text-field-base';
+import { TextField } from '../text-field';
 
 import { Label } from './label';
 
@@ -31,7 +31,7 @@ describe('label', () => {
     const { getByText, getByRole } = render(
       <>
         <Label htmlFor="input">label</Label>
-        <TextFieldBase id="input" />
+        <TextField id="input" />
       </>,
     );
     const input = getByRole('textbox');
@@ -46,7 +46,7 @@ describe('label', () => {
       <>
         <Label>
           Label text
-          <TextFieldBase />
+          <TextField />
         </Label>
       </>,
     );