@patternfly/react-core 6.4.1-prerelease.9 → 6.4.1

package/src/components/Wizard/__tests__/WizardNavItem.test.tsx

@@ -63,9 +63,3 @@ test(`Renders screen reader text and success icon when status is success`, () =>
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
   expect(screen.getByText(', success')).toBeInTheDocument();
 });
-
-test(`Renders screen reader text and warning icon when status is warning`, () => {
-  render(<WizardNavItem status="warning" />);
-  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.warning);
-  expect(screen.getByText(', warning')).toBeInTheDocument();
-});

package/src/components/Wizard/__tests__/WizardStep.test.tsx

@@ -70,6 +70,4 @@ test('updates "status" in context when the value changes', () => {
   expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'error', isVisited: true });
   render(<WizardStep {...testStep} status="success" />);
   expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'success', isVisited: true });
-  render(<WizardStep {...testStep} status="warning" />);
-  expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'warning', isVisited: true });
 });

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

@@ -6,10 +6,8 @@ interface SomeContextProps {
   setErrorMessage(error: string | undefined): void;
   successMessage: string | undefined;
   setSuccessMessage(error: string | undefined): void;
-  warningMessage: string | undefined;
-  setWarningMessage(error: string | undefined): void;
 }
-type SomeContextRenderProps = Pick<SomeContextProps, 'successMessage', 'errorMessage', 'warningMessage'>;
+type SomeContextRenderProps = Pick<SomeContextProps, 'successMessage', 'errorMessage'>;
 interface SomeContextProviderProps {
   children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
@@ -19,20 +17,16 @@ const SomeContext: React.Context<SomeContextProps> = createContext({} as SomeCon
 const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
   const [errorMessage, setErrorMessage] = useState<string>();
   const [successMessage, setSuccessMessage] = useState<string>();
-  const [warningMessage, setWarningMessage] = useState<string>();
 
   return (
-    <SomeContext.Provider
-      value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage, warningMessage, setWarningMessage }}
-    >
-      {children({ errorMessage, successMessage, warningMessage })}
+    <SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}>
+      {children({ errorMessage, successMessage })}
     </SomeContext.Provider>
   );
 };
 
 const StepContentWithAction = () => {
-  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage, warningMessage, setWarningMessage } =
-    useContext(SomeContext);
+  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = useContext(SomeContext);
 
   return (
     <>
@@ -41,8 +35,7 @@ const StepContentWithAction = () => {
         isChecked={!!errorMessage}
         onChange={(_event, checked) => {
           setErrorMessage(checked ? 'Some error message' : undefined);
-          setSuccessMessage(checked ? undefined : successMessage);
-          setWarningMessage(checked ? undefined : warningMessage);
+          setSuccessMessage(!checked ? 'Some error message' : undefined);
         }}
         id="toggle-error-checkbox"
         name="Toggle Status"
@@ -52,37 +45,23 @@ const StepContentWithAction = () => {
         isChecked={!!successMessage}
         onChange={(_event, checked) => {
           setSuccessMessage(checked ? 'Some success message' : undefined);
-          setErrorMessage(checked ? undefined : errorMessage);
-          setWarningMessage(checked ? undefined : warningMessage);
+          setErrorMessage(!checked ? 'Some success message' : undefined);
         }}
         id="toggle-success-checkbox"
         name="Toggle Status"
       />
-      <Radio
-        label="Give step 1 a warning status"
-        isChecked={!!warningMessage}
-        onChange={(_event, checked) => {
-          setWarningMessage(checked ? 'Some warning message' : undefined);
-          setErrorMessage(checked ? undefined : errorMessage);
-          setSuccessMessage(checked ? undefined : successMessage);
-        }}
-        id="toggle-warning-checkbox"
-        name="Toggle Status"
-      />
     </>
   );
 };
 
 export const WizardStepStatus: React.FunctionComponent = () => (
   <SomeContextProvider>
-    {({ errorMessage, successMessage, warningMessage }) => {
+    {({ errorMessage, successMessage }) => {
       let status = 'default';
       if (errorMessage) {
         status = 'error';
       } else if (successMessage) {
         status = 'success';
-      } else if (warningMessage) {
-        status = 'warning';
       }
       return (
         <Wizard height={400} title="Step status wizard">

package/src/components/Wizard/types.tsx

@@ -23,14 +23,13 @@ export interface WizardBasicStep {
   /** Replaces the step's footer. The step's footer takes precedence over the wizard's footer. */
   footer?: React.ReactElement<any> | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navItem */
-  status?: 'default' | 'error' | 'success' | 'warning';
+  status?: 'default' | 'error' | 'success';
 }
 
 export enum WizardNavItemStatus {
   Default = 'default',
   Error = 'error',
-  Success = 'success',
-  Warning = 'warning'
+  Success = 'success'
 }
 
 /** 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. */

package/src/demos/AlertGroup.md

@@ -15,6 +15,6 @@ This demonstrates how you can assemble a full page view including the use of ale
 
 ### Alert group toast with notification drawer
 
-```ts file="examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx" isFullscreen
+```js file='./examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx' isFullscreen
 
 ```

package/src/demos/BackToTop.md

@@ -11,5 +11,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 Note that `tabIndex={0}` is added to the scrolling `PageSection` of the page to allow keyboard users the ability to focus and scroll.
 
-```ts file="examples/BackToTop/BackToTopNameDemo.tsx" isFullscreen
+```js isFullscreen file="./examples/BackToTop/BackToTopNameDemo.tsx"
 ```

package/src/demos/{Button/examples/ButtonProgress.tsx → Button.md}

@@ -1,8 +1,25 @@
+---
+id: Button
+section: components
+---
+
+import { useState } from 'react';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+## Demos 
+
+### Progress button
+
+The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
+
+Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
+
+```ts
 import { useState } from 'react';
 import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
-export const ButtonProgress: React.FunctionComponent = () => {
+const ProgressButton: React.FunctionComponent = () => {
   const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
 
   return (
@@ -52,3 +69,4 @@ export const ButtonProgress: React.FunctionComponent = () => {
     </Form>
   );
 };
+```

package/src/demos/CardView/CardView.md

@@ -27,5 +27,5 @@ This demonstrates how you can assemble a full page view that contains a grid of
 
 ### Card view
 
-```ts file="examples/CardView.tsx" isFullscreen
+```js file="./examples/CardView.tsx" isFullscreen
 ```

package/src/demos/DataListDemo.md

@@ -23,24 +23,24 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 ### Basic
 
-```ts file="DataList/examples/DataListBasic.tsx" isFullscreen
+```js file="./DataList/examples/DataListBasic.tsx" isFullscreen
 
 ```
 
 ### Expandable control in toolbar
 
-```ts file="DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
+```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 
 ```
 
 ### Actionable
 
-```ts file="DataList/examples/DataListActionable.tsx" isFullscreen
+```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
 
 ```
 
 ### Static bottom pagination
 
-```ts file="DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
+```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
 
 ```

package/src/demos/DescriptionList/DescriptionList.md

@@ -12,10 +12,10 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Basic
 
-```ts file="examples/DescriptionListBasic.tsx" isFullscreen
+```js file='./examples/DescriptionListBasic.tsx' isFullscreen
 ```
 
 ### In drawer
 
-```ts file="examples/DescriptionListInDrawer.tsx" isFullscreen
+```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
 ```

package/src/demos/Nav.md

@@ -19,45 +19,45 @@ import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardH
 
 ### Default nav
 
-```ts file="./examples/Nav/NavDefault.tsx" isFullscreen
+```js file='./examples/Nav/NavDefault.tsx' isFullscreen
 ```
 
 ### Grouped nav
 
-```ts file="./examples/Nav/NavGrouped.tsx" isFullscreen
+```js file='./examples/Nav/NavGrouped.tsx' isFullscreen
 ```
 
 ### Expandable nav
 
-```ts file="./examples/Nav/NavExpandable.tsx" isFullscreen
+```js file='./examples/Nav/NavExpandable.tsx' isFullscreen
 ```
 
 ### Horizontal nav
 
-```ts file="./examples/Nav/NavHorizontal.tsx" isFullscreen
+```js file='./examples/Nav/NavHorizontal.tsx' isFullscreen
 ```
 
 ### Horizontal subnav
 
-```ts file="./examples/Nav/NavWithSubnav.tsx" isFullscreen
+```js file='./examples/Nav/NavWithSubnav.tsx' isFullscreen
 ```
 
 ### Horizontal nav with horizontal subnav
 
-```ts file="./examples/Nav/NavHorizontalWithSubnav.tsx" isFullscreen
+```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen
 ```
 
 ### Manual nav
 
-```ts file="./examples/Nav/NavManual.tsx" isFullscreen
+```js file='./examples/Nav/NavManual.tsx' isFullscreen
 ```
 
 ### Flyout nav
 
-```ts file="./examples/Nav/NavFlyout.tsx" isFullscreen
+```js file='./examples/Nav/NavFlyout.tsx' isFullscreen
 ```
 
 ### Drilldown nav
 
-```ts isFullscreen file="./examples/Nav/NavDrilldown.tsx"
+```js isFullscreen file="./examples/Nav/NavDrilldown.tsx"
 ```

package/src/demos/{PasswordGenerator/examples/PasswordGenerator.tsx → PasswordGenerator.md}

@@ -1,3 +1,18 @@
+---
+id: Password generator
+section: patterns
+---
+
+import { useEffect, useRef, useState } from 'react';
+import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
+
+## Demos
+
+### Provide a generated password
+
+```ts
 import { useEffect, useRef, useState } from 'react';
 import {
   InputGroup,
@@ -15,12 +30,12 @@ import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
-export const PasswordGenerator: React.FunctionComponent = () => {
+const PasswordGenerator: React.FunctionComponent = () => {
   const generatePassword = () => {
     const length = 12;
     const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@%()_-=+';
     let retVal = '';
-    for (let i = 0, n = charset.length; i < length; ++i) {
+    for (var i = 0, n = charset.length; i < length; ++i) {
       retVal += charset.charAt(Math.floor(Math.random() * n));
     }
     return retVal;
@@ -138,7 +153,7 @@ export const PasswordGenerator: React.FunctionComponent = () => {
             actions={
               <MenuItemAction
                 icon={<RedoIcon />}
-                onClick={(_e) => {
+                onClick={(e) => {
                   setGeneratedPassword(generatePassword());
                 }}
                 actionId="redo"
@@ -166,3 +181,4 @@ export const PasswordGenerator: React.FunctionComponent = () => {
     />
   );
 };
+```

package/src/demos/PrimaryDetail.md

@@ -31,32 +31,32 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Primary-detail full page
 
-```ts file="examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
+```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
 ```
 
 ### Primary-detail content padding
 
-```ts file="examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
+```js file="./examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
 
 ```
 
 ### Primary-detail card view
 
-```ts file="examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
+```js file="./examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
 ```
 
 ### Primary-detail simple list in card
 
-```ts file="examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
+```js file="./examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail data list in card
 
-```ts file="examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
+```js file="./examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail inline modifier
 
-```ts file="examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
+```js file="./examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
 
 ```

package/src/demos/RTL/RTL.md

@@ -28,6 +28,6 @@ This demonstrates how the UI adapts to the writing mode of the page.
 
 ### Paginated table
 
-```ts file="examples/PaginatedTable.tsx" isFullscreen
+```js file="./examples/PaginatedTable.tsx" isFullscreen
 
 ```