Skip to content

Commit 9b530d8

Browse files
amjeamje
committed
feat(Dialog): update layout
1 parent 1d4fe5c commit 9b530d8

File tree

11 files changed

+254
-190
lines changed

11 files changed

+254
-190
lines changed

‎src/components/Dialog/ButtonClose/ButtonClose.scss‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1-
@use '../../variables';
1+
@use '../variables';
22

3-
$block: '.#{variables.$ns}dialog-btn-close';
4-
5-
#{$block} {
3+
#{variables.$closeBtnBlock} {
64
position: absolute;
7-
// Offset from icon to the edges should be 20px (36px is Button's size, 8px is half of Button's padding)
8-
// Icon size = 20px
9-
// Button size = 36px
10-
// Offset = 20 - ((36 - 20) / 2) = 14
11-
inset-block-start: 14px;
12-
inset-inline-end: 14px;
5+
inset-block-start: 12px;
6+
inset-inline-end: 16px;
137
z-index: 1;
148
}

‎src/components/Dialog/Dialog.scss‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
@use '../variables';
1+
@use './variables';
22

3-
$block: '.#{variables.$ns}dialog';
4-
5-
#{$block} {
3+
#{variables.$block} {
64
--_--side-padding: 32px;
5+
--_--block-start-padding: 20px;
6+
--_--block-end-padding: 24px;
77
--_--close-button-space: 0px;
88

99
position: relative;
1010
display: flex;
1111
flex-direction: column;
1212
width: var(--g-dialog-width, var(--_--width));
13+
padding-block: var(--_--block-start-padding) var(--_--block-end-padding);
1314

1415
&_has-scroll {
1516
overflow-y: auto;
@@ -32,7 +33,15 @@ $block: '.#{variables.$ns}dialog';
3233
}
3334
}
3435

35-
&_has-close {
36-
--_--close-button-space: 24px;
36+
&:has(#{variables.$closeBtnBlock}) {
37+
--_--close-button-space: 26px;
38+
}
39+
40+
&:has(#{variables.$headerBlock}) {
41+
padding-block-start: 0;
42+
}
43+
44+
&:has(#{variables.$footerBlock}) {
45+
padding-block-end: 0;
3746
}
3847
}

‎src/components/Dialog/Dialog.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -138,16 +138,7 @@ export function Dialog({
138138
qa={qa}
139139
disableHeightTransition
140140
>
141-
<div
142-
className={b(
143-
{
144-
size,
145-
'has-close': hasCloseButton,
146-
'has-scroll': contentOverflow === 'auto',
147-
},
148-
className,
149-
)}
150-
>
141+
<div className={b({size, 'has-scroll': contentOverflow === 'auto'}, className)}>
151142
<DialogPrivateContext.Provider value={privateContextProps}>
152143
{children}
153144
</DialogPrivateContext.Provider>

‎src/components/Dialog/DialogBody/DialogBody.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
@use '../../variables';
1+
@use '../variables';
22

3-
$block: '.#{variables.$ns}dialog-body';
4-
5-
#{$block} {
6-
padding: 10px var(--_--side-padding);
3+
#{variables.$bodyBlock} {
4+
min-height: 24px;
5+
padding: 4px var(--_--side-padding);
76
flex: 1 1 auto;
87
overflow: auto;
98
transition: height 0.35s ease-in-out;

‎src/components/Dialog/DialogDivider/DialogDivider.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
@use '../../variables';
1+
@use '../variables';
22

3-
$block: '.#{variables.$ns}dialog-divider';
4-
5-
#{$block} {
3+
#{variables.$dividerBlock} {
64
border-block-start: 1px solid var(--g-color-line-generic);
75
margin: 0 calc(-1 * var(--_--side-padding));
86
}

‎src/components/Dialog/DialogFooter/DialogFooter.scss‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
@use '../../variables';
1+
@use '../variables';
22

3-
$block: '.#{variables.$ns}dialog-footer';
4-
5-
#{$block} {
6-
padding: 28px var(--_--side-padding);
3+
#{variables.$footerBlock} {
4+
padding: 24px var(--_--side-padding) 28px;
75
display: flex;
86
align-items: center;
97

108
&__bts-wrapper {
119
display: flex;
12-
gap: 10px;
10+
gap: var(--g-spacing-2);
1311
}
1412

1513
&__children {

‎src/components/Dialog/DialogHeader/DialogHeader.scss‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
@use '../../variables';
1+
@use '../variables';
22
@use '../../../../styles/mixins';
33

4-
$block: '.#{variables.$ns}dialog-header';
5-
6-
#{$block} {
7-
padding-block: 20px 10px;
4+
#{variables.$headerBlock} {
5+
min-height: 36px;
6+
padding-block: 12px 8px;
87
padding-inline: var(--_--side-padding)
9-
calc(
10-
var(--_--side-padding) + var(--_--close-button-space) * var(--g-flow-is-ltr) +
11-
var(--_--close-button-space) * var(--g-flow-is-rtl)
12-
);
8+
calc(var(--_--side-padding) + var(--_--close-button-space));
139
line-height: 24px;
1410
display: flex;
1511
align-items: center;

‎src/components/Dialog/__stories__/Dialog.stories.tsx‎

Lines changed: 93 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
import {faker} from '@faker-js/faker/locale/en';
4-
import type {Meta, StoryFn} from '@storybook/react-webpack5';
4+
import type {Meta, StoryObj} from '@storybook/react-webpack5';
55

66
import {useUniqId} from '../../../hooks';
77
import {Button} from '../../Button';
@@ -10,6 +10,7 @@ import {Dialog} from '../Dialog';
1010
import type {DialogProps} from '../Dialog';
1111

1212
import {DialogShowcase} from './DialogShowcase';
13+
import {DynamicHeightStory} from './DynamicHeightStory';
1314

1415
export default {
1516
title: 'Components/Overlays/Dialog',
@@ -22,17 +23,31 @@ export default {
2223
type: 'boolean',
2324
},
2425
},
25-
} as Meta<DialogProps>;
26+
} as Meta;
27+
28+
type Story = StoryObj<typeof Dialog>;
2629

2730
const largeTextLines = Array.from({length: 30}, () => faker.lorem.sentences());
2831

32+
interface DialogComponentProps {
33+
buttonText: string;
34+
content: React.ReactNode;
35+
showError?: boolean;
36+
withHeader?: boolean;
37+
withFooter?: boolean;
38+
withEmptyBody?: boolean;
39+
}
40+
2941
function DialogComponent({
3042
buttonText,
3143
content,
32-
showError,
44+
showError = false,
45+
withHeader = true,
46+
withFooter = true,
47+
withEmptyBody = false,
3348
...args
34-
}: DialogProps & {buttonText: string; content: React.ReactNode; showError: boolean}) {
35-
const titleId = useUniqId();
49+
}: DialogProps & DialogComponentProps) {
50+
const headerId = useUniqId();
3651
const [open, setOpen] = React.useState(false);
3752
return (
3853
<React.Fragment>
@@ -45,55 +60,86 @@ function DialogComponent({
4560
onEnterKeyDown={() => {
4661
alert('onEnterKeyDown');
4762
}}
48-
aria-labelledby={titleId}
63+
aria-labelledby={withHeader ? headerId : undefined}
4964
>
50-
<Dialog.Header caption="Header" id={titleId} />
65+
{withHeader && <Dialog.Header caption="Header" id={headerId} />}
5166
<Dialog.Body>
52-
<div
53-
style={{
54-
background: 'var(--g-color-base-generic)',
55-
border: '1px var(--g-color-line-generic) dashed',
56-
borderRadius: 5,
57-
padding: 10,
58-
display: 'flex',
59-
flexDirection: 'column',
60-
alignItems: 'center',
61-
justifyContent: 'center',
62-
minHeight: 60,
63-
}}
64-
>
65-
{content}
66-
</div>
67+
{withEmptyBody ? null : (
68+
<div
69+
style={{
70+
background: 'var(--g-color-base-generic)',
71+
border: '1px var(--g-color-line-generic) dashed',
72+
borderRadius: 5,
73+
padding: 10,
74+
display: 'flex',
75+
flexDirection: 'column',
76+
alignItems: 'center',
77+
justifyContent: 'center',
78+
minWidth: 280,
79+
minHeight: 60,
80+
}}
81+
>
82+
{content}
83+
</div>
84+
)}
6785
</Dialog.Body>
68-
<Dialog.Footer
69-
onClickButtonCancel={() => setOpen(false)}
70-
onClickButtonApply={() => alert('onApply')}
71-
textButtonApply="Apply"
72-
textButtonCancel="Cancel"
73-
showError={showError}
74-
errorText="Error text"
75-
/>
86+
{withFooter && (
87+
<Dialog.Footer
88+
onClickButtonCancel={() => setOpen(false)}
89+
onClickButtonApply={() => alert('onApply')}
90+
textButtonApply="Apply"
91+
textButtonCancel="Cancel"
92+
showError={showError}
93+
errorText="Error text"
94+
/>
95+
)}
7696
</Dialog>
7797
</React.Fragment>
7898
);
7999
}
80100

81-
export const Default: StoryFn<DialogProps & {showError: boolean}> = (args) => {
82-
return (
83-
<Flex gap={5} direction="column" wrap>
84-
<DialogComponent buttonText="Show small dialog" content="Content" {...args} />
85-
<DialogComponent
86-
buttonText="Show large dialog"
87-
content={largeTextLines.map((text, index) => (
88-
<div key={index} style={{padding: 10}}>
89-
{text}
90-
</div>
91-
))}
92-
{...args}
93-
/>
94-
</Flex>
95-
);
101+
export const Default: Story = {
102+
render: (args) => {
103+
return (
104+
<Flex gap={5} direction="column" wrap>
105+
<DialogComponent buttonText="Normal" content="Content" {...args} />
106+
<DialogComponent
107+
buttonText="Large content"
108+
content={largeTextLines.map((text, index) => (
109+
<div key={index} style={{padding: 10}}>
110+
{text}
111+
</div>
112+
))}
113+
{...args}
114+
/>
115+
<DialogComponent
116+
buttonText="Without Header"
117+
withHeader={false}
118+
content="Content"
119+
hasCloseButton={false}
120+
{...args}
121+
/>
122+
<DialogComponent
123+
buttonText="Without Footer"
124+
withFooter={false}
125+
content="Content"
126+
{...args}
127+
/>
128+
<DialogComponent
129+
buttonText="With Empty Body"
130+
withEmptyBody={true}
131+
content="Content"
132+
{...args}
133+
/>
134+
</Flex>
135+
);
136+
},
96137
};
97138

98-
const ShowcaseTemplate: StoryFn = () => <DialogShowcase />;
99-
export const Showcase = ShowcaseTemplate.bind({});
139+
export const DynamicHeight: Story = {
140+
render: (args) => <DynamicHeightStory {...args} />,
141+
};
142+
143+
export const Showcase: Story = {
144+
render: () => <DialogShowcase />,
145+
};

0 commit comments

Comments
 (0)