@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

package/src/components/FormSelect/examples/FormSelect.md

@@ -2,7 +2,7 @@
 id: Form select
 section: components
 subsection: forms
-cssPrefix: pf-c-form-control
+cssPrefix: pf-v5-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true
 ---
@@ -10,24 +10,25 @@ ouia: true
 ## Examples
 
 ### Basic
+
 ```ts file='./FormSelectBasic.tsx'
+
 ```
 
 ### Validated
+
 ```ts file='./FormSelectValidated.tsx'
+
 ```
 
 ### Disabled
+
 ```ts file='./FormSelectDisabled.tsx'
-```
 
-### Grouped
-```ts file='./FormSelectGrouped.tsx'
 ```
 
-### Icon sprite variant
+### Grouped
 
-**Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+```ts file='./FormSelectGrouped.tsx'
 
-```ts file='./FormSelectIconSpriteVariant.tsx'
 ```

package/src/components/HelperText/examples/HelperText.md

@@ -1,7 +1,7 @@
 ---
 id: Helper text
 section: components
-cssPrefix: pf-c-helper-text
+cssPrefix: pf-v5-c-helper-text
 propComponents: ['HelperText', 'HelperTextItem']
 ---
 

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

@@ -14,7 +14,7 @@ test('renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('renders with class pf-c-hint', () => {
+test('renders with class pf-v5-c-hint', () => {
   render(<Hint>Test</Hint>);
 
   const hint = screen.getByText('Test');
@@ -46,7 +46,7 @@ test('renders actions options', () => {
   expect(actions).toBeVisible();
 });
 
-test('renders with class pf-c-hint__actions if there is an action prop', () => {
+test('renders with class pf-v5-c-hint__actions if there is an action prop', () => {
   render(<Hint actions="actions">Test</Hint>);
 
   const hint = screen.getByText('actions');

package/src/components/Hint/__tests__/HintBody.test.tsx

@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__body', () => {
+test('renders with class pf-v5-c-hint__body', () => {
   render(<HintBody>Hint Body Test</HintBody>);
 
   const body = screen.getByText('Hint Body Test');

package/src/components/Hint/__tests__/HintFooter.test.tsx

@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__footer', () => {
+test('renders with class pf-v5-c-hint__footer', () => {
   render(<HintFooter>Hint Body Test</HintFooter>);
 
   const body = screen.getByText('Hint Body Test');

package/src/components/Hint/__tests__/HintTitle.test.tsx

@@ -16,7 +16,7 @@ test('renders children', () => {
   expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
 });
 
-test('renders with class pf-c-hint__title', () => {
+test('renders with class pf-v5-c-hint__title', () => {
   render(<HintTitle>Hint Body Test</HintTitle>);
 
   const body = screen.getByText('Hint Body Test');

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -43,11 +43,11 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
       )}
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="action">
+        <DropdownItem value={0} key="action">
           Action
         </DropdownItem>
         <DropdownItem
-          itemId={1}
+          value={1}
           key="link"
           to="#default-link2"
           // Prevent the default onClick functionality for example purposes
@@ -55,17 +55,17 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
         >
           Link
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled action">
+        <DropdownItem value={2} isDisabled key="disabled action">
           Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
         <Divider component="li" key="separator" />
-        <DropdownItem itemId={4} key="separated action">
+        <DropdownItem value={4} key="separated action">
           Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
           Separated Link
         </DropdownItem>
       </DropdownList>

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -42,11 +42,11 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
       )}
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="action">
+        <DropdownItem value={0} key="action">
           Action
         </DropdownItem>
         <DropdownItem
-          itemId={1}
+          value={1}
           key="link"
           to="#default-link2"
           // Prevent the default onClick functionality for example purposes
@@ -54,17 +54,17 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
         >
           Link
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled action">
+        <DropdownItem value={2} isDisabled key="disabled action">
           Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
         <Divider component="li" key="separator" />
-        <DropdownItem itemId={4} key="separated action">
+        <DropdownItem value={4} key="separated action">
           Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
           Separated Link
         </DropdownItem>
       </DropdownList>

package/src/components/Icon/examples/Icon.md

@@ -1,9 +1,8 @@
 ---
 id: Icon
 section: components
-cssPrefix: pf-c-icon
+cssPrefix: pf-v5-c-icon
 propComponents: ['Icon']
-beta: true
 ---
 
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';

package/src/components/InputGroup/InputGroup.tsx

@@ -15,30 +15,66 @@ export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
-  className = '',
+  className,
   children,
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
-  const idItem = React.Children.toArray(children).find(
-    (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
-  ) as React.ReactElement<{ id: string }>;
-
+  const getIdItem = () => {
+    const getChildId = (_children: any) =>
+      React.Children.toArray(_children).find(
+        (_child: any) => !formCtrls.includes(_child?.type?.displayName) && _child?.props?.id
+      );
+    let childId = getChildId(children);
+    if (childId) {
+      return childId;
+    }
+    React.Children.toArray(children).find((child: any) => {
+      const _childId = getChildId(child.props.children);
+      if (_childId) {
+        childId = _childId;
+        return true;
+      }
+    });
+    return childId;
+  };
+  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
+  const idItem = getIdItem() as React.ReactElement<{ id: string }>;
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
+  const childrenWithId = React.Children.map(children, (child: any) => {
+    if (child?.type.displayName === 'InputGroupItem') {
+      const newChildren = React.Children.map(child.props.children, _child => {
+        if (!_child.props) {
+          return _child;
+        }
+        if (_child.props['aria-describedby']) {
+          return _child;
+        }
+        if (!formCtrls.includes(_child.type.displayName)) {
+          return _child;
+        }
+        return React.cloneElement(_child, {
+          'aria-describedby': _child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
+        });
+      });
+      return React.cloneElement(child, {}, newChildren);
+    }
+
+    if (child?.props['aria-describedby']) {
+      return child;
+    }
+    if (!formCtrls.includes(child?.type.displayName)) {
+      return child;
+    }
+    return React.cloneElement(child, {
+      'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
+    });
+  });
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
-      {idItem
-        ? React.Children.map(children, (child: any) =>
-            !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
-              ? child
-              : React.cloneElement(child, {
-                  'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
-                })
-          )
-        : children}
+      {idItem ? childrenWithId : children}
     </div>
   );
 };

package/src/components/InputGroup/InputGroupItem.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
+import { css } from '@patternfly/react-styles';
+
+export interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the input group item. */
+  className?: string;
+  /** Content rendered inside the input group item. */
+  children: React.ReactNode;
+  /** Enables box styling to the input group item */
+  isBox?: boolean;
+  /** Flag to indicate if the input group item is plain. */
+  isPlain?: boolean;
+  /** Flag to indicate if the input group item should fill the available horizontal space */
+  isFill?: boolean;
+  /** Flag to indicate if the input group item is disabled. */
+  isDisabled?: boolean;
+}
+
+export const InputGroupItem: React.FunctionComponent<InputGroupItemProps> = ({
+  className,
+  children,
+  isFill = false,
+  isBox = false,
+  isPlain,
+  isDisabled,
+  ...props
+}: InputGroupItemProps) => (
+  <div
+    className={css(
+      styles.inputGroupItem,
+      isFill && styles.modifiers.fill,
+      isBox && styles.modifiers.box,
+      isPlain && styles.modifiers.plain,
+      isDisabled && styles.modifiers.disabled,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+InputGroupItem.displayName = 'InputGroupItem';

package/src/components/InputGroup/InputGroupText.tsx

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
-
-export enum InputGroupTextVariant {
-  default = 'default',
-  plain = 'plain'
-}
+import { InputGroupItem } from './InputGroupItem';
 
 export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | HTMLLabelElement> {
   /** Additional classes added to the input group text. */
@@ -14,29 +10,27 @@ export interface InputGroupTextProps extends React.HTMLProps<HTMLSpanElement | H
   children: React.ReactNode;
   /** Component that wraps the input group text. */
   component?: React.ReactNode;
-  /** Input group text variant */
-  variant?: InputGroupTextVariant | 'default' | 'plain';
+  /** 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,
-  variant = InputGroupTextVariant.default,
+  isPlain,
+  isDisabled,
   ...props
 }: InputGroupTextProps) => {
   const Component = component as any;
   return (
-    <Component
-      className={css(
-        styles.inputGroupText,
-        variant === InputGroupTextVariant.plain && styles.modifiers.plain,
-        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/__tests__/InputGroup.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { InputGroup } from '../InputGroup';
+import { InputGroupItem } from '../InputGroupItem';
 import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
@@ -12,10 +13,14 @@ describe('InputGroup', () => {
     // If Button has an id props, this should be used in aria-describedby.
     render(
       <InputGroup>
-        <TextInput value="some data" aria-label="some text" />
-        <Button variant="primary" id="button-id">
-          hello
-        </Button>
+        <InputGroupItem>
+          <TextInput value="some data" aria-label="some text" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button variant="primary" id="button-id">
+            hello
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
     expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
@@ -27,10 +32,14 @@ describe('InputGroup', () => {
     // example has an empty aria-describedby to prevent that from happening.
     render(
       <InputGroup>
-        <TextInput value="some data" aria-describedby="" aria-label="some text" />
-        <Button id="button-id">
-          hello
-        </Button>
+        <InputGroupItem>
+          <TextInput value="some data" aria-describedby="" aria-label="some text" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button id="button-id">
+            hello
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
     expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
@@ -42,10 +51,14 @@ describe('InputGroup', () => {
     // example has a predefined aria-describedby to prevent that from happening
     render(
       <InputGroup>
-        <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
-        <Button id="button-id">
-          hello
-        </Button>
+        <InputGroupItem>
+          <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button id="button-id">
+            hello
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
     expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');

package/src/components/InputGroup/__tests__/InputGroupText.test.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { InputGroupText, InputGroupTextVariant } from '../InputGroupText';
+import { InputGroupText } from '../InputGroupText';
 
 describe('InputGroupText', () => {
   test('renders', () => {
     render(
-      <InputGroupText className="inpt-grp-text" variant={InputGroupTextVariant.plain} id="email-npt-grp">
+      <InputGroupText className="inpt-grp-text" id="email-npt-grp">
         @
       </InputGroupText>
     );

package/src/components/InputGroup/examples/InputGroup.md

@@ -2,7 +2,7 @@
 id: Input group
 section: components
 cssPrefix: null
-propComponents: ['InputGroup', 'InputGroupText']
+propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 ---
 
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
@@ -32,6 +32,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 
 ### With popover
 
+using `appendTo` with ref to the `InputGroup` for the Popover so that the popover width will depend on the whole input group
 ```ts file ='./InputGroupWithPopover.tsx'
 
 ```

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

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   InputGroup,
+  InputGroupItem,
   TextInput,
   Dropdown,
   DropdownList,
@@ -24,32 +25,38 @@ export const InputGroupWithDropdown: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <InputGroup>
-        <Dropdown
-          isOpen={isOpen}
-          onSelect={onSelect}
-          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
-              Dropdown
-            </MenuToggle>
-          )}
-        >
-          <DropdownList>
-            <DropdownItem itemId={0} key="option1">
-              Option 1
-            </DropdownItem>
-            <DropdownItem itemId={1} key="option2">
-              Option 2
-            </DropdownItem>
-            <DropdownItem itemId={2} key="option3">
-              Option 3
-            </DropdownItem>
-          </DropdownList>
-        </Dropdown>
-        <TextInput id="textInput-with-dropdown" aria-label="input with dropdown and button" />
-        <Button id="inputDropdownButton1" variant="control">
-          Button
-        </Button>
+        <InputGroupItem>
+          <Dropdown
+            isOpen={isOpen}
+            onSelect={onSelect}
+            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+                Dropdown
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>
+              <DropdownItem value={0} key="option1">
+                Option 1
+              </DropdownItem>
+              <DropdownItem value={1} key="option2">
+                Option 2
+              </DropdownItem>
+              <DropdownItem value={2} key="option3">
+                Option 3
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        </InputGroupItem>
+        <InputGroupItem isFill>
+          <TextInput id="textInput-with-dropdown" aria-label="input with dropdown and button" />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button id="inputDropdownButton1" variant="control">
+            Button
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     </React.Fragment>
   );