@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

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"
@@ -21,7 +21,7 @@ exports[`expandable vertical with subsection 1`] = `
             aria-label="Toggle jump links"
             class="pf-v5-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
             type="button"
           >
@@ -32,8 +32,10 @@ exports[`expandable vertical with subsection 1`] = `
                 aria-hidden="true"
                 class="pf-v5-svg"
                 fill="currentColor"
+                height="1em"
                 role="img"
                 viewBox="0 0 256 512"
+                width="1em"
               >
                 <path
                   d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -169,7 +171,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 +233,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 +300,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 +362,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/__tests__/__snapshots__/Label.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`Label editable label 1`] = `
         aria-label="Close Something"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -30,8 +30,10 @@ exports[`Label editable label 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 352 512"
+          width="1em"
         >
           <path
             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -154,7 +156,7 @@ exports[`Label label with close button 1`] = `
         aria-label="Close Something"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -162,8 +164,10 @@ exports[`Label label with close button 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 352 512"
+          width="1em"
         >
           <path
             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
@@ -197,7 +201,7 @@ exports[`Label label with close button and outline variant 1`] = `
         aria-label="Close Something"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -205,8 +209,10 @@ exports[`Label label with close button and outline variant 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 352 512"
+          width="1em"
         >
           <path
             d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -257,7 +257,7 @@ exports[`LabelGroup label group with closable category 1`] = `
         aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         id="remove_group_pf-random-id-2"
         type="button"
@@ -266,8 +266,10 @@ exports[`LabelGroup label group with closable category 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"

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

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

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

@@ -15,8 +15,10 @@ exports[`List icon large list 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 576 512"
+          width="1em"
         >
           <path
             d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
@@ -35,8 +37,10 @@ exports[`List icon large list 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 1024 1024"
+          width="1em"
         >
           <path
             d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
@@ -55,8 +59,10 @@ exports[`List icon large list 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 576 512"
+          width="1em"
         >
           <path
             d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"
@@ -85,8 +91,10 @@ exports[`List icon list 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 576 512"
+          width="1em"
         >
           <path
             d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
@@ -105,8 +113,10 @@ exports[`List icon list 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 1024 1024"
+          width="1em"
         >
           <path
             d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
@@ -125,8 +135,10 @@ exports[`List icon list 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 576 512"
+          width="1em"
         >
           <path
             d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"

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}