Skip to content

Commit 1e7c03a

Browse files
Side drawer fucntionality (#104)
1 parent af868df commit 1e7c03a

File tree

4 files changed

+53
-4
lines changed

4 files changed

+53
-4
lines changed

components/modal/docs/Overview.mdx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,4 +183,42 @@ return (
183183
)
184184
```
185185

186+
</Documenter>
187+
188+
### Side Drawer Modal
189+
190+
<Documenter>
191+
192+
```preview
193+
return (
194+
<Modal type="SIDE_DRAWER" trigger="Open Modal" title="Modal Title" actions={close => <Button onClick={close}>Done</Button>}>
195+
<p>
196+
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
197+
</p>
198+
</Modal>
199+
)
200+
```
201+
202+
</Documenter>
203+
204+
### Side Drawer Modal - Without Title
205+
206+
<Documenter>
207+
208+
```preview
209+
return (
210+
<Modal type="SIDE_DRAWER" trigger="Open Modal" actions={close => <Button onClick={close}>Done</Button>}>
211+
<p>
212+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed, accusantium odit. Molestias impedit repellendus possimus quibusdam a esse, quisquam odio nihil ullam voluptatibus adipisci nostrum? Sed consequuntur laboriosam porro ducimus!
213+
Dolores, rerum, a qui labore earum ipsa consectetur nam, harum ex iure vero dignissimos hic aperiam facere maxime tenetur nobis inventore tempore deserunt. Reprehenderit, alias earum debitis nostrum pariatur corrupti.
214+
Amet delectus harum aut, facere rem assumenda porro ratione optio laboriosam veritatis officia voluptates eos asperiores quaerat non, totam quis, error vitae libero. Distinctio assumenda labore consectetur optio blanditiis voluptas!
215+
Cupiditate quod consequatur quaerat ullam aliquid ex alias minus ipsa, culpa dignissimos sunt rem, quae quos officiis saepe adipisci molestiae quisquam nemo laborum, ratione quo laudantium odit recusandae distinctio. Quisquam?
216+
Facere rem accusamus, temporibus facilis dolor harum neque, repellendus obcaecati delectus nulla error, saepe totam illum aut sint fugiat quia commodi amet. Sunt in quos tempore ex corrupti qui mollitia.
217+
</p>
218+
219+
<Image src="//picsum.photos/200" height={200} width={200} />
220+
</Modal>
221+
)
222+
```
223+
186224
</Documenter>

components/modal/src/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export const MODAL_TYPE = {
2+
SIDE_DRAWER: 'SIDE_DRAWER',
23
MOBILE_DRAWER: 'MOBILE_DRAWER',
34
DESKTOP: 'DESKTOP',
45
}

components/modal/src/modal.module.scss

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,21 @@
2828
position: relative;
2929
}
3030

31+
.side_drawer_body{
32+
position: relative;
33+
position: fixed;
34+
right: 0;
35+
left: 50%;
36+
height: 100vh;
37+
background: white;
38+
}
39+
3140
.close {
3241
position: absolute;
33-
top: negative(size('2x'));
34-
right: negative(size('4x'));
42+
top: (size('7x'));
43+
right: (size('7x'));
3544
padding-right: 0;
36-
color: text-color('light');
45+
color: color('gray-dark-base');
3746

3847
svg {
3948
width: 24px;

components/modal/src/modal.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,8 @@ export default class Modal extends PureComponent<Props> {
119119
/>
120120
<div
121121
className={classnames('body', {
122-
['drawer-body']: type === MODAL_TYPE.MOBILE_DRAWER,
122+
'drawer-body': type === MODAL_TYPE.MOBILE_DRAWER,
123+
side_drawer_body: type === MODAL_TYPE.SIDE_DRAWER,
123124
})}
124125
>
125126
{render({

0 commit comments

Comments
 (0)