@patternfly/react-core 5.0.0-alpha.122 → 5.0.0-alpha.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.122",
+  "version": "5.0.0-alpha.123",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "55b14bfc3e26c7818aefdfe5dafdd6c5aa094347"
+  "gitHead": "6b445157e681203cf0784037db84356fb86c5d7c"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -277,12 +277,15 @@ const DatePickerBase = (
           </InputGroup>
         </div>
       </Popover>
-      {helperText && <div className={styles.datePickerHelperText}>{helperText}</div>}
-      {errorText.trim() && (
+      {(errorText || helperText) && (
         <div className={styles.datePickerHelperText}>
-          <HelperText>
-            <HelperTextItem variant="error">{errorText}</HelperTextItem>
-          </HelperText>
+          {errorText ? (
+            <HelperText>
+              <HelperTextItem variant="error">{errorText}</HelperTextItem>
+            </HelperText>
+          ) : (
+            helperText
+          )}
         </div>
       )}
     </div>

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

@@ -1,9 +1,12 @@
-import { screen, render } from '@testing-library/react';
-import { DatePicker } from '../DatePicker';
 import React from 'react';
+
+import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-jest.mock('../../../helpers/util.ts')
+import { HelperText, HelperTextItem } from '../../HelperText';
+import { DatePicker } from '../DatePicker';
+
+jest.mock('../../../helpers/util.ts');
 
 test('disabled date picker', () => {
   const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
@@ -60,4 +63,39 @@ test('With popover opened', async () => {
   await screen.findByRole('button', { name: 'Previous month' });
 
   expect(asFragment()).toMatchSnapshot();
-})
+});
+
+test('Shows helperText instead of "Invalid date" when no error exists', () => {
+  render(
+    <DatePicker
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  expect(screen.queryByText('Invalid date')).not.toBeInTheDocument();
+  expect(screen.getByText('Help me')).toBeVisible();
+});
+
+test('Shows "Invalid date" instead of helperText when an error exists', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <DatePicker
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  await user.type(screen.getByRole('textbox'), 'not a date');
+  await user.click(document.body);
+
+  expect(screen.queryByText('Help me')).not.toBeInTheDocument();
+  expect(screen.getByText('Invalid date')).toBeVisible();
+});