@patternfly/react-core 5.1.1-prerelease.8 → 6.0.0-alpha.1

package/src/components/Slider/Slider.tsx

@@ -46,16 +46,18 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   inputAriaLabel?: string;
   /** Text label that is place after the input field. */
   inputLabel?: string | number;
-  /** Position of the input. */
-  inputPosition?: 'aboveThumb' | 'right';
+  /** Position of the input. Note "right" is deprecated. Use "end" instead*/
+  inputPosition?: 'aboveThumb' | 'right' | 'end';
   /** Value displayed in the input field. */
   inputValue?: number;
   /** Adds disabled styling, and disables the slider and the input component if present. */
   isDisabled?: boolean;
   /** Flag to show value input field. */
   isInputVisible?: boolean;
-  /** Actions placed to the left of the slider. */
+  /** @deprecated Use startActions instead. Actions placed at the start of the slider. */
   leftActions?: React.ReactNode;
+  /** Actions placed at the start of the slider. */
+  startActions?: React.ReactNode;
   /** The maximum permitted value. */
   max?: number;
   /** The minimum permitted value. */
@@ -67,8 +69,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
     inputValue?: number,
     setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
   ) => void;
-  /** Actions placed to the right of the slider. */
+  /** @deprecated Use endActions instead. Actions placed to the right of the slider. */
   rightActions?: React.ReactNode;
+  /** Actions placed at the end of the slider. */
+  endActions?: React.ReactNode;
   /** Flag to indicate if boundaries should be shown for slider that does not have custom steps. */
   showBoundaries?: boolean;
   /** Flag to indicate if ticks should be shown for slider that does not have custom steps. */
@@ -95,10 +99,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   inputAriaLabel = 'Slider value input',
   thumbAriaLabel = 'Value',
   hasTooltipOverThumb = false,
-  inputPosition = 'right',
+  inputPosition = 'end',
   onChange,
   leftActions,
+  startActions,
   rightActions,
+  endActions,
   step = 1,
   min = 0,
   max = 100,
@@ -114,6 +120,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const [localValue, setValue] = useState(value);
   const [localInputValue, setLocalInputValue] = useState(inputValue);
 
+  let isRTL: boolean;
+
+  React.useEffect(() => {
+    isRTL = window.getComputedStyle(sliderRailRef.current).getPropertyValue('direction') === 'rtl';
+  });
+
   React.useEffect(() => {
     setValue(value);
   }, [value]);
@@ -182,7 +194,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     e.stopPropagation();
     e.preventDefault();
 
-    diff = e.clientX - thumbRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      diff = thumbRef.current.getBoundingClientRect().right - e.clientX;
+    } else {
+      diff = e.clientX - thumbRef.current.getBoundingClientRect().left;
+    }
 
     document.addEventListener('mousemove', callbackThumbMove);
     document.addEventListener('mouseup', callbackThumbUp);
@@ -191,7 +207,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const handleTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
 
-    diff = e.touches[0].clientX - thumbRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      diff = thumbRef.current.getBoundingClientRect().right - e.touches[0].clientX;
+    } else {
+      diff = e.touches[0].clientX - thumbRef.current.getBoundingClientRect().left;
+    }
 
     document.addEventListener('touchmove', callbackThumbMove, { passive: false });
     document.addEventListener('touchend', callbackThumbUp);
@@ -216,8 +236,13 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     }
 
     const clientPosition = e.touches && e.touches.length ? e.touches[0].clientX : e.clientX;
+    let newPosition;
 
-    let newPosition = clientPosition - diff - sliderRailRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      newPosition = sliderRailRef.current.getBoundingClientRect().right - clientPosition - diff;
+    } else {
+      newPosition = clientPosition - diff - sliderRailRef.current.getBoundingClientRect().left;
+    }
 
     const end = sliderRailRef.current.offsetWidth - thumbRef.current.offsetWidth;
 
@@ -288,21 +313,43 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (!areCustomStepsContinuous && customSteps) {
       const stepIndex = customSteps.findIndex((stepObj) => stepObj.value === localValue);
       if (key === 'ArrowRight') {
-        if (stepIndex + 1 < customSteps.length) {
-          {
-            newValue = customSteps[stepIndex + 1].value;
+        if (isRTL) {
+          if (stepIndex - 1 >= 0) {
+            newValue = customSteps[stepIndex - 1].value;
+          }
+        } else {
+          if (stepIndex + 1 < customSteps.length) {
+            {
+              newValue = customSteps[stepIndex + 1].value;
+            }
           }
         }
       } else if (key === 'ArrowLeft') {
-        if (stepIndex - 1 >= 0) {
-          newValue = customSteps[stepIndex - 1].value;
+        if (isRTL) {
+          if (stepIndex + 1 < customSteps.length) {
+            {
+              newValue = customSteps[stepIndex + 1].value;
+            }
+          }
+        } else {
+          if (stepIndex - 1 >= 0) {
+            newValue = customSteps[stepIndex - 1].value;
+          }
         }
       }
     } else {
       if (key === 'ArrowRight') {
-        newValue = localValue + step <= max ? localValue + step : max;
+        if (isRTL) {
+          newValue = localValue - step >= min ? localValue - step : min;
+        } else {
+          newValue = localValue + step <= max ? localValue + step : max;
+        }
       } else if (key === 'ArrowLeft') {
-        newValue = localValue - step >= min ? localValue - step : min;
+        if (isRTL) {
+          newValue = localValue + step <= max ? localValue + step : max;
+        } else {
+          newValue = localValue - step >= min ? localValue - step : min;
+        }
       }
     }
 
@@ -347,8 +394,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     for (let i = min; i <= max; i = i + step) {
       const stepValue = getStepValue(i, min, max);
 
-      // If we boundaries but not ticks just generate the needed steps
-      // so that we don't pullute them DOM with empty divs
+      // If boundaries but not ticks just generate the needed steps
+      // so that we don't pollute them DOM with empty divs
       if (!showTicks && showBoundaries && i !== min && i !== max) {
         continue;
       }
@@ -394,7 +441,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       style={{ ...style, ...inputStyle }}
       {...props}
     >
-      {leftActions && <div className={css(styles.sliderActions)}>{leftActions}</div>}
+      {(leftActions || startActions) && <div className={css(styles.sliderActions)}>{leftActions || startActions}</div>}
       <div className={css(styles.sliderMain)}>
         <div className={css(styles.sliderRail)} ref={sliderRailRef} onClick={!isDisabled ? onSliderRailClick : null}>
           <div className={css(styles.sliderRailTrack)} />
@@ -434,8 +481,10 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
         )}
       </div>
-      {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
-      {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}
+      {isInputVisible && (inputPosition === 'right' || inputPosition === 'end') && (
+        <div className={css(styles.sliderValue)}>{displayInput()}</div>
+      )}
+      {(rightActions || endActions) && <div className={css(styles.sliderActions)}>{rightActions || endActions}</div>}
     </div>
   );
 };

package/src/components/Slider/SliderStep.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
+import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Additional classes added to the slider step. */
@@ -26,7 +27,7 @@ export const SliderStep: React.FunctionComponent<SliderStepProps> = ({
   isActive = false,
   ...props
 }: SliderStepProps) => {
-  const style = { '--pf-v5-c-slider__step--Left': `${value}%` } as React.CSSProperties;
+  const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties;
   return (
     <div className={css(styles.sliderStep, isActive && styles.modifiers.active, className)} style={style} {...props}>
       {!isTickHidden && <div className={css(styles.sliderStepTick)} />}

package/src/components/Slider/_tests_/Slider.test.tsx

@@ -46,7 +46,7 @@ describe('slider', () => {
 
   test('renders slider with input', () => {
     const { asFragment } = render(
-      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="right" />
+      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="end" />
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -62,8 +62,8 @@ describe('slider', () => {
     const { asFragment } = render(
       <Slider
         value={50}
-        leftActions={<Button variant="plain" aria-label="Minus" />}
-        rightActions={<Button variant="plain" aria-label="Plus" />}
+        startActions={<Button variant="plain" aria-label="Minus" />}
+        endActions={<Button variant="plain" aria-label="Plus" />}
       />
     );
     expect(asFragment()).toMatchSnapshot();

package/src/components/Slider/examples/SliderActions.tsx

@@ -65,12 +65,12 @@ export const SliderActions: React.FunctionComponent = () => {
       <Slider
         value={value1}
         onChange={onChange1}
-        leftActions={
+        startActions={
           <Button variant="plain" aria-label="Minus" onClick={onMinusClick}>
             <MinusIcon />
           </Button>
         }
-        rightActions={
+        endActions={
           <Button variant="plain" aria-label="Plus" onClick={onPlusClick}>
             <PlusIcon />
           </Button>
@@ -85,7 +85,7 @@ export const SliderActions: React.FunctionComponent = () => {
         inputLabel="%"
         isInputVisible
         isDisabled={isDisabled}
-        rightActions={buildAction(isDisabled)}
+        endActions={buildAction(isDisabled)}
       />
     </>
   );

package/src/components/Tabs/Tabs.tsx

@@ -63,10 +63,14 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   isVertical?: boolean;
   /** Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true. */
   hasNoBorderBottom?: boolean;
-  /** Aria-label for the left scroll button */
+  /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
-  /** Aria-label for the right scroll button */
+  /** @deprecated Please use forwardScrollAriaLabel. Aria-label for the right scroll button */
   rightScrollAriaLabel?: string;
+  /** Aria-label for the back scroll button */
+  backScrollAriaLabel?: string;
+  /** Aria-label for the forward scroll button */
+  forwardScrollAriaLabel?: string;
   /** Determines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region */
   component?: 'div' | 'nav';
   /** Provides an accessible label for the tabs. Labels should be unique for each set of tabs that are present on a page. When component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page. */
@@ -127,8 +131,8 @@ interface TabsState {
    * shown and rendering must be stopped after they stop being shown to preserve CSS transitions.
    */
   renderScrollButtons: boolean;
-  disableLeftScrollButton: boolean;
-  disableRightScrollButton: boolean;
+  disableBackScrollButton: boolean;
+  disableForwardScrollButton: boolean;
   shownKeys: (string | number)[];
   uncontrolledActiveKey: number | string;
   uncontrolledIsExpandedLocal: boolean;
@@ -140,14 +144,15 @@ class Tabs extends React.Component<TabsProps, TabsState> {
   static displayName = 'Tabs';
   tabList = React.createRef<HTMLUListElement>();
   leftScrollButtonRef = React.createRef<HTMLButtonElement>();
+  private direction = 'ltr';
   constructor(props: TabsProps) {
     super(props);
     this.state = {
       enableScrollButtons: false,
       showScrollButtons: false,
       renderScrollButtons: false,
-      disableLeftScrollButton: true,
-      disableRightScrollButton: true,
+      disableBackScrollButton: true,
+      disableForwardScrollButton: true,
       shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
@@ -177,7 +182,9 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     isBox: false,
     hasNoBorderBottom: false,
     leftScrollAriaLabel: 'Scroll left',
+    backScrollAriaLabel: 'Scroll back',
     rightScrollAriaLabel: 'Scroll right',
+    forwardScrollAriaLabel: 'Scroll forward',
     component: TabsComponent.div,
     mountOnEnter: false,
     unmountOnExit: false,
@@ -232,8 +239,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     clearTimeout(this.scrollTimeout);
     this.scrollTimeout = setTimeout(() => {
       const container = this.tabList.current;
-      let disableLeftScrollButton = true;
-      let disableRightScrollButton = true;
+      let disableBackScrollButton = true;
+      let disableForwardScrollButton = true;
       let enableScrollButtons = false;
       let overflowingTabCount = 0;
 
@@ -246,8 +253,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
 
         enableScrollButtons = overflowOnLeft || overflowOnRight;
 
-        disableLeftScrollButton = !overflowOnLeft;
-        disableRightScrollButton = !overflowOnRight;
+        disableBackScrollButton = !overflowOnLeft;
+        disableForwardScrollButton = !overflowOnRight;
       }
 
       if (isOverflowHorizontal) {
@@ -256,14 +263,14 @@ class Tabs extends React.Component<TabsProps, TabsState> {
 
       this.setState({
         enableScrollButtons,
-        disableLeftScrollButton,
-        disableRightScrollButton,
+        disableBackScrollButton,
+        disableForwardScrollButton,
         overflowingTabCount
       });
     }, 100);
   };
 
-  scrollLeft = () => {
+  scrollBack = () => {
     // find first Element that is fully in view on the left, then scroll to the element before it
     if (this.tabList.current) {
       const container = this.tabList.current;
@@ -278,12 +285,18 @@ class Tabs extends React.Component<TabsProps, TabsState> {
         }
       }
       if (lastElementOutOfView) {
-        container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls left to go back
+          container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls right to go back
+          container.scrollLeft += lastElementOutOfView.scrollWidth;
+        }
       }
     }
   };
 
-  scrollRight = () => {
+  scrollForward = () => {
     // find last Element that is fully in view on the right, then scroll to the element after it
     if (this.tabList.current) {
       const container = this.tabList.current as any;
@@ -297,7 +310,13 @@ class Tabs extends React.Component<TabsProps, TabsState> {
         }
       }
       if (firstElementOutOfView) {
-        container.scrollLeft += firstElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls right to go forward
+          container.scrollLeft += firstElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls left to go forward
+          container.scrollLeft -= firstElementOutOfView.scrollWidth;
+        }
       }
     }
   };
@@ -314,6 +333,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       if (canUseDOM) {
         window.addEventListener('resize', this.handleScrollButtons, false);
       }
+      this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
@@ -360,6 +380,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
+
+    this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
   }
 
   render() {
@@ -376,6 +398,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       hasNoBorderBottom,
       leftScrollAriaLabel,
       rightScrollAriaLabel,
+      backScrollAriaLabel,
+      forwardScrollAriaLabel,
       'aria-label': ariaLabel,
       component,
       ouiaId,
@@ -400,8 +424,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     const {
       showScrollButtons,
       renderScrollButtons,
-      disableLeftScrollButton,
-      disableRightScrollButton,
+      disableBackScrollButton,
+      disableForwardScrollButton,
       shownKeys,
       uncontrolledActiveKey,
       uncontrolledIsExpandedLocal,
@@ -497,10 +521,10 @@ class Tabs extends React.Component<TabsProps, TabsState> {
             <button
               type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={leftScrollAriaLabel}
-              onClick={this.scrollLeft}
-              disabled={disableLeftScrollButton}
-              aria-hidden={disableLeftScrollButton}
+              aria-label={backScrollAriaLabel || leftScrollAriaLabel}
+              onClick={this.scrollBack}
+              disabled={disableBackScrollButton}
+              aria-hidden={disableBackScrollButton}
               ref={this.leftScrollButtonRef}
             >
               <AngleLeftIcon />
@@ -514,10 +538,10 @@ class Tabs extends React.Component<TabsProps, TabsState> {
             <button
               type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={rightScrollAriaLabel}
-              onClick={this.scrollRight}
-              disabled={disableRightScrollButton}
-              aria-hidden={disableRightScrollButton}
+              aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
+              onClick={this.scrollForward}
+              disabled={disableForwardScrollButton}
+              aria-hidden={disableForwardScrollButton}
             >
               <AngleRightIcon />
             </button>

package/src/components/Tabs/examples/Tabs.md

@@ -28,7 +28,7 @@ You can adjust a tab in the following ways:
 - To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
 - To add a tooltip to an aria-disabled tab, use the `tooltip` property. 
 
-Most tab variations can either be 'default' or 'boxed': 
+Tabs can be styled as 'default' or 'boxed': 
 
 - Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. 
 - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
@@ -207,8 +207,6 @@ The tab its content should only be mounted when the tab is visible.
 
 To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`. 
 
-Aria labels may be controlled manually by passing the `closeButtonAriaLabel` property to a `<Tab>` and the `addButtonAriaLabel` property to `<Tabs>`.
-
 ```ts file="./TabsDynamic.tsx"
 ```
 

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"
     />
   );
 };

package/src/components/Timestamp/Timestamp.tsx

@@ -64,6 +64,10 @@ export interface TimestampProps extends React.HTMLProps<HTMLSpanElement> {
    * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
    */
   locale?: string;
+  /** Flag indicating whether the default content should be displayed as a UTC string
+   * instead of a local string.
+   */
+  shouldDisplayUTC?: boolean;
   /** Determines the format of the displayed time in the timestamp and UTC tooltip. Examples:
    * "Full" => 11:25:00 AM Eastern Daylight Time
    * "Long" => 11:25:00 AM EDT
@@ -84,6 +88,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   displaySuffix = '',
   is12Hour,
   locale,
+  shouldDisplayUTC,
   timeFormat,
   tooltip,
   ...props
@@ -117,7 +122,6 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: timeFormat })
   });
-  const defaultDisplay = `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
 
   const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
   const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
@@ -125,8 +129,13 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: utcTimeFormat })
   });
-  const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`;
+  const defaultUTCSuffix = timeFormat === 'full' ? 'Coordinated Universal Time' : 'UTC';
+  const createUTCContent = (customSuffix: string) =>
+    `${utcDateString} ${customSuffix ? customSuffix : defaultUTCSuffix}`;
 
+  const defaultDisplay = shouldDisplayUTC
+    ? createUTCContent(displaySuffix)
+    : `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
   const { dateTime, ...propsWithoutDateTime } = props;
 
   const timestamp = (
@@ -143,7 +152,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
 
   return tooltip ? (
     <Tooltip
-      content={tooltip.variant === TimestampTooltipVariant.default ? defaultTooltipContent : tooltip.content}
+      content={tooltip.variant === TimestampTooltipVariant.default ? createUTCContent(tooltip.suffix) : tooltip.content}
       {...tooltip.tooltipProps}
     >
       {timestamp}