@patternfly/react-core 4.251.2 → 4.251.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.251.2",
+  "version": "4.251.4",
   "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",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.92.6",
-    "@patternfly/react-styles": "^4.91.6",
-    "@patternfly/react-tokens": "^4.93.6",
+    "@patternfly/react-icons": "^4.92.7",
+    "@patternfly/react-styles": "^4.91.7",
+    "@patternfly/react-tokens": "^4.93.7",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.217.1",
+    "@patternfly/patternfly": "4.218.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "5a7fd835da70f91dd7e40b97feb2ec4dc2e4ec0d"
+  "gitHead": "449291fb1b567dc14afd99890cda544bfbe5f4ba"
 }

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>
 `;