@patternfly/react-core 4.222.16 → 4.223.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.16",
+  "version": "4.223.1",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.73.16",
-    "@patternfly/react-styles": "^4.72.16",
-    "@patternfly/react-tokens": "^4.74.16",
+    "@patternfly/react-icons": "^4.74.1",
+    "@patternfly/react-styles": "^4.73.1",
+    "@patternfly/react-tokens": "^4.75.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.201.0",
+    "@patternfly/patternfly": "4.202.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "0804117dff5e8c51c02747b477ae0e0d532d6a36"
+  "gitHead": "3155699598a7362211658d7e88207c6c34a18c9c"
 }

package/src/components/Masthead/MastheadToggle.tsx

@@ -14,8 +14,8 @@ export const MastheadToggle: React.FunctionComponent<MastheadToggleProps> = ({
   className,
   ...props
 }: MastheadToggleProps) => (
-  <div className={css(styles.mastheadToggle, className)} {...props}>
+  <span className={css(styles.mastheadToggle, className)} {...props}>
     {children}
-  </div>
+  </span>
 );
 MastheadToggle.displayName = 'MastheadToggle';

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

@@ -25,11 +25,11 @@ exports[`Masthead verify full structure 1`] = `
   <header
     class="pf-c-masthead pf-m-display-inline-on-md"
   >
-    <div
+    <span
       class="pf-c-masthead__toggle"
     >
       Toggle
-    </div>
+    </span>
     <div
       class="pf-c-masthead__main"
     >
@@ -226,20 +226,20 @@ exports[`MastheadMain verify custom class 1`] = `
 
 exports[`MastheadToggle verify basic 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-c-masthead__toggle"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`MastheadToggle verify custom class 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-c-masthead__toggle custom-css"
   >
     test
-  </div>
+  </span>
 </DocumentFragment>
 `;

package/src/components/Page/PageSidebar.tsx

@@ -51,7 +51,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           aria-hidden={!navOpen}
           {...props}
         >
-          <div className="pf-topology-side-bar__body">
+          <div className={styles.pageSidebarBody}>
             <PageSidebarContext.Provider value={{ isNavOpen: navOpen }}>{nav}</PageSidebarContext.Provider>
           </div>
         </div>

package/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
     id="page-sidebar"
   >
     <div
-      class="pf-topology-side-bar__body"
+      class="pf-c-page__sidebar-body"
     >
       <div>
         ReactNode

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

@@ -27,7 +27,7 @@ exports[`Page Check dark page against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       >
         Navigation
       </div>
@@ -93,7 +93,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -157,7 +157,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -324,7 +324,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -491,7 +491,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -777,7 +777,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -1067,7 +1067,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -1253,7 +1253,7 @@ exports[`Page Check page to verify skip to content points to main content region
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       />
     </div>
     <main
@@ -1416,7 +1416,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-topology-side-bar__body"
+        class="pf-c-page__sidebar-body"
       >
         Navigation
       </div>

package/src/demos/examples/DashboardHeader.js

@@ -27,7 +27,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import imgBrand from './pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 export default class DashboardHeader extends React.Component {
@@ -147,7 +146,7 @@ export default class DashboardHeader extends React.Component {
                 <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
               </ToolbarItem>
             </ToolbarGroup>
-            <ToolbarItem visibility={{ default: 'hidden', sm: 'visible', md: 'visible', lg: 'hidden' }}>
+            <ToolbarItem visibility={{ lg: 'hidden' }}>
               <Dropdown
                 isPlain
                 position="right"
@@ -158,10 +157,8 @@ export default class DashboardHeader extends React.Component {
               />
             </ToolbarItem>
           </ToolbarGroup>
-
           <ToolbarItem visibility={{ default: 'hidden', sm: 'visible' }}>
             <Dropdown
-              position="right"
               isFullHeight
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
@@ -186,7 +183,14 @@ export default class DashboardHeader extends React.Component {
         </MastheadToggle>
         <MastheadMain>
           <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
+            <Brand
+              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+              src="/assets/images/logo__pf--reverse--base.png"
+              alt="Fallback patternFly default logo"
+            >
+              <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
+              <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
+            </Brand>
           </MastheadBrand>
         </MastheadMain>
         <MastheadContent>{headerToolbar}</MastheadContent>

package/src/demos/examples/DashboardWrapper.js

@@ -37,7 +37,7 @@ export default class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeItem: 0
+      activeItem: 1
     };
 
     this.onNavSelect = result => {
@@ -70,7 +70,7 @@ export default class DashboardWrapper extends React.Component {
       <Nav onSelect={this.onNavSelect} aria-label="Nav">
         <NavList>
           <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
-            System Panel
+            System panel
           </NavItem>
           <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
             Policy
@@ -79,7 +79,7 @@ export default class DashboardWrapper extends React.Component {
             Authentication
           </NavItem>
           <NavItem itemId={3} isActive={activeItem === 3} to="#network">
-            Network Services
+            Network services
           </NavItem>
           <NavItem itemId={4} isActive={activeItem === 4} to="#server">
             Server