diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index 0b624f0ea06..a50f9a861fc 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -360,4 +360,4 @@ Alerts that are asynchronously appended into dynamic [alert groups](/components/ This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information. ```ts file="AlertAsyncLiveRegion.tsx" -``` \ No newline at end of file +``` diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index 3db96e89508..0d117a2dc8b 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -112,6 +112,8 @@ export interface WizardProps extends React.HTMLProps { hasDrawer?: boolean; /** Flag indicating the wizard drawer is expanded */ isDrawerExpanded?: boolean; + /** Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer. */ + onExpandDrawer?: () => void; } interface WizardState { @@ -149,7 +151,8 @@ export class Wizard extends React.Component { isOpen: undefined, isNavExpandable: false, hasDrawer: false, - isDrawerExpanded: false + isDrawerExpanded: false, + onExpandDrawer: () => undefined as any }; private titleId: string; private descriptionId: string; @@ -408,6 +411,7 @@ export class Wizard extends React.Component { onCurrentStepChanged, hasDrawer, isDrawerExpanded, + onExpandDrawer, ...rest /* eslint-enable @typescript-eslint/no-unused-vars */ } = this.props; @@ -539,6 +543,7 @@ export class Wizard extends React.Component { void; } export const WizardBody: React.FunctionComponent = ({ @@ -32,6 +33,7 @@ export const WizardBody: React.FunctionComponent = ({ mainComponent = 'div', hasDrawer, isDrawerExpanded, + onExpandDrawer, activeStep }: WizardBodyProps) => { const MainComponent = mainComponent; @@ -40,7 +42,7 @@ export const WizardBody: React.FunctionComponent = ({ ( - + {children} )} diff --git a/packages/react-core/src/components/Wizard/WizardToggle.tsx b/packages/react-core/src/components/Wizard/WizardToggle.tsx index 259f43ba9dd..e6e01b40f56 100644 --- a/packages/react-core/src/components/Wizard/WizardToggle.tsx +++ b/packages/react-core/src/components/Wizard/WizardToggle.tsx @@ -33,6 +33,8 @@ export interface WizardToggleProps { hasDrawer?: boolean; /** Flag indicating the wizard drawer is expanded */ isDrawerExpanded?: boolean; + /** Callback function for when the drawer is toggled */ + onExpandDrawer?: () => void; } export const WizardToggle: React.FunctionComponent = ({ @@ -48,7 +50,8 @@ export const WizardToggle: React.FunctionComponent = ({ mainAriaLabel = null, isInPage = true, hasDrawer, - isDrawerExpanded + isDrawerExpanded, + onExpandDrawer }: WizardToggleProps) => { let activeStepIndex; let activeStepName; @@ -99,6 +102,7 @@ export const WizardToggle: React.FunctionComponent = ({ hasNoBodyPadding={hasNoBodyPadding} activeStep={activeStep} isDrawerExpanded={isDrawerExpanded} + onExpandDrawer={onExpandDrawer} hasDrawer={hasDrawer} > {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton} diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithDrawer.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithDrawer.tsx index 9a1e134fa9b..08608823e98 100644 --- a/packages/react-core/src/components/Wizard/examples/WizardWithDrawer.tsx +++ b/packages/react-core/src/components/Wizard/examples/WizardWithDrawer.tsx @@ -14,6 +14,10 @@ export const WizardWithDrawer: React.FunctionComponent = () => { const drawerRef = React.useRef(null); + const onExpandDrawer = () => { + drawerRef.current && drawerRef.current.focus(); + }; + const onOpenClick = () => { setIsDrawerExpanded(true); }; @@ -117,6 +121,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => { { const StepContentWithDrawer = () => { const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); + const drawerRef = React.useRef(null); + + const onWizardExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; return ( - + - drawer content + + drawer content + setIsDrawerExpanded(false)} /> diff --git a/yarn.lock b/yarn.lock index a69050e1bb5..e3b4091bf11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3616,10 +3616,10 @@ resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.222.4.tgz#5d988779c50df3dafc989d6e807d16971e34d228" integrity sha512-+0fk4dzxEbWn+hgaOnR0BjfeUdEeVVrqfH7+GFeFc+RKjEMjIR/BZbWWN8YQDezmDv6A32gHmEKaY3Uwbt06Lw== -"@patternfly/react-catalog-view-extension@^4.93.16": - version "4.95.0" - resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.95.0.tgz#db18dc22f7f33647adcbab98f5e939279c660dcc" - integrity sha512-G69nisvARMqXj7SPBrRinEhltbggcETodepxVSziJ56DneI88Lp6IdR6YNXh7jJtJ7LyiMyTvZ1N3CO9Y+2EiA== +"@patternfly/react-catalog-view-extension@^4.93.24": + version "4.95.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.95.1.tgz#a8ff4b14364a8505ff5156e3be6737032a70e277" + integrity sha512-GqWyih2GHagI+Yt9+VDmGRC8pv/989nExrisDLWbMNYaRKeZXEmr/LaWXTGJzD+fmZFYjc4wqd5tuJ0VkAp/jg== dependencies: "@patternfly/patternfly" "4.222.4" "@patternfly/react-core" "^4.267.6"