diff --git a/packages/react-core/src/components/TextInput/TextInput.tsx b/packages/react-core/src/components/TextInput/TextInput.tsx index a78f6bd2801..db897a43d02 100644 --- 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; - /** 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 undefined, ouiaSafe: true }; @@ -120,7 +123,7 @@ export class TextInputBase extends React.Component { - 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 { }); test('read only text input using isReadOnly', () => { - const { asFragment } = render(); + const { asFragment } = render(); 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(); + expect(trimLeftFn).toHaveBeenCalled(); + }); + + test('trimLeft is called when isLeftTruncated is true', async () => { + const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation(); + + render(); + 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 index e5ff51f7e81..18e5cc29bea 100644 --- 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,7 +99,7 @@ exports[`TextInput plain read only text input 1`] = ` exports[`TextInput read only text input using isReadOnly 1`] = ` diff --git a/packages/react-core/src/components/TextInput/examples/TextInput.md b/packages/react-core/src/components/TextInput/examples/TextInput.md index 52694d44ab1..747e062f372 100644 --- 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/packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx b/packages/react-core/src/components/TextInput/examples/TextInputStartTruncated.tsx similarity index 76% rename from packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx rename to packages/react-core/src/components/TextInput/examples/TextInputStartTruncated.tsx index a85edc91b0a..fad11295028 100644 --- a/packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx +++ b/packages/react-core/src/components/TextInput/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 ( 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 index 9b4b54d2b08..ebb9b443196 100644 --- 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 Input Truncated on Left Example