@patternfly/react-core 4.251.2 → 4.251.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.251.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.2...@patternfly/react-core@4.251.3) (2022-10-14)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## [4.251.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.1...@patternfly/react-core@4.251.2) (2022-10-14)
 
 

package/dist/umd/react-core.min.css

@@ -5474,67 +5474,6 @@ label.pf-c-check, .pf-c-check__label,
     overflow-y: visible;
   }
 }
-.pf-c-date-picker {
-  --pf-c-date-picker--m-top__calendar--Top: 0;
-  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
-  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
-  --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
-  --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
-  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
-  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
-  --pf-c-date-picker__input--c-form-control--width-chars: 10;
-  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
-  --pf-c-date-picker__calendar--Right: auto;
-  --pf-c-date-picker__calendar--Left: 0;
-  --pf-c-date-picker__calendar--m-align-right--Right: 0;
-  --pf-c-date-picker__calendar--m-align-right--Left: auto;
-  position: relative;
-  display: inline-block;
-}
-
-.pf-c-date-picker__helper-text {
-  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
-  font-size: var(--pf-c-date-picker__helper-text--FontSize);
-  color: var(--pf-c-date-picker__helper-text--Color);
-}
-
-.pf-c-date-picker__helper-text.pf-m-error {
-  --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
-}
-
-.pf-c-date-picker__input .pf-c-form-control {
-  width: var(--pf-c-date-picker__input--c-form-control--Width);
-}
-
-.pf-c-date-picker__calendar {
-  position: absolute;
-  top: var(--pf-c-date-picker__calendar--Top);
-  right: var(--pf-c-date-picker__calendar--Right);
-  left: var(--pf-c-date-picker__calendar--Left);
-  z-index: var(--pf-c-date-picker__calendar--ZIndex);
-  background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
-  box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
-}
-
-.pf-c-date-picker__calendar.pf-m-align-right {
-  --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
-  --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
-}
-
-.pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
-  --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
-  transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
-}
-
-:where(.pf-theme-dark) .pf-c-date-picker {
-  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-date-picker__calendar--Top: 100%;
-}
-
 .pf-c-description-list {
   --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
   --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
@@ -7285,6 +7224,67 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
 }
 
+.pf-c-date-picker {
+  --pf-c-date-picker--m-top__calendar--Top: 0;
+  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
+  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
+  --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
+  --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
+  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
+  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
+  --pf-c-date-picker__input--c-form-control--width-chars: 10;
+  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
+  --pf-c-date-picker__calendar--Right: auto;
+  --pf-c-date-picker__calendar--Left: 0;
+  --pf-c-date-picker__calendar--m-align-right--Right: 0;
+  --pf-c-date-picker__calendar--m-align-right--Left: auto;
+  position: relative;
+  display: inline-block;
+}
+
+.pf-c-date-picker__helper-text {
+  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
+  font-size: var(--pf-c-date-picker__helper-text--FontSize);
+  color: var(--pf-c-date-picker__helper-text--Color);
+}
+
+.pf-c-date-picker__helper-text.pf-m-error {
+  --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
+}
+
+.pf-c-date-picker__input .pf-c-form-control {
+  width: var(--pf-c-date-picker__input--c-form-control--Width);
+}
+
+.pf-c-date-picker__calendar {
+  position: absolute;
+  top: var(--pf-c-date-picker__calendar--Top);
+  right: var(--pf-c-date-picker__calendar--Right);
+  left: var(--pf-c-date-picker__calendar--Left);
+  z-index: var(--pf-c-date-picker__calendar--ZIndex);
+  background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
+  box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
+}
+
+.pf-c-date-picker__calendar.pf-m-align-right {
+  --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
+  --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
+}
+
+.pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
+  --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
+  transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
+}
+
+:where(.pf-theme-dark) .pf-c-date-picker {
+  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-date-picker__calendar--Top: 100%;
+}
+
 .pf-c-dropdown {
   --pf-c-dropdown__toggle--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
@@ -24160,40 +24160,6 @@ label.pf-c-tree-view__node-text {
   display: flex;
 }
 
-.pf-c-truncate {
-  --pf-c-truncate--MinWidth: 12ch;
-  --pf-c-truncate__start--MinWidth: 6ch;
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: baseline;
-  min-width: var(--pf-c-truncate--MinWidth);
-}
-
-.pf-c-truncate__start,
-.pf-c-truncate__end {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pf-c-truncate__start {
-  min-width: var(--pf-c-truncate__start--MinWidth);
-}
-
-.pf-c-truncate__end {
-  direction: rtl;
-}
-
-.pf-c-truncate__start + .pf-c-truncate__end {
-  overflow: visible;
-  direction: ltr;
-}
-
-@supports (-webkit-hyphens: none) {
-  .pf-c-truncate__end {
-    direction: ltr;
-  }
-}
 .pf-c-panel {
   --pf-c-panel--Width: auto;
   --pf-c-panel--MinWidth: auto;
@@ -24277,6 +24243,40 @@ label.pf-c-tree-view__node-text {
   box-shadow: var(--pf-c-panel__footer--BoxShadow);
 }
 
+.pf-c-truncate {
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
+.pf-c-truncate__end {
+  direction: rtl;
+}
+
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
+}
+
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;
@@ -26353,75 +26353,6 @@ label.pf-c-tree-view__node-text {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;
@@ -27636,6 +27567,75 @@ label.pf-c-tree-view__node-text {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.251.2",
+  "version": "4.251.3",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "5a7fd835da70f91dd7e40b97feb2ec4dc2e4ec0d"
+  "gitHead": "e1567ca0fde85ebde768664b8026605b08a47500"
 }

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { TextArea, TextAreaBase } from '../TextArea';
+import { TextArea } from '../TextArea';
 import { ValidatedOptions } from '../../../helpers/constants';
 
 const props = {
@@ -11,116 +11,132 @@ const props = {
   value: 'test textarea'
 };
 
-describe('TextArea', () => {
-  test('textarea passes value and event to onChange handler', async () => {
-    const user = userEvent.setup();
-
-    render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
-
-    await user.type(screen.getByLabelText('test textarea'), 'a');
-    expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
-  });
-
-  test('simple text area', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('disabled text area using isDisabled', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('disabled text area using disabled', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using isReadOnly', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using default readOnlyVariant', () => {
-    const { asFragment } = render(
-      <TextArea {...props} aria-label="is default read only textarea" readOnlyVariant="default" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using plain readOnlyVariant', () => {
-    const { asFragment } = render(
-      <TextArea {...props} aria-label="is plain read only textarea" readOnlyVariant="plain" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area 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).toHaveBeenCalled();
-  });
-
-  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.toHaveBeenCalled();
-  });
-
-  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.toHaveBeenCalled();
-  });
+test('Textarea input passes value and event to onChange handler', async () => {
+  const user = userEvent.setup();
+  render(<TextArea {...props} value="" aria-label="test textarea" />);
+
+  await user.type(screen.getByRole('textbox'), 'a');
+
+  expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+});
+
+test('Renders simple text input', () => {
+  render(
+    <div data-testid="textarea">
+      <TextArea aria-label="simple textarea" />
+    </div>
+  );
+  expect(screen.getByTestId('textarea').firstChild).toBeVisible();
+});
+
+test('Renders with custom class passed', () => {
+  render(<TextArea aria-label="custom class textarea" className="test-class" />);
+
+  expect(screen.getByRole('textbox')).toHaveClass('test-class');
+});
+
+test('Renders text area with required attribute using isRequired', () => {
+  render(<TextArea aria-label="required textarea" isRequired />);
+
+  expect(screen.getByRole('textbox')).toBeRequired();
+});
+
+test('Text area is not required by default', () => {
+  render(<TextArea aria-label="not required textarea" />);
+
+  expect(screen.getByRole('textbox')).not.toBeRequired();
+});
+
+test('Renders disabled text area using isDisabled', () => {
+  render(<TextArea aria-label="is disabled textarea" isDisabled />);
+  expect(screen.getByRole('textbox')).toBeDisabled();
+});
+
+test('Text area is not disabled by default', () => {
+  render(<TextArea aria-label="not disabled textarea" />);
+  expect(screen.getByRole('textbox')).not.toBeDisabled();
+});
+
+test('Renders read only text area using readOnlyVariant', () => {
+  render(<TextArea aria-label="is read only textarea" readOnlyVariant={'default'} />);
+  expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+});
+
+test('Text area is not read only by default', () => {
+  render(<TextArea aria-label="not read only textarea" />);
+  expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
+});
+
+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 });
+});
+
+test('Renders validated text area with success className', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
+});
+
+test('Renders validated text area with warning className', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
+});
+
+test('Renders invalid text area', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.error} />);
+  expect(screen.getByRole('textbox')).toBeInvalid();
+});
+
+test('Text area is not invalid by default', () => {
+  render(<TextArea aria-label="validated textarea" />);
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});
+
+test('Renders vertically resizable text area', () => {
+  render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
+});
+
+test('Renders horizontally resizable text area', () => {
+  render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
+});
+
+test('Throws console error when no aria-label or id is given', () => {
+  jest.spyOn(global.console, 'error');
+
+  render(<TextArea />);
+
+  expect(console.error).toHaveBeenCalled();
+});
+
+test('Does not throw console error when id is given but no aria-label', () => {
+  jest.spyOn(global.console, 'error');
+
+  render(<TextArea id="5" />);
+
+  expect(console.error).not.toHaveBeenCalled();
+});
+
+test('Does not throw console error when aria-label is given but no id', () => {
+  jest.spyOn(global.console, 'error');
+
+  render(<TextArea aria-label="test textarea" />);
+
+  expect(console.error).not.toHaveBeenCalled();
+});
+
+test('TextArea can be accessed via passed ref', () => {
+  const testRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
+  render(<TextArea ref={testRef} />);
+  global.scrollTo = jest.fn();
+  testRef.current?.focus();
+  expect(screen.getByRole('textbox')).toHaveFocus();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <TextArea className="custom class" isRequired isDisabled autoResize aria-label="test textarea" />
+  );
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,129 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextArea disabled text area using disabled 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"
-    aria-label="disabled textarea"
-    class="pf-c-form-control"
+    aria-label="test textarea"
+    class="pf-c-form-control custom class"
     disabled=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea disabled text area using isDisabled 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is disabled textarea"
-    class="pf-c-form-control"
-    disabled=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea horizontally resizable text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="true"
-    aria-label="horizontal resize textarea"
-    class="pf-c-form-control pf-m-resize-horizontal"
-    required=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using default readOnlyVariant 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is default read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using isReadOnly 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using plain readOnlyVariant 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is plain read only textarea"
-    class="pf-c-form-control pf-m-plain"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using readOnly 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea simple text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="simple textarea"
-    class="pf-c-form-control"
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea validated text area error 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="true"
-    aria-label="validated textarea"
-    class="pf-c-form-control"
     required=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea vertically resizable text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="vertical resize textarea"
-    class="pf-c-form-control pf-m-resize-vertical"
-  >
-    test textarea
-  </textarea>
+    style="--pf-c-form-control--textarea--Height: 6px;"
+  />
 </DocumentFragment>
 `;