@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

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

@@ -57,7 +57,7 @@ test('Error state can be cleared from outside', async () => {
 test('With popover opened', async () => {
   const user = userEvent.setup();
 
-  const { asFragment } = render(<DatePicker />);
+  const { asFragment } = render(<DatePicker value="2020-03-17" />);
 
   await user.click(screen.getByRole('button', { name: 'Toggle date picker' }));
   await screen.findByRole('button', { name: 'Previous month' });
@@ -80,7 +80,7 @@ test('Shows helperText instead of "Invalid date" when no error exists', () => {
   expect(screen.getByText('Help me')).toBeVisible();
 });
 
-test('Shows "Invalid date" instead of helperText when an error exists', async () => {
+test('Shows "Invalid date" instead of helperText when text input contains invalid date', async () => {
   const user = userEvent.setup();
 
   render(
@@ -99,3 +99,90 @@ test('Shows "Invalid date" instead of helperText when an error exists', async ()
   expect(screen.queryByText('Help me')).not.toBeInTheDocument();
   expect(screen.getByText('Invalid date')).toBeVisible();
 });
+
+test('Does not render text input as invalid when requiredDateOptions.isRequired is false', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid', 'true');
+});
+
+test('Does not render emptyDateText when requiredDateOptions.isRequired is false', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.queryByText('Date cannot be blank')).not.toBeInTheDocument;
+});
+
+test('Renders text input as invalid on blur when requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true }} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+});
+
+test('Renders default emptyDateText on blur when requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true }} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByText('Date cannot be blank')).toBeInTheDocument();
+});
+
+test('Renders custom emptyDateText when requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true, emptyDateText: 'Required in test' }} />);
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.getByText('Required in test')).toBeInTheDocument();
+});
+
+test('Shows emptyDateText instead of helperText when text input is empty and requiredDateOptions.isRequired is true', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <DatePicker
+      requiredDateOptions={{ isRequired: true }}
+      helperText={
+        <HelperText>
+          <HelperTextItem>Help me</HelperTextItem>
+        </HelperText>
+      }
+    />
+  );
+
+  await user.click(screen.getByRole('textbox'));
+  await user.click(document.body);
+
+  expect(screen.queryByText('Help me')).not.toBeInTheDocument();
+  expect(screen.getByText('Date cannot be blank')).toBeVisible();
+});
+
+test('Renders text input as invalid when requiredDateOptions.isRequired is true and popover is closed without selection', async () => {
+  const user = userEvent.setup();
+
+  render(<DatePicker requiredDateOptions={{ isRequired: true }} />);
+
+  await user.click(screen.getByRole('button', { name: 'Toggle date picker' }));
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+});

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

@@ -26,7 +26,7 @@ exports[`With popover opened 1`] = `
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
               type="text"
-              value=""
+              value="2020-03-17"
             />
           </span>
         </div>
@@ -59,9 +59,12 @@ exports[`With popover opened 1`] = `
       aria-describedby="popover-unique_id_mock-body"
       aria-label=""
       aria-modal="true"
-      class="pf-v5-c-popover pf-m-no-padding pf-m-width-auto pf-m-top"
+      class="pf-v5-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
+      data-popper-escaped="true"
+      data-popper-placement="bottom"
+      data-popper-reference-hidden="true"
       role="dialog"
-      style="opacity: 1; transition: opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11); position: absolute; left: 0px; top: 0px; z-index: 9999;"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: auto; transform: translate(0px, 25px);"
     >
       <div
         class="pf-v5-c-popover__arrow"
@@ -130,7 +133,7 @@ exports[`With popover opened 1`] = `
                       <span
                         class="pf-v5-c-menu-toggle__text"
                       >
-                        December
+                        March
                       </span>
                       <span
                         class="pf-v5-c-menu-toggle__controls"
@@ -172,7 +175,7 @@ exports[`With popover opened 1`] = `
                         data-ouia-component-type="PF5/TextInput"
                         data-ouia-safe="true"
                         type="number"
-                        value="1969"
+                        value="2020"
                       />
                     </span>
                   </div>
@@ -324,23 +327,11 @@ exports[`With popover opened 1`] = `
                 <tr
                   class="pf-v5-c-calendar-month__dates-row"
                 >
-                  <td
-                    class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month"
-                  >
-                    <button
-                      aria-label="30 November 1969"
-                      class="pf-v5-c-calendar-month__date"
-                      tabindex="-1"
-                      type="button"
-                    >
-                      30
-                    </button>
-                  </td>
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="1 December 1969"
+                      aria-label="1 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -352,7 +343,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="2 December 1969"
+                      aria-label="2 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -364,7 +355,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="3 December 1969"
+                      aria-label="3 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -376,7 +367,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="4 December 1969"
+                      aria-label="4 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -388,7 +379,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="5 December 1969"
+                      aria-label="5 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -400,7 +391,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="6 December 1969"
+                      aria-label="6 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -408,15 +399,11 @@ exports[`With popover opened 1`] = `
                       6
                     </button>
                   </td>
-                </tr>
-                <tr
-                  class="pf-v5-c-calendar-month__dates-row"
-                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="7 December 1969"
+                      aria-label="7 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -424,11 +411,15 @@ exports[`With popover opened 1`] = `
                       7
                     </button>
                   </td>
+                </tr>
+                <tr
+                  class="pf-v5-c-calendar-month__dates-row"
+                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="8 December 1969"
+                      aria-label="8 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -440,7 +431,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="9 December 1969"
+                      aria-label="9 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -452,7 +443,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="10 December 1969"
+                      aria-label="10 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -464,7 +455,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="11 December 1969"
+                      aria-label="11 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -476,7 +467,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="12 December 1969"
+                      aria-label="12 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -488,7 +479,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="13 December 1969"
+                      aria-label="13 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -496,15 +487,11 @@ exports[`With popover opened 1`] = `
                       13
                     </button>
                   </td>
-                </tr>
-                <tr
-                  class="pf-v5-c-calendar-month__dates-row"
-                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="14 December 1969"
+                      aria-label="14 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -512,11 +499,15 @@ exports[`With popover opened 1`] = `
                       14
                     </button>
                   </td>
+                </tr>
+                <tr
+                  class="pf-v5-c-calendar-month__dates-row"
+                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="15 December 1969"
+                      aria-label="15 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -528,7 +519,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="16 December 1969"
+                      aria-label="16 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -537,12 +528,12 @@ exports[`With popover opened 1`] = `
                     </button>
                   </td>
                   <td
-                    class="pf-v5-c-calendar-month__dates-cell"
+                    class="pf-v5-c-calendar-month__dates-cell pf-m-selected"
                   >
                     <button
-                      aria-label="17 December 1969"
+                      aria-label="17 March 2020"
                       class="pf-v5-c-calendar-month__date"
-                      tabindex="-1"
+                      tabindex="0"
                       type="button"
                     >
                       17
@@ -552,7 +543,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="18 December 1969"
+                      aria-label="18 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -564,7 +555,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="19 December 1969"
+                      aria-label="19 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -576,7 +567,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="20 December 1969"
+                      aria-label="20 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -584,15 +575,11 @@ exports[`With popover opened 1`] = `
                       20
                     </button>
                   </td>
-                </tr>
-                <tr
-                  class="pf-v5-c-calendar-month__dates-row"
-                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="21 December 1969"
+                      aria-label="21 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -600,11 +587,15 @@ exports[`With popover opened 1`] = `
                       21
                     </button>
                   </td>
+                </tr>
+                <tr
+                  class="pf-v5-c-calendar-month__dates-row"
+                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="22 December 1969"
+                      aria-label="22 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -616,7 +607,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="23 December 1969"
+                      aria-label="23 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -628,7 +619,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="24 December 1969"
+                      aria-label="24 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -640,7 +631,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="25 December 1969"
+                      aria-label="25 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -652,7 +643,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="26 December 1969"
+                      aria-label="26 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -664,7 +655,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="27 December 1969"
+                      aria-label="27 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -672,15 +663,11 @@ exports[`With popover opened 1`] = `
                       27
                     </button>
                   </td>
-                </tr>
-                <tr
-                  class="pf-v5-c-calendar-month__dates-row"
-                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="28 December 1969"
+                      aria-label="28 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -688,11 +675,15 @@ exports[`With popover opened 1`] = `
                       28
                     </button>
                   </td>
+                </tr>
+                <tr
+                  class="pf-v5-c-calendar-month__dates-row"
+                >
                   <td
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="29 December 1969"
+                      aria-label="29 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -704,7 +695,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="30 December 1969"
+                      aria-label="30 March 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -716,9 +707,9 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell"
                   >
                     <button
-                      aria-label="31 December 1969"
+                      aria-label="31 March 2020"
                       class="pf-v5-c-calendar-month__date"
-                      tabindex="0"
+                      tabindex="-1"
                       type="button"
                     >
                       31
@@ -728,7 +719,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month"
                   >
                     <button
-                      aria-label="1 January 1970"
+                      aria-label="1 April 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -740,7 +731,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month"
                   >
                     <button
-                      aria-label="2 January 1970"
+                      aria-label="2 April 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -752,7 +743,7 @@ exports[`With popover opened 1`] = `
                     class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month"
                   >
                     <button
-                      aria-label="3 January 1970"
+                      aria-label="3 April 2020"
                       class="pf-v5-c-calendar-month__date"
                       tabindex="-1"
                       type="button"
@@ -760,6 +751,18 @@ exports[`With popover opened 1`] = `
                       3
                     </button>
                   </td>
+                  <td
+                    class="pf-v5-c-calendar-month__dates-cell pf-m-adjacent-month"
+                  >
+                    <button
+                      aria-label="4 April 2020"
+                      class="pf-v5-c-calendar-month__date"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      4
+                    </button>
+                  </td>
                 </tr>
               </tbody>
             </table>

package/src/components/DatePicker/examples/DatePicker.md

@@ -3,7 +3,7 @@ id: Date picker
 section: components
 subsection: date-and-time
 cssPrefix: pf-v5-c-date-picker
-propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
+propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef', 'DatePickerRequiredObject']
 ---
 
 ## Examples
@@ -11,34 +11,59 @@ propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
 ### Basic
 
 ```ts file="./DatePickerBasic.tsx"
+
+```
+
+### Required
+
+To require users to select a date before continuing, use the `requiredDateOptions.isRequired` property.
+
+A required date picker will be invalid when the text input is empty and either the text input loses focus or the date picker popover is closed.
+
+The error message can be customized via the `requiredDateOptions.emptyDateText` property.
+
+```ts file="./DatePickerRequired.tsx"
+
 ```
 
 ### American format
 
 ```ts file="./DatePickerAmerican.tsx"
+
 ```
 
 ### Helper text
 
 ```ts file="./DatePickerHelperText.tsx"
+
 ```
 
 ### Min and max date
 
 ```ts file="./DatePickerMinMax.tsx"
+
 ```
 
 ### French
 
 ```ts file="./DatePickerFrench.tsx"
+
 ```
 
 ### Controlled
 
 ```ts file="./DatePickerControlled.tsx"
+
+```
+
+### Controlled required
+
+```ts file="./DatePickerControlledRequired.tsx"
+
 ```
 
 ### Controlling the date picker calendar state
 
 ```ts file="./DatePickerControlledCalendar.tsx"
+
 ```

package/src/components/DatePicker/examples/DatePickerControlled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, DatePicker } from '@patternfly/react-core';
+import { Button, DatePicker, Flex, FlexItem } from '@patternfly/react-core';
 
 export const DatePickerControlled: React.FunctionComponent = () => {
   const initialValue = '2020-03-17';
@@ -9,7 +9,14 @@ export const DatePickerControlled: React.FunctionComponent = () => {
       <DatePicker value={value} onChange={(_event, value) => setValue(value)} />
       <br />
       <br />
-      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
+      <Flex>
+        <FlexItem>
+          <Button onClick={() => setValue(initialValue)}>Reset date</Button>
+        </FlexItem>
+        <FlexItem>
+          <Button onClick={() => setValue('')}>Clear date</Button>
+        </FlexItem>
+      </Flex>
     </React.Fragment>
   );
 };

package/src/components/DatePicker/examples/DatePickerControlledRequired.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, DatePicker, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DatePickerControlled: React.FunctionComponent = () => {
+  const initialValue = '2020-03-17';
+  const [value, setValue] = React.useState(initialValue);
+  return (
+    <React.Fragment>
+      <DatePicker
+        requiredDateOptions={{ isRequired: true, emptyDateText: 'Date is required' }}
+        value={value}
+        onChange={(_event, value) => setValue(value)}
+      />
+      <br />
+      <br />
+      <Flex>
+        <FlexItem>
+          <Button onClick={() => setValue(initialValue)}>Reset date</Button>
+        </FlexItem>
+        <FlexItem>
+          <Button onClick={() => setValue('')}>Clear date</Button>
+        </FlexItem>
+      </Flex>
+    </React.Fragment>
+  );
+};

package/src/components/DatePicker/examples/DatePickerRequired.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DatePicker } from '@patternfly/react-core';
+
+export const DatePickerRequired: React.FunctionComponent = () => (
+  <DatePicker requiredDateOptions={{ isRequired: true, emptyDateText: 'Date is required' }} />
+);