@patternfly/react-core 5.0.0-alpha.95 → 5.0.0-alpha.97

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

@@ -8,7 +8,6 @@ exports[`LoginMainFooterLinksItem className is added to the root element 1`] = `
     <a
       class="pf-v5-c-login__main-footer-links-item-link"
       href=""
-      target=""
     />
   </li>
 </DocumentFragment>
@@ -36,7 +35,6 @@ exports[`LoginMainFooterLinksItem with custom node 1`] = `
     <a
       class="pf-v5-c-login__main-footer-links-item-link"
       href=""
-      target=""
     >
       <div>
         My custom node

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

@@ -19,11 +19,11 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   const [isValidPassword, setIsValidPassword] = React.useState(true);
   const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
 
-  const handleUsernameChange = (value: string) => {
+  const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);
   };
 
-  const handlePasswordChange = (value: string) => {
+  const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setPassword(value);
   };
 
@@ -40,27 +40,42 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
 
   const socialMediaLoginContent = (
     <React.Fragment>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Google' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Google' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
           <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Github' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Github' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
           <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
           <path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Facebook' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
         </svg>
@@ -70,26 +85,26 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
 
   const signUpForAccountMessage = (
     <LoginMainFooterBandItem>
-      Need an account? <a href="#">Sign up.</a>
+      Need an account? <a href="https://www.patternfly.org/">Sign up.</a>
     </LoginMainFooterBandItem>
   );
 
   const forgotCredentials = (
     <LoginMainFooterBandItem>
-      <a href="#">Forgot username or password?</a>
+      <a href="https://www.patternfly.org/">Forgot username or password?</a>
     </LoginMainFooterBandItem>
   );
 
   const listItem = (
     <React.Fragment>
       <ListItem>
-        <LoginFooterItem href="#">Terms of Use </LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Terms of Use </LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Help</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Help</LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Privacy Policy</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Privacy Policy</LoginFooterItem>
       </ListItem>
     </React.Fragment>
   );

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

@@ -39,13 +39,27 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
 
   const headerUtilsOptions = (
     <SelectList>
-      <SelectOption key={0} itemId={i18n.English}>{i18n.English}</SelectOption>
-      <SelectOption key={1} itemId={i18n.Mandarin}>{i18n.Mandarin}</SelectOption>
-      <SelectOption key={2} itemId={i18n.Hindi}>{i18n.Hindi}</SelectOption>
-      <SelectOption key={3} itemId={i18n.Spanish}>{i18n.Spanish}</SelectOption>
-      <SelectOption key={4} itemId={i18n.Portuguese}>{i18n.Portuguese}</SelectOption>
-      <SelectOption key={5} itemId={i18n.Arabic}>{i18n.Arabic}</SelectOption>
-      <SelectOption key={6} itemId={i18n.Bengali}>{i18n.Bengali}</SelectOption>
+      <SelectOption key={0} itemId={i18n.English}>
+        {i18n.English}
+      </SelectOption>
+      <SelectOption key={1} itemId={i18n.Mandarin}>
+        {i18n.Mandarin}
+      </SelectOption>
+      <SelectOption key={2} itemId={i18n.Hindi}>
+        {i18n.Hindi}
+      </SelectOption>
+      <SelectOption key={3} itemId={i18n.Spanish}>
+        {i18n.Spanish}
+      </SelectOption>
+      <SelectOption key={4} itemId={i18n.Portuguese}>
+        {i18n.Portuguese}
+      </SelectOption>
+      <SelectOption key={5} itemId={i18n.Arabic}>
+        {i18n.Arabic}
+      </SelectOption>
+      <SelectOption key={6} itemId={i18n.Bengali}>
+        {i18n.Bengali}
+      </SelectOption>
     </SelectList>
   );
 
@@ -70,7 +84,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
         </MenuToggle>
       )}
       onSelect={onHeaderUtilsSelect}
-      onOpenChange={isOpen => setIsHeaderUtilsOpen(isOpen)}
+      onOpenChange={(isOpen) => setIsHeaderUtilsOpen(isOpen)}
       selected={selectedHeaderUtils}
       isOpen={isHeaderUtilsOpen}
     >
@@ -78,11 +92,11 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     </Select>
   );
 
-  const handleUsernameChange = (value: string) => {
+  const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);
   };
 
-  const handlePasswordChange = (value: string) => {
+  const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setPassword(value);
   };
 
@@ -99,27 +113,42 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
 
   const socialMediaLoginContent = (
     <React.Fragment>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Google' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Google' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
           <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Github' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Github' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
           <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
           <path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Facebook' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
         </svg>
@@ -129,26 +158,26 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
 
   const signUpForAccountMessage = (
     <LoginMainFooterBandItem>
-      Need an account? <a href="#">Sign up.</a>
+      Need an account? <a href="https://www.patternfly.org/">Sign up.</a>
     </LoginMainFooterBandItem>
   );
 
   const forgotCredentials = (
     <LoginMainFooterBandItem>
-      <a href="#">Forgot username or password?</a>
+      <a href="https://www.patternfly.org/">Forgot username or password?</a>
     </LoginMainFooterBandItem>
   );
 
   const listItem = (
     <React.Fragment>
       <ListItem>
-        <LoginFooterItem href="#">Terms of Use </LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Terms of Use </LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Help</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Help</LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Privacy Policy</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Privacy Policy</LoginFooterItem>
       </ListItem>
     </React.Fragment>
   );

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

@@ -19,11 +19,11 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
   const [isValidPassword, setIsValidPassword] = React.useState(true);
   const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
 
-  const handleUsernameChange = (value: string) => {
+  const handleUsernameChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setUsername(value);
   };
 
-  const handlePasswordChange = (value: string) => {
+  const handlePasswordChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setPassword(value);
   };
 
@@ -40,27 +40,42 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
 
   const socialMediaLoginContent = (
     <React.Fragment>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Google' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Google' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
           <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Github' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Github' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
           <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
           <path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Facebook' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
         </svg>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem href="#" linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}>
+      <LoginMainFooterLinksItem
+        href="https://www.patternfly.org/"
+        linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
+      >
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
         </svg>
@@ -70,26 +85,26 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
 
   const signUpForAccountMessage = (
     <LoginMainFooterBandItem>
-      Need an account? <a href="#">Sign up.</a>
+      Need an account? <a href="https://www.patternfly.org/">Sign up.</a>
     </LoginMainFooterBandItem>
   );
 
   const forgotCredentials = (
     <LoginMainFooterBandItem>
-      <a href="#">Forgot username or password?</a>
+      <a href="https://www.patternfly.org/">Forgot username or password?</a>
     </LoginMainFooterBandItem>
   );
 
   const listItem = (
     <React.Fragment>
       <ListItem>
-        <LoginFooterItem href="#">Terms of Use </LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Terms of Use </LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Help</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Help</LoginFooterItem>
       </ListItem>
       <ListItem>
-        <LoginFooterItem href="#">Privacy Policy</LoginFooterItem>
+        <LoginFooterItem href="https://www.patternfly.org/">Privacy Policy</LoginFooterItem>
       </ListItem>
     </React.Fragment>
   );

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -148,7 +148,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
       <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
       <div className={styles.multipleFileUploadStatusItemMain}>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {progressAriaLiveMessage &&
             typeof progressAriaLiveMessage === 'function' &&
             progressAriaLiveMessage(+loadPercentage.toFixed(2))}

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -137,7 +137,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -246,7 +246,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         test message
       </div>
@@ -357,7 +357,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         test message 0
       </div>
@@ -468,7 +468,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 42%.
       </div>
@@ -594,7 +594,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -705,7 +705,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -814,7 +814,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -31,9 +31,11 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
   ...props
 }: NotificationDrawerListItemProps) => {
   const onKeyDown = (event: React.KeyboardEvent) => {
-    // Accessibility function. Click on the list item when pressing Enter or Space on it.
-    if (event.key === 'Enter' || event.key === ' ') {
-      (event.target as HTMLElement).click();
+    if (!(event.target as HTMLElement).parentElement.classList.contains('pf-v5-c-notification-drawer__list-item-action')) {
+      // Accessibility function. Click on the list item when pressing Enter or Space on it.
+      if (event.key === 'Enter' || event.key === ' ') {
+        (event.target as HTMLElement).click();
+      }
     }
   };
   return (

package/src/components/Tabs/examples/Tabs.md

@@ -228,4 +228,4 @@ To add multiple actions to a tab, create a `<TabAction>` component for each acti
 The following example passes in both help popover and close actions.
 
 ```ts file="./TabsHelpAndClose.tsx" isBeta
-```
+```

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
-import { ToggleGroupItem } from './ToggleGroupItem';
+import { ToggleGroupItem, ToggleGroupItemProps } from './ToggleGroupItem';
 
 export interface ToggleGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the toggle group */
@@ -24,12 +24,11 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: ToggleGroupProps) => {
-  const toggleGroupItemList = React.Children.map(children, child => {
-    const childCompName = (child as any).type.name;
-    return childCompName !== ToggleGroupItem.name
+  const toggleGroupItemList = React.Children.map(children, child =>
+    !(React.isValidElement(child) && child.type === ToggleGroupItem)
       ? child
-      : React.cloneElement(child as React.ReactElement, areAllGroupsDisabled ? { isDisabled: true } : {});
-  });
+      : React.cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})
+  );
 
   return (
     <div

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

@@ -42,7 +42,7 @@ describe('ToggleGroup', () => {
 
   test('item passes selection and event to onChange handler', async () => {
     const user = userEvent.setup();
-    
+
     render(
       <ToggleGroupItem text="test" buttonId="toggleGroupItem" onChange={props.onChange} aria-label="onChange handler" />
     );
@@ -60,4 +60,17 @@ describe('ToggleGroup', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('should render non-ToggleGroupItem children', () => {
+    const { asFragment } = render(
+      <ToggleGroup isCompact aria-label="non-element children">
+        <ToggleGroupItem text="Test" />
+        {false && <ToggleGroupItem text="Test2" />}
+        {'Test 3'}
+        {undefined}
+        {null}
+      </ToggleGroup>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -129,3 +129,30 @@ exports[`ToggleGroup isDisabled 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`ToggleGroup should render non-ToggleGroupItem children 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="non-element children"
+    class="pf-v5-c-toggle-group pf-m-compact"
+    role="group"
+  >
+    <div
+      class="pf-v5-c-toggle-group__item"
+    >
+      <button
+        aria-pressed="false"
+        class="pf-v5-c-toggle-group__button"
+        type="button"
+      >
+        <span
+          class="pf-v5-c-toggle-group__text"
+        >
+          Test
+        </span>
+      </button>
+    </div>
+    Test 3
+  </div>
+</DocumentFragment>
+`;

package/src/components/TreeView/TreeViewRoot.tsx

@@ -46,7 +46,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       }
       if (this.props.hasSelectableNodes) {
         const firstTextButton = this.treeRef.current.getElementsByClassName(
-          'pf-c-tree-view__node-text'
+          'pf-v5-c-tree-view__node-text'
         )[0] as HTMLElement;
         if (firstTextButton) {
           firstTextButton.tabIndex = 0;
@@ -67,7 +67,8 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
   }
 
   handleKeys = (event: KeyboardEvent) => {
-    if (!this.treeRef.current.contains(event.target as HTMLElement)) {
+    if (!this.treeRef.current.contains(event.target as HTMLElement) ||
+      !(event.target as HTMLElement).classList.contains('pf-v5-c-tree-view__node')) {
       return;
     }
     const activeElement = document.activeElement;
@@ -94,7 +95,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
     if (['ArrowLeft', 'ArrowRight'].includes(key)) {
       const isExpandable =
-        activeElement?.firstElementChild?.firstElementChild?.classList.contains('pf-c-tree-view__node-toggle');
+        activeElement?.firstElementChild?.firstElementChild?.classList.contains('pf-v5-c-tree-view__node-toggle');
       const isExpanded = activeElement?.closest('li')?.classList.contains('pf-m-expanded');
       if (key === 'ArrowLeft') {
         if (isExpandable && isExpanded) {

package/src/components/index.ts

@@ -36,7 +36,6 @@ export * from './Icon';
 export * from './InputGroup';
 export * from './JumpLinks';
 export * from './Label';
-export * from './LabelGroup';
 export * from './List';
 export * from './LoginPage';
 export * from './Masthead';

package/src/demos/LabelGroupDemos.md

@@ -1,5 +1,5 @@
 ---
-id: Label group
+id: Label
 section: components
 ---
 
@@ -9,10 +9,10 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Editable labels with add dropdown
 
-```ts file="../components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx"
+```ts file="../components/Label/examples/LabelGroupEditableAddDropdown.tsx"
 ```
 
 ### Editable labels with add modal
 
-```ts file="../components/LabelGroup/examples/LabelGroupEditableAddModal.tsx"
+```ts file="../components/Label/examples/LabelGroupEditableAddModal.tsx"
 ```

package/src/demos/Nav.md

@@ -1486,7 +1486,7 @@ class PageLayoutManualNav extends React.Component {
         <Page
           header={Header}
           sidebar={Sidebar}
-          onPageResize={(event) => this.onPageResize(event)}
+          onPageResize={this.onPageResize}
           skipToContent={PageSkipToContent}
           mainContainerId={pageId}
         >

package/src/demos/Page.md

@@ -19,8 +19,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
   1. Add an onNavToggle callback to PageHeader
   2. Pass a boolean into the isNavOpen prop to PageSidebar
 
-- To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to `100%`
-
 ## Layouts
 
 This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application.

package/src/demos/ProgressDemo.md

@@ -31,7 +31,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />
@@ -71,7 +71,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />