Skip to content

Commit

Permalink
fix(Dialog): hide optional elements if not provided (#1093)
Browse files Browse the repository at this point in the history 
WEB-1841

---------

Co-authored-by: Pedro Ladaria <pedro.jose.ladaria.linden@telefonica.com>
  • Loading branch information
@pladaria
pladaria and Pedro Ladaria authored Apr 24, 2024
1 parent f4ba119 commit 1134b4a
Show file tree
Hide file tree
Showing 7 changed files with 124 additions and 43 deletions.
Binary file modified ...ots__/dialog-screenshot-test-tsx-dialog-device-desktop-action-dialog-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...__/dialog-screenshot-test-tsx-dialog-device-mobile-ios-action-dialog-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-test-tsx-dialog-optional-elements-are-not-displayed-if-not-provided-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hot-test-tsx-select-options-are-correctly-positioned-inside-a-dialog-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions src/__screenshot_tests__/dialog-screenshot-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,26 @@ test('Select options are correctly positioned inside a dialog', async () => {
const image = await page.screenshot({fullPage: true});
expect(image).toMatchImageSnapshot();
});

test('Dialog optional elements are not displayed if not provided', async () => {
const page = await openStoryPage({
id: 'components-modals--dialog',
device: 'DESKTOP',
args: {
message: 'Message',
title: '',
subtitle: '',
onAccept: false,
onCancel: false,
link: false,
icon: false,
extra: false,
},
});

await (await screen.findByRole('button', {name: 'Open'})).click();
await screen.findByRole('dialog');

const image = await page.screenshot({fullPage: true});
expect(image).toMatchImageSnapshot();
});
66 changes: 53 additions & 13 deletions src/__stories__/dialog-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,35 @@ export const Confirm: StoryComponent<{destructive: boolean}> = ({destructive}) =
);
};

export const Dialog: StoryComponent = () => {
Confirm.args = {
destructive: false,
};

type DialogArgs = {
title: string;
subtitle: string;
message: string;
acceptText: string;
cancelText: string;
onAccept: boolean;
onCancel: boolean;
link: boolean;
icon: boolean;
extra: boolean;
};

export const Dialog: StoryComponent<DialogArgs> = ({
onAccept,
onCancel,
link,
icon,
extra,
title,
subtitle,
message,
acceptText,
cancelText,
}) => {
const {dialog} = useDialog();
return (
<ButtonLayout
Expand All @@ -72,11 +100,12 @@ export const Dialog: StoryComponent = () => {
aria-haspopup="dialog"
onPress={() =>
dialog({
title: 'Title',
subtitle: 'Subtitle',
message: 'Message',
acceptText: 'Accept terms and conditions',
extra: (
title,
subtitle,
message,
acceptText,
cancelText,
extra: extra ? (
<Stack space={16}>
<Text1 regular>Extra content</Text1>
<Select
Expand All @@ -89,11 +118,13 @@ export const Dialog: StoryComponent = () => {
]}
/>
</Stack>
),
link: <ButtonLink href="https://google.com">Link</ButtonLink>,
icon: <IconInformationUserLight color={skinVars.colors.brand} />,
onAccept: () => console.log('Accepted'),
onCancel: () => console.log('Canceled'),
) : undefined,
link: link ? <ButtonLink href="https://google.com">Link</ButtonLink> : undefined,
icon: icon ? (
<IconInformationUserLight color={skinVars.colors.brand} />
) : undefined,
onAccept: onAccept ? () => console.log('Accepted') : undefined,
onCancel: onCancel ? () => console.log('Canceled') : undefined,
})
}
>
Expand All @@ -104,6 +135,15 @@ export const Dialog: StoryComponent = () => {
);
};

Confirm.args = {
destructive: false,
Dialog.args = {
title: 'Title',
subtitle: 'Subtitle',
message: 'Message',
acceptText: 'Accept terms and conditions',
cancelText: 'Cancel',
onAccept: true,
onCancel: true,
link: true,
icon: true,
extra: true,
};
78 changes: 48 additions & 30 deletions src/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,22 +58,26 @@ export type DialogProps = ExclusifyUnion<AlertProps | ConfirmProps | ExtendedDia
type: 'dialog' | 'alert' | 'confirm';
};

const Dialog: React.FC<DialogProps> = (props) => {
type InternalDialogProps = DialogProps & {showCancelButton: boolean; showAcceptButton: boolean};

const InternalDialog: React.FC<InternalDialogProps> = (props) => {
const {texts} = useTheme();
const {
className,
title,
message,
icon,
extra,
showCancelButton,
showAcceptButton,
cancelText = texts.dialogCancelButton,
acceptText = texts.dialogAcceptButton,
onCancel: handleCancel,
onAccept: handleAccept,
destructive = false,
} = props;
const isDialog = props.type === 'dialog';
const showCancelButton = props.type === 'confirm' || (isDialog && !!handleCancel);
const showActions = (isDialog && !!props.link) || showAcceptButton || showCancelButton;

const acceptButtonProps = {
onPress: handleAccept || (() => {}),
Expand Down Expand Up @@ -116,33 +120,37 @@ const Dialog: React.FC<DialogProps> = (props) => {
</Stack>
</div>

<div className={styles.dialogActions}>
<ButtonLayout
link={isDialog ? props.link : undefined}
primaryButton={
destructive ? (
<ButtonDanger
tabIndex={1} // eslint-disable-line jsx-a11y/tabindex-no-positive
{...acceptButtonProps}
/>
) : (
<ButtonPrimary tabIndex={1} {...acceptButtonProps} /> // eslint-disable-line jsx-a11y/tabindex-no-positive
)
}
secondaryButton={
showCancelButton ? (
<ButtonSecondary
tabIndex={2} // eslint-disable-line jsx-a11y/tabindex-no-positive
onPress={handleCancel || (() => {})}
// @deprecated - testid should be removed but many webapp tests depend on this
dataAttributes={{testid: 'dialog-cancel-button'}}
>
{cancelText}
</ButtonSecondary>
) : undefined
}
/>
</div>
{showActions && (
<div className={styles.dialogActions}>
<ButtonLayout
link={isDialog ? props.link : undefined}
primaryButton={
showAcceptButton ? (
destructive ? (
<ButtonDanger
tabIndex={1} // eslint-disable-line jsx-a11y/tabindex-no-positive
{...acceptButtonProps}
/>
) : (
<ButtonPrimary tabIndex={1} {...acceptButtonProps} /> // eslint-disable-line jsx-a11y/tabindex-no-positive
)
) : undefined
}
secondaryButton={
showCancelButton ? (
<ButtonSecondary
tabIndex={2} // eslint-disable-line jsx-a11y/tabindex-no-positive
onPress={handleCancel || (() => {})}
// @deprecated - testid should be removed but many webapp tests depend on this
dataAttributes={{testid: 'dialog-cancel-button'}}
>
{cancelText}
</ButtonSecondary>
) : undefined
}
/>
</div>
)}
</div>
);
};
Expand Down Expand Up @@ -384,7 +392,17 @@ const ModalDialog = (props: ModalDialogProps): JSX.Element => {
/>
</div>
)}
<Dialog {...dialogProps} onCancel={handleCancel} onAccept={handleAccept} />
<InternalDialog
{...dialogProps}
// "alert" and "confirm" always show the accept button, "dialog" only when the callback is provided
showAcceptButton={props.type !== 'dialog' || !!props.onAccept}
// "alert" never shows the cancel button, "confirm" always shows it, "dialog" only when the callback is provided
showCancelButton={
props.type === 'confirm' || (props.type === 'dialog' && !!props.onCancel)
}
onCancel={handleCancel}
onAccept={handleAccept}
/>
</div>
</div>
</div>
Expand Down

1 comment on commit 1134b4a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-8t24wu0ow-flows-projects-65bb050e.vercel.app

Built with commit 1134b4a.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.