Skip to content

Commit

Permalink
Merge pull request #511 from dnbexperience/rc/v7
Browse files Browse the repository at this point in the history 
release of v7.0.0-beta.9
  • Loading branch information
@tujoworker
tujoworker authored Apr 17, 2020
2 parents 3bcd713 + 2f7a90a commit 2407ccd
Show file tree
Hide file tree
Showing 13 changed files with 864 additions and 500 deletions.
11 changes: 11 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/drawer.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: 'Drawer'
description: 'The Drawer component is a part of (mode) the Modal component because they have many similarities.'
# order: 11
# showTabs: true
draft: true
---

# Drawer

The Drawer component is a part of (mode) the [Modal component](/uilib/components/modal) because they have many similarities.
4 changes: 3 additions & 1 deletion packages/dnb-design-system-portal/src/docs/uilib/components/modal.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
---
title: 'Modal'
title: 'Modal / Drawer'
description: 'Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction'
order: 11
showTabs: true
# redirect_from:
# - /uilib/components/drawer
---

import ModalInfo from 'Pages/uilib/components/modal/info'
Expand Down
58 changes: 46 additions & 12 deletions packages/dnb-design-system-portal/src/docs/uilib/components/modal/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ class Example extends React.PureComponent {
title="Triggered by a icon button"
data-dnb-test="modal-trigger-default"
>
{/* @jsx */ `
{
/* @jsx */ `
<Modal
title="Modal Title"
trigger_title="Click me"
Expand All @@ -24,40 +25,68 @@ class Example extends React.PureComponent {
</Section>
)}
/>
`}
`
}
</ComponentBox>
<ComponentBox
title="Drawer mode"
description="With placement on the left side."
>
{
/* @jsx */ `
<Modal
mode="drawer"
container_placement="left"
align_content="center"
title="Drawer title"
trigger_text="Open Drawer"
>
<P>This is the left aligned Drawer content.</P>
</Modal>
`
}
</ComponentBox>
<ComponentBox title="Fullscreen Modal, triggered by a tertiary button">
{/* @jsx */ `
{
/* @jsx */ `
<Modal
title="Modal Title"
fullscreen="true"
trigger_variant="tertiary"
trigger_text="Click me"
trigger_icon="bell"
modal_content="This is the modal text. Triggered by a tertiary button."
/>
`}
`
}
</ComponentBox>
<ComponentBox title="Hide the Close Button and Prevent Close for 1sec">
{/* @jsx */ `
{
/* @jsx */ `
<Modal
title="1s close delay"
trigger_text="Click me"
prevent_close="true"
hide_close_button="true"
on_open={(e) => console.log('on_open', e)}
on_close={(e) => console.log('on_close', e)}
on_close_prevent={({ close }) => setTimeout(close, 1e3)}
on_close_prevent={({ close }) => {
const timeout = setTimeout(close, 1e3)
return () => clearTimeout(timeout) // clear timeout on unmount
}}
>
<P>This is a Modal Window with no close button.</P>
<P>Click outside me, and I will be closed within 1 second.</P>
<Section spacing style_type="divider">
<Input label="Focus:">Focus me with Tab key</Input>
</Section>
</Modal>
`}
`
}
</ComponentBox>
<ComponentBox title="Triggered by custom trigger button">
{/* @jsx */ `
{
/* @jsx */ `
<Button
id="custom-triggerer"
text="Custom trigger Button"
Expand All @@ -74,22 +103,27 @@ class Example extends React.PureComponent {
</Modal>
)}
/>
`}
`
}
</ComponentBox>
<ComponentBox title="Close Modal by handlers">
{/* @jsx */ `
{
/* @jsx */ `
<Modal
title="Auto close"
trigger_text="Click me"
align_content="center"
close_modal={close => {
setTimeout(close, 3e3)
const timeout = setTimeout(close, 3e3)
return () => clearTimeout(timeout) // clear timeout on unmount
}}
>
<Section spacing style_type="emerald-green">
<P>This Modal will close in 3 seconds.</P>
</Section>
</Modal>
`}
`
}
</ComponentBox>
</React.Fragment>
)
Expand Down
48 changes: 31 additions & 17 deletions packages/dnb-design-system-portal/src/docs/uilib/components/modal/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,37 @@ showTabs: true

## Modal Properties

| Properties | Description |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title` | _(optional)_ the modal title. Displays on the very top of the content. |
| `labelled_by` | _(optional)_ the ID of the trigger component, describing the modal content. Defaults to the internal `trigger`, so make sure You define the `trigger_title`! |
| `modal_content` | _(optional)_ the content which will appear when triggering the modal. |
| `content_id` | _(optional)_ defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal content wrapper. |
| `min_width` | _(optional)_ the minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don't break responsiveness. Defaults to `auto`. |
| `max_width` | _(optional)_ the maximum Modal content width, defined by a CSS width value like `20em`. Defaults to `60rem`. |
| `fullscreen` | _(optional)_ if set to `true` then the modal content will be shown as fullscreen, without showing the original content behind. Defaults to `false`. |
| `open_state` | _(optional)_ use this prop to control the open/close state by setting either: `opened` or `closed` |
| `open_delay` | _(optional)_ forces the modal to delay the opening. The delay is given in `ms`. |
| `close_title` | _(optional)_ the title of the close button. Defaults to _Close Modal Window_ |
| `hide_close_button` | _(optional)_ if truthy, the close button will now be shown |
| `prevent_close` | _(optional)_ if set to `true` (boolean or string), then the user can't close the modal. |
| `prevent_core_style` | _(optional)_ by default the modal content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior. |
| `open_modal` | _(optional)_ set a function to call the callback function, once the modal should open: `open_modal={(open) => open()}` |
| `close_modal` | _(optional)_ set a function to call the callback function, once the modal should close: `close_modal={(close) => close()}` |
| Properties | Description |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title` | _(optional)_ the modal title. Displays on the very top of the content. |
| `mode` | _(optional)_ the modal mode. Can be set to `drawer`. Defaults to `modal`. |
| `labelled_by` | _(optional)_ the ID of the trigger component, describing the modal content. Defaults to the internal `trigger`, so make sure You define the `trigger_title`! |
| `modal_content` | _(optional)_ the content which will appear when triggering the modal. |
| `content_id` | _(optional)_ defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal content wrapper. |
| `min_width` | _(optional)_ the minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don't break responsiveness. Defaults to `auto`. |
| `max_width` | _(optional)_ the maximum Modal content width, defined by a CSS width value like `20em`. Defaults to `60rem`. |
| `fullscreen` | _(optional)_ if set to `true` then the modal content will be shown as fullscreen, without showing the original content behind. Defaults to `false`. |
| `align_content` | _(optional)_ Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`. |
| `container_placement` | _(optional)_ For `drawer` mode only. Defines the placement on what side the Drawer should be opened. Can be set to `left` or `right`. Defaults to `right`. |
| `open_state` | _(optional)_ use this prop to control the open/close state by setting either: `opened` or `closed` |
| `open_delay` | _(optional)_ forces the modal to delay the opening. The delay is given in `ms`. |
| `close_title` | _(optional)_ the title of the close button. Defaults to _Close Modal Window_. |
| `hide_close_button` | _(optional)_ if truthy, the close button will now be shown. |
| `no_animation` | _(optional)_ if set to `true`, no open/close animation will be shown. Defualts to false. |
| `prevent_close` | _(optional)_ if set to `true` (boolean or string), then the user can't close the modal. |
| `prevent_core_style` | _(optional)_ by default the modal content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior. |
| `open_modal` | _(optional)_ set a function to call the callback function, once the modal should open: `open_modal={(open) => open()}` |
| `close_modal` | _(optional)_ set a function to call the callback function, once the modal should close: `close_modal={(close) => close()}` |

### Drawer sizes

The Drawer is responsive with the following properties:

```css
--modal-drawer-width: 40vw;
--modal-drawer-min-width: 25rem;
--modal-drawer-max-width: 40rem;
```

## Trigger Properties

Expand Down
Loading

0 comments on commit 2407ccd

Please sign in to comment.