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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.122",
+  "version": "5.0.0-alpha.124",
   "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",
@@ -49,7 +49,7 @@
     "@patternfly/react-icons": "^5.0.0-alpha.19",
     "@patternfly/react-styles": "^5.0.0-alpha.16",
     "@patternfly/react-tokens": "^5.0.0-alpha.14",
-    "focus-trap": "7.4.2",
+    "focus-trap": "7.4.3",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "55b14bfc3e26c7818aefdfe5dafdd6c5aa094347"
+  "gitHead": "8922fda80b3e4367d717813237eda7f623c42cd0"
 }

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();
+});

package/src/components/InputGroup/InputGroup.tsx

@@ -15,7 +15,7 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
-  className = '',
+  className,
   children,
   innerRef,
   ...props

package/src/components/InputGroup/InputGroupItem.tsx

@@ -15,11 +15,10 @@ export interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {
   isFill?: boolean;
   /** Flag to indicate if the input group item is disabled. */
   isDisabled?: boolean;
-
 }
 
 export const InputGroupItem: React.FunctionComponent<InputGroupItemProps> = ({
-  className = '',
+  className,
   children,
   isFill = false,
   isBox = false,

package/src/components/InputGroup/InputGroupText.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
+import { InputGroupItem } from './InputGroupItem';
 
 export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | HTMLLabelElement> {
   /** Additional classes added to the input group text. */
@@ -9,25 +10,27 @@ export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | H
   children: React.ReactNode;
   /** Component that wraps the input group text. */
   component?: React.ReactNode;
+  /** Flag to to indicate if the input group item is plain. */
+  isPlain?: boolean;
+  /** Flag to indicate if the input group text is disabled. */
+  isDisabled?: boolean;
 }
 
 export const InputGroupText: React.FunctionComponent<InputGroupTextProps> = ({
-  className = '',
+  className,
   component = 'span',
   children,
+  isPlain,
+  isDisabled,
   ...props
 }: InputGroupTextProps) => {
   const Component = component as any;
   return (
-    <Component
-      className={css(
-        styles.inputGroupText,
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </Component>
+    <InputGroupItem isPlain={isPlain} isBox isDisabled={isDisabled}>
+      <Component className={css(styles.inputGroupText, className)} {...props}>
+        {children}
+      </Component>
+    </InputGroupItem>
   );
 };
 InputGroupText.displayName = 'InputGroupText';

package/src/components/InputGroup/examples/InputGroupBasic.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
-import {
-  InputGroup,
-  InputGroupText,
-  InputGroupItem,
-  TextInput,
-  ValidatedOptions
-} from '@patternfly/react-core';
+import { InputGroup, InputGroupText, InputGroupItem, TextInput, ValidatedOptions } from '@patternfly/react-core';
 
 export const InputGroupBasic: React.FunctionComponent = () => (
   <React.Fragment>
@@ -14,17 +8,13 @@ export const InputGroupBasic: React.FunctionComponent = () => (
       <InputGroupItem isFill>
         <TextInput id="textInput-basic-1" type="email" aria-label="email input field" />
       </InputGroupItem>
-      <InputGroupItem isBox>
-        <InputGroupText id="email-example">@example.com</InputGroupText>
-      </InputGroupItem>
+      <InputGroupText id="email-example">@example.com</InputGroupText>
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupItem isBox>
-        <InputGroupText id="username">
-          <AtIcon />
-        </InputGroupText>
-      </InputGroupItem>
+      <InputGroupText id="username">
+        <AtIcon />
+      </InputGroupText>
       <InputGroupItem isFill>
         <TextInput
           validated={ValidatedOptions.error}
@@ -39,11 +29,9 @@ export const InputGroupBasic: React.FunctionComponent = () => (
       <InputGroupItem isFill>
         <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />
       </InputGroupItem>
-      <InputGroupItem isPlain isBox>
-        <InputGroupText id="plain-example">
-          %
-        </InputGroupText>
-      </InputGroupItem>
+      <InputGroupText id="plain-example" isPlain>
+        %
+      </InputGroupText>
     </InputGroup>
   </React.Fragment>
 );

package/src/components/InputGroup/examples/InputGroupWithSiblings.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import {
-  Button,
-  TextArea,
-  InputGroup,
-  InputGroupText,
-  InputGroupItem,
-  TextInput,
-} from '@patternfly/react-core';
+import { Button, TextArea, InputGroup, InputGroupText, InputGroupItem, TextInput } from '@patternfly/react-core';
 
 export const InputGroupWithSiblings: React.FunctionComponent = () => (
   <React.Fragment>
@@ -18,11 +11,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
         </Button>
       </InputGroupItem>
       <InputGroupItem isFill>
-        <TextArea
-          name="textarea1"
-          id="textarea1"
-          aria-label="textarea with buttons"
-        />
+        <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
       </InputGroupItem>
       <InputGroupItem>
         <Button variant="control">Button</Button>
@@ -39,11 +28,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
         <Button variant="control">Button</Button>
       </InputGroupItem>
       <InputGroupItem isFill>
-        <TextArea
-          name="textarea2"
-          id="textarea2"
-          aria-label="textarea with 3 buttons"
-        />
+        <TextArea name="textarea2" id="textarea2" aria-label="textarea with 3 buttons" />
       </InputGroupItem>
       <InputGroupItem>
         <Button variant="control">Button</Button>
@@ -51,11 +36,9 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupItem isBox>
-        <InputGroupText>
-          <DollarSignIcon />
-        </InputGroupText>
-      </InputGroupItem>
+      <InputGroupText>
+        <DollarSignIcon />
+      </InputGroupText>
       <InputGroupItem isFill>
         <TextInput
           id="textInput-with-siblings"
@@ -64,9 +47,7 @@ export const InputGroupWithSiblings: React.FunctionComponent = () => (
           aria-label="Dollar amount input example"
         />
       </InputGroupItem>
-      <InputGroupItem isBox>
-        <InputGroupText>.00</InputGroupText>
-      </InputGroupItem>
+      <InputGroupText>.00</InputGroupText>
     </InputGroup>
   </React.Fragment>
 );

package/src/components/InputGroup/index.ts

@@ -1,3 +1,3 @@
 export * from './InputGroup';
-export * from './InputGroupText';
 export * from './InputGroupItem';
+export * from './InputGroupText';

package/src/components/Slider/Slider.tsx

@@ -333,13 +333,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       return (
         <InputGroup>
           <InputGroupItem isFill>{textInput}</InputGroupItem>
-          <InputGroupItem isBox>
-            <InputGroupText
-              {...(isDisabled && { className: css(styles.modifiers.disabled) })}
-            >
-              {inputLabel}
-            </InputGroupText>
-          </InputGroupItem>
+          <InputGroupText isDisabled={isDisabled}>{inputLabel}</InputGroupText>
         </InputGroup>
       );
     } else {