@patternfly/react-core 5.2.0-prerelease.1 → 5.2.0-prerelease.11

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import {
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerColorVariant,
+  DrawerContent,
+  DrawerHead,
+  DrawerPanelContent,
+  Flex,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionTypes,
+  PageSectionVariants,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Text,
+  TextContent,
+  Masthead,
+  PageToggleButton,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  Wizard,
+  WizardStep
+} from '@patternfly/react-core';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+
+  const onExpand = () => {
+    if (drawerRef.current) {
+      drawerRef.current.focus();
+    }
+  };
+
+  const onOpenClick = () => {
+    setIsDrawerExpanded(true);
+  };
+
+  const onCloseClick = () => {
+    setIsDrawerExpanded(false);
+  };
+
+  const onNavSelect = (_event: any, result: any) => {
+    setActiveItem(result.itemId);
+  };
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0}>
+          System Panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1}>
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2}>
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3}>
+          Network Services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4}>
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const Header = (
+    <Masthead id="basic">
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+    </Masthead>
+  );
+
+  const Sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const pageId = 'main-content-page-layout-default-nav';
+
+  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const PageBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  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%"
+        >
+          <TextContent>
+            <Text>{stepName} content</Text>
+            <p>
+              Wizard description goes here. If you need more assistance,{' '}
+              <Button isInline variant="link" onClick={onOpenClick}>
+                see more information
+              </Button>{' '}
+              in the side drawer.{' '}
+            </p>
+          </TextContent>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  return (
+    <React.Fragment>
+      <Page
+        header={Header}
+        sidebar={Sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        breadcrumb={PageBreadcrumb}
+        mainContainerId={pageId}
+      >
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">A demo of a wizard in a page.</Text>
+          </TextContent>
+        </PageSection>
+        <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
+          <Wizard>
+            <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>
+        </PageSection>
+      </Page>
+    </React.Fragment>
+  );
+};

package/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 
 export interface ApplicationLauncherTextProps extends React.HTMLProps<HTMLSpanElement> {
   /** content rendered inside the text container */
@@ -13,7 +14,7 @@ export const ApplicationLauncherText: React.FunctionComponent<ApplicationLaunche
   children,
   ...props
 }: ApplicationLauncherTextProps) => (
-  <span className={css('pf-v5-c-app-launcher__menu-item-text', className)} {...props}>
+  <span className={css(`${styles.appLauncherMenuItem}-text`, className)} {...props}>
     {children}
   </span>
 );

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx

@@ -6,11 +6,13 @@ import {
   ApplicationLauncherContent
 } from '@patternfly/react-core/deprecated';
 import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
+/* eslint-disable camelcase */
+import c_app_launcher__menu_item_Color from '@patternfly/react-tokens/dist/esm/c_app_launcher__menu_item_Color';
 
 const icon: JSX.Element = <img src={pfLogoSm} />;
 
 const linkStyle: React.CSSProperties = {
-  color: 'var(--pf-v5-c-app-launcher__menu-item--Color)',
+  color: c_app_launcher__menu_item_Color.var,
   textDecoration: 'none'
 };
 

package/src/deprecated/components/Select/SelectMenu.tsx

@@ -214,7 +214,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
     const variantProps = {
       ref: innerRef,
       className: css(
-        !footer ? styles.selectMenu : 'pf-v5-c-select__menu-list',
+        !footer ? styles.selectMenu : `${styles.selectMenu}-list`,
         position === SelectPosition.right && styles.modifiers.alignRight,
         className
       ),

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx

@@ -12,6 +12,7 @@ import {
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface finishedProps {
   onClose: () => void;
@@ -41,7 +42,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -18,6 +18,7 @@ import {
   WizardFooter as WizardFooterDeprecated,
   WizardContextConsumer as WizardContextConsumerDeprecated
 } from '@patternfly/react-core/deprecated';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -50,7 +51,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/helpers/Popper/Popper.tsx

@@ -289,7 +289,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
         setRefElement(triggerRef());
       }
     }
-  }, [triggerRef]);
+  }, [triggerRef, trigger]);
   React.useEffect(() => {
     // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
     if (popperRef) {

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { Flex } from '../Flex';
 import { FlexItem } from '../FlexItem';
+import layout from '@patternfly/react-styles/css/layouts/Flex/flex';
 
 describe('Flex', () => {
   test('Simple flex with single item', () => {
@@ -134,7 +135,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen.getByTestId('test-id').className.replace('pf-v5-l-flex', '').trim();
+          const className = screen.getByTestId('test-id').className.replace(layout.flex, '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })

package/src/layouts/Gallery/Gallery.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Gallery/gallery';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMax from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_max';
 
 export interface GalleryProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the Gallery layout */
@@ -45,18 +47,16 @@ export const Gallery: React.FunctionComponent<GalleryProps> = ({
   if (minWidths) {
     Object.entries(minWidths || {}).map(
       ([breakpoint, value]) =>
-        (minWidthStyles[
-          `--pf-v5-l-gallery--GridTemplateColumns--min${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`
-        ] = value)
+        (minWidthStyles[`${cssGridTemplateColumnsMin.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] =
+          value)
     );
   }
   const maxWidthStyles: any = {};
   if (maxWidths) {
     Object.entries(maxWidths || {}).map(
       ([breakpoint, value]) =>
-        (maxWidthStyles[
-          `--pf-v5-l-gallery--GridTemplateColumns--max${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`
-        ] = value)
+        (maxWidthStyles[`${cssGridTemplateColumnsMax.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] =
+          value)
     );
   }
   const widthStyles = { ...minWidthStyles, ...maxWidthStyles };