feat(TextInput): Added isStartTruncted prop and deprecated isLeftTrun…

…cted prop (#9610) * feat(TextInput): Added isStartTruncte prop and depreated isLeftTruncated prop * Updated prop in demo app
patternfly · Sep 18, 2023 · b1aaf3c · b1aaf3c
1 parent f856af1
commit b1aaf3c
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 15 deletions.
diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx
@@ -67,8 +67,10 @@ export interface TextInputProps
   'aria-label'?: string;
   /** @hide A reference object to attach to the text input box. */
   innerRef?: React.RefObject<any>;
-  /** Trim text on left */
+  /** @deprecated Use isStartTruncated instead. Trim text at start */
   isLeftTruncated?: boolean;
+  /** Trim text at start */
+  isStartTruncated?: boolean;
   /** Callback function when text input is focused */
   onFocus?: (event?: any) => void;
   /** Callback function when text input is blurred (focus leaves) */
@@ -96,6 +98,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     isExpanded: false,
     type: TextInputTypes.text,
     isLeftTruncated: false,
+    isStartTruncated: false,
     onChange: (): any => undefined,
     ouiaSafe: true
   };
@@ -120,15 +123,15 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   };
 
   componentDidMount() {
-    if (this.props.isLeftTruncated) {
+    if (this.props.isLeftTruncated || this.props.isStartTruncated) {
       const inputRef = this.props.innerRef || this.inputRef;
       this.observer = getResizeObserver(inputRef.current, this.handleResize, true);
       this.handleResize();
     }
   }
 
   componentWillUnmount() {
-    if (this.props.isLeftTruncated) {
+    if (this.props.isLeftTruncated || this.props.isStartTruncated) {
       this.observer();
     }
   }
@@ -149,16 +152,16 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   };
 
   onFocus = (event?: any) => {
-    const { isLeftTruncated, onFocus } = this.props;
-    if (isLeftTruncated) {
+    const { isLeftTruncated, isStartTruncated, onFocus } = this.props;
+    if (isLeftTruncated || isStartTruncated) {
       this.restoreText();
     }
     onFocus && onFocus(event);
   };
 
   onBlur = (event?: any) => {
-    const { isLeftTruncated, onBlur } = this.props;
-    if (isLeftTruncated) {
+    const { isLeftTruncated, isStartTruncated, onBlur } = this.props;
+    if (isLeftTruncated || isStartTruncated) {
       this.handleResize();
     }
     onBlur && onBlur(event);
@@ -177,6 +180,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       onFocus,
       onBlur,
       isLeftTruncated,
+      isStartTruncated,
       isExpanded,
       readOnly,
       readOnlyVariant,

diff --git a/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx b/packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { TextInput, TextInputBase } from '../TextInput';
 import { ValidatedOptions } from '../../../helpers/constants';
+import * as ReactCoreUtils from '@patternfly/react-core/src/helpers/util';
 
 const props = {
   onChange: jest.fn(),
@@ -32,7 +33,7 @@ describe('TextInput', () => {
   });
 
   test('read only text input using isReadOnly', () => {
-    const { asFragment } = render(<TextInput isReadOnly value="read only" aria-label="read only text input" />);
+    const { asFragment } = render(<TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -109,4 +110,18 @@ describe('TextInput', () => {
 
     expect(myMock).not.toHaveBeenCalled();
   });
+
+  test('trimLeft is called when isStartTruncated is true', async () => {
+    const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
+
+    render(<TextInput isStartTruncated aria-label="start truncated text input" />);
+    expect(trimLeftFn).toHaveBeenCalled();
+  });
+
+  test('trimLeft is called when isLeftTruncated is true', async () => {
+    const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
+
+    render(<TextInput isLeftTruncated aria-label="start truncated text input" />);
+    expect(trimLeftFn).toHaveBeenCalled();
+  });
 });
diff --git a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -99,14 +99,15 @@ exports[`TextInput plain read only text input 1`] = `
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-form-control"
+    class="pf-v5-c-form-control pf-m-readonly"
   >
     <input
       aria-invalid="false"
       aria-label="read only text input"
       data-ouia-component-id="OUIA-Generated-TextInputBase-4"
       data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
+      readonly=""
       type="text"
       value="read only"
     />

diff --git a/packages/react-core/src/components/TextInput/examples/TextInput.md b/packages/react-core/src/components/TextInput/examples/TextInput.md
@@ -23,9 +23,9 @@ import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 
 ```
 
-### Truncated on Left
+### Truncated at start
 
-```ts file="./TextInputLeftTruncated.tsx"
+```ts file="./TextInputStartTruncated.tsx"
 
 ```
 

diff --git a/...Input/examples/TextInputLeftTruncated.tsx → ...nput/examples/TextInputStartTruncated.tsx b/...Input/examples/TextInputLeftTruncated.tsx → ...nput/examples/TextInputStartTruncated.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import { TextInput } from '@patternfly/react-core';
 
-export const LeftTruncatedTextInput: React.FunctionComponent = () => {
+export const StartTruncatedTextInput: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
   );
   return (
     <TextInput
-      isLeftTruncated
+      isStartTruncated
       value={value}
       type="text"
       onChange={(_event, value) => setValue(value)}
-      aria-label="left-truncated text input example"
+      aria-label="start-truncated text input example"
     />
   );
 };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx
@@ -75,7 +75,7 @@ export class TextInputDemo extends Component {
         <Text>Text Input Truncated on Left Example</Text>
         <TextInput
           id="text-truncated-on-left"
-          isLeftTruncated
+          isStartTruncated
           onChange={this.handleLeftTruncatedTextInputChange}
           value={this.state.leftTruncatedTextInputValue}
         />