TextFieldBase updates after design reveiw (#16201)

* Setting truncate to true by default

* Updating readOnly to not have a focus state

* Updating focus state to be browser outline default

* Removing default args so storybook doesn't become out of sync with default props

* Updating outline CSS

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

@@ -69,7 +69,7 @@ import { TextFieldBase } from '../../ui/component-library/text-field-base';
 
 ### Truncate
 
-Use the `truncate` prop to truncate the text of the the `TextFieldBase`
+Use the `truncate` prop to truncate the text of the the `TextFieldBase`. Defaults to `true`.
 
 <Canvas>
   <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--truncate" />
@@ -78,7 +78,8 @@ Use the `truncate` prop to truncate the text of the the `TextFieldBase`
 ```jsx
 import { TextFieldBase } from '../../ui/component-library/text-field-base';
 
-<TextFieldBase truncate />;
+<TextFieldBase truncate />; // truncate is set to `true` by default
+<TextFieldBase truncate={false} />;
 ```
 
 ### Left Accessory Right Accessory
@@ -273,7 +274,7 @@ import { TextFieldBase } from '../../ui/component-library/text-field-base';
 
 ### Read Only
 
-Use the `readOnly` prop to set the `TextFieldBase` to read only
+Use the `readOnly` prop to set the `TextFieldBase` to read only. When `readOnly` is true `TextFieldBase` will not have a focus state.
 
 <Canvas>
   <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--read-only" />

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

@@ -42,7 +42,7 @@ export const TextFieldBase = ({
   required,
   size = SIZES.MD,
   type = 'text',
-  truncate,
+  truncate = true,
   value,
   ...props
 }) => {
@@ -95,7 +95,7 @@ export const TextFieldBase = ({
         'mm-text-field-base',
         `mm-text-field-base--size-${size}`,
         {
-          'mm-text-field-base--focused': focused && !disabled,
+          'mm-text-field-base--focused': focused && !disabled && !readOnly,
           'mm-text-field-base--error': error,
           'mm-text-field-base--disabled': disabled,
           'mm-text-field-base--truncate': truncate,
@@ -211,6 +211,10 @@ TextFieldBase.propTypes = {
    * Callback fired when the value is changed.
    */
   onChange: PropTypes.func,
+  /**
+   * Callback fired when the TextField is clicked on
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired on focus
    */
@@ -237,6 +241,11 @@ TextFieldBase.propTypes = {
    * Defaults to TEXT_FIELD_BASE_TYPES.TEXT ('text')
    */
   type: PropTypes.oneOf(Object.values(TEXT_FIELD_BASE_TYPES)),
+  /**
+   * If true will ellipse the text of the input
+   * Defaults to true
+   */
+  truncate: PropTypes.bool,
   /**
    * The input value, required for a controlled component.
    */

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

@@ -17,7 +17,8 @@
   border-color: var(--color-border-default);
 
   &--focused {
-    border-color: var(--color-primary-default);
+    outline: 5px auto Highlight; // firefox
+    outline: 5px auto -webkit-focus-ring-color; // chrome
   }
 
   &--error {

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

@@ -141,16 +141,6 @@ export default {
   },
   args: {
     placeholder: 'Placeholder...',
-    autoFocus: false,
-    defaultValue: '',
-    disabled: false,
-    error: false,
-    id: '',
-    readOnly: false,
-    required: false,
-    size: SIZES.MD,
-    type: 'text',
-    truncate: false,
   },
 };
 

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

@@ -24,6 +24,21 @@ describe('TextFieldBase', () => {
     fireEvent.change(textFieldBase, { target: { value: '' } }); // reset value
     expect(textFieldBase.value).toBe(''); // value is empty string after reset
   });
+  it('should render with focused state when clicked', () => {
+    const { getByTestId } = render(
+      <TextFieldBase
+        data-testid="text-field-base"
+        inputProps={{ 'data-testid': 'input' }}
+      />,
+    );
+    const textFieldBase = getByTestId('text-field-base');
+
+    fireEvent.click(textFieldBase);
+    expect(getByTestId('input')).toHaveFocus();
+    expect(getByTestId('text-field-base')).toHaveClass(
+      'mm-text-field-base--focused ',
+    );
+  });
   it('should render and fire onFocus and onBlur events', () => {
     const onFocus = jest.fn();
     const onBlur = jest.fn();
@@ -103,11 +118,17 @@ describe('TextFieldBase', () => {
       'password',
     );
   });
-  it('should render with truncate class', () => {
+  it('should render with truncate class as true by default and remove it when truncate is false', () => {
     const { getByTestId } = render(
-      <TextFieldBase truncate data-testid="truncate" />,
+      <>
+        <TextFieldBase data-testid="truncate" />
+        <TextFieldBase truncate={false} data-testid="no-truncate" />
+      </>,
     );
     expect(getByTestId('truncate')).toHaveClass('mm-text-field-base--truncate');
+    expect(getByTestId('no-truncate')).not.toHaveClass(
+      'mm-text-field-base--truncate',
+    );
   });
   it('should render with right and left accessories', () => {
     const { getByRole, getByText } = render(
@@ -190,9 +211,13 @@ describe('TextFieldBase', () => {
     const { getByTestId } = render(
       <TextFieldBase
         readOnly
+        data-testid="read-only"
         inputProps={{ 'data-testid': 'text-field-base-readonly' }}
       />,
     );
+    expect(getByTestId('read-only')).not.toHaveClass(
+      'mm-text-field-base--focused ',
+    );
     expect(getByTestId('text-field-base-readonly')).toHaveAttribute(
       'readonly',
       '',