@patternfly/react-core 4.227.1 → 4.227.4

package/src/components/Menu/examples/MenuWithViewMore.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core';
+
+export const MenuWithViewMore: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [numOptions, setNumOptions] = React.useState(3);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [menuOptions, setMenuOptions] = React.useState([
+    <MenuItem key={0} itemId={'view-more-0'}>
+      Action
+    </MenuItem>,
+    <MenuItem
+      key={1}
+      itemId={'view-more-1'}
+      to="#default-link2"
+      // just for demo so that navigation is not triggered
+      onClick={event => event.preventDefault()}
+    >
+      Link
+    </MenuItem>,
+    <MenuItem key={2} itemId="view-more-2" isDisabled>
+      Disabled action
+    </MenuItem>,
+    <MenuItem key={3} itemId="view-more-3" isDisabled to="#default-link4">
+      Disabled link
+    </MenuItem>,
+    <MenuItem key={4} itemId="view-more-4">
+      Action 2
+    </MenuItem>,
+    <MenuItem key={5} itemId="view-more-5">
+      Action 3
+    </MenuItem>,
+    <MenuItem key={6} itemId="view-more-6">
+      Action 4
+    </MenuItem>,
+    <MenuItem key={7} itemId="view-more-7">
+      Action 5
+    </MenuItem>,
+    <MenuItem key={8} itemId="view-more-8">
+      Final option
+    </MenuItem>
+  ]);
+  const [visibleOptions, setVisibleOptions] = React.useState(menuOptions.slice(0, numOptions));
+
+  const activeItemRef = React.useRef<HTMLElement>(null);
+  const viewMoreRef = React.useRef<HTMLElement>(null);
+
+  React.useEffect(() => {
+    activeItemRef.current?.focus();
+  }, [visibleOptions]);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(itemId as string);
+  };
+
+  const simulateNetworkCall = (networkCallback: () => void) => {
+    setTimeout(networkCallback, 2000);
+  };
+
+  const getNextValidItem = (startingIndex: number, maxLength: number) => {
+    let validItem;
+    for (let i = startingIndex; i < maxLength; i++) {
+      if (menuOptions[i].props.isDisabled) {
+        continue;
+      } else {
+        validItem = menuOptions[i];
+        break;
+      }
+    }
+    return validItem;
+  };
+
+  const loadMoreOptions = () => {
+    const newLength = numOptions + 3 <= menuOptions.length ? numOptions + 3 : menuOptions.length;
+    const prevPosition = numOptions;
+    const nextValidItem = getNextValidItem(prevPosition, newLength);
+
+    setNumOptions(newLength);
+    setIsLoading(false);
+    setActiveItem(nextValidItem.props.itemId);
+    setVisibleOptions(menuOptions.slice(0, newLength));
+  };
+
+  const onViewMoreClick = () => {
+    setIsLoading(true);
+    simulateNetworkCall(() => {
+      loadMoreOptions();
+    });
+  };
+
+  return (
+    <Menu activeItemId={activeItem} onSelect={onSelect}>
+      <MenuContent>
+        <MenuList>
+          {visibleOptions.map(option => {
+            const props = option.props;
+
+            return <MenuItem key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;
+          })}
+          {numOptions !== menuOptions.length && (
+            <MenuItem
+              {...(!isLoading && { isLoadButton: true })}
+              {...(isLoading && { isLoading: true })}
+              onClick={onViewMoreClick}
+              itemId="loader"
+              ref={viewMoreRef}
+            >
+              {isLoading ? <Spinner size="lg" /> : 'View more'}
+            </MenuItem>
+          )}
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -15,387 +15,44 @@ Progress steppers have default icons associated with the `variant` property, and
 
 ### Basic
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-step1"
-    titleId="basic-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="basic-step2"
-    titleId="basic-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep variant="pending" id="basic-step3" titleId="basic-step3-title" aria-label="pending step">
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasic.tsx"
 ```
 
-### Basic with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With step descriptions
 
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="basic-desc-step1"
-    titleId="basic-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="basic-desc-step2"
-    titleId="basic-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="basic-desc-step3"
-    titleId="basic-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicWithDescription.tsx"
 ```
 
-### Center aligned with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper isCenterAligned>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="center-desc-step1"
-    titleId="center-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="center-desc-step2"
-    titleId="center-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="center-desc-step3"
-    titleId="center-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
-```
-
-### Vertical with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With alignment
 
-<ProgressStepper isVertical>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="vertical-desc-step1"
-    titleId="vertical-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="vertical-desc-step2"
-    titleId="vertical-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="vertical-desc-step3"
-    titleId="vertical-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicWithAlignment.tsx"
 ```
 
 ### Compact
 
 Compact progress steppers will only display the current step's `title`, and will not display any steps' `description` texts.
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper isCompact>
-  <ProgressStep
-    variant="success"
-    id="compact-step1"
-    titleId="compact-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="compact-step2"
-    titleId="compact-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep variant="pending" id="compact-step3" titleId="compact-step3-title" aria-label="pending step">
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperCompact.tsx"
 ```
 
-### Basic with an issue
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With an issue
 
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-with-issue-step1"
-    titleId="basic-with-issue-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-issue-step2"
-    titleId="basic-with-issue-step2-title"
-    aria-label="completed step, step with success"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="warning"
-    id="basic-with-issue-step3"
-    titleId="basic-with-issue-step3-title"
-    aria-label="completed step, step with warning"
-  >
-    Third step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="basic-with-issue-step4"
-    titleId="basic-with-issue-step4-title"
-    aria-label="step with info"
-  >
-    Fourth step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    id="basic-with-issue-step5"
-    titleId="basic-with-issue-step5-title"
-    aria-label="pending step"
-  >
-    Fifth step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicIssue.tsx"
 ```
 
-### Basic with a failure
+### With a failure
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step1"
-    titleId="basic-with-failure-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step2"
-    titleId="basic-with-failure-step2-title"
-    aria-label="completed step, step with success"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step3"
-    titleId="basic-with-failure-step3-title"
-    aria-label="completed step, step with success"
-  >
-    Third step
-  </ProgressStep>
-  <ProgressStep
-    variant="danger"
-    isCurrent
-    id="basic-with-failure-step4"
-    titleId="basic-with-failure-step4-title"
-    aria-label="step with danger"
-  >
-    Fourth step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    id="basic-with-failure-step5"
-    titleId="basic-with-failure-step5-title"
-    aria-label="pending step"
-  >
-    Fifth step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicFailure.tsx"
 ```
 
-### Basic with Patternfly icons
+### With custom icons
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="custom-step1"
-    titleId="custom-step1-title"
-    aria-label="completed step, step with success"
-  >
-    Successful completion
-  </ProgressStep>
-  <ProgressStep
-    isCurrent
-    icon={<InProgressIcon />}
-    id="custom-step2"
-    titleId="custom-step2-title"
-    aria-label="in progress"
-  >
-    In process
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    icon={<PendingIcon />}
-    id="custom-step3"
-    titleId="custom-step3-title"
-    aria-label="pending step"
-  >
-    Pending
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperCustomIcons.tsx"
 ```
 
 ### With help popover
 
 To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
-
-PopoverProgressStep = () => {
-  return (
-    <ProgressStepper>
-      <ProgressStep
-        variant="success"
-        id="popover-step1"
-        titleId="popover-step1-title"
-        aria-label="completed step with popover, step with success"
-        popoverRender={( stepRef ) => (
-          <Popover
-            aria-label="First step help"
-            headerContent={<div>First step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-           )}
-      >
-        First step
-      </ProgressStep>
-      <ProgressStep
-        variant="danger"
-        id="popover-step2"
-        titleId="popover-step2-title"
-        aria-label="completed step with popover, step with danger"
-        popoverRender={( stepRef ) => (
-          <Popover
-            aria-label="Second step help"
-            headerContent={<div>Second step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-        )}
-      >
-        Second step
-      </ProgressStep>
-      <ProgressStep
-        variant="info"
-        id="popover-step3"
-        titleId="popover-step3-title"
-        aria-label="step with popover"
-        popoverRender={(stepRef) => (
-          <Popover
-            aria-label="Third step help"
-            headerContent={<div>Third step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-        )}
-        isCurrent
-      >
-        Third step
-      </ProgressStep>
-      <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
-        Fourth step
-      </ProgressStep>
-    </ProgressStepper>
-  );
-};
+```ts file="ProgressStepperHelpPopover.tsx"
 ```

package/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasic: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="basic-step1"
+      titleId="basic-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep variant="info" isCurrent id="basic-step2" titleId="basic-step2-title" aria-label="step with info">
+      Second step
+    </ProgressStep>
+    <ProgressStep variant="pending" id="basic-step3" titleId="basic-step3-title" aria-label="pending step">
+      Third step
+    </ProgressStep>
+  </ProgressStepper>
+);

package/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasicFailure: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="basic-with-failure-step1"
+      titleId="basic-with-failure-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="success"
+      id="basic-with-failure-step2"
+      titleId="basic-with-failure-step2-title"
+      aria-label="completed step, step with success"
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="success"
+      id="basic-with-failure-step3"
+      titleId="basic-with-failure-step3-title"
+      aria-label="completed step, step with success"
+    >
+      Third step
+    </ProgressStep>
+    <ProgressStep
+      variant="danger"
+      isCurrent
+      id="basic-with-failure-step4"
+      titleId="basic-with-failure-step4-title"
+      aria-label="step with danger"
+    >
+      Fourth step
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      id="basic-with-failure-step5"
+      titleId="basic-with-failure-step5-title"
+      aria-label="pending step"
+    >
+      Fifth step
+    </ProgressStep>
+  </ProgressStepper>
+);

package/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasicIssue: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="basic-with-issue-step1"
+      titleId="basic-with-issue-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="success"
+      id="basic-with-issue-step2"
+      titleId="basic-with-issue-step2-title"
+      aria-label="completed step, step with success"
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="warning"
+      id="basic-with-issue-step3"
+      titleId="basic-with-issue-step3-title"
+      aria-label="completed step, step with warning"
+    >
+      Third step
+    </ProgressStep>
+    <ProgressStep
+      variant="info"
+      isCurrent
+      id="basic-with-issue-step4"
+      titleId="basic-with-issue-step4-title"
+      aria-label="step with info"
+    >
+      Fourth step
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      id="basic-with-issue-step5"
+      titleId="basic-with-issue-step5-title"
+      aria-label="pending step"
+    >
+      Fifth step
+    </ProgressStep>
+  </ProgressStepper>
+);

package/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
+
+export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () => {
+  const [isVertical, setIsVertical] = React.useState(false);
+  const [isCenterAligned, setIsCenterAligned] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Vertical alignment"
+        isChecked={isVertical}
+        onChange={setIsVertical}
+        aria-label="Toggle vertical alignment"
+        id="toggle-vertical"
+        name="toggle-vertical"
+      />
+      <Checkbox
+        label="Center alignment"
+        isChecked={isCenterAligned}
+        onChange={setIsCenterAligned}
+        aria-label="Toggle center alignment"
+        id="toggle-center"
+        name="toggle-center"
+      />
+      <br />
+      <ProgressStepper isVertical={isVertical} isCenterAligned={isCenterAligned}>
+        <ProgressStep
+          variant="success"
+          description="This is the first thing to happen"
+          id="basic-alignment-step1"
+          titleId="basic-alignment-step1-title"
+          aria-label="completed step, step with success"
+        >
+          First step
+        </ProgressStep>
+        <ProgressStep
+          variant="info"
+          isCurrent
+          description="This is the second thing to happen"
+          id="basic-alignment-step2"
+          titleId="basic-alignment-step2-title"
+          aria-label="step with info"
+        >
+          Second step
+        </ProgressStep>
+        <ProgressStep
+          variant="pending"
+          description="This is the last thing to happen"
+          id="basic-alignment-step3"
+          titleId="basic-alignment-step3-title"
+          aria-label="pending step"
+        >
+          Third step
+        </ProgressStep>
+      </ProgressStepper>
+    </React.Fragment>
+  );
+};