@patternfly/react-core 5.1.1-prerelease.11 → 5.1.1-prerelease.13

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.10","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.12","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.10","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.12","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.10","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.12","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.11",
+  "version": "5.1.1-prerelease.13",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -45,15 +45,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.1.1-prerelease.5",
-    "@patternfly/react-styles": "^5.1.1-prerelease.5",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.5",
+    "@patternfly/react-icons": "^5.1.1-prerelease.6",
+    "@patternfly/react-styles": "^5.1.1-prerelease.6",
+    "@patternfly/react-tokens": "^5.1.1-prerelease.6",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.24",
+    "@patternfly/patternfly": "5.1.0-prerelease.28",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "10e4992a19129f0123d894612b9160e498553d73"
+  "gitHead": "ff467eef5db530f0245ba29ca01db1f4a239f274"
 }

package/src/components/Checkbox/examples/Checkbox.md

@@ -6,46 +6,52 @@ cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 
-import './checkbox.css';
-
 ## Examples
 
 ### Controlled
 
 ```ts file='./CheckboxControlled.tsx'
+
 ```
 
 ### Uncontrolled
 
 ```ts file='./CheckboxUncontrolled.tsx'
+
 ```
 
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'
+
 ```
 
 ### Checkbox with description
 
 ```ts file='./CheckboxWithDescription.tsx'
+
 ```
 
 ### Checkbox with body
 
 ```ts file='./CheckboxWithBody.tsx'
+
 ```
 
 ### Checkbox with description and body
 
 ```ts file='./CheckboxWithDescriptionBody.tsx'
+
 ```
 
 ### Standalone input
 
 ```ts file='./CheckboxStandaloneInput.tsx'
+
 ```
 
 ### Required input
 
 ```ts file='./CheckboxRequired.tsx'
+
 ```

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -49,22 +49,24 @@ export const CheckboxControlled: React.FunctionComponent = () => {
         onChange={handleChange}
         id="controlled-check-1"
         name="check1"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 1"
-        isChecked={isChecked2}
-        onChange={handleChange}
-        id="controlled-check-2"
-        name="check2"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 2"
-        isChecked={isChecked3}
-        onChange={handleChange}
-        id="controlled-check-3"
-        name="check3"
+        body={
+          <>
+            <Checkbox
+              label="Child CheckBox 1"
+              isChecked={isChecked2}
+              onChange={handleChange}
+              id="controlled-check-2"
+              name="check2"
+            />
+            <Checkbox
+              label="Child CheckBox 2"
+              isChecked={isChecked3}
+              onChange={handleChange}
+              id="controlled-check-3"
+              name="check3"
+            />
+          </>
+        }
       />
       <Checkbox
         label="Controlled CheckBox"

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -242,6 +242,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
+                    {...(isCode && { dir: 'ltr' })}
                   />
                   <ClipboardCopyButton
                     exitDelay={exitDelay}

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -36,7 +36,7 @@ class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps>
         contentEditable={!isReadOnly}
         {...props}
       >
-        {isCode ? <pre>{children}</pre> : children}
+        {isCode ? <pre dir="ltr">{children}</pre> : children}
       </div>
     );
   }

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps
@@ -31,7 +32,9 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     aria-expanded={isExpanded}
     {...props}
   >
-    {isExpanded ? <AngleDownIcon aria-hidden="true" /> : <AngleRightIcon aria-hidden="true" />}
+    <div className={css(styles.clipboardCopyToggleIcon)}>
+      <AngleRightIcon aria-hidden="true" />
+    </div>
   </Button>
 );
 ClipboardCopyToggle.displayName = 'ClipboardCopyToggle';

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap

@@ -7,7 +7,9 @@ exports[`expanded code content render 1`] = `
     contenteditable="true"
     id="id-1"
   >
-    <pre>
+    <pre
+      dir="ltr"
+    >
       {
     "name": "@patternfly/react-core",
     "version": "1.33.2"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -15,19 +15,23 @@ exports[`ClipboardCopyToggle toggle button render 1`] = `
     id="my-id"
     type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 256 512"
-      width="1em"
+    <div
+      class="pf-v5-c-clipboard-copy__toggle-icon"
     >
-      <path
-        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+        />
+      </svg>
+    </div>
   </button>
 </DocumentFragment>
 `;

package/src/components/SearchInput/SearchInput.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
+import { Icon } from '../Icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -375,7 +376,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </InputGroupItem>
       )}
       {!!onSearch && (
-        <InputGroupItem isPlain>
+        <InputGroupItem>
           <Button
             type="submit"
             variant={ButtonVariant.control}
@@ -383,7 +384,9 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             onClick={onSearchHandler}
             isDisabled={isDisabled}
           >
-            <ArrowRightIcon />
+            <Icon shouldMirrorRTL>
+              <ArrowRightIcon />
+            </Icon>
           </Button>
         </InputGroupItem>
       )}

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -103,7 +103,7 @@ exports[`SearchInput advanced search 1`] = `
         </button>
       </div>
       <div
-        class="pf-v5-c-input-group__item pf-m-plain"
+        class="pf-v5-c-input-group__item"
       >
         <button
           aria-disabled="false"
@@ -114,19 +114,27 @@ exports[`SearchInput advanced search 1`] = `
           data-ouia-safe="true"
           type="submit"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
+          <span
+            class="pf-v5-c-icon"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
+            <span
+              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                />
+              </svg>
+            </span>
+          </span>
         </button>
       </div>
     </div>
@@ -245,7 +253,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
         </button>
       </div>
       <div
-        class="pf-v5-c-input-group__item pf-m-plain"
+        class="pf-v5-c-input-group__item"
       >
         <button
           aria-disabled="false"
@@ -256,19 +264,27 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           data-ouia-safe="true"
           type="submit"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
+          <span
+            class="pf-v5-c-icon"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
+            <span
+              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                />
+              </svg>
+            </span>
+          </span>
         </button>
       </div>
     </div>
@@ -579,7 +595,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         </button>
       </div>
       <div
-        class="pf-v5-c-input-group__item pf-m-plain"
+        class="pf-v5-c-input-group__item"
       >
         <button
           aria-disabled="false"
@@ -590,19 +606,27 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           data-ouia-safe="true"
           type="submit"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
+          <span
+            class="pf-v5-c-icon"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
+            <span
+              class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                />
+              </svg>
+            </span>
+          </span>
         </button>
       </div>
     </div>
@@ -746,7 +770,7 @@ exports[`SearchInput search input with hint 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-input-group__item pf-m-plain"
+      class="pf-v5-c-input-group__item"
     >
       <button
         aria-disabled="false"
@@ -757,19 +781,27 @@ exports[`SearchInput search input with hint 1`] = `
         data-ouia-safe="true"
         type="submit"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
+        <span
+          class="pf-v5-c-icon"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
+          <span
+            class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+              />
+            </svg>
+          </span>
+        </span>
       </button>
     </div>
   </div>
@@ -898,7 +930,7 @@ exports[`SearchInput simple search input 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-input-group__item pf-m-plain"
+      class="pf-v5-c-input-group__item"
     >
       <button
         aria-disabled="false"
@@ -909,19 +941,27 @@ exports[`SearchInput simple search input 1`] = `
         data-ouia-safe="true"
         type="submit"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
+        <span
+          class="pf-v5-c-icon"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
+          <span
+            class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+              />
+            </svg>
+          </span>
+        </span>
       </button>
     </div>
   </div>

package/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,7 +123,7 @@ 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();
@@ -128,7 +131,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
   }
 
   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,

package/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();
+  });
 });

package/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`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-form-control"
+    class="pf-v5-c-form-control pf-m-readonly"
   >
     <input
       aria-invalid="false"
@@ -107,6 +107,7 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
       data-ouia-component-id="OUIA-Generated-TextInputBase-4"
       data-ouia-component-type="PF5/TextInput"
       data-ouia-safe="true"
+      readonly=""
       type="text"
       value="read only"
     />

package/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"
 
 ```
 

package/src/components/TextInput/examples/{TextInputLeftTruncated.tsx → 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"
     />
   );
 };