@patternfly/react-core 5.0.0-alpha.104 → 5.0.0-alpha.106

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/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,31 +1,50 @@
 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,
+  InputGroupTextVariant,
+  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" />
-      <InputGroupText id="email-example">@example.com</InputGroupText>
+      <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>
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupText id="username">
-        <AtIcon />
-      </InputGroupText>
-      <TextInput
-        validated={ValidatedOptions.error}
-        id="textInput-basic-2"
-        type="email"
-        aria-label="Error state username example"
-      />
+      <InputGroupItem isBox>
+        <InputGroupText id="username">
+          <AtIcon />
+        </InputGroupText>
+      </InputGroupItem>
+      <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}>
-        %
-      </InputGroupText>
+      <InputGroupItem isFill>
+        <TextInput name="textInput-basic-3" id="textInput-basic-3" type="text" aria-label="percentage" />
+      </InputGroupItem>
+      <InputGroupItem isPlain isBox>
+        <InputGroupText id="plain-example" variant={InputGroupTextVariant.plain}>
+          %
+        </InputGroupText>
+      </InputGroupItem>
     </InputGroup>
   </React.Fragment>
 );

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 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>
+        </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>
   );

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

@@ -1,43 +1,57 @@
 import React from 'react';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import { Button, InputGroup, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
+import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
 
-export const InputGroupWithPopover: React.FunctionComponent = () => (
-  <React.Fragment>
-    <InputGroup>
-      <TextInput
-        name="textInput-with-popover-1"
-        id="textInput-with-popover-1"
-        type="text"
-        aria-label="first input example with popover"
-      />
-      <Popover
-        aria-label="popover example"
-        position={PopoverPosition.top}
-        bodyContent="This field is an example of an input group with a popover."
-      >
-        <Button variant="control" aria-label="popover for input">
-          <QuestionCircleIcon />
-        </Button>
-      </Popover>
-    </InputGroup>
-    <br />
-    <InputGroup>
-      <TextInput
-        name="textInput-with-popover-2"
-        id="textInput-with-popover-2"
-        type="text"
-        aria-label="second input example with popover"
-      />
-      <Popover
-        aria-label="popover example"
-        position={PopoverPosition.top}
-        bodyContent="This field is an example of an input group with a popover."
-      >
-        <Button variant="plain" aria-label="Popover for input">
-          <QuestionCircleIcon />
-        </Button>
-      </Popover>
-    </InputGroup>
-  </React.Fragment>
-);
+export const InputGroupWithPopover: React.FunctionComponent = () => {
+  const inputGroupRef1 = React.useRef(null);
+  const inputGroupRef2 = React.useRef(null);
+  return (
+    <React.Fragment>
+      <InputGroup ref={inputGroupRef1}>
+        <InputGroupItem isFill>
+          <TextInput
+            name="textInput-with-popover-1"
+            id="textInput-with-popover-1"
+            type="text"
+            aria-label="first input example with popover"
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Popover
+            aria-label="popover example"
+            position={PopoverPosition.top}
+            bodyContent="This field is an example of an input group with a popover."
+            appendTo={() => inputGroupRef1.current}
+          >
+            <Button variant="control" aria-label="popover for input">
+              <QuestionCircleIcon />
+            </Button>
+          </Popover>
+        </InputGroupItem>
+      </InputGroup>
+      <br />
+      <InputGroup ref={inputGroupRef2}>
+        <InputGroupItem isFill>
+          <TextInput
+            name="textInput-with-popover-2"
+            id="textInput-with-popover-2"
+            type="text"
+            aria-label="second input example with popover"
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Popover
+            aria-label="popover example"
+            position={PopoverPosition.top}
+            bodyContent="This field is an example of an input group with a popover."
+            appendTo={() => inputGroupRef2.current}
+          >
+            <Button variant="plain" aria-label="Popover for input">
+              <QuestionCircleIcon />
+            </Button>
+          </Popover>
+        </InputGroupItem>
+      </InputGroup>
+    </React.Fragment>
+  );
+};

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

@@ -1,37 +1,72 @@
 import React from 'react';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import { Button, TextArea, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+import {
+  Button,
+  TextArea,
+  InputGroup,
+  InputGroupText,
+  InputGroupItem,
+  TextInput,
+} from '@patternfly/react-core';
 
 export const InputGroupWithSiblings: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <Button id="textAreaButton1" variant="control">
-        Button
-      </Button>
-      <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
-      <Button variant="control">Button</Button>
+      <InputGroupItem>
+        <Button id="textAreaButton1" variant="control">
+          Button
+        </Button>
+      </InputGroupItem>
+      <InputGroupItem isFill>
+        <TextArea
+          name="textarea1"
+          id="textarea1"
+          aria-label="textarea with buttons"
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button variant="control">Button</Button>
+      </InputGroupItem>
     </InputGroup>
     <br />
     <InputGroup>
-      <Button id="textAreaButton3" variant="control">
-        Button
-      </Button>
-      <Button variant="control">Button</Button>
-      <TextArea name="textarea2" id="textarea2" aria-label="textarea with 3 buttons" />
-      <Button variant="control">Button</Button>
+      <InputGroupItem>
+        <Button id="textAreaButton3" variant="control">
+          Button
+        </Button>
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button variant="control">Button</Button>
+      </InputGroupItem>
+      <InputGroupItem isFill>
+        <TextArea
+          name="textarea2"
+          id="textarea2"
+          aria-label="textarea with 3 buttons"
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button variant="control">Button</Button>
+      </InputGroupItem>
     </InputGroup>
     <br />
     <InputGroup>
-      <InputGroupText>
-        <DollarSignIcon />
-      </InputGroupText>
-      <TextInput
-        id="textInput-with-siblings"
-        name="textInput-with-siblings"
-        type="number"
-        aria-label="Dollar amount input example"
-      />
-      <InputGroupText>.00</InputGroupText>
+      <InputGroupItem isBox>
+        <InputGroupText>
+          <DollarSignIcon />
+        </InputGroupText>
+      </InputGroupItem>
+      <InputGroupItem isFill>
+        <TextInput
+          id="textInput-with-siblings"
+          name="textInput-with-siblings"
+          type="number"
+          aria-label="Dollar amount input example"
+        />
+      </InputGroupItem>
+      <InputGroupItem isBox>
+        <InputGroupText>.00</InputGroupText>
+      </InputGroupItem>
     </InputGroup>
   </React.Fragment>
 );

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

@@ -1,13 +1,17 @@
 import React from 'react';
-import { Button, TextArea, InputGroup } from '@patternfly/react-core';
+import { Button, TextArea, InputGroup, InputGroupItem } from '@patternfly/react-core';
 
 export const InputGroupWithTextarea: React.FunctionComponent = () => (
   <React.Fragment>
     <InputGroup>
-      <TextArea name="inputGroup-with-textarea" id="inputGroup-with-textarea" aria-label="textarea with button" />
-      <Button id="textAreaButton2" variant="control">
-        Button
-      </Button>
+      <InputGroupItem isFill>
+        <TextArea name="inputGroup-with-textarea" id="inputGroup-with-textarea" aria-label="textarea with button" />
+      </InputGroupItem>
+      <InputGroupItem>
+        <Button id="textAreaButton2" variant="control">
+          Button
+        </Button>
+      </InputGroupItem>
     </InputGroup>
   </React.Fragment>
 );

package/src/components/InputGroup/index.ts

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

package/src/components/LoginPage/LoginForm.tsx

@@ -4,7 +4,7 @@ import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { ValidatedOptions } from '../../helpers/constants';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import { HelperText, HelperTextItem } from '../HelperText';
@@ -121,14 +121,18 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
       <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
-            {passwordInput}
-            <Button
-              variant="control"
-              onClick={() => setPasswordHidden(!passwordHidden)}
-              aria-label={passwordHidden ? showPasswordAriaLabel : hidePasswordAriaLabel}
-            >
-              {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-            </Button>
+            <InputGroupItem isFill>
+              {passwordInput}
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                variant="control"
+                onClick={() => setPasswordHidden(!passwordHidden)}
+                aria-label={passwordHidden ? showPasswordAriaLabel : hidePasswordAriaLabel}
+              >
+                {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         )}
         {!isShowPasswordEnabled && passwordInput}

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -218,39 +218,47 @@ exports[`LoginForm LoginForm with show password 1`] = `
         <div
           class="pf-v5-c-input-group"
         >
-          <input
-            aria-invalid="false"
-            class="pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            id="pf-login-password-id"
-            name="pf-login-password-id"
-            required=""
-            type="password"
-            value=""
-          />
-          <button
-            aria-disabled="false"
-            aria-label="Show password"
-            class="pf-v5-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
+          <div
+            class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 576 512"
+            <input
+              aria-invalid="false"
+              class="pf-v5-c-form-control"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              id="pf-login-password-id"
+              name="pf-login-password-id"
+              required=""
+              type="password"
+              value=""
+            />
+          </div>
+          <div
+            class="pf-v5-c-input-group__item"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Show password"
+              class="pf-v5-c-button pf-m-control"
+              data-ouia-component-id="OUIA-Generated-Button-control-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
-              />
-            </svg>
-          </button>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 576 512"
+              >
+                <path
+                  d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>