@patternfly/react-core 6.1.0-prerelease.9 → 6.1.1-prerelease.0

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.8","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.8","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.8","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0-prerelease.9",
+  "version": "6.1.1-prerelease.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.1.0-prerelease.4",
-    "@patternfly/react-styles": "^6.1.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.1.0-prerelease.3",
+    "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-styles": "^6.1.0",
+    "@patternfly/react-tokens": "^6.1.0",
     "focus-trap": "7.6.2",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.5",
+    "@patternfly/patternfly": "6.1.0-prerelease.11",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "adb27fc981481c31bf249fb185ebc1850929cd87"
+  "gitHead": "e161ac6d6f712b7c5692e981e79da71fdd85f011"
 }

package/src/components/Alert/AlertToggleExpandButton.tsx

@@ -33,7 +33,7 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
       {...props}
       icon={
         <span className={css(styles.alertToggleIcon)}>
-          <AngleRightIcon aria-hidden="true" />
+          <AngleRightIcon />
         </span>
       }
     />

package/src/components/BackToTop/BackToTop.tsx

@@ -84,7 +84,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="end">
+      <Button variant="primary" icon={<AngleUpIcon />} iconPosition="end">
         {title}
       </Button>
     </div>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -292,7 +292,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={prevMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
-            icon={<AngleLeftIcon aria-hidden={true} />}
+            icon={<AngleLeftIcon />}
           />
         </div>
         <InputGroup>
@@ -319,18 +319,15 @@ export const CalendarMonth = ({
                   onSelectToggle(isOpen);
                 }}
                 onSelect={(ev, monthNum) => {
-                  // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-                  // to see the SelectOption as a child so it doesn't close the Popover.
-                  setTimeout(() => {
-                    setIsSelectOpen(false);
-                    onSelectToggle(false);
-                    const newDate = changeMonth(Number(monthNum as string));
-                    setFocusedDate(newDate);
-                    setShouldFocus(false);
-                    onMonthChange(ev, newDate);
-                  }, 0);
+                  setIsSelectOpen(false);
+                  onSelectToggle(false);
+                  const newDate = changeMonth(Number(monthNum as string));
+                  setFocusedDate(newDate);
+                  setShouldFocus(false);
+                  onMonthChange(ev, newDate);
                 }}
                 selected={monthFormatted}
+                popperProps={{ appendTo: 'inline' }}
               >
                 <SelectList>
                   {longMonths.map((longMonth, index) => (
@@ -358,7 +355,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={nextMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
-            icon={<AngleRightIcon aria-hidden={true} />}
+            icon={<AngleRightIcon />}
           />
         </div>
       </div>

package/src/components/Card/CardHeader.tsx

@@ -104,7 +104,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
               {...toggleButtonProps}
               icon={
                 <span className={css(styles.cardHeaderToggleIcon)}>
-                  <AngleRightIcon aria-hidden="true" />
+                  <AngleRightIcon />
                 </span>
               }
             />

package/src/components/Card/examples/CardExpandable.tsx

@@ -71,7 +71,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -67,7 +67,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -58,7 +58,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -56,7 +56,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -64,7 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -33,7 +33,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     {...props}
     icon={
       <div className={css(styles.clipboardCopyToggleIcon)}>
-        <AngleRightIcon aria-hidden="true" />
+        <AngleRightIcon />
       </div>
     }
   />

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -9,7 +9,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
     variant="inline-compact"
     additionalActions={
       <ClipboardCopyAction>
-        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon aria-hidden />} />
+        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon />} />
       </ClipboardCopyAction>
     }
   >

package/src/components/DataList/examples/DataListActions.tsx

@@ -86,7 +86,7 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -84,7 +84,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen1}
@@ -138,7 +138,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen2}
@@ -201,7 +201,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen3}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -76,7 +76,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -125,7 +125,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -92,7 +92,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -162,7 +162,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -232,7 +232,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -94,7 +94,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -166,7 +166,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -226,7 +226,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -103,7 +103,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                   isOpen={isOpen1}
@@ -176,7 +176,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                   isOpen={isOpen2}

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -119,7 +119,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                 tabIndex={-1}
               >
                 <span className={css(styles.dualListSelectorItemToggleIcon)}>
-                  <AngleRightIcon aria-hidden />
+                  <AngleRightIcon />
                 </span>
               </div>
             )}

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -166,7 +166,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-                icon={<EllipsisVIcon aria-hidden="true" />}
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isAvailableKebabOpen}
@@ -201,7 +201,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-                icon={<EllipsisVIcon aria-hidden="true" />}
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isChosenKebabOpen}

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -240,7 +240,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
           {...(variant !== ExpandableSectionVariant.truncate && {
             icon: (
               <span className={css(styles.expandableSectionToggleIcon)}>
-                <AngleRightIcon aria-hidden />
+                <AngleRightIcon />
               </span>
             )
           })}

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -67,7 +67,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
                 isExpanded && direction === 'up' && styles.modifiers.expandTop
               )}
             >
-              <AngleRightIcon aria-hidden />
+              <AngleRightIcon />
             </span>
           )
         })}

package/src/components/FileUpload/FileUpload.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
+import { DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone, ErrorCode } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { DropEvent } from '../../helpers/typeUtils';
@@ -84,6 +84,8 @@ export interface FileUploadProps
   onTextChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, text: string) => void;
 }
 
+export { ErrorCode as DropzoneErrorCode }; // FileInvalidType, FileTooLarge, FileTooSmall, TooManyFiles
+
 export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   id,
   type,

package/src/components/FileUpload/examples/FileUpload.md

@@ -40,7 +40,7 @@ Typing/pasting text in the box will call `onTextChange` with a string, and a str
 
 ### Restricting file size and type
 
-Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. The following example will only accept CSV files smaller than 1 KB. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the `accept` prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
+Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. You can also capture and act upon native `react-dropzone` errors using the exposed `DropzoneErrorCode` enum. The following example will only accept CSV files smaller than 1 KB. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the `accept` prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
 
 #### IMPORTANT: A note about security
 

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   FileUpload,
+  DropzoneErrorCode,
   FileUploadHelperText,
   Form,
   FormGroup,
@@ -9,13 +10,13 @@ import {
   DropEvent,
   Icon
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
   const [isRejected, setIsRejected] = React.useState(false);
+  const [message, setMessage] = React.useState('Must be a CSV file no larger than 1 KB');
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
@@ -29,16 +30,25 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const reset = () => {
     setFilename('');
     setValue('');
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    reset();
     setIsRejected(false);
   };
 
   const handleFileRejected = () => {
+    reset();
     setIsRejected(true);
   };
 
+  const handleFileAccepted = () => {
+    setIsRejected(false);
+  };
+
   const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) => {
     setIsLoading(true);
   };
@@ -66,7 +76,16 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           dropzoneProps={{
             accept: { 'text/csv': ['.csv'] },
             maxSize: 1024,
-            onDropRejected: handleFileRejected
+            onDropRejected: (rejections) => {
+              const error = rejections[0].errors[0];
+              if (error.code === DropzoneErrorCode.FileTooLarge) {
+                setMessage('File is too big');
+              } else if (error.code === DropzoneErrorCode.FileInvalidType) {
+                setMessage('File is not a CSV file');
+              }
+              handleFileRejected();
+            },
+            onDropAccepted: handleFileAccepted
           }}
           validated={isRejected ? 'error' : 'default'}
           browseButtonText="Upload"
@@ -77,10 +96,8 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
               <HelperTextItem id="restricted-file-example-helpText" variant={isRejected ? 'error' : 'default'}>
                 {isRejected ? (
                   <>
-                    <Icon status="danger">
-                      <ExclamationCircleIcon />
-                    </Icon>
-                    Must be a CSV file no larger than 1 KB
+                    <Icon status="danger" />
+                    {message}
                   </>
                 ) : (
                   'Upload a CSV file'

package/src/components/Form/FormFieldGroupToggle.tsx

@@ -39,7 +39,7 @@ export const FormFieldGroupToggle: React.FunctionComponent<FormFieldGroupToggleP
         id={toggleId}
         icon={
           <span className={css(styles.formFieldGroupToggleIcon)}>
-            <AngleRightIcon aria-hidden="true" />
+            <AngleRightIcon />
           </span>
         }
       />

package/src/components/HelperText/HelperTextItem.tsx

@@ -63,11 +63,7 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
       id={id}
       {...props}
     >
-      {(defaultIcon || icon) && (
-        <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {icon || defaultIcon}
-        </span>
-      )}
+      {(defaultIcon || icon) && <span className={css(styles.helperTextItemIcon)}>{icon || defaultIcon}</span>}
 
       <span className={css(styles.helperTextItemText)}>
         {children}

package/src/components/Label/LabelGroup.tsx

@@ -210,7 +210,7 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
             onClick={onClick}
             id={`remove_group_${id}`}
             aria-labelledby={`remove_group_${id} ${id}`}
-            icon={<TimesCircleIcon aria-hidden="true" />}
+            icon={<TimesCircleIcon />}
           />
         </div>
       );

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

@@ -18,7 +18,7 @@ propComponents:
   ]
 ---
 
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -114,7 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -187,7 +187,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -115,7 +115,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

package/src/components/Menu/MenuItem.tsx

@@ -369,7 +369,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             <span className={css(styles.menuItemMain)}>
               {direction === 'up' && (
                 <span className={css(styles.menuItemToggleIcon)}>
-                  <AngleLeftIcon aria-hidden />
+                  <AngleLeftIcon />
                 </span>
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
@@ -388,17 +388,17 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
               <span className={css(styles.menuItemText)}>{children}</span>
               {isExternalLink && (
                 <span className={css(styles.menuItemExternalIcon)}>
-                  <ExternalLinkAltIcon aria-hidden />
+                  <ExternalLinkAltIcon />
                 </span>
               )}
               {(flyoutMenu || direction === 'down') && (
                 <span className={css(styles.menuItemToggleIcon)}>
-                  <AngleRightIcon aria-hidden />
+                  <AngleRightIcon />
                 </span>
               )}
               {getIsSelected() && (
                 <span className={css(styles.menuItemSelectIcon)}>
-                  <CheckIcon aria-hidden />
+                  <CheckIcon />
                 </span>
               )}
             </span>

package/src/components/Menu/MenuItemAction.tsx

@@ -62,7 +62,7 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
                 variant="plain"
                 tabIndex={-1}
                 isDisabled={isDisabled || isDisabledContext}
-                icon={icon === 'favorites' || isFavorited !== null ? <StarIcon aria-hidden /> : icon}
+                icon={icon === 'favorites' || isFavorited !== null ? <StarIcon /> : icon}
               />
             </div>
           );

package/src/components/Menu/examples/MenuOptionMultiSelect.tsx

@@ -20,7 +20,7 @@ export const MenuOptionMultiSelect: React.FunctionComponent = () => {
         <MenuList isAriaMultiselectable aria-label="Menu multi select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
-          <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>
+          <MenuItem icon={<TableIcon />} itemId={2}>
             Option 3
           </MenuItem>
         </MenuList>