@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.3

package/src/components/Wizard/examples/WizardGetCurrentStep.tsx

@@ -36,7 +36,7 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
 export const GetCurrentStepWizard: React.FunctionComponent = () => {
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
 
-  const onStepChange = (event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
+  const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
     setCurrentStep(currentStep);
 
   return (
@@ -44,9 +44,43 @@ export const GetCurrentStepWizard: React.FunctionComponent = () => {
       <WizardStep name="Step 1" id="get-current-step-1">
         {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}
       </WizardStep>
-      <WizardStep name="Step 2" id="get-current-step-2">
-        <CurrentStepDescriptionList currentStep={currentStep} />
-      </WizardStep>
+      <WizardStep
+        name="Step 2"
+        id="get-current-step-2"
+        isDisabled
+        steps={[
+          <WizardStep name="Substep 1" id="get-current-substep-1" key="get-current-substep-1">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 2" id="get-current-substep-2" key="get-current-substep-2">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 3"
+        id="get-current-step-3"
+        steps={[
+          <WizardStep name="Substep 3" id="get-current-substep-3" key="get-current-substep-3">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 4" id="get-current-substep-4" key="get-current-substep-4">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 4"
+        id="get-current-step-4"
+        steps={[
+          <WizardStep name="Substep 5" id="get-current-substep-5" key="get-current-substep-5" isHidden>
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 6" id="get-current-substep-6" key="get-current-substep-6">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
       <WizardStep name="Review" id="get-current-review-step" footer={{ nextButtonText: 'Finish' }}>
         <CurrentStepDescriptionList currentStep={currentStep} />
       </WizardStep>

package/src/components/Wizard/types.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '.';
+import { ButtonProps } from '../Button';
 
 /** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {
@@ -30,6 +31,9 @@ export enum WizardNavItemStatus {
   Error = 'error'
 }
 
+/** Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps. */
+export type WizardFooterButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'onClick'>;
+
 /** Type used to define parent steps. */
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */

package/src/components/Wizard/utils.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardStepType } from './types';
+import { isWizardParentStep, isWizardSubStep, WizardStepType } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 /**
@@ -8,7 +8,7 @@ import { WizardStep, WizardStepProps } from './WizardStep';
  * @param children
  * @returns WizardStepType[]
  */
-export const buildSteps = (children: React.ReactNode | React.ReactNode[]) =>
+export const buildSteps = (children: React.ReactNode) =>
   React.Children.toArray(children).reduce((acc: WizardStepType[], child: React.ReactNode, index: number) => {
     if (isWizardStep(child)) {
       const { props: childProps } = child;
@@ -57,3 +57,26 @@ export const normalizeStepProps = ({
   steps: _steps,
   ...controlStep
 }: WizardStepProps): Omit<WizardStepType, 'index'> => controlStep;
+
+/**
+ * Determines whether a step is navigable based on disabled/hidden properties
+ * @param steps All steps
+ * @param step
+ * @returns boolean
+ */
+export const isStepEnabled = (steps: WizardStepType[], step: WizardStepType): boolean => {
+  // Skip over parent steps since they are merely containers of sub-steps
+  if (!isWizardParentStep(step) && !step.isHidden && !step.isDisabled) {
+    if (isWizardSubStep(step)) {
+      const parentStep = steps.find((otherStep) => otherStep.id === step.parentId);
+
+      if (!parentStep.isHidden && !parentStep.isDisabled) {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+};

package/src/demos/Banner.md

@@ -57,9 +57,9 @@ class BannerDemo extends React.Component {
           </PageSection>
           <PageSection>
             <Gallery hasGutter>
-              {Array.apply(0, Array(30)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card key={i}>
+              {Array.from({ length: 30 }).map((_value, index) => (
+                <GalleryItem key={index}>
+                  <Card key={index}>
                     <CardBody>This is a card</CardBody>
                   </Card>
                 </GalleryItem>
@@ -131,7 +131,7 @@ class BannerDemo extends React.Component {
               </PageSection>
               <PageSection>
                 <Gallery hasGutter>
-                  {Array.apply(0, Array(30)).map((x, i) => (
+                  {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={i}>
                       <Card key={i}>
                         <CardBody>This is a card</CardBody>

package/src/demos/CustomMenus/CustomMenus.md

@@ -50,6 +50,12 @@ Additionally, menu components may be connected to each other manually through ou
 
 ```
 
+### With inline search filter
+
+```ts file="./examples/InlineSearchFilterMenuDemo.tsx"
+
+```
+
 ### Tree view menu
 
 When rendering a menu-like element that does not contain `<MenuItem>` components, [panel](/components/panel) allows more flexible control and customization.

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+  Menu,
+  MenuList,
+  MenuContent,
+  MenuSearch,
+  MenuSearchInput,
+  Divider,
+  SearchInput,
+  SelectOption,
+  MenuToggle,
+  MenuContainer
+} from '@patternfly/react-core';
+
+export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+  const [input, setInput] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<any>();
+  const menuRef = React.useRef<any>();
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(item);
+  };
+
+  const handleTextInputChange = (value: string) => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    setInput(value);
+  };
+
+  const menuListItemsText = [
+    'Action 1',
+    'Action 2',
+    'Action 3',
+    'My project',
+    'OpenShift cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My project 2',
+    'OpenShift cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
+
+  const menuListItems = menuListItemsText
+    .filter((item) => !input || item.toLowerCase().includes(input.toString().toLowerCase()))
+    .map((currentValue, index) => (
+      <SelectOption key={currentValue} itemId={index}>
+        {currentValue}
+      </SelectOption>
+    ));
+  if (input && menuListItems.length === 0) {
+    menuListItems.push(
+      <SelectOption isDisabled key="no result">
+        No results found
+      </SelectOption>
+    );
+  }
+
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen}>
+      {isOpen ? 'Expanded' : 'Collapsed'}
+    </MenuToggle>
+  );
+
+  const menu = (
+    <Menu ref={menuRef} onSelect={onSelect} activeItemId={activeItem} isScrollable>
+      <MenuSearch>
+        <MenuSearchInput>
+          <SearchInput
+            value={input}
+            aria-label="Filter menu items"
+            onChange={(_event, value) => handleTextInputChange(value)}
+          />
+        </MenuSearchInput>
+      </MenuSearch>
+      <Divider />
+      <MenuContent maxMenuHeight="200px">
+        <MenuList>{menuListItems}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <MenuContainer
+      menu={menu}
+      menuRef={menuRef}
+      toggle={toggle}
+      toggleRef={toggleRef}
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+    />
+  );
+};

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -0,0 +1,314 @@
+import React from 'react';
+import {
+  Button,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  MenuToggleCheckbox,
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuItem,
+  PageSection,
+  PageSectionVariants,
+  Pagination,
+  Text,
+  TextContent,
+  TextVariants,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
+export const DataListBasic: React.FunctionComponent = () => {
+  const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;
+
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarItem variant="bulk-select">
+        <MenuToggle
+          aria-label="Select cards"
+          splitButtonOptions={{
+            items: [
+              <MenuToggleCheckbox
+                id="split-dropdown-checkbox"
+                key="split-dropdown-checkbox"
+                aria-label={'Select all cards'}
+              />
+            ]
+          }}
+        ></MenuToggle>
+      </ToolbarItem>
+      <ToolbarItem>
+        <MenuToggle>Filter by creator name</MenuToggle>
+      </ToolbarItem>
+      <ToolbarItem variant="overflow-menu">
+        <OverflowMenu breakpoint="md">
+          <OverflowMenuItem>
+            <Button variant="primary">Create instance</Button>
+          </OverflowMenuItem>
+          <OverflowMenuControl hasAdditionalOptions>
+            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
+              <EllipsisVIcon />
+            </MenuToggle>
+          </OverflowMenuControl>
+        </OverflowMenu>
+      </ToolbarItem>
+      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+        {renderPagination()}
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <React.Fragment>
+      <DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}>
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Projects</Text>
+            <Text component="p">This is a demo that showcases PatternFly Data List</Text>
+          </TextContent>
+        </PageSection>
+        <PageSection isFilled>
+          <Toolbar id="toolbar-group-types">
+            <ToolbarContent>{toolbarItems}</ToolbarContent>
+          </Toolbar>
+          <DataList aria-label="Demo data list">
+            <DataListItem aria-labelledby="Demo-item1">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons1">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.p}>patternfly</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>
+                            Working repo for
+                            <a href="http://www.patternfly.org/">PatternFly</a>
+                          </Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon /> 10
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 5
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>,
+                    <DataListCell isFilled={false} alignRight key="secondary content align">
+                      <Flex>
+                        <FlexItem>
+                          <Button variant="secondary">Action</Button>
+                        </FlexItem>
+                        <FlexItem>
+                          <a href="#">Link</a>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+            <DataListItem aria-labelledby="Demo-item2">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons2">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly-elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>PatternFly elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon /> 5
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 9
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 2
+                            </FlexItem>
+                            <FlexItem>
+                              <CheckCircleIcon />
+                              11
+                            </FlexItem>
+                            <FlexItem>
+                              <ExclamationTriangleIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <TimesCircleIcon /> 1
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>,
+                    <DataListCell isFilled={false} alignRight key="secondary content align">
+                      <Flex>
+                        <FlexItem>
+                          <Button variant="secondary">Action</Button>
+                        </FlexItem>
+                        <FlexItem>
+                          <a href="#">Link</a>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+            <DataListItem>
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="Demo-item3">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly-unified-design-kit</Text>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>,
+                    <DataListCell isFilled={false} alignRight key="buttons3">
+                      <Flex>
+                        <FlexItem>
+                          <Button variant="secondary">Action</Button>
+                        </FlexItem>
+                        <FlexItem>
+                          <a href="#">Link</a>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+            <DataListItem aria-labelledby="Demo-item4">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons4">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>
+                            Working repo for
+                            <a href="http://www.patternfly.org/">PatternFly</a>
+                          </Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon />
+                              10
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 5
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>,
+                    <DataListCell isFilled={false} alignRight key="secondary content align">
+                      <Flex>
+                        <FlexItem>
+                          <Button variant="secondary">Action</Button>
+                        </FlexItem>
+                        <FlexItem>
+                          <a href="#">Link</a>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+            <DataListItem aria-labelledby="Demo-item5">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons5">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly-elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>PatternFly elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon /> 5
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 9
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 2
+                            </FlexItem>
+                            <FlexItem>
+                              <CheckCircleIcon /> 11
+                            </FlexItem>
+                            <FlexItem>
+                              <ExclamationTriangleIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <TimesCircleIcon /> 1
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>,
+                    <DataListCell isFilled={false} alignRight key="secondary content align">
+                      <Flex>
+                        <FlexItem>
+                          <Button variant="secondary">Action</Button>
+                        </FlexItem>
+                        <FlexItem>
+                          <a href="#">Link</a>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+          </DataList>
+        </PageSection>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};

package/src/demos/DataListDemo.md

@@ -9,8 +9,20 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
 
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
 ## Demos
 
+### Basic
+
+```js file="./DataList/examples/DataListBasic.tsx" isFullscreen
+
+```
+
 ### Expandable control in toolbar
 
 ```js