@patternfly/react-core 6.6.2 → 6.7.0-prerelease.1

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

@@ -0,0 +1,342 @@
+import { useState } from 'react';
+import {
+  Bullseye,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  CardExpandableContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Content,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  Icon,
+  Label,
+  LabelColor,
+  LabelGroup,
+  LabelStatus,
+  MenuToggle,
+  MenuToggleElement,
+  Page,
+  PageBody,
+  PageFooter,
+  PageHeader,
+  PageSection,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  SkipToContent,
+  Title
+} from '@patternfly/react-core';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import RhUiPortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+import RhUiContainerIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-icon';
+import RhUiAutomationIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-automation-icon';
+import RhUiConnectedIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-connected-icon';
+import RhUiArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
+import activeMQIcon from '@patternfly/react-core/src/demos/assets/activemq-core_200x150.png';
+import avroIcon from '@patternfly/react-core/src/demos/assets/camel-avro_200x150.png';
+import dropBoxIcon from '@patternfly/react-core/src/demos/assets/camel-dropbox_200x150.png';
+import infinispanIcon from '@patternfly/react-core/src/demos/assets/camel-infinispan_200x150.png';
+import saxonIcon from '@patternfly/react-core/src/demos/assets/camel-saxon_200x150.png';
+import sparkIcon from '@patternfly/react-core/src/demos/assets/camel-spark_200x150.png';
+import swaggerIcon from '@patternfly/react-core/src/demos/assets/camel-swagger-java_200x150.png';
+import azureIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_REST.png';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
+
+export const PagePlain: React.FunctionComponent = () => {
+  const [isPathwayExpanded, setIsPathwayExpanded] = useState(true);
+  const [isPathwayKebabOpen, setIsPathwayKebabOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [openCardMenu, setOpenCardMenu] = useState<number | null>(null);
+  const mainContainerId = 'main-content-page-demo-plain';
+
+  const icons = {
+    pfIcon,
+    activeMQIcon,
+    avroIcon,
+    dropBoxIcon,
+    infinispanIcon,
+    saxonIcon,
+    sparkIcon,
+    swaggerIcon,
+    azureIcon,
+    restIcon
+  };
+
+  const cards = data.map((product) => (
+    <GalleryItem key={product.name} component="li">
+      <Card isCompact isGlass isClickable isSelectable isFullHeight id={product.name.replace(/ /g, '-')}>
+        <CardHeader
+          selectableActions={{
+            isChecked: selectedItems.includes(product.id),
+            selectableActionId: `page-demo-plain-selectable-${product.id}`,
+            selectableActionAriaLabelledby: `${product.name.replace(/ /g, '-')}-title`,
+            selectableActionProps: { isLabelWrapped: true },
+            name: `page-demo-plain-check-${product.id}`,
+            onChange: (_event, checked) => {
+              setSelectedItems((items) =>
+                checked ? [...items, product.id] : items.filter((item) => item !== product.id)
+              );
+            }
+          }}
+          actions={{
+            actions: (
+              <Dropdown
+                isOpen={openCardMenu === product.id}
+                onOpenChange={(isOpen) => setOpenCardMenu(isOpen ? product.id : null)}
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    aria-label={`${product.name} actions`}
+                    variant="plain"
+                    onClick={() => setOpenCardMenu(openCardMenu === product.id ? null : product.id)}
+                    isExpanded={openCardMenu === product.id}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
+                  />
+                )}
+              >
+                <DropdownList>
+                  <DropdownItem onClick={() => setOpenCardMenu(null)}>
+                    <RhUiTrashFillIcon /> Delete
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
+            )
+          }}
+        >
+          <img src={icons[product.icon]} alt="" style={{ maxWidth: '60px' }} />
+        </CardHeader>
+        <CardTitle>{product.name}</CardTitle>
+        <CardBody>{product.description}</CardBody>
+      </Card>
+    </GalleryItem>
+  ));
+
+  const renderPathwayCard = (
+    category: React.ReactNode,
+    systems: number,
+    description: string,
+    rebootRequired: boolean,
+    hasIncident: boolean
+  ) => (
+    <FlexItem flex={{ default: 'flex_1' }} alignSelf={{ default: 'alignSelfStretch' }}>
+      <Card isPlain isFullHeight>
+        <CardBody>
+          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }} className="pf-v6-u-h-100">
+            <Flex
+              spaceItems={{ default: 'spaceItemsSm' }}
+              direction={{ md: 'column', lg: 'row' }}
+              spacer={{ md: 'spacerMd', lg: 'spacerSm' }}
+            >
+              {category}
+              <Button variant={ButtonVariant.link} isInline component="a" href="#">
+                {systems} systems
+              </Button>
+            </Flex>
+            <FlexItem spacer={{ default: 'spacerMd' }}>
+              <p>{description}</p>
+            </FlexItem>
+            <Flex
+              grow={{ default: 'grow' }}
+              direction={{ default: 'column', lg: 'row' }}
+              justifyContent={{ default: 'justifyContentFlexEnd', lg: 'justifyContentFlexStart' }}
+              alignContent={{ lg: 'alignContentFlexEnd' }}
+              rowGap={{ default: 'rowGapMd' }}
+            >
+              {hasIncident && (
+                <FlexItem style={{ marginBlockEnd: '-.25em' }}>
+                  <Label status={LabelStatus.danger}>Incident</Label>
+                </FlexItem>
+              )}
+              <Flex
+                spaceItems={{ default: 'spaceItemsSm' }}
+                alignItems={{ default: 'alignItemsCenter' }}
+                flexWrap={{ default: 'nowrap' }}
+                rowGap={{ default: 'rowGapMd' }}
+              >
+                <Icon status={rebootRequired ? 'danger' : 'success'}>
+                  <RhUiConnectedIcon />
+                </Icon>
+                <p className="pf-v6-u-color-200">
+                  System reboot <b className="pf-v6-u-color-100">{rebootRequired ? 'is' : 'is not'}</b> required
+                </p>
+              </Flex>
+            </Flex>
+          </Flex>
+        </CardBody>
+        <CardFooter>
+          <Button
+            variant={ButtonVariant.link}
+            isInline
+            component="a"
+            href="#"
+            icon={<RhUiArrowRightIcon />}
+            iconPosition="end"
+          >
+            View pathway
+          </Button>
+        </CardFooter>
+      </Card>
+    </FlexItem>
+  );
+
+  const recommendedPathwaysCard = (
+    <Card isExpanded={isPathwayExpanded} isGlass>
+      <CardHeader
+        onExpand={() => setIsPathwayExpanded(!isPathwayExpanded)}
+        toggleButtonProps={{
+          id: 'page-demo-plain-expandable-status-card-1-toggle',
+          'aria-label': 'Details',
+          'aria-labelledby':
+            'page-demo-plain-expandable-status-card-1-title page-demo-plain-expandable-status-card-1-toggle',
+          'aria-expanded': isPathwayExpanded
+        }}
+        actions={{
+          actions: (
+            <Dropdown
+              isOpen={isPathwayKebabOpen}
+              onOpenChange={(isOpen) => setIsPathwayKebabOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  id="page-demo-plain-expandable-status-card-1-action-kebab"
+                  aria-label="Menu toggle"
+                  variant="plain"
+                  onClick={() => setIsPathwayKebabOpen(!isPathwayKebabOpen)}
+                  isExpanded={isPathwayKebabOpen}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
+                />
+              )}
+            >
+              <DropdownList>
+                <DropdownItem onClick={() => setIsPathwayKebabOpen(false)}>Action</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          )
+        }}
+      >
+        <CardTitle id="page-demo-plain-expandable-status-card-1-title">
+          <Title headingLevel="h2" size="xl">
+            Improve recommended pathways
+          </Title>
+        </CardTitle>
+      </CardHeader>
+      <CardExpandableContent>
+        <Flex direction={{ default: 'column', md: 'row' }} alignItems={{ default: 'alignItemsStretch' }}>
+          {renderPathwayCard(
+            <LabelGroup aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiPortIcon />}>
+                Performance
+              </Label>
+            </LabelGroup>,
+            378,
+            'Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance',
+            true,
+            true
+          )}
+          <Divider orientation={{ md: 'vertical' }} inset={{ default: 'inset3xl' }} />
+          {renderPathwayCard(
+            <LabelGroup numLabels={1} aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiContainerIcon />}>
+                Stability
+              </Label>
+              <Label variant="outline" color={LabelColor.blue}>
+                Availability
+              </Label>
+            </LabelGroup>,
+            211,
+            'Adjust your networking configuration to get ahead of network performance degradations and packet losses',
+            false,
+            false
+          )}
+          <Divider orientation={{ md: 'vertical' }} inset={{ default: 'inset3xl' }} />
+          {renderPathwayCard(
+            <LabelGroup aria-label="Group of labels">
+              <Label variant="outline" color={LabelColor.blue} icon={<RhUiAutomationIcon />}>
+                Availability
+              </Label>
+            </LabelGroup>,
+            166,
+            'Fine tune your Oracle DB configuration to improve database performance and avoid process failure',
+            true,
+            true
+          )}
+        </Flex>
+      </CardExpandableContent>
+    </Card>
+  );
+
+  const footer = (
+    <PageFooter>
+      <PageBody>custom footer</PageBody>
+    </PageFooter>
+  );
+
+  return (
+    <Page
+      id="page-demo-plain"
+      isPlain
+      masthead={<PageHeader>Custom header</PageHeader>}
+      skipToContent={<SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>}
+      mainContainerId={mainContainerId}
+      footer={footer}
+      sidebar={null}
+    >
+      <PageSection isPlain padding={{ default: 'noPadding' }}>
+        <Panel isGlass variant="bordered">
+          <PanelMain>
+            <PanelMainBody>
+              <Content>
+                <h1>Page title</h1>
+                <p>This is a full page demo.</p>
+              </Content>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
+      </PageSection>
+      <PageSection isPlain padding={{ default: 'noPadding' }}>
+        {recommendedPathwaysCard}
+      </PageSection>
+      <PageSection isPlain padding={{ default: 'noPadding' }} isFilled>
+        <Gallery component="ul" hasGutter aria-label="Selectable card container">
+          <GalleryItem component="li">
+            <Card isCompact isGlass isFullHeight>
+              <Bullseye>
+                <EmptyState
+                  headingLevel="h2"
+                  titleText="Add a new card to your page"
+                  icon={RhUiAddCircleFillIcon}
+                  variant={EmptyStateVariant.xs}
+                >
+                  <EmptyStateFooter>
+                    <EmptyStateActions>
+                      <Button variant={ButtonVariant.link}>Add card</Button>
+                    </EmptyStateActions>
+                  </EmptyStateFooter>
+                </EmptyState>
+              </Bullseye>
+            </Card>
+          </GalleryItem>
+          {cards}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

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>
     </>
   );
@@ -124,7 +124,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

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>
     </>
   );
@@ -124,7 +124,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

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>
     </>
   );
@@ -116,7 +116,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

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>