@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

package/src/demos/SearchInput/examples/SearchInputAdvancedComposable.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import {
-  ActionGroup,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   DatePicker,
   Form,
@@ -290,16 +292,24 @@ export const SearchInputAdvancedComposable: React.FunctionComponent = () => {
                   </FormGroup>
                 </GridItem>
               </Grid>
-              <ActionGroup>
-                <Button variant="primary" type="submit" onClick={(e) => onSubmit(null, e)}>
-                  Submit
-                </Button>
-                {!!onClear && (
-                  <Button variant="link" type="reset" onClick={onClear}>
-                    Reset
-                  </Button>
-                )}
-              </ActionGroup>
+              <FormGroup isAction>
+                <ActionList>
+                  <ActionListGroup>
+                    <ActionListItem>
+                      <Button variant="primary" type="submit" onClick={(e) => onSubmit(null, e)}>
+                        Submit
+                      </Button>
+                    </ActionListItem>
+                    <ActionListItem>
+                      {!!onClear && (
+                        <Button variant="link" type="reset" onClick={onClear}>
+                          Reset
+                        </Button>
+                      )}
+                    </ActionListItem>
+                  </ActionListGroup>
+                </ActionList>
+              </FormGroup>
             </Form>
           </PanelMainBody>
         </PanelMain>

package/src/demos/Tabs.md

@@ -9,9 +9,9 @@ import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-u
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';

package/src/demos/TextInputGroupDemo.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { useEffect, useRef, useState } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 ## Demos

package/src/demos/Toolbar.md

@@ -4,13 +4,13 @@ section: components
 ---
 
 import { Fragment, useState } from 'react';
-import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import RhUiPauseFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pause-fill-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import RhUiExpandIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-expand-icon';
 import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
-import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -27,8 +27,8 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-search-icon';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
@@ -295,7 +295,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           <EmptyState
             headingLevel="h2"
             titleText="No notifications found"
-            icon={SearchIcon}
+            icon={RhMicronsSearchIcon}
             variant={EmptyStateVariant.full}
           >
             <EmptyStateBody>There are currently no notifications.</EmptyStateBody>

package/src/demos/examples/JumpLinks/JumpLinksScrollspy.tsx

@@ -72,7 +72,7 @@ export const JumpLinksScrollspy: React.FunctionComponent = () => {
                 isVertical={isVertical}
                 isCentered={!isVertical}
                 label="Jump to section"
-                scrollableSelector=".pf-v6-c-page__main-container"
+                scrollableSelector=".pf-v6-c-page__main"
                 offset={offsetHeight}
                 expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
                 isExpanded

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

@@ -38,7 +38,7 @@ import {
 } from '@patternfly/react-core';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
@@ -132,7 +132,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem key="help">
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -51,8 +51,8 @@ import {
 } from '@patternfly/react-core';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfIcon from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
@@ -375,7 +375,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem key="help">
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx

@@ -11,7 +11,7 @@ import {
   ModalHeader,
   ModalBody
 } from '@patternfly/react-core';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 
 interface readFile {
   fileName: string;
@@ -116,7 +116,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
         isHorizontal={isHorizontal}
       >
         <MultipleFileUploadMain
-          titleIcon={<UploadIcon />}
+          titleIcon={<RhUiUploadIcon />}
           titleText="Drag and drop files here"
           titleTextSeparator="or"
           infoText="Accepted file types: JPEG, Doc, PDF, PNG"

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

@@ -32,13 +32,14 @@ import {
 } from '@patternfly/react-core';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
-import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
+import { IS_INERT } from '../../../helpers/inert';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -230,7 +231,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
         <Toolbar isStatic id="mobile-toolbar">
           <ToolbarContent>
             <ToolbarItem align={{ default: 'alignEnd' }}>
-              <Button variant="plain" icon={<SearchIcon />} aria-label="Search" />
+              <Button variant="plain" icon={<RhMicronsSearchIcon />} aria-label="Search" />
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
@@ -241,7 +242,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
   // Docked masthead - vertical navigation sidebar
   const dockedMasthead = (
     <Masthead
-      {...(isMobile && !isDockExpanded && { inert: '' })}
+      {...(isMobile && !isDockExpanded && { inert: IS_INERT })}
       display={{ default: undefined }}
       id="docked-masthead"
       variant="docked"
@@ -289,7 +290,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
                     to="#nav-link2"
                     itemId={1}
                     isActive={activeItem === 1}
-                    icon={<FolderIcon />}
+                    icon={<RhUiFolderFillIcon />}
                     anchorRef={navItem2Ref}
                     aria-label="Policy"
                   >
@@ -301,7 +302,7 @@ export const NavDockedNav: React.FunctionComponent = () => {
                     to="#nav-link3"
                     itemId={2}
                     isActive={activeItem === 2}
-                    icon={<CloudIcon />}
+                    icon={<RhUiCloudFillIcon />}
                     anchorRef={navItem3Ref}
                     aria-label="Authentication"
                   >

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

@@ -38,7 +38,7 @@ import {
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -113,7 +113,7 @@ export const NavFlyout: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -34,7 +34,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -91,7 +91,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -37,7 +37,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -110,7 +110,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -38,7 +38,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -107,7 +107,7 @@ export const NavManual: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -41,7 +41,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -117,7 +117,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -41,7 +41,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -103,7 +103,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -41,7 +41,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -103,7 +103,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

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

@@ -43,7 +43,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -95,7 +95,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
         <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
-        <HelpIcon /> Help
+        <RhUiQuestionMarkCircleIcon /> Help
       </DropdownItem>
     </>
   );

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -16,6 +16,7 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelContent,
+  DrawerSection,
   Dropdown,
   DropdownItem,
   DropdownList,
@@ -37,7 +38,7 @@ import {
   ToolbarContent,
   MenuToggleElement
 } from '@patternfly/react-core';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import pfIcon from './assets/pf-logo-small.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
 import avroIcon from './assets/camel-avro_200x150.png';
@@ -536,7 +537,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
                           deleteItem(product);
                         }}
                       >
-                        <TrashIcon />
+                        <RhUiTrashFillIcon />
                         Delete
                       </DropdownItem>
                     </DropdownList>
@@ -618,14 +619,19 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <p>This is a demo that showcases Patternfly cards.</p>
         </Content>
       </PageSection>
-      <PageSection isFilled padding={{ md: 'padding' }} aria-label="Card filtering toolbar">
-        <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
-          <ToolbarContent>{toolbarItems}</ToolbarContent>
-        </Toolbar>
-        <Divider component="div" />
-      </PageSection>
       <PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card content area">
-        <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
+        <Drawer isExpanded={isDrawerExpanded} isInline>
+          <DrawerSection>
+            <Toolbar
+              id="card-view-data-toolbar-group-types"
+              clearAllFilters={onDelete}
+              inset={{ default: 'insetLg' }}
+              style={{ paddingBlockStart: 'var(--pf-t--global--spacer--md)' }}
+            >
+              <ToolbarContent alignItems="center">{toolbarItems}</ToolbarContent>
+            </Toolbar>
+            <Divider component="div" />
+          </DrawerSection>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>