Skip to content

Commit

Permalink
fix(CreateTearsheet): add custom button (#5666)
Browse files Browse the repository at this point in the history 
* fix(CreateTearsheet): add custom button

* fix(CreateTearsheet): replace custom button position and rename it

* fix(CreateTearsheet): move all custom button props to the object

* fix(CreateTearsheet): change prop name to experimentalSecondarySubmit

---------

Co-authored-by: elysia <[email protected]>
  • Loading branch information
@Sreejith-CS @elycheea
Sreejith-CS and elycheea committed Sep 9, 2024
1 parent fac868b commit d5f9538
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 2 deletions.
71 changes: 71 additions & 0 deletions packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ const submitButtonText = 'Submit';
const cancelButtonText = 'Cancel';
const backButtonText = 'Back';
const nextButtonText = 'Next';
const experimentalSecondarySubmitText = 'Secondary submit';
const experimentalSecondaryLabelText = 'Skip all step';
const onExperimentalSecondarySubmitClickFn = jest.fn();
const step3Title = uuidv4();
const step2Title = uuidv4();
const step1Title = uuidv4();
Expand Down Expand Up @@ -79,6 +82,12 @@ const renderCreateTearsheet = ({
onPrevious = onPreviousStepFn,
finalOnNextFn = finalStepOnNext,
rejectOnSubmitNext = false,
experimentalSecondarySubmit = {
labelText: '',
disabled: false,
hideSecondarySubmit: false,
onClick: onExperimentalSecondarySubmitClickFn,
},
...rest
}) =>
render(
Expand All @@ -93,6 +102,12 @@ const renderCreateTearsheet = ({
onMount={onMountFn}
description={step1Description}
subtitle={step1Subtitle}
experimentalSecondarySubmit={{
labelText: experimentalSecondarySubmit.labelText,
disabled: experimentalSecondarySubmit.disabled,
hideSecondarySubmit: experimentalSecondarySubmit.hideSecondarySubmit,
onClick: experimentalSecondarySubmit.onClick,
}}
>
step 1 content
<button type="button" disabled>
Expand Down Expand Up @@ -475,6 +490,62 @@ describe(CreateTearsheet.displayName, () => {
);
});

it('should show experimentalSecondarySubmit button (4th button)', () => {
renderCreateTearsheet({
...defaultProps,
experimentalSecondarySubmitText,
});
const button = screen.getByText(experimentalSecondarySubmitText);
expect(button).toBeInTheDocument();
});

it('should disabled experimentalSecondarySubmit button', () => {
renderCreateTearsheet({
...defaultProps,
experimentalSecondarySubmitText,
experimentalSecondarySubmit: { disabled: true },
});
const button = screen.getByText(experimentalSecondarySubmitText);
expect(button).toBeDisabled();
});

it('should hide experimentalSecondarySubmit button', () => {
renderCreateTearsheet({
...defaultProps,
experimentalSecondarySubmitText,
experimentalSecondarySubmit: { hideSecondarySubmit: true },
});
const button = screen.queryByText(experimentalSecondarySubmitText);
expect(button).toBeNull();
});

it('should rename experimentalSecondarySubmit button text', () => {
renderCreateTearsheet({
...defaultProps,
experimentalSecondarySubmitText,
experimentalSecondarySubmit: {
labelText: experimentalSecondaryLabelText,
},
});

const button = screen.getByText(experimentalSecondaryLabelText);
expect(button).toBeInTheDocument();
});
it('should call experimentalSecondarySubmit onClick', async () => {
renderCreateTearsheet({
...defaultProps,
experimentalSecondarySubmitText,
experimentalSecondarySubmit: {
onClick: onExperimentalSecondarySubmitClickFn,
},
});
const button = screen.getByText(experimentalSecondarySubmitText);
await act(() => click(button));
await waitFor(() =>
expect(onExperimentalSecondarySubmitClickFn).toHaveBeenCalled()
);
});

it('should create a console warning when using CreateTearsheet with only one step', async () => {
jest.spyOn(console, 'warn').mockImplementation(jest.fn());
renderSingleStepCreateTearsheet(defaultProps);
Expand Down
23 changes: 22 additions & 1 deletion packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
import { getNumberOfHiddenSteps } from '../../global/js/utils/getNumberOfHiddenSteps';
import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
import { pkg } from '../../settings';
import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';

const componentName = 'CreateTearsheet';
const blockClass = `${pkg.prefix}--tearsheet-create`;
Expand All @@ -44,6 +45,9 @@ const blockClass = `${pkg.prefix}--tearsheet-create`;

export interface StepsContextType {
currentStep: number;
setExperimentalSecondarySubmit: Dispatch<
SetStateAction<ExperimentalSecondarySubmit>
>;
setIsDisabled: Dispatch<SetStateAction<boolean>>;
setOnPrevious: (fn: any) => void;
setOnNext: (fn: any) => void;
Expand Down Expand Up @@ -78,6 +82,11 @@ export interface CreateTearsheetProps extends PropsWithChildren {
*/
className?: string;

/**
* The experimentalSecondary submit button text
*/
experimentalSecondarySubmitText?: string;

/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
Expand Down Expand Up @@ -171,6 +180,7 @@ export let CreateTearsheet = forwardRef(
cancelButtonText,
children,
className,
experimentalSecondarySubmitText,
description,
influencerWidth = 'narrow',
initialStep,
Expand Down Expand Up @@ -202,7 +212,8 @@ export let CreateTearsheet = forwardRef(
const [stepData, setStepData] = useState<Step[]>([]);
const [firstIncludedStep, setFirstIncludedStep] = useState(1);
const [lastIncludedStep, setLastIncludedStep] = useState<number>();

const [experimentalSecondarySubmit, setExperimentalSecondarySubmit] =
useState<ExperimentalSecondarySubmit>({});
const previousState = usePreviousValue({ currentStep, open });
const contentRef = useRef<HTMLDivElement>(null);

Expand Down Expand Up @@ -270,6 +281,10 @@ export let CreateTearsheet = forwardRef(
nextButtonText,
isSubmitting,
componentBlockClass: blockClass,
experimentalSecondarySubmit,
experimentalSecondarySubmitText: experimentalSecondarySubmit.labelText
? experimentalSecondarySubmit.labelText
: experimentalSecondarySubmitText,
setCreateComponentActions: setCreateTearsheetActions,
});

Expand Down Expand Up @@ -301,6 +316,7 @@ export let CreateTearsheet = forwardRef(
<StepsContext.Provider
value={{
currentStep,
setExperimentalSecondarySubmit,
setIsDisabled,
setOnPrevious: (fn) => setOnPrevious(() => fn),
setOnNext: (fn) => setOnNext(() => fn),
Expand Down Expand Up @@ -357,6 +373,11 @@ CreateTearsheet.propTypes = {
*/
description: PropTypes.node,

/**
* The experimentalSecondary submit button text
*/
experimentalSecondarySubmitText: PropTypes.string,

/**
* Specifies elements to focus on first on render.
*/
Expand Down
48 changes: 47 additions & 1 deletion packages/ibm-products/src/components/CreateTearsheet/CreateTearsheetStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@ interface CreateTearsheetStepBaseProps extends PropsWithChildren {
*/
disableSubmit?: boolean;

/**
* Configuration options for customizing the behavior of the experimentalSecondary submit button.
*/
experimentalSecondarySubmit?: ExperimentalSecondarySubmit;

/**
* This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
* steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
Expand Down Expand Up @@ -139,6 +144,21 @@ interface PreviousStateProps {
type CreateTearsheetStepProps = CreateTearsheetStepBaseProps &
fieldsetLegendTextProps;

/**
* Configuration options for customizing the behavior of the experimentalSecondary submit button.
*
* @property {string} [labelText] - Optional text to replace the default button text.
* @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
* @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
* @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
*/
export type ExperimentalSecondarySubmit = {
labelText?: string;
disabled?: boolean;
hideSecondarySubmit?: boolean;
onClick?: () => void;
};

export let CreateTearsheetStep = forwardRef(
(
{
Expand All @@ -148,6 +168,7 @@ export let CreateTearsheetStep = forwardRef(
className,
description,
disableSubmit,
experimentalSecondarySubmit,
fieldsetLegendText,
hasFieldset = defaults.hasFieldset,
includeStep = defaults.includeStep,
Expand Down Expand Up @@ -194,8 +215,17 @@ export let CreateTearsheetStep = forwardRef(
previousState?.currentStep !== stepsContext?.currentStep
) {
stepsContext?.setOnMount(onMount);
stepsContext?.setExperimentalSecondarySubmit({
...experimentalSecondarySubmit,
});
}
}, [onMount, stepsContext, stepNumber, previousState?.currentStep]);
}, [
onMount,
experimentalSecondarySubmit,
stepsContext,
stepNumber,
previousState?.currentStep,
]);

// Used to take the `includeStep` prop and use it as a local state value
useEffect(() => {
Expand Down Expand Up @@ -332,6 +362,22 @@ CreateTearsheetStep.propTypes = {
*/
disableSubmit: PropTypes.bool,

/**
* Configuration options for customizing the behavior of the experimentalSecondary submit button.
*
* @property {string} [labelText] - Optional text to replace the default button text.
* @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
* @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
* @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
*/
/**@ts-ignore*/
experimentalSecondarySubmit: PropTypes.shape({
labelText: PropTypes.string,
disabled: PropTypes.bool,
hideSecondarySubmit: PropTypes.bool,
onClick: PropTypes.func,
}),

/**
* This is the required legend text that appears above a fieldset html element for accessibility purposes.
* You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
Expand Down
22 changes: 22 additions & 0 deletions packages/ibm-products/src/global/js/hooks/useCreateComponentStepChange.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export const useCreateComponentStepChange = ({
componentBlockClass,
setCreateComponentActions,
setModalIsOpen,
experimentalSecondarySubmit,
experimentalSecondarySubmitText,
}) => {
const continueToNextStep = useCallback(() => {
setIsSubmitting(false);
Expand Down Expand Up @@ -120,6 +122,11 @@ export const useCreateComponentStepChange = ({
await handleOnRequestSubmit();
}
};
const handleExperimentalSecondarySubmit = () => {
if (typeof experimentalSecondarySubmit?.onClick === 'function') {
experimentalSecondarySubmit.onClick();
}
};
if (stepData?.length > 0) {
const buttons = [];
if (stepData?.length > 1) {
Expand All @@ -141,6 +148,18 @@ export const useCreateComponentStepChange = ({
: onUnmount,
kind: 'ghost',
});
if (
experimentalSecondarySubmitText &&
!experimentalSecondarySubmit?.hideSecondarySubmit
) {
buttons.push({
key: 'create-action-button-experimentalSecondarySubmit',
label: experimentalSecondarySubmitText,
onClick: handleExperimentalSecondarySubmit,
kind: 'secondary',
disabled: experimentalSecondarySubmit?.disabled,
});
}
buttons.push({
key: 'create-action-button-submit',
label:
Expand All @@ -151,6 +170,7 @@ export const useCreateComponentStepChange = ({
loading: isSubmitting,
className: `${componentBlockClass}__create-button`,
});

setCreateComponentActions(buttons);
}
}, [
Expand Down Expand Up @@ -178,5 +198,7 @@ export const useCreateComponentStepChange = ({
onPrevious,
setLoadingPrevious,
loadingPrevious,
experimentalSecondarySubmit,
experimentalSecondarySubmitText,
]);
};

0 comments on commit d5f9538

Please sign in to comment.