@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.51

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -7,12 +7,14 @@ import {
   DataListAction,
   DataListToggle,
   DataListContent,
-  DataListItemCells,
-  Dropdown,
-  DropdownItem,
+  DataListItemCells
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownPosition,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const DataListExpandable: React.FunctionComponent = () => {
@@ -21,7 +23,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
   const [isOpen3, setIsOpen3] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -29,14 +31,14 @@ export const DataListExpandable: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 
   const onSelect2 = () => {
     setIsOpen2(!isOpen2);
   };
-  const onToggle3 = isOpen3 => {
+  const onToggle3 = (_event: any, isOpen3: boolean) => {
     setIsOpen3(isOpen3);
   };
 
@@ -44,7 +46,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
     setIsOpen3(!isOpen3);
   };
 
-  const toggle = id => {
+  const toggle = (id) => {
     const index = expanded.indexOf(id);
     const newExpanded =
       index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
@@ -85,20 +87,20 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen1}
                 onSelect={onSelect1}
                 toggle={<KebabToggle onToggle={onToggle1} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -145,20 +147,20 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen2}
                 onSelect={onSelect2}
                 toggle={<KebabToggle onToggle={onToggle2} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -205,20 +207,20 @@ export const DataListExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen3}
                 onSelect={onSelect3}
                 toggle={<KebabToggle onToggle={onToggle3} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -7,12 +7,14 @@ import {
   DataListAction,
   DataListToggle,
   DataListContent,
-  DataListItemCells,
-  Dropdown,
-  DropdownItem,
+  DataListItemCells
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownPosition,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const DataListMixedExpandable: React.FunctionComponent = () => {
@@ -21,7 +23,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
   const [isOpen3, setIsOpen3] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -29,7 +31,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 
@@ -37,7 +39,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const onToggle3 = isOpen3 => {
+  const onToggle3 = (_event: any, isOpen3: boolean) => {
     setIsOpen3(isOpen3);
   };
 
@@ -45,7 +47,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
     setIsOpen3(!isOpen3);
   };
 
-  const toggle = id => {
+  const toggle = (id) => {
     const index = expanded.indexOf(id);
     const newExpanded =
       index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
@@ -87,20 +89,20 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen1}
                 onSelect={onSelect1}
                 toggle={<KebabToggle onToggle={onToggle1} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -149,20 +151,20 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen2}
                 onSelect={onSelect2}
                 toggle={<KebabToggle onToggle={onToggle2} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -199,20 +201,20 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen3}
                 onSelect={onSelect3}
                 toggle={<KebabToggle onToggle={onToggle3} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   DataList,
   DataListItem,
   DataListCell,
@@ -11,13 +7,19 @@ import {
   DataListItemCells,
   DataListAction
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const DataListSelectableRows: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -25,7 +27,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 
@@ -33,11 +35,11 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const onSelectDataListItem = id => {
+  const onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {
     setSelectedDataListItemId(id);
   };
 
-  const handleInputChange = (id: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, id: string) => {
     setSelectedDataListItemId(id);
   };
 
@@ -47,7 +49,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
         aria-label="selectable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
-        selectableRow={{ onChange: handleInputChange }}
+        onSelectableRowChange={handleInputChange}
       >
         <DataListItem aria-labelledby="selectable-action-item1" id="item1">
           <DataListItemRow>
@@ -65,20 +67,20 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen1}
                 onSelect={onSelect1}
                 toggle={<KebabToggle onToggle={onToggle1} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>
@@ -100,20 +102,20 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen2}
                 onSelect={onSelect2}
                 toggle={<KebabToggle onToggle={onToggle2} />}
                 dropdownItems={[
-                  <DropdownItem key="link">Link</DropdownItem>,
-                  <DropdownItem key="action" component="button">
+                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="action" component="button">
                     Action
-                  </DropdownItem>,
-                  <DropdownItem key="disabled link" isDisabled>
+                  </DropdownItemDeprecated>,
+                  <DropdownItemDeprecated key="disabled link" isDisabled>
                     Disabled Link
-                  </DropdownItem>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -9,21 +9,23 @@ import {
   DataListContent,
   DataListItemCells,
   DataListItemRow,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
-  DropdownPosition,
   Text,
   TextVariants,
   TextContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle,
+  DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
 
-  const onToggle1 = isOpen1 => {
+  const onToggle1 = (_event: any, isOpen1: boolean) => {
     setIsOpen1(isOpen1);
   };
 
@@ -31,7 +33,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = isOpen2 => {
+  const onToggle2 = (_event: any, isOpen2: boolean) => {
     setIsOpen2(isOpen2);
   };
 
@@ -112,20 +114,20 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={isOpen1}
                   onSelect={onSelect1}
                   toggle={<KebabToggle onToggle={onToggle1} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -172,20 +174,20 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={isOpen2}
                   onSelect={onSelect2}
                   toggle={<KebabToggle onToggle={onToggle2} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>

package/src/components/DatePicker/DatePicker.tsx

@@ -16,13 +16,13 @@ import { isValidDate } from '../../helpers/datetimeUtils';
 export interface DatePickerProps
   extends CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
-  /** The container to append the menu to. Defaults to 'parent'.
+  /** The container to append the menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
    * menuAppendTo={() => document.body};
    * menuAppendTo={document.getElementById('target')}
    */
-  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent';
+  appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
   /** Accessible label for the date picker. */
   'aria-label'?: string;
   /** Accessible label for the button to open the date picker. */
@@ -42,9 +42,9 @@ export interface DatePickerProps
   /** Error message to display when the text input cannot be parsed. */
   invalidFormatText?: string;
   /** Callback called every time the text input loses focus. */
-  onBlur?: (value: string, date?: Date) => void;
+  onBlur?: (event: any, value: string, date?: Date) => void;
   /** Callback called every time the text input value changes. */
-  onChange?: (value: string, date?: Date) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void;
   /** String to display in the empty text input as a hint for the expected date format. */
   placeholder?: string;
   /** Props to pass to the popover that contains the calendar month component. */
@@ -95,7 +95,7 @@ const DatePickerBase = (
     onBlur = (): any => undefined,
     invalidFormatText = 'Invalid date',
     helperText,
-    appendTo = 'parent',
+    appendTo = 'inline',
     popoverProps,
     monthFormat,
     weekdayFormat,
@@ -120,6 +120,7 @@ const DatePickerBase = (
   const style = { '--pf-c-date-picker__input--c-form-control--width-chars': widthChars, ...styleProps };
   const buttonRef = React.useRef<HTMLButtonElement>();
   const datePickerWrapperRef = React.useRef<HTMLDivElement>();
+  const triggerRef = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
     setValue(valueProp);
@@ -135,42 +136,42 @@ const DatePickerBase = (
   }, [value]);
 
   const setError = (date: Date) => {
-    setErrorText(validators.map(validator => validator(date)).join('\n') || '');
+    setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
   };
 
-  const onTextInput = (value: string) => {
+  const onTextInput = (value: string, event: React.FormEvent<HTMLInputElement>) => {
     setValue(value);
     setErrorText('');
     const newValueDate = dateParse(value);
     setValueDate(newValueDate);
     if (isValidDate(newValueDate)) {
-      onChange(value, new Date(newValueDate));
+      onChange(event, value, new Date(newValueDate));
     } else {
-      onChange(value);
+      onChange(event, value);
     }
   };
 
-  const onInputBlur = () => {
+  const onInputBlur = (event: any) => {
     if (pristine) {
       return;
     }
     const newValueDate = dateParse(value);
     if (isValidDate(newValueDate)) {
-      onBlur(value, new Date(newValueDate));
+      onBlur(event, value, new Date(newValueDate));
       setError(newValueDate);
     } else {
-      onBlur(value);
+      onBlur(event, value);
       setErrorText(invalidFormatText);
     }
   };
 
-  const onDateClick = (newValueDate: Date) => {
+  const onDateClick = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, newValueDate: Date) => {
     const newValue = dateFormat(newValueDate);
     setValue(newValue);
     setValueDate(newValueDate);
     setError(newValueDate);
     setPopoverOpen(false);
-    onChange(newValue, new Date(newValueDate));
+    onChange(null, newValue, new Date(newValueDate));
   };
 
   const onKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {
@@ -189,7 +190,7 @@ const DatePickerBase = (
       setCalendarOpen: (isOpen: boolean) => setPopoverOpen(isOpen),
       toggleCalendar: (setOpen?: boolean, eventKey?: string) => {
         if (eventKey === KeyTypes.Escape && popoverOpen && !selectOpen) {
-          setPopoverOpen(prev => (setOpen !== undefined ? setOpen : !prev));
+          setPopoverOpen((prev) => (setOpen !== undefined ? setOpen : !prev));
         }
       },
       isCalendarOpen: popoverOpen
@@ -197,9 +198,6 @@ const DatePickerBase = (
     [setPopoverOpen, popoverOpen, selectOpen]
   );
 
-  const getParentElement = () =>
-    datePickerWrapperRef && datePickerWrapperRef.current ? datePickerWrapperRef.current : null;
-
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
@@ -210,8 +208,8 @@ const DatePickerBase = (
             onChange={onDateClick}
             locale={locale}
             // Use truthy values of strings
-            validators={validators.map(validator => (date: Date) => !validator(date))}
-            onSelectToggle={open => setSelectOpen(open)}
+            validators={validators.map((validator) => (date: Date) => !validator(date))}
+            onSelectToggle={(open) => setSelectOpen(open)}
             monthFormat={monthFormat}
             weekdayFormat={weekdayFormat}
             longWeekdayFormat={longWeekdayFormat}
@@ -243,10 +241,11 @@ const DatePickerBase = (
         withFocusTrap
         hasNoPadding
         hasAutoWidth
-        appendTo={appendTo === 'parent' ? getParentElement() : appendTo}
+        appendTo={appendTo}
+        triggerRef={triggerRef}
         {...popoverProps}
       >
-        <div className={styles.datePickerInput}>
+        <div className={styles.datePickerInput} ref={triggerRef}>
           <InputGroup>
             <TextInput
               isDisabled={isDisabled}
@@ -261,6 +260,7 @@ const DatePickerBase = (
             />
             <button
               ref={buttonRef}
+              // TODO: Removed style follow up work with issue #8457
               className={css(buttonStyles.button, buttonStyles.modifiers.control)}
               aria-label={buttonAriaLabel}
               type="button"
@@ -273,7 +273,7 @@ const DatePickerBase = (
         </div>
       </Popover>
       {helperText && <div className={styles.datePickerHelperText}>{helperText}</div>}
-      {errorText.trim() && <div className={css(styles.datePickerHelperText, styles.modifiers.error)}>{errorText}</div>}
+      {errorText.trim() && <div className={css(styles.datePickerHelperText)}>{errorText}</div>}
     </div>
   );
 };

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

@@ -3,6 +3,8 @@ import { DatePicker } from '../DatePicker';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 
+jest.mock('../../../helpers/util.ts')
+
 test('disabled date picker', () => {
   const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
   expect(asFragment()).toMatchSnapshot();
@@ -48,3 +50,14 @@ test('Error state can be cleared from outside', async () => {
 
   expect(screen.getByRole('textbox')).not.toBeInvalid();
 });
+
+test('With popover opened', async () => {
+  const user = userEvent.setup();
+
+  const { asFragment } = render(<DatePicker />);
+
+  await user.click(screen.getByRole('button', { name: 'Toggle date picker' }));
+  await screen.findByRole('button', { name: 'Previous month' });
+
+  expect(asFragment()).toMatchSnapshot();
+})