@patternfly/react-core 5.0.0-alpha.1 → 5.0.0-alpha.100

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

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
 ouia: true
 ---
 
@@ -15,141 +15,217 @@ import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-d
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-Most tab variations are available as open (default) or box style tabs. Select the 'isBox' checkbox to preview an example with box styled tabs.
-The Tabs items background can be also toggled with 'Tab light variation' checkbox.
-Similarly the 'Tab content light variation' checkbox affects the TabContent background.
-
 ## Examples
 
-### Default
+### Default tabs
+
+A `<Tabs>` component contains multiple `<Tab>` components that may be used to navigate between sets of content within a page.
+
+You can adjust a tab in the following ways: 
+
+- To label a tab with text, pass a `<TabTitleText>` component into the `title` property of a `<Tab>`.
+- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies. 
+- 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. 
 
-When passing in a Tooltip component to the Tab component, the Tooltip can also be passed in directly to the `tooltip` prop.
+Most tab variations can either be '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.
 
 ```ts file="./TabsDefault.tsx"
 ```
 
-### With tooltip react ref
+### Boxed light tabs
 
-When using a React ref to link a Tooltip to a Tab component via the `reference` prop, you should avoid manually passing in a value of "off" to the `aria-live` prop. Doing so may lead to the tooltip becoming less accessible to assistive technologies.
+To change the background color of boxed tabs, use the `variant` property. 
 
-The tooltip should also have the `id` prop passed in. The value given to this prop should then be passed into the tab's `aria-describedby` prop. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
+The following example passes `variant={isTabsLightScheme ? 'light300' : 'default'}` into the `<Tabs>` component to style the tabs with a lighter color.
 
-```ts file="./TabsTooltipReactRef.tsx"
+Toggle the tab color by selecting the 'Tabs light variation' checkbox in the following example.
+
+```ts file="./TabsBoxLight.tsx"
 ```
 
-### Uncontrolled
+### Vertical tabs
 
-```ts file="./TabsUncontrolled.tsx"
+Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations.
+
+To style tabs vertically, use the `isVertical` property. 
+
+```ts file="./TabsVertical.tsx"
 ```
 
-### Box light variation
+### Vertical expandable tabs
 
-```ts file="./TabsBoxLight.tsx"
+Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs. 
+
+Expandable tabs can be enabled at different breakpoints. The following example passes `expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}` into the `<Tabs>` component.
+
+To flag vertical tabs when they're expanded, use the `isExpanded` property.
+
+```ts file="./TabsVerticalExpandable.tsx"
+```
+
+### Vertical expandable uncontrolled
+
+To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpanded` property.
+
+```ts file="./TabsVerticalExpandableUncontrolled.tsx"
 ```
 
-### Default overflow
+### Default overflow tabs
+
+By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows. 
 
 ```ts file="./TabsDefaultOverflow.tsx"
 ```
 
-### Horizontal overflow
+### Horizontal overflow tabs
+
+Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content. 
+
+To enable horizontal overflow, use the `isOverflowHorizontal` property.
+
+In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.
 
 ```ts file="./TabsHorizontalOverflow.tsx" isBeta
 ```
 
-### Vertical
+### With tooltip react ref
 
-```ts file="./TabsVertical.tsx"
-```
+When using a React ref to link a tooltip to a tab component via the `reference` property, you should avoid manually passing in a value of "off" to the `aria-live` property. Doing so may cause the tooltip to become less accessible to assistive technologies.
 
-### Vertical expandable
+The tooltip should also have the `id` property passed in. The value of `id` should be passed into the tab's `aria-describedby` property. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.
 
-```ts file="./TabsVerticalExpandable.tsx"
+```ts file="./TabsTooltipReactRef.tsx"
 ```
 
-### Vertical expandable uncontrolled
+### Uncontrolled tabs
 
-```ts file="./TabsVerticalExpandableUncontrolled.tsx"
+To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example. 
+
+
+```ts file="./TabsUncontrolled.tsx"
 ```
 
-### Inset
+### With adjusted inset
+
+To adjust the inset of tabs and visually separate them more, use the `inset` property. You can set the inset to "insetNone", "insetSm", "insetMd", "insetLg", "insetXl", or "inset2xl" at "default", "sm", "md", "lg, "xl, and "2xl" breakpoints.
 
 ```ts file="./TabsInset.tsx"
 ```
 
-### Page Insets
+### With page insets
+
+To adjust the left padding of tabs, use the `usePageInsets` property. This property aligns the tabs padding with the default padding of the page section, which makes it easier to align tabs with page section content.
 
 ```ts file="./TabsPageInsets.tsx"
 ```
 
-### Icons and text
+### With icons and text
+
+You can render different content in the `title` property of a tab to add icons and text. 
+
+To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `<TabTitleText>` component.
 
 ```ts file="./TabsIconAndText.tsx"
 ```
 
-### Tabs with sub tabs
+### Secondary tabs
 
-```ts file="./TabsSubtabs.tsx"
-```
+Use secondary tabs as "sub tabs" or within other components, like modals. Secondary tabs have less visually prominent styling. 
 
-### Filled
+To apply secondary styling to tabs, use the `isSecondary` property. 
 
-```ts file="TabsFilled.tsx"
+```ts file="./TabsSubtabs.tsx"
 ```
 
-### Filled with icons
+### Filled tabs with icons
+
+To allow tabs to fill the available width of the page section, use the `isFilled` property. 
 
 ```ts file="./TabsFilledWithIcons.tsx"
 ```
 
-### Using the nav element
+### Tabs linked to nav elements
+
+To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property. 
+
+Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`. 
 
 ```ts file="./TabsNav.tsx"
 ```
 
-### Sub nav using the nav element
+### Secondary tabs linked to nav elements
+
+Secondary tabs can also link to nav elements. 
 
 ```ts file="./TabsNavSecondary.tsx"
 ```
 
-### Separate content
+### With separate content
+
+If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties 
 
 ```ts file="./TabsSeparateContent.tsx"
 ```
 
-### Tab content with body and padding
+### With tab content with body and padding
+
+To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property. 
 
 ```ts file="./TabsContentWithBodyPadding.tsx"
 ```
 
 ### Children mounting on click
 
+To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property. 
+
+Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.
+
 ```ts file="./TabsChildrenMounting.tsx"
 ```
 
 ### Unmounting invisible children
 
+To unmount tab children (remove from the DOM) when they are no longer visible, use the `unmountOnExit` property.
+
 ```ts file="./TabsUnmountingInvisibleChildren.tsx"
 ```
 
-### Toggled separate content
+### Toggled tab content
+
+You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item  2" invisible.
+
+The tab its content should only be mounted when the tab is visible. 
 
 ```ts file="./TabsToggledSeparateContent.tsx"
 ```
 
-### Dynamic
+### Dynamic tabs
 
-To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeButtonAriaLabel` to `Tab` and `addButtonAriaLabel` to `Tabs`.
+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>`. 
 
-```ts file="./TabsDynamic.tsx" isBeta
+Aria labels may be controlled manually by passing the `closeButtonAriaLabel` property to a `<Tab>` and the `addButtonAriaLabel` property to `<Tabs>`.
+
+```ts file="./TabsDynamic.tsx"
 ```
 
-### Help action
+### With help action popover
+
+You may add a help action to a tab to provide users with additional context in a popover. 
+
+To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
 
 ```ts file="./TabsHelp.tsx" isBeta
 ```
 
-### Help and close actions
+### With help and close actions
+
+To add multiple actions to a tab, create a `<TabAction>` component for each action. 
+
+The following example passes in both help popover and close actions.
 
 ```ts file="./TabsHelpAndClose.tsx" isBeta
 ```

package/src/components/Tabs/examples/TabsBoxLight.tsx

@@ -52,7 +52,7 @@ export const TabsBoxLight: React.FunctionComponent = () => {
         <Checkbox
           label="Tabs light variation"
           isChecked={isTabsLightScheme}
-          onChange={toggleScheme}
+          onChange={(_event, checked) => toggleScheme(checked)}
           aria-label="show light scheme variation checkbox"
           id="toggle-scheme"
           name="toggle-scheme"

package/src/components/Tabs/examples/TabsDefault.tsx

@@ -51,7 +51,7 @@ export const TabsDefault: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox"
           id="toggle-box-default"
           name="toggle-box-default"

package/src/components/Tabs/examples/TabsDefaultOverflow.tsx

@@ -63,7 +63,7 @@ export const TabsDefaultOverflow: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox on overflow"
           id="toggle-box-overflow"
           name="toggle-box-overflow"

package/src/components/Tabs/examples/TabsFilled.tsx

@@ -40,7 +40,7 @@ export const TabsFilled: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with filled tabs"
           id="toggle-box-filled"
           name="toggle-box-filled"

package/src/components/Tabs/examples/TabsFilledWithIcons.tsx

@@ -74,7 +74,7 @@ export const TabsFilledWithIcons: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with filled icon tabs"
           id="toggle-box-filled-icon"
           name="toggle-box-filled-icon"

package/src/components/Tabs/examples/TabsHelp.tsx

@@ -16,7 +16,7 @@ export const TabsHelp: React.FunctionComponent = () => {
         </div>
       }
       footerContent="Popover footer"
-      reference={popoverRef}
+      triggerRef={popoverRef}
     />
   );
 
@@ -41,7 +41,6 @@ export const TabsHelp: React.FunctionComponent = () => {
             actions={
               <>
                 <TabAction
-                  isHelpAction
                   aria-label={`Help action for ${tab}`}
                   ref={ref}
                   {...(tab === 'Help disabled' && { isDisabled: true })}

package/src/components/Tabs/examples/TabsHelpAndClose.tsx

@@ -32,7 +32,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
         </div>
       }
       footerContent="Popover footer"
-      reference={popoverRef}
+      triggerRef={popoverRef}
     />
   );
 
@@ -65,10 +65,14 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
             title={<TabTitleText>{tab}</TabTitleText>}
             actions={
               <>
-                <TabAction isHelpAction aria-label={`Help for ${tab}`} ref={ref}>
+                <TabAction aria-label={`Help for ${tab}`} ref={ref}>
                   <HelpIcon />
                 </TabAction>
-                <TabAction aria-label={`Close ${tab}`} onClick={e => onClose(e, index)} isDisabled={tabs.length === 1}>
+                <TabAction
+                  aria-label={`Close ${tab}`}
+                  onClick={(e) => onClose(e, index)}
+                  isDisabled={tabs.length === 1}
+                >
                   <TimesIcon />
                 </TabAction>
                 {helpPopover(`Help popover for ${tab}`, ref)}

package/src/components/Tabs/examples/TabsInset.tsx

@@ -54,7 +54,7 @@ export const TabsInset: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with inset"
           id="toggle-box-inset"
           name="toggle-box-inset"

package/src/components/Tabs/examples/TabsPageInsets.tsx

@@ -49,7 +49,7 @@ export const TabsPageInsets: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with inset"
           id="toggle-box-page-inset"
           name="toggle-box-page-inset"

package/src/components/Tabs/examples/TabsSubtabs.tsx

@@ -104,7 +104,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with sub tabs"
           id="toggle-box-secondary"
           name="toggle-box-secondary"

package/src/components/Tabs/examples/TabsTooltipReactRef.tsx

@@ -55,13 +55,13 @@ export const TabsTooltipReactRef: React.FunctionComponent = () => {
       <Tooltip
         id="tooltip-ref1"
         content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support."
-        reference={tooltipRef}
+        triggerRef={tooltipRef}
       />
       <div style={{ marginTop: '20px' }}>
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox"
           id="toggle-box-tooltip-ref"
           name="toggle-box-tooltip-ref"

package/src/components/Tabs/examples/TabsVertical.tsx

@@ -61,7 +61,7 @@ export const TabsVertical: React.FunctionComponent = () => {
         <Checkbox
           label="isBox"
           isChecked={isBox}
-          onChange={toggleBox}
+          onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with vertical"
           id="toggle-box-vertical"
           name="toggle-box-vertical"

package/src/components/Tabs/examples/TabsVerticalExpandable.tsx

@@ -12,7 +12,7 @@ export const TabsVerticalExpandable: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 

package/src/components/Text/TextContent.tsx

@@ -12,7 +12,7 @@ export interface TextContentProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const TextContent: React.FunctionComponent<TextContentProps> = ({
-  children = null,
+  children,
   className = '',
   isVisited = false,
   ...props
@@ -21,4 +21,5 @@ export const TextContent: React.FunctionComponent<TextContentProps> = ({
     {children}
   </div>
 );
+
 TextContent.displayName = 'TextContent';

package/src/components/Text/TextList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 import { css } from '@patternfly/react-styles';
 
 export enum TextListVariants {
@@ -14,18 +15,21 @@ export interface TextListProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The text list component */
   component?: 'ul' | 'ol' | 'dl';
+  /** Modifies the list to include plain styling */
+  isPlain?: boolean;
 }
 
 export const TextList: React.FunctionComponent<TextListProps> = ({
   children = null,
   className = '',
   component = TextListVariants.ul,
+  isPlain = false,
   ...props
 }: TextListProps) => {
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(className)}>
+    <Component {...props} className={css(isPlain && styles.modifiers.plain, className)}>
       {children}
     </Component>
   );

package/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-content ''"
+    class="pf-v5-c-content ''"
   >
     ReactNode
   </div>

package/src/components/Text/__tests__/TextContent.test.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextContent } from '../TextContent';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-content">
+      <TextContent />
+    </div>
+  );
+  expect(screen.getByTestId('test-content').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-content', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-content', { exact: true });
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextContent className="custom-class">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders without class name pf-m-visited by default', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
+});
+
+test('Renders with class name pf-m-visited when isVisited=true', () => {
+  render(<TextContent isVisited={true}>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextContent aria-label="Test label">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextContent>Test</TextContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Text/__tests__/TextList.test.tsx

@@ -41,6 +41,11 @@ test('Renders as "dl" element when component="dl"', () => {
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
 });
 
+test('Renders with plain modifier class when isPlain is set to true', () => {
+  render(<TextList isPlain>Test</TextList>);
+  expect(screen.getByRole('list')).toHaveClass('pf-m-plain');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<TextList aria-label="Test label">Test</TextList>);
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');

package/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-content"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Text/examples/Text.md

@@ -29,6 +29,11 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 ```ts file="./TextOrderedList.tsx"
 ```
 
+### Plain list
+
+```ts file="./TextPlainList.tsx"
+```
+
 ### Description list
 
 ```ts file="./TextDescriptionList.tsx"

package/src/components/Text/examples/TextPlainList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+
+export const TextPlainList: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.h3}>Plain unordered list</Text>
+    <TextList isPlain>
+      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+      <TextListItem>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</TextListItem>
+      <TextListItem>Ut non enim metus.</TextListItem>
+    </TextList>
+    <Text component={TextVariants.h3}>Plain ordered list</Text>
+    <TextList component={TextListVariants.ol} isPlain>
+      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
+      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
+      <TextListItem>Integer in volutpat libero.</TextListItem>
+      <TextListItem>Donec a diam tellus.</TextListItem>
+      <TextListItem>Aenean nec tortor orci.</TextListItem>
+      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
+      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
+    </TextList>
+  </TextContent>
+);

package/src/components/TextArea/TextArea.tsx

@@ -39,12 +39,12 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   /** Value of the text area. */
   value?: string | number;
   /** A callback for when the text area value changes. */
-  onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
   /** Sets the orientation to limit the resize to */
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
-  /** A reference object to attach to the text area. */
+  /** @hide A reference object to attach to the text area. */
   innerRef?: React.RefObject<any>;
 }
 
@@ -99,7 +99,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       this.setAutoHeight(field);
     }
     if (this.props.onChange) {
-      this.props.onChange(field.value, event);
+      this.props.onChange(event, field.value);
     }
   };
 

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -17,7 +17,7 @@ test('Textarea input passes value and event to onChange handler', async () => {
 
   await user.type(screen.getByRole('textbox'), 'a');
 
-  expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+  expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), 'a');
 });
 
 test('Renders simple text input', () => {
@@ -69,7 +69,7 @@ test('Text area is not read only by default', () => {
 
 test('Renders text area with default class name only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
+  expect(screen.getByRole('textbox')).toHaveClass('pf-v5-c-form-control', { exact: true });
 });
 
 test('Renders validated text area with success className', () => {