@patternfly/react-core 4.202.28 → 4.202.31

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

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-c-tabs
-propComponents: ['Tabs', 'TabProps', 'TabContent', 'TabTitleText', 'TabTitleIcon']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon']
 ouia: true
 ---
 
@@ -56,7 +56,7 @@ class SimpleTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox}>
+        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the default example">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -132,7 +132,7 @@ class SimpleTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox}>
+        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the example with a tooltip ref">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -193,7 +193,7 @@ class UncontrolledSimpleTabs extends React.Component {
 
     return (
       <>
-        <Tabs defaultActiveKey={0}>
+        <Tabs defaultActiveKey={0} aria-label="Tabs in the uncontrolled example">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -264,6 +264,7 @@ class SimpleTabs extends React.Component {
           onSelect={this.handleTabClick}
           variant={isTabsLightScheme ? 'light300' : 'default'}
           isBox
+          aria-label="Tabs in the box light variation example"
         >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
@@ -337,7 +338,7 @@ class ScrollButtonsPrimaryTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox}>
+        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the default overflow example">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -423,7 +424,7 @@ class VerticalTabs extends React.Component {
 
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isVertical isBox={isBox}>
+        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isVertical isBox={isBox} aria-label="Tabs in the vertical example">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -499,6 +500,7 @@ class VerticalExpandableTabs extends React.Component {
         isExpanded={isExpanded}
         onToggle={this.onToggle}
         toggleText="Containers"
+        aria-label="Tabs in the vertical expandable example"
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
           Users
@@ -552,6 +554,7 @@ class VerticalExpandableUncontrolledTabs extends React.Component {
         expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}
         defaultIsExpanded={false}
         toggleText="Containers"
+        aria-label="Tabs in the vertical expandable uncontrolled example"
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
           Users
@@ -618,6 +621,7 @@ class InsetTabs extends React.Component {
             '2xl': 'insetLg'
           }}
           isBox={isBox}
+          aria-label="Tabs in the inset example"
         >
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
@@ -685,7 +689,7 @@ class PageInsetsTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} usePageInsets isBox={isBox}>
+        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} usePageInsets isBox={isBox} aria-label="Tabs in the page insets example">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -749,7 +753,7 @@ class IconAndTextTabs extends React.Component {
 
   render() {
     return (
-      <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
+      <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the icons and text example">
         <Tab
           eventKey={0}
           title={
@@ -872,9 +876,9 @@ class SecondaryTabs extends React.Component {
     const { activeTabKey1, activeTabKey2, isBox } = this.state;
     return (
       <div>
-        <Tabs activeKey={activeTabKey1} onSelect={this.handleTabClickFirst} isBox={isBox}>
+        <Tabs activeKey={activeTabKey1} onSelect={this.handleTabClickFirst} isBox={isBox} aria-label="Tabs in the tabs with subtabs example">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
-            <Tabs activeKey={activeTabKey2} isSecondary onSelect={this.handleTabClickSecond}>
+            <Tabs aria-label="secondary tabs for users" activeKey={activeTabKey2} isSecondary onSelect={this.handleTabClickSecond}>
               <Tab eventKey={20} title={<TabTitleText>Secondary tab item 1</TabTitleText>}>
                 Secondary tab item 1 item section
               </Tab>
@@ -979,7 +983,7 @@ class FilledTabs extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox}>
+        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the filled example">
           <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>
             Users
           </Tab>
@@ -1040,7 +1044,7 @@ class FilledTabsWithIcons extends React.Component {
     const { activeTabKey, isBox } = this.state;
     return (
       <div>
-        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox}>
+        <Tabs isFilled activeKey={activeTabKey} onSelect={this.handleTabClick} isBox={isBox} aria-label="Tabs in the filled with icons example">
           <Tab
             eventKey={0}
             title={
@@ -1125,6 +1129,7 @@ class TabsNav extends React.Component {
         onSelect={this.handleTabClick}
         aria-label="Local"
         component={TabsComponent.nav}
+        aria-label="Tabs in the nav element example"
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users">
           Users
@@ -1186,6 +1191,7 @@ class SecondaryTabsNav extends React.Component {
         onSelect={this.handleTabClickFirst}
         aria-label="Local"
         component={TabsComponent.nav}
+        aria-label="Tabs in the sub tabs with nav element example"
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#">
           <Tabs
@@ -1264,7 +1270,7 @@ class SeparateTabContent extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
+        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the seperate content example">
           <Tab
             eventKey={0}
             title={<TabTitleText>Tab item 1</TabTitleText>}
@@ -1285,13 +1291,13 @@ class SeparateTabContent extends React.Component {
           />
         </Tabs>
         <div>
-          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="Tab item 1">
+          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="This is content for the first tab">
             Tab 1 section
           </TabContent>
-          <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="Tab item 2" hidden>
+          <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="This is content for the second tab" hidden>
             Tab 2 section
           </TabContent>
-          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="Tab item 3" hidden>
+          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="This is content for the third tab" hidden>
             Tab 3 section
           </TabContent>
         </div>
@@ -1321,7 +1327,7 @@ const TabContentWithBody = () => {
 
   return (
     <React.Fragment>
-      <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
+      <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Tabs in the body and padding example">
         <Tab
           eventKey={0}
           title={<TabTitleText>Tab item 1</TabTitleText>}
@@ -1342,13 +1348,13 @@ const TabContentWithBody = () => {
         />
       </Tabs>
       <div>
-        <TabContent eventKey={0} id="refTab1Section" ref={contentRef1} aria-label="Tab item 1">
+        <TabContent eventKey={0} id="refTab1Section" ref={contentRef1} aria-label="This is content for the first tab">
           <TabContentBody hasPadding> Tab 1 section </TabContentBody>
         </TabContent>
-        <TabContent eventKey={1} id="refTab2Section" ref={contentRef2} aria-label="Tab item 2" hidden>
+        <TabContent eventKey={1} id="refTab2Section" ref={contentRef2} aria-label="This is content for the second tab" hidden>
           <TabContentBody hasPadding> Tab 2 section </TabContentBody>
         </TabContent>
-        <TabContent eventKey={2} id="refTab3Section" ref={contentRef3} aria-label="Tab item 3" hidden>
+        <TabContent eventKey={2} id="refTab3Section" ref={contentRef3} aria-label="This is content for the third tab" hidden>
           <TabContentBody hasPadding> Tab 3 section </TabContentBody>
         </TabContent>
       </div>
@@ -1379,7 +1385,7 @@ class MountingSimpleTabs extends React.Component {
 
   render() {
     return (
-      <Tabs mountOnEnter activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
+      <Tabs mountOnEnter activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the children mounting on click example">
         <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>}>
           Tab 1 section
         </Tab>
@@ -1417,7 +1423,7 @@ class UnmountingSimpleTabs extends React.Component {
 
   render() {
     return (
-      <Tabs unmountOnExit activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
+      <Tabs unmountOnExit activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the unmounting invisible children example">
         <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>}>
           Tab 1 section
         </Tab>
@@ -1467,7 +1473,7 @@ class ToggledSeparateContent extends React.Component {
           {isTab2Hidden ? 'Show' : 'Hide'} tab 2
         </Button>
         <Divider style={{ paddingTop: '1rem', paddingBottom: '1rem' }} />
-        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
+        <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick} aria-label="Tabs in the toggled separate content example">
           <Tab eventKey={0} title="Tab item 1" tabContentId="refTab1Section" tabContentRef={this.contentRef1} />
           {!isTab2Hidden && (
             <Tab eventKey={1} title="Tab item 2" tabContentId="refTab2Section" tabContentRef={this.contentRef2} />
@@ -1475,15 +1481,15 @@ class ToggledSeparateContent extends React.Component {
           <Tab eventKey={2} title="Tab item 3" tabContentId="refTab3Section" tabContentRef={this.contentRef3} />
         </Tabs>
         <div>
-          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="Tab item 1">
+          <TabContent eventKey={0} id="refTab1Section" ref={this.contentRef1} aria-label="This is content for the first tab">
             Tab 1 section
           </TabContent>
           {!isTab2Hidden && (
-            <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="Tab item 2" hidden>
+            <TabContent eventKey={1} id="refTab2Section" ref={this.contentRef2} aria-label="This is content for the second tab" hidden>
               Tab 2 section
             </TabContent>
           )}
-          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="Tab item 3" hidden>
+          <TabContent eventKey={2} id="refTab3Section" ref={this.contentRef3} aria-label="This is content for the third tab" hidden>
             Tab 3 section
           </TabContent>
         </div>

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

@@ -1,7 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount, shallow } from 'enzyme';
-import { TextArea, TextAreaBase  } from '../TextArea';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { TextArea, TextAreaBase } from '../TextArea';
 import { ValidatedOptions } from '../../../helpers/constants';
 
 const props = {
@@ -9,104 +12,96 @@ const props = {
   value: 'test textarea'
 };
 
-test('textarea input passes value and event to onChange handler', () => {
-  const newValue = 'new test textarea';
-  const event = {
-    currentTarget: { value: newValue }
-  };
-  const view = shallow(<TextAreaBase {...props} aria-label="test textarea" />);
-  view.find('textarea').simulate('change', event);
-  expect(props.onChange).toBeCalledWith(newValue, event);
-});
-
-test('simple text input', () => {
-  const view = render(<TextArea {...props} aria-label="simple textarea" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('disabled text input using isDisabled', () => {
-  const view = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('disabled text input using disabled', () => {
-  const view = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('read only text input using isReadOnly', () => {
-  const view = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('read only text input using readOnly', () => {
-  const view = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('invalid text area', () => {
-  const view = render(<TextArea {...props} required validated={'error'} aria-label="invalid textarea" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('validated text area success', () => {
-  const view = mount(
-    <TextArea {...props} required validated={ValidatedOptions.success} aria-label="validated textarea" />
-  );
-  expect(view.find('.pf-c-form-control.pf-m-success').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
-
-test('validated text area warning', () => {
-  const view = mount(
-    <TextArea {...props} required validated={ValidatedOptions.warning} aria-label="validated textarea" />
-  );
-  expect(view.find('.pf-c-form-control.pf-m-warning').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
-
-test('validated text area error', () => {
-  const view = render(
-    <TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />
-  );
-  expect(view.container).toMatchSnapshot();
-});
-
-test('vertically resizable text area', () => {
-  const view = render(<TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('horizontally resizable text area', () => {
-  const view = render(
-    <TextArea
-      resizeOrientation="horizontal"
-      {...props}
-      required
-      validated={'error'}
-      aria-label="horizontal resize textarea"
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});
-
-test('should throw console error when no aria-label or id is given', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<TextArea {...props} />);
-  expect(myMock).toBeCalled();
-});
-
-test('should not throw console error when id is given but no aria-label', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<TextArea {...props} id="5" />);
-  expect(myMock).not.toBeCalled();
-});
-
-test('should not throw console error when aria-label is given but no id', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<TextArea {...props} aria-label="test textarea" />);
-  expect(myMock).not.toBeCalled();
+describe('TextArea', () => {
+  test('textarea input passes value and event to onChange handler', () => {
+    render(<TextAreaBase {...props} value='' aria-label="test textarea" />);
+
+    userEvent.type(screen.getByLabelText('test textarea'), 'a');
+    expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+  });
+
+  test('simple text input', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('disabled text input using isDisabled', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('disabled text input using disabled', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('read only text input using isReadOnly', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('read only text input using readOnly', () => {
+    const { asFragment } = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('validated text area success', () => {
+    render(<TextArea {...props} required validated={ValidatedOptions.success} aria-label="validated textarea" />);
+    expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-success');
+  });
+
+  test('validated text area warning', () => {
+    render(<TextArea {...props} required validated={ValidatedOptions.warning} aria-label="validated textarea" />);
+    expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-warning');
+  });
+
+  test('validated text area error', () => {
+    const { asFragment } = render(<TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('vertically resizable text area', () => {
+    const { asFragment } = render(<TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('horizontally resizable text area', () => {
+    const { asFragment } = render(
+      <TextArea
+        resizeOrientation="horizontal"
+        {...props}
+        required
+        validated={'error'}
+        aria-label="horizontal resize textarea"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('should throw console error when no aria-label or id is given', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextArea {...props} />);
+
+    expect(myMock).toBeCalled();
+  });
+
+  test('should not throw console error when id is given but no aria-label', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextArea {...props} id="5" />);
+
+    expect(myMock).not.toBeCalled();
+  });
+
+  test('should not throw console error when aria-label is given but no id', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextArea {...props} aria-label="test textarea" />);
+
+    expect(myMock).not.toBeCalled();
+  });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`disabled text input using disabled 1`] = `
-<div>
+exports[`TextArea disabled text input using disabled 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="disabled textarea"
@@ -10,11 +10,11 @@ exports[`disabled text input using disabled 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`disabled text input using isDisabled 1`] = `
-<div>
+exports[`TextArea disabled text input using isDisabled 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="is disabled textarea"
@@ -23,11 +23,11 @@ exports[`disabled text input using isDisabled 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`horizontally resizable text area 1`] = `
-<div>
+exports[`TextArea horizontally resizable text area 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="true"
     aria-label="horizontal resize textarea"
@@ -36,24 +36,11 @@ exports[`horizontally resizable text area 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`invalid text area 1`] = `
-<div>
-  <textarea
-    aria-invalid="true"
-    aria-label="invalid textarea"
-    class="pf-c-form-control"
-    required=""
-  >
-    test textarea
-  </textarea>
-</div>
-`;
-
-exports[`read only text input using isReadOnly 1`] = `
-<div>
+exports[`TextArea read only text input using isReadOnly 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="is read only textarea"
@@ -62,11 +49,11 @@ exports[`read only text input using isReadOnly 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`read only text input using readOnly 1`] = `
-<div>
+exports[`TextArea read only text input using readOnly 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="read only textarea"
@@ -75,11 +62,11 @@ exports[`read only text input using readOnly 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`simple text input 1`] = `
-<div>
+exports[`TextArea simple text input 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="simple textarea"
@@ -87,11 +74,11 @@ exports[`simple text input 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;
 
-exports[`validated text area error 1`] = `
-<div>
+exports[`TextArea validated text area error 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="true"
     aria-label="validated textarea"
@@ -100,77 +87,11 @@ exports[`validated text area error 1`] = `
   >
     test textarea
   </textarea>
-</div>
-`;
-
-exports[`validated text area success 1`] = `
-<TextArea
-  aria-label="validated textarea"
-  onChange={[MockFunction]}
-  required={true}
-  validated="success"
-  value="test textarea"
->
-  <TextArea
-    aria-label="validated textarea"
-    className=""
-    innerRef={null}
-    isDisabled={false}
-    isIconSprite={false}
-    isRequired={false}
-    onChange={[MockFunction]}
-    required={true}
-    resizeOrientation="both"
-    validated="success"
-    value="test textarea"
-  >
-    <textarea
-      aria-invalid={false}
-      aria-label="validated textarea"
-      className="pf-c-form-control pf-m-success"
-      onChange={[Function]}
-      required={true}
-      value="test textarea"
-    />
-  </TextArea>
-</TextArea>
-`;
-
-exports[`validated text area warning 1`] = `
-<TextArea
-  aria-label="validated textarea"
-  onChange={[MockFunction]}
-  required={true}
-  validated="warning"
-  value="test textarea"
->
-  <TextArea
-    aria-label="validated textarea"
-    className=""
-    innerRef={null}
-    isDisabled={false}
-    isIconSprite={false}
-    isRequired={false}
-    onChange={[MockFunction]}
-    required={true}
-    resizeOrientation="both"
-    validated="warning"
-    value="test textarea"
-  >
-    <textarea
-      aria-invalid={false}
-      aria-label="validated textarea"
-      className="pf-c-form-control pf-m-warning"
-      onChange={[Function]}
-      required={true}
-      value="test textarea"
-    />
-  </TextArea>
-</TextArea>
+</DocumentFragment>
 `;
 
-exports[`vertically resizable text area 1`] = `
-<div>
+exports[`TextArea vertically resizable text area 1`] = `
+<DocumentFragment>
   <textarea
     aria-invalid="false"
     aria-label="vertical resize textarea"
@@ -178,5 +99,5 @@ exports[`vertically resizable text area 1`] = `
   >
     test textarea
   </textarea>
-</div>
+</DocumentFragment>
 `;