@patternfly/react-core 6.0.0-alpha.98 → 6.0.0-prerelease.1

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"

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

@@ -55,7 +55,7 @@ exports[`SearchInput advanced search 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -86,7 +86,7 @@ exports[`SearchInput advanced search 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <svg
               aria-hidden="true"
@@ -114,7 +114,7 @@ exports[`SearchInput advanced search 1`] = `
           type="submit"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-icon"
@@ -208,7 +208,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -239,7 +239,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <svg
               aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           type="submit"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-icon"
@@ -547,7 +547,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -578,7 +578,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <svg
               aria-hidden="true"
@@ -606,7 +606,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           type="submit"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-icon"
@@ -706,7 +706,7 @@ exports[`SearchInput search input with hint 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -730,7 +730,7 @@ exports[`SearchInput search input with hint 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -755,7 +755,7 @@ exports[`SearchInput search input with hint 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -785,7 +785,7 @@ exports[`SearchInput search input with hint 1`] = `
         type="submit"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-icon"
@@ -870,7 +870,7 @@ exports[`SearchInput simple search input 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -894,7 +894,7 @@ exports[`SearchInput simple search input 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"
@@ -919,7 +919,7 @@ exports[`SearchInput simple search input 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"
@@ -949,7 +949,7 @@ exports[`SearchInput simple search input 1`] = `
         type="submit"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-icon"

package/src/components/Tabs/TabAction.tsx

@@ -39,11 +39,10 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
       aria-label={ariaLabel}
       onClick={onClick}
       isDisabled={isDisabled}
+      icon={<span className={css(styles.tabsItemActionIcon)}>{children}</span>}
       {...getOUIAProps(TabAction.displayName, ouiaId, ouiaSafe)}
       {...props}
-    >
-      <span className={css(styles.tabsItemActionIcon)}>{children}</span>
-    </Button>
+    />
   </span>
 );
 

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`renders tab action 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__text"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-tabs__item-action-icon"

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

@@ -79,7 +79,7 @@ exports[`Toolbar should render with custom label content 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               />
             </button>
           </div>
@@ -152,7 +152,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                         type="button"
                       >
                         <span
-                          class="pf-v6-c-button__icon pf-m-start"
+                          class="pf-v6-c-button__icon"
                         >
                           <svg
                             aria-hidden="true"
@@ -200,7 +200,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                         type="button"
                       >
                         <span
-                          class="pf-v6-c-button__icon pf-m-start"
+                          class="pf-v6-c-button__icon"
                         >
                           <svg
                             aria-hidden="true"
@@ -237,7 +237,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                 type="button"
               >
                 <span
-                  class="pf-v6-c-button__icon pf-m-start"
+                  class="pf-v6-c-button__icon"
                 >
                   <svg
                     aria-hidden="true"

package/src/demos/Banner.md

@@ -21,22 +21,24 @@ import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
+    const banner = (
+      <Banner isSticky>
+        <Flex
+          justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+          flexWrap={{ default: 'nowrap' }}
+        >
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>
+            This message is sticky to the top of the page.
+          </div>
+          <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+        </Flex>
+      </Banner>
+    );
     return (
       <React.Fragment>
-        <DashboardWrapper breadcrumb={null}>
-          <Banner isSticky>
-            <Flex
-              justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-              flexWrap={{ default: 'nowrap' }}
-            >
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                This message is sticky to the top of the page.
-              </div>
-              <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-            </Flex>
-          </Banner>
+        <DashboardWrapper banner={banner} breadcrumb={null}>
           <PageSection>
             <Content>
               <h1>Main title</h1>
@@ -114,7 +116,8 @@ class BannerDemo extends React.Component {
                 <Content>
                   <h1>Main title</h1>
                   <p>
-                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
+                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
+                    <br />
                     of it’s relative line height of 1.5.
                   </p>
                 </Content>

package/src/demos/CardDemos.md

@@ -13,7 +13,7 @@ import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartB
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
-import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
+import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -128,9 +128,8 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
                 aria-label="Search menu items"
                 id="pf-v6-context-selector-search-button-id-1"
                 onClick={onSearchButtonClick}
-              >
-                <SearchIcon aria-hidden="true" />
-              </Button>
+                icon={<SearchIcon aria-hidden="true" />}
+              />
             </InputGroupItem>
           </InputGroup>
         </MenuSearchInput>

package/src/demos/DashboardHeader.tsx

@@ -99,7 +99,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
-        <Toolbar id="toolbar" isFullHeight isStatic>
+        <Toolbar id="toolbar" isStatic>
           <ToolbarContent>
             <ToolbarGroup
               variant="action-group-plain"
@@ -182,8 +182,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     Ned Username
                   </MenuToggle>

package/src/demos/DashboardWrapper.tsx

@@ -47,6 +47,7 @@ const PageTemplateTitle = (
 export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
   children,
   mainContainerId,
+  banner,
   breadcrumb,
   masthead,
   sidebar,
@@ -109,6 +110,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
       sidebar={sidebar ?? _sidebar}
       isManagedSidebar
       skipToContent={PageSkipToContent}
+      banner={banner}
       breadcrumb={renderedBreadcrumb}
       mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
       notificationDrawer={notificationDrawer}

package/src/demos/JumpLinks.md

@@ -43,27 +43,38 @@ ScrollspyH2 = () => {
 
   const [isVertical, setIsVertical] = React.useState(true);
   const [offsetHeight, setOffsetHeight] = React.useState(10);
+  const offsetForPadding = 10;
+  let masthead;
 
   // Update offset based on the masthead and jump links nav heights.
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
-    const offsetForPadding = 10;
-
-    getResizeObserver(
-      masthead,
-      () => {
-        if (isVertical) {
-          setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-        } else {
-          // Append jump links nav height to the masthead height when value exists.
-          const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-          jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-        }
-      },
-      true
-    );
+    masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
+
+    if (isVertical) {
+      setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+    } else {
+      // Append jump links nav height to the masthead height when value exists.
+      const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+      jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+    }
+
+    
   }, [isVertical]);
 
+  getResizeObserver(
+    document.getElementsByClassName(mastheadStyles.masthead)[0],
+    () => {
+      if (isVertical) {
+        setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+      } else {
+        // Append jump links nav height to the masthead height when value exists.
+        const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+        jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+      }
+    },
+    true
+  );
+
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <PageSection>
@@ -85,7 +96,7 @@ ScrollspyH2 = () => {
                 isVertical={isVertical}
                 isCentered={!isVertical}
                 label="Jump to section"
-                scrollableSelector="#scrollable-element"
+                scrollableSelector=".pf-v6-c-page__main-container"
                 offset={offsetHeight}
                 expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
                 isExpanded

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

@@ -174,7 +174,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     </>
   );
   const headerToolbar = (
-    <Toolbar isFullHeight>
+    <Toolbar>
       <ToolbarContent>
         <ToolbarGroup align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="action-group-plain">
@@ -242,8 +242,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     John Smith
                   </MenuToggle>

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

@@ -224,7 +224,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     </>
   );
   const headerToolbar = (
-    <Toolbar isFullHeight>
+    <Toolbar>
       <ToolbarContent>
         <ToolbarGroup align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="action-group-plain">
@@ -292,8 +292,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     John Smith
                   </MenuToggle>

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

@@ -338,7 +338,7 @@ export const PaginatedTableAction = () => {
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
-        <Toolbar id="toolbar" isFullHeight isStatic>
+        <Toolbar id="toolbar" isStatic>
           <ToolbarContent>
             <ToolbarGroup
               variant="action-group-plain"
@@ -419,8 +419,7 @@ export const PaginatedTableAction = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     {translation.username}
                   </MenuToggle>

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

@@ -362,7 +362,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
-        <Toolbar id="toolbar" isFullHeight isStatic>
+        <Toolbar id="toolbar" isStatic>
           <ToolbarContent>
             <ToolbarGroup
               variant="action-group-plain"
@@ -443,8 +443,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                     ref={toggleRef}
                     isExpanded={isDropdownOpen}
                     onClick={onDropdownToggle}
-                    icon={<Avatar src={imgAvatar} alt="" />}
-                    isFullHeight
+                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
                   >
                     {translation.username}
                   </MenuToggle>

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -23,7 +23,7 @@ import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-cha
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
-import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
+import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 
 export const CardUtilizationDemo3: React.FunctionComponent = () => {
@@ -94,7 +94,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                       { name: 'Low', symbol: { fill: chart_color_yellow_100.value } },
                       { name: 'Important', symbol: { fill: chart_color_yellow_300.value } },
                       { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },
-                      { name: 'Critical', symbol: { fill: chart_color_red_100.value } }
+                      { name: 'Critical', symbol: { fill: chart_color_red_orange_400.value } }
                     ]}
                     legendPosition="bottom-left"
                     height={50}
@@ -113,7 +113,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                         chart_color_yellow_100.value,
                         chart_color_yellow_300.value,
                         chart_color_orange_300.value,
-                        chart_color_red_100.value
+                        chart_color_red_orange_400.value
                       ]}
                     >
                       <ChartBar

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

@@ -179,7 +179,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight>
+    <Toolbar id="toolbar">
       <ToolbarContent>
         <PageHorizontalNav />
         <ToolbarGroup
@@ -255,9 +255,8 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

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

@@ -378,7 +378,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   ];
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -456,9 +456,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

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

@@ -126,7 +126,7 @@ export const NavFlyout: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -202,8 +202,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

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

@@ -103,7 +103,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
@@ -180,8 +180,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

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

@@ -152,7 +152,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
@@ -229,8 +229,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

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

@@ -120,7 +120,7 @@ export const NavManual: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -196,8 +196,7 @@ export const NavManual: React.FunctionComponent = () => {
                 ref={toggleRef}
                 isExpanded={isDropdownOpen}
                 onClick={onDropdownToggle}
-                icon={<Avatar src={imgAvatar} alt="" />}
-                isFullHeight
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>

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

@@ -133,7 +133,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   );
 
   const headerToolbar = (
-    <Toolbar id="toolbar" isFullHeight isStatic>
+    <Toolbar id="toolbar" isStatic>
       <ToolbarContent>
         <ToolbarGroup
           variant="action-group-plain"
@@ -208,9 +208,8 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
               <MenuToggle
                 ref={toggleRef}
                 onClick={onDropdownToggle}
-                isFullHeight
                 isExpanded={isDropdownOpen}
-                icon={<Avatar src={imgAvatar} alt="" />}
+                icon={<Avatar src={imgAvatar} alt="" size="sm" />}
               >
                 Ned Username
               </MenuToggle>