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

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,36 +1,52 @@
 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"
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          id="textInput-with-siblings"
+          name="textInput-with-siblings"
+          type="number"
+          aria-label="Dollar amount input example"
+        />
+      </InputGroupItem>
       <InputGroupText>.00</InputGroupText>
     </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 './InputGroupItem';
 export * from './InputGroupText';

package/src/components/JumpLinks/JumpLinks.tsx

@@ -222,7 +222,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       {...props}
     >
       <div className={styles.jumpLinksMain}>
-        <div className={css('pf-c-jump-links__header')}>
+        <div className={css('pf-v5-c-jump-links__header')}>
           {expandable && (
             <div className={styles.jumpLinksToggle}>
               <Button

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

@@ -10,7 +10,7 @@ exports[`expandable vertical with subsection 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__toggle"
@@ -169,7 +169,7 @@ exports[`jumplinks centered 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       />
       <ul
         class="pf-v5-c-jump-links__list"
@@ -231,7 +231,7 @@ exports[`jumplinks with label 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__label"
@@ -298,7 +298,7 @@ exports[`simple jumplinks 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       />
       <ul
         class="pf-v5-c-jump-links__list"
@@ -360,7 +360,7 @@ exports[`vertical with label 1`] = `
       class="pf-v5-c-jump-links__main"
     >
       <div
-        class="pf-c-jump-links__header"
+        class="pf-v5-c-jump-links__header"
       >
         <div
           class="pf-v5-c-jump-links__label"

package/src/components/Label/Label.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Label/label';
-import labelGrpStyles from '@patternfly/react-styles/css/components/LabelGroup/label-group';
+import labelGrpStyles from '@patternfly/react-styles/css/components/Label/label-group';
 import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import { css } from '@patternfly/react-styles';

package/src/components/Label/LabelGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/LabelGroup/label-group';
+import styles from '@patternfly/react-styles/css/components/Label/label-group';
 import labelStyles from '@patternfly/react-styles/css/components/Label/label';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';

package/src/components/Label/examples/Label.md

@@ -1,7 +1,7 @@
 ---
 id: Label
 section: components
-cssPrefix: pf-c-label
+cssPrefix: pf-v5-c-label
 propComponents: ['Label', 'LabelGroup']
 ---
 

package/src/components/List/examples/List.md

@@ -1,7 +1,7 @@
 ---
 id: List
 section: components
-cssPrefix: pf-c-list
+cssPrefix: pf-v5-c-list
 propComponents: ['List', 'ListItem']
 ---
 

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

@@ -33,18 +33,21 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-9"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -74,18 +77,21 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-password-id"
-          name="pf-login-password-id"
-          required=""
-          type="password"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            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>
     </div>
     <div
@@ -174,18 +180,21 @@ exports[`LoginForm LoginForm with show password 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-11"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -218,39 +227,50 @@ 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"
+            <div
+              class="pf-v5-c-form-control"
             >
-              <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"
+              <input
+                aria-invalid="false"
+                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=""
               />
-            </svg>
-          </button>
+            </div>
+          </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"
+            >
+              <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>
@@ -313,18 +333,21 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-username-id"
-          name="pf-login-username-id"
-          required=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="pf-login-username-id"
+            name="pf-login-username-id"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
     </div>
     <div
@@ -354,18 +377,21 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <input
-          aria-invalid="false"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="pf-login-password-id"
-          name="pf-login-password-id"
-          required=""
-          type="password"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            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>
     </div>
     <div

package/src/components/LoginPage/examples/LoginPage.md

@@ -1,7 +1,7 @@
 ---
 id: Login page
 section: components
-cssPrefix: pf-c-login
+cssPrefix: pf-v5-c-login
 propComponents:
   [
     'LoginPage',

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -39,25 +39,25 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
 
   const headerUtilsOptions = (
     <SelectList>
-      <SelectOption key={0} itemId={i18n.English}>
+      <SelectOption key={0} value={i18n.English}>
         {i18n.English}
       </SelectOption>
-      <SelectOption key={1} itemId={i18n.Mandarin}>
+      <SelectOption key={1} value={i18n.Mandarin}>
         {i18n.Mandarin}
       </SelectOption>
-      <SelectOption key={2} itemId={i18n.Hindi}>
+      <SelectOption key={2} value={i18n.Hindi}>
         {i18n.Hindi}
       </SelectOption>
-      <SelectOption key={3} itemId={i18n.Spanish}>
+      <SelectOption key={3} value={i18n.Spanish}>
         {i18n.Spanish}
       </SelectOption>
-      <SelectOption key={4} itemId={i18n.Portuguese}>
+      <SelectOption key={4} value={i18n.Portuguese}>
         {i18n.Portuguese}
       </SelectOption>
-      <SelectOption key={5} itemId={i18n.Arabic}>
+      <SelectOption key={5} value={i18n.Arabic}>
         {i18n.Arabic}
       </SelectOption>
-      <SelectOption key={6} itemId={i18n.Bengali}>
+      <SelectOption key={6} value={i18n.Bengali}>
         {i18n.Bengali}
       </SelectOption>
     </SelectList>

package/src/components/Masthead/examples/Masthead.md

@@ -1,7 +1,7 @@
 ---
 id: Masthead
 section: components
-cssPrefix: pf-c-masthead
+cssPrefix: pf-v5-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
 ---