From cac74544d65e2157e20b877dc16aec7333c2f876 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 27 Jun 2024 10:29:59 -0400 Subject: [PATCH 1/3] fix(Wizard): add className props and spread them when possible --- .../react-core/src/components/Wizard/WizardBody.tsx | 11 ++++++++--- .../src/components/Wizard/WizardFooter.tsx | 12 ++++++++---- .../src/components/Wizard/WizardHeader.tsx | 10 +++++++--- .../react-core/src/components/Wizard/WizardNav.tsx | 9 ++++++--- .../src/components/Wizard/WizardNavItem.tsx | 12 +++++++++--- 5 files changed, 38 insertions(+), 16 deletions(-) diff --git a/packages/react-core/src/components/Wizard/WizardBody.tsx b/packages/react-core/src/components/Wizard/WizardBody.tsx index 56688070a7c..b0c3e9153ad 100644 --- a/packages/react-core/src/components/Wizard/WizardBody.tsx +++ b/packages/react-core/src/components/Wizard/WizardBody.tsx @@ -10,9 +10,11 @@ import { getResizeObserver } from '../../helpers/resizeObserver'; * Used as a wrapper for WizardStep content, where the wrapping element is customizable. */ -export interface WizardBodyProps { +export interface WizardBodyProps extends React.HTMLProps { /** Anything that can be rendered in the Wizard body */ children: React.ReactNode; + /** Additional classes spread to the wizard body */ + className?: string; /** Flag to remove the default body padding */ hasNoPadding?: boolean; /** Adds an accessible name to the wrapper element when the content overflows and renders @@ -29,10 +31,12 @@ export interface WizardBodyProps { export const WizardBody = ({ children, + className, hasNoPadding = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, - component = 'div' + component = 'div', + ...props }: WizardBodyProps) => { const [hasScrollbar, setHasScrollbar] = React.useState(false); const [previousWidth, setPreviousWidth] = React.useState(undefined); @@ -74,7 +78,8 @@ export const WizardBody = ({ {...(shouldFocusContent && { tabIndex: -1 })} {...(component === 'div' && hasScrollbar && { role: 'region' })} {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })} - className={css(styles.wizardMain)} + className={css(styles.wizardMain, className)} + {...props} >
{children}
diff --git a/packages/react-core/src/components/Wizard/WizardFooter.tsx b/packages/react-core/src/components/Wizard/WizardFooter.tsx index 58fcc0cd81c..cb5425347c0 100644 --- a/packages/react-core/src/components/Wizard/WizardFooter.tsx +++ b/packages/react-core/src/components/Wizard/WizardFooter.tsx @@ -39,6 +39,8 @@ export interface WizardFooterProps { backButtonProps?: Omit; /** Additional props for the Cancel button. */ cancelButtonProps?: WizardFooterButtonProps; + /** Additional classes spread to the wizard footer */ + className?: string; } /** @@ -47,10 +49,11 @@ export interface WizardFooterProps { interface WizardFooterWrapperProps { children: React.ReactNode; + className?: string; } -export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => ( -
{children}
+export const WizardFooterWrapper = ({ children, className }: WizardFooterWrapperProps) => ( +
{children}
); export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => { @@ -71,9 +74,10 @@ const InternalWizardFooter = ({ cancelButtonText = 'Cancel', nextButtonProps, backButtonProps, - cancelButtonProps + cancelButtonProps, + className }: Omit) => ( - + {!isBackHidden && ( diff --git a/packages/react-core/src/components/Wizard/WizardHeader.tsx b/packages/react-core/src/components/Wizard/WizardHeader.tsx index 33c6851f0b5..5aaa37e4175 100644 --- a/packages/react-core/src/components/Wizard/WizardHeader.tsx +++ b/packages/react-core/src/components/Wizard/WizardHeader.tsx @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles'; import { Button } from '../Button'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; -export interface WizardHeaderProps { +export interface WizardHeaderProps extends React.HTMLProps { /** Callback function called when the X (Close) button is clicked */ onClose?: (event: React.MouseEvent) => void; /** Title of the wizard */ @@ -21,6 +21,8 @@ export interface WizardHeaderProps { titleId?: string; /** id for the description */ descriptionId?: string; + /** Additional classes spread to the wizard header */ + className?: string; } export const WizardHeader: React.FunctionComponent = ({ @@ -31,9 +33,11 @@ export const WizardHeader: React.FunctionComponent = ({ closeButtonAriaLabel, titleId, descriptionComponent: Component = 'div', - descriptionId + descriptionId, + className, + ...props }: WizardHeaderProps) => ( -
+
{!isCloseHidden && (