@patternfly/react-core 5.2.0-prerelease.5 → 5.2.0-prerelease.50

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

@@ -0,0 +1,207 @@
+import React from 'react';
+import {
+  Card,
+  DataList,
+  DataListCell,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  Text,
+  TextContent,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('dataListItem1');
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+    onDropdownFocus();
+  };
+  const onDropdownFocus = () => {
+    const element = document.getElementById('toggle-id');
+    element?.focus();
+  };
+  const onSelectDataListItem = (_event, id) => {
+    setSelectedDataListItemId(id);
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+    setIsExpanded(true);
+  };
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ '2xl': 'width_75' }}>
+      <DrawerHead>
+        <Title size="lg" headingLevel="h2">
+          Patternfly-elements
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onClose} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <Toolbar id="data-list-data-toolbar" usePageInsets>
+        <ToolbarContent>
+          <ToolbarItem>
+            <Dropdown
+              onSelect={onDropdownSelect}
+              isOpen={isDropdownOpen}
+              onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}
+              toggle={(toggleRef) => (
+                <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={onDropdownToggle}>
+                  Dropdown
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem key="option1">Option 1</DropdownItem>
+                <DropdownItem key="option2">Option 2</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <DataList
+        aria-label="selectable data list example"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem aria-label="data-list-item1-in-card" id="data-list-item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 1">
+                  <div>Node 1</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item2-in-card" id="data-list-item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 2">
+                  <div>Node 2</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item3-in-card" id="data-list-item3">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 3">
+                  <div>Node 3</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item4-in-card" id="data-list-item4">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 4">
+                  <div>Node 4</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-label="data-list-item5-in-card" id="data-list-item5">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="node 5">
+                  <div>Node 5</div>
+                  <a href="#">siemur/test-space</a>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it’s relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection>
+        <Card>
+          <Drawer isStatic isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+              <DrawerContentBody>{drawerContent}</DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

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

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  Card,
+  Divider,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerPanelBody,
+  DrawerPanelContent,
+  Flex,
+  FlexItem,
+  PageSection,
+  PageSectionVariants,
+  Progress,
+  SimpleList,
+  SimpleListGroup,
+  SimpleListItem,
+  Text,
+  TextContent,
+  Title
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onSelectListItem = (_listItem, listItemProps) => {
+    const id = listItemProps.children;
+    setDrawerPanelBodyContent(id.charAt(id.length - 1));
+    setIsExpanded(true);
+  };
+
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent widths={{ xl: 'width_75' }}>
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          {`List item ${drawerPanelBodyContent} details`}
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onClose} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelBody>
+        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>
+          <FlexItem>
+            <p>
+              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,
+              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and
+              can also make the drawer scrollable.
+            </p>
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 10} title="Title" />
+          </FlexItem>
+          <FlexItem>
+            <Progress value={drawerPanelBodyContent * 5} title="Title" />
+          </FlexItem>
+        </Flex>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent = (
+    <React.Fragment>
+      <SimpleList onSelect={onSelectListItem}>
+        <SimpleListGroup title="Section 1" id="simple-list-section-1">
+          <SimpleListItem key="item1" isActive>
+            List item 1
+          </SimpleListItem>
+          <SimpleListItem key="item2">List item 2</SimpleListItem>
+          <SimpleListItem key="item3">List item 3</SimpleListItem>
+          <SimpleListItem key="item4">List item 4</SimpleListItem>
+        </SimpleListGroup>
+        <SimpleListGroup title="Section 2" id="section-2">
+          <SimpleListItem key="item5">List item 5</SimpleListItem>
+          <SimpleListItem key="item6">List item 6</SimpleListItem>
+          <SimpleListItem key="item7">List item 7</SimpleListItem>
+          <SimpleListItem key="item8">List item 8</SimpleListItem>
+          <SimpleListItem key="item9">List item 9</SimpleListItem>
+        </SimpleListGroup>
+      </SimpleList>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">
+            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            of it’s relative line height of 1.5.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <Divider component="div" />
+      <PageSection>
+        <Card>
+          <Drawer isStatic isExpanded={isExpanded}>
+            <DrawerContent panelContent={panelContent}>
+              <DrawerContentBody>{drawerContent}</DrawerContentBody>
+            </DrawerContent>
+          </Drawer>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/Tabs/NestedTabs.tsx

@@ -17,6 +17,7 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 
 export const NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
@@ -108,7 +109,7 @@ export const NestedTabs: React.FunctionComponent = () => {
         </Card>
       </GridItem>
       <GridItem xl={4} md={6}>
-        <Flex direction={{ default: 'column' }} className="pf-v5-u-h-100">
+        <Flex direction={{ default: 'column' }} className={sizing.h_100}>
           <FlexItem flex={{ default: 'flex_1' }}>
             <Card isFullHeight>
               <CardHeader>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -56,6 +56,7 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { KeyTypes } from '../../../helpers';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 interface Repository {
@@ -191,7 +192,7 @@ export const TablesAndTabs = () => {
           </MenuToggle>
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
-          <OverflowMenuContent className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+          <OverflowMenuContent className={`${display.displayNone} ${display.displayBlockOnLg}`}>
             <OverflowMenuGroup groupType="button" isPersistent>
               <OverflowMenuItem isPersistent>
                 <Button variant="primary">Generate</Button>

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -143,6 +143,12 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     console.log('Logs cleared!');
   };
 
+  const onClearLogsMobile = () => {
+    setOptionExpandedMobile(false);
+    // eslint-disable-next-line no-console
+    console.log('Logs cleared!');
+  };
+
   const onSearchChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
     setSearchResultsCount(3);
@@ -169,7 +175,10 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     });
   };
 
-  const onPageResize = (_event: React.SyntheticEvent, { windowSize }: { windowSize: number }) => {
+  const onPageResize = (
+    _event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>,
+    { windowSize }: { windowSize: number }
+  ) => {
     if (windowSize >= 1450) {
       setMobileView(false);
     } else {
@@ -210,23 +219,28 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       <SelectOption key="switch-2" hasCheckbox isSelected={secondSwitchChecked} onClick={handleSecondSwitchChange}>
         Wrap lines
       </SelectOption>
-      <MenuFooter key="clear-log" onClick={onClearLogs}>
-        <Button variant="link" isInline>
-          Clear logs
-        </Button>
-      </MenuFooter>
     </>
   );
 
   const selectDropdownContent = (
-    <SelectList>
-      {Object.entries(firstOptions).map(([value, { type }]) => (
-        <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>
-          <Badge key={value}>{type}</Badge>
-          {` ${value}`}
-        </SelectOption>
-      ))}
-    </SelectList>
+    <>
+      <SelectList>
+        {Object.entries(firstOptions).map(([value, { type }]) => (
+          <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>
+            <Badge key={value}>{type}</Badge>
+            {` ${value}`}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </>
+  );
+
+  const clearLogsFooter = (type: string) => (
+    <MenuFooter key="clear-log" onClick={type === 'mobile' ? onClearLogsMobile : onClearLogs}>
+      <Button variant="link" isInline>
+        Clear logs
+      </Button>
+    </MenuFooter>
   );
 
   const selectToggleContent = ({ showText }: { showText: boolean }) => {
@@ -261,6 +275,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
     <React.Fragment>
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
         <Select
+          role="menu"
           toggle={(toggleRef) => (
             <MenuToggle
               ref={toggleRef}
@@ -282,7 +297,9 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
         <Select
           isOpen={optionExpanded}
+          role="menu"
           onOpenChange={(isOpen) => setOptionExpanded(isOpen)}
+          onOpenChangeKeys={['Escape']}
           onSelect={onOptionSelect}
           toggle={(toggleRef) => (
             <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} icon={<CogIcon />}>
@@ -291,6 +308,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
           )}
         >
           <SelectList>{optionSelectItems}</SelectList>
+          {clearLogsFooter('desktop')}
         </Select>
       </ToolbarItem>
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
@@ -325,8 +343,10 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
         <Tooltip position="top" content={<div>Options</div>}>
           <Select
+            role="menu"
             isOpen={optionExpandedMobile}
             onOpenChange={(isOpen) => setOptionExpandedMobile(isOpen)}
+            onOpenChangeKeys={['Escape']}
             onSelect={onOptionSelectMobile}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -339,6 +359,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
             )}
           >
             <SelectList>{optionSelectItems}</SelectList>
+            {clearLogsFooter('mobile')}
           </Select>
         </Tooltip>
       </ToolbarItem>

package/src/demos/examples/Wizard/InModal.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  PageSection,
+  Modal,
+  ModalVariant,
+  Wizard,
+  WizardHeader,
+  WizardStep
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const WizardInModalDemo: React.FunctionComponent = () => (
+  <>
+    <DashboardWrapper hasPageTemplateTitle>
+      <PageSection isWidthLimited>
+        <Gallery hasGutter>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </DashboardWrapper>
+    <Modal
+      isOpen
+      variant={ModalVariant.large}
+      showClose={false}
+      hasNoBodyWrapper
+      aria-describedby="wiz-modal-demo-description"
+      aria-labelledby="wiz-modal-demo-title"
+    >
+      <Wizard
+        header={
+          <WizardHeader
+            title="Wizard in modal"
+            titleId="wiz-modal-demo-title"
+            description="Simple wizard description"
+            descriptionId="wiz-modal-demo-description"
+            closeButtonAriaLabel="Close wizard"
+          />
+        }
+        height={400}
+      >
+        <WizardStep name="Information" id="wizard-step-1">
+          <p>Step 1 content</p>
+        </WizardStep>
+        <WizardStep
+          name="Configuration"
+          id="wizard-step-2"
+          steps={[
+            <WizardStep name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+              <p>Configuration substep A</p>
+            </WizardStep>,
+            <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+              <p>Configuration substep B</p>
+            </WizardStep>
+          ]}
+        />
+        <WizardStep name="Additional" id="wizard-step-3">
+          <p>Step 3 content</p>
+        </WizardStep>
+        <WizardStep name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          <p>Review step content</p>
+        </WizardStep>
+      </Wizard>
+    </Modal>
+  </>
+);

package/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Flex,
+  Modal,
+  ModalVariant,
+  Wizard,
+  WizardHeader,
+  WizardStep,
+  DrawerColorVariant
+} from '@patternfly/react-core';
+
+export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+
+  const onExpand = () => {
+    if (drawerRef.current) {
+      drawerRef.current.focus();
+    }
+  };
+
+  const onOpenClick = () => {
+    setIsDrawerExpanded(true);
+  };
+
+  const onCloseClick = () => {
+    setIsDrawerExpanded(false);
+  };
+
+  const createStepContentWithDrawer = (stepName: string) => (
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
+      <DrawerContent
+        panelContent={
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+            <DrawerHead>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                Drawer content: {stepName}
+              </span>
+              <DrawerActions>
+                <DrawerCloseButton onClick={onCloseClick} />
+              </DrawerActions>
+            </DrawerHead>
+          </DrawerPanelContent>
+        }
+      >
+        <Flex
+          className="pf-v5-c-wizard__main-body"
+          direction={{ default: 'column' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+          height="100%"
+        >
+          {!isDrawerExpanded && (
+            <Button isInline variant="link" onClick={onOpenClick}>
+              Open drawer
+            </Button>
+          )}
+          <div>{stepName} content</div>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  return (
+    <Modal
+      isOpen
+      variant={ModalVariant.large}
+      showClose={false}
+      hasNoBodyWrapper
+      aria-describedby="wiz-modal-demo-description"
+      aria-labelledby="wiz-modal-demo-title"
+    >
+      <Wizard
+        header={
+          <WizardHeader
+            closeButtonAriaLabel="Close wizard"
+            title="Wizard in modal with drawer"
+            titleId="wiz-modal-demo-title"
+            description="Simple wizard description"
+            descriptionId="wiz-modal-demo-description"
+          />
+        }
+        height={400}
+      >
+        <WizardStep body={null} name="Information" id="wizard-step-1">
+          {createStepContentWithDrawer('Information step')}
+        </WizardStep>
+        <WizardStep
+          name="Configuration"
+          id="wizard-step-2"
+          steps={[
+            <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+              {createStepContentWithDrawer('Configuration substep A')}
+            </WizardStep>,
+            <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+              {createStepContentWithDrawer('Configuration substep B')}
+            </WizardStep>
+          ]}
+        />
+        <WizardStep body={null} name="Additional" id="wizard-step-3">
+          {createStepContentWithDrawer('Additional step')}
+        </WizardStep>
+        <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          {createStepContentWithDrawer('Review step')}
+        </WizardStep>
+      </Wizard>
+    </Modal>
+  );
+};