Skip to content

Commit

Permalink
Added new example
Browse files Browse the repository at this point in the history
  • Loading branch information
thatblindgeye committed Apr 19, 2024
1 parent 1749c86 commit 0e01d2e
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 0 deletions.
9 changes: 9 additions & 0 deletions packages/react-core/src/components/Wizard/examples/Wizard.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,15 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
```ts file="./WizardBasic.tsx"
```

### Focus content on next/back

To focus the main content element of the `Wizard`, pass in the `shouldFocusContentOnNextOrBack` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order.

If a `WizardStep` is passed a `body={null}` property, you must manually handle focus.

```ts file="./WizardFocusOnNextBack.tsx"
```

### Basic with disabled steps

```ts file="./WizardBasicDisabledSteps.tsx"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import { Wizard, WizardStep } from '@patternfly/react-core';

export const WizardFocusOnNextBack: React.FunctionComponent = () => (
<Wizard shouldFocusContentOnNextOrBack title="Wizard that focuses content on next or back click">
<WizardStep name="Step 1" id="wizard-focus-first-step">
Step 1 content
</WizardStep>
<WizardStep name="Step 2" id="wizard-focus-second-step">
Step 2 content
</WizardStep>
<WizardStep name="Review" id="wizard-focus-review-step" footer={{ nextButtonText: 'Finish' }}>
Review step content
</WizardStep>
</Wizard>
);

0 comments on commit 0e01d2e

Please sign in to comment.