Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ Added contentMaxHeight prop to Dialog #829

Merged
merged 3 commits into from
Oct 22, 2024
Merged

✨ Added contentMaxHeight prop to Dialog #829

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec2e18e
:sparkles: Added contentMaxHeight prop to Dialog
mariush2 Oct 22, 2024
cf0d027
:speech_balloon: Update dialog title in story
mariush2 Oct 22, 2024
89e2f64
:bookmark: 8.10.3
mariush2 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions src/molecules/Dialog/Dialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,3 +223,52 @@ export const ColorVariations: Story = {
],
},
};

export const LongDialogWithContentMaxHeight: Story = {
args: {
title: 'Left and right dialog!',
mariush2 marked this conversation as resolved.
Show resolved Hide resolved
children: (
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<p>一</p>
<p>二</p>
<p>三</p>
<p>四</p>
<p>五</p>
<p>六</p>
<p>七</p>
<p>八</p>
<p>九</p>
<p>十</p>
<p>十一</p>
<p>十二</p>
<p>十三</p>
<p>十四</p>
<p>十五</p>
<p>十六</p>
<p>十七</p>
<p>十八</p>
<p>十九</p>
<p>ニ十</p>
</div>
),
contentMaxHeight: '400px',
actions: [
{
text: 'Cancel',
onClick: () => console.log('clicked'),
variant: 'ghost',
},
{
text: 'Okay',
onClick: () => console.log('clicked'),
variant: 'contained',
},
],
},
};
1 change: 1 addition & 0 deletions src/molecules/Dialog/Dialog.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const DialogContent = styled(
EDSDialog.CustomContent
)<DialogContentProps>`
min-height: unset;
overflow: auto;
${({ $withContentPadding }) => {
if ($withContentPadding) {
return css`
Expand Down
21 changes: 21 additions & 0 deletions src/molecules/Dialog/Dialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,3 +318,24 @@ test('Custom children works as expected', () => {
expect(element).toBeInTheDocument();
expect(element).toHaveTextContent(description);
});

test('Content max height prop works as expected', () => {
const handleOnClose = vi.fn();
const title = faker.airline.airplane().name;
const description = faker.lorem.paragraph();
const contentMaxHeight = `${faker.number.int({ min: 10, max: 1000 })}px`;

render(
<Dialog
open
title={title}
onClose={handleOnClose}
contentMaxHeight={contentMaxHeight}
>
{description}
</Dialog>
);

const contentWrapper = screen.getByText(description).parentElement;
expect(contentWrapper).toHaveStyle(`max-height: ${contentMaxHeight}`);
});
8 changes: 7 additions & 1 deletion src/molecules/Dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
actions?: DialogAction[];
withContentPadding?: boolean;
withBorders?: boolean;
contentMaxHeight?: string;
}

/**
Expand All @@ -54,6 +55,7 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
* @param actions - Dialog actions, { position: "right" is default }
* @param withContentPadding - Defaults to true
* @param withBorders - Defaults to false
* @param contentMaxHeight - Defaults to '60vh'
* Also inherits props from EDS dialog
*/
export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
Expand All @@ -65,6 +67,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
actions,
withContentPadding = true,
withBorders = false,
contentMaxHeight = '60vh',
...otherProps
},
ref
Expand Down Expand Up @@ -108,7 +111,10 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
</DialogTitle>
<DialogContent
$withContentPadding={withContentPadding}
style={{ width: width ? `${width}px` : undefined }}
style={{
width: width ? `${width}px` : undefined,
maxHeight: contentMaxHeight,
}}
>
{childrenElements}
</DialogContent>
Expand Down