@patternfly/react-core 6.0.0-alpha.56 → 6.0.0-alpha.58

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { Page } from '../Page';
-import { PageHeader } from '../../../deprecated/components/PageHeader';
 import { PageSidebar } from '../PageSidebar';
 import { PageSidebarBody } from '../PageSidebarBody';
 import { PageSection } from '../PageSection';
@@ -13,6 +12,7 @@ import { SkipToContent } from '../../SkipToContent';
 import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageNavigation } from '../PageNavigation';
 import { PageGroup } from '../PageGroup';
+import { Masthead } from '../../Masthead';
 
 const props = {
   'aria-label': 'Page layout',
@@ -22,7 +22,7 @@ const props = {
 
 describe('Page', () => {
   test('Check page vertical layout example against snapshot', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
+    const Header = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -39,7 +39,7 @@ describe('Page', () => {
   });
 
   test('Check dark page against snapshot', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
+    const Header = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -56,7 +56,7 @@ describe('Page', () => {
   });
 
   test('Check page horizontal layout example against snapshot', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -69,7 +69,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -93,7 +93,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -123,7 +123,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -155,7 +155,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -179,7 +179,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -203,7 +203,7 @@ describe('Page', () => {
   });
 
   test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -229,7 +229,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify nav is created - PageNavigation syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -256,7 +256,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
@@ -295,7 +295,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const crumb = (
       <PageBreadcrumb>
@@ -349,7 +349,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify skip to content points to main content region', () => {
-    const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" topNav="Navigation" />;
+    const Header = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = (
       <Breadcrumb>

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

@@ -8,19 +8,8 @@ exports[`Page Check dark page against snapshot 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -58,24 +47,8 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -107,24 +80,8 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -260,24 +217,8 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -413,24 +354,8 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -648,24 +573,8 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -890,24 +799,8 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1032,24 +925,8 @@ exports[`Page Check page to verify skip to content points to main content region
       </a>
     </div>
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1186,19 +1063,8 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1236,24 +1102,8 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1389,24 +1239,8 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1542,24 +1376,8 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"
@@ -1695,24 +1513,8 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     id="PageId"
   >
     <header
-      class="pf-v6-c-page__header"
-    >
-      <div
-        class="pf-v6-c-page__header-brand"
-      >
-        <span
-          class="pf-v6-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v6-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
       class="pf-v6-c-page__sidebar pf-m-expanded"

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -24,11 +24,11 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
+    default?: 'alignEnd' | 'alignStart';
+    md?: 'alignEnd' | 'alignStart';
+    lg?: 'alignEnd' | 'alignStart';
+    xl?: 'alignEnd' | 'alignStart';
+    '2xl'?: 'alignEnd' | 'alignStart';
   };
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';

package/src/components/Toolbar/ToolbarItem.tsx

@@ -28,11 +28,11 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
+    default?: 'alignEnd' | 'alignStart';
+    md?: 'alignEnd' | 'alignStart';
+    lg?: 'alignEnd' | 'alignStart';
+    xl?: 'alignEnd' | 'alignStart';
+    '2xl'?: 'alignEnd' | 'alignStart';
   };
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -29,11 +29,11 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   };
   /** Alignment at various breakpoints. */
   alignment?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
+    default?: 'alignEnd' | 'alignStart';
+    md?: 'alignEnd' | 'alignStart';
+    lg?: 'alignEnd' | 'alignStart';
+    xl?: 'alignEnd' | 'alignStart';
+    '2xl'?: 'alignEnd' | 'alignStart';
   };
   /** Spacers at various breakpoints. */
   spacer?: {

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -275,7 +275,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
               <DropdownList>{splitButtonDropdownItems}</DropdownList>
             </Dropdown>
           </ToolbarItem>
-          <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+          <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
             <Pagination
               itemCount={37}
               perPage={perPage}

package/src/demos/CardView/examples/CardView.tsx

@@ -442,7 +442,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>
-      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
         {renderPagination()}
       </ToolbarItem>
     </React.Fragment>

package/src/demos/DashboardHeader.tsx

@@ -100,7 +100,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
           <ToolbarContent>
             <ToolbarGroup
               variant="icon-button-group"
-              align={{ default: 'alignRight' }}
+              align={{ default: 'alignEnd' }}
               spacer={{ default: 'spacerNone', md: 'spacerMd' }}
             >
               {notificationBadge ?? (

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -67,7 +67,7 @@ export const DataListBasic: React.FunctionComponent = () => {
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>
-      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
         {renderPagination()}
       </ToolbarItem>
     </React.Fragment>

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -176,7 +176,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const headerToolbar = (
     <Toolbar isFullHeight>
       <ToolbarContent>
-        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignRight' }}>
+        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="icon-button-group">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -226,7 +226,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
   const headerToolbar = (
     <Toolbar isFullHeight>
       <ToolbarContent>
-        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignRight' }}>
+        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="icon-button-group">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -341,7 +341,7 @@ export const PaginatedTableAction = () => {
           <ToolbarContent>
             <ToolbarGroup
               variant="icon-button-group"
-              align={{ default: 'alignRight' }}
+              align={{ default: 'alignEnd' }}
               spacer={{ default: 'spacerNone', md: 'spacerMd' }}
             >
               <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -365,7 +365,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
           <ToolbarContent>
             <ToolbarGroup
               variant="icon-button-group"
-              align={{ default: 'alignRight' }}
+              align={{ default: 'alignEnd' }}
               spacer={{ default: 'spacerNone', md: 'spacerMd' }}
             >
               <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -382,7 +382,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -129,7 +129,7 @@ export const NavFlyout: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -108,7 +108,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -157,7 +157,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavManual.tsx

@@ -124,7 +124,7 @@ export const NavManual: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -120,7 +120,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>