Skip to content

Commit 6e32261

Browse files
OlegDubrovskyivalorkin
OlegDubrovskyi
authored and
valorkin
committed
feat(doc): added docs for modals component (#4679)
1 parent 7c7c515 commit 6e32261

18 files changed

+495
-0
lines changed

‎docs/spec/index.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
**Use-cases for each NGX-Bootstrap component show examples of using it by user**
2+
3+
## Accordion
4+
5+
## Alerts
6+
7+
8+
## Buttons
9+
10+
11+
## Carousel
12+
13+
## Collapse
14+
15+
## Datepicker
16+
17+
## Dropdowns
18+
19+
## Modals
20+
21+
[Service examples. Template](modals/modals.service-examples.template.use-case.md)
22+
23+
[Service examples. Component](modals/modals.service-examples.component.use-case.md)
24+
25+
[Service examples. Nested](modals/modals.service-examples.nested.use-case.md)
26+
27+
[Service examples. Scrolling long content](modals/modals.service-examples.scrolling-long-content.use-case.md)
28+
29+
[Service examples. Events](modals/modals.service-examples.events.use-case.md)
30+
31+
[Service examples. Confirm Window](modals/modals.service-examples.confirm-window.use-case.md)
32+
33+
[Service examples. Сustom css class](modals/modals.service-examples.custom-css-class.use-case.md)
34+
35+
[Service examples. Animation option](modals/modals.service-examples.animation-option.use-case.md)
36+
37+
[Service examples. Esc closing option](modals/modals.service-examples.esc-closing-option.use-case.md)
38+
39+
[Service examples. Modal window with tooltip and popover](modals/modals.service-examples.tooltip-and-popover.use-case.md)
40+
41+
[Service examples. Backdrop options](modals/modals.service-examples.backdrop-options.use-case.md)
42+
43+
[Directive examples. Static modal](modals/modals.directive-examples.static-modal.use-cases.md)
44+
45+
[Directive examples. Optional sizes](modals/modals.directive-examples.optional-sizes.md)
46+
47+
[Directive examples. Child modal](modals/modals.directive-examples.child-modal.use-case.md)
48+
49+
[Directive examples. Nested modals](modals/modals.directive-examples.nested-modals.use-cases.md)
50+
51+
[Directive examples. Modal events](modals/modals.directive-examples.modal-events.use-cases.md)
52+
53+
[Directive examples. Auto shown modal](modals/modals.directive-examples.auto-shown-modal.md)
54+
55+
56+
## Pagination
57+
58+
## Popover
59+
60+
## Progressbar
61+
62+
## Rating
63+
64+
## Sortable
65+
66+
## Tabs
67+
68+
## Timepicker
69+
70+
## Tooltip
71+
72+
## Typeahead

‎docs/spec/modals/modals.directive-examples.auto-shown-modal.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
7.17: Modals service auto shown modal
2+
=================================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user auto shown modal functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Auto shown modal" sub-menu
15+
3. After click on "Render auto-shown modal" button, then modal popup is opened
16+
4. When user closes modal popup by click on the cross, modal popup is removed from the DOM
17+
18+
Variations:
19+
----------
20+
21+
2*. User scrolls to "Auto shown modal"
22+

‎docs/spec/modals/modals.directive-examples.child-modal.use-case.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
7.13: Modals directive examples child modal
2+
===============================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user Child modal functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Child modal" sub-menu
15+
3. After click on "Open child modal" button, child modal popup is opened
16+
4. When user closes modal popup by click on the cross, modal popup closed
17+
18+
Variations:
19+
----------
20+
21+
2*. User scrolls to "Child modal"

‎docs/spec/modals/modals.directive-examples.modal-events.use-cases.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
7.16: Modals service modal events
2+
=================================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user modals events functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Modal events" sub-menu
15+
3. When user clicks on "Open modal" button, modal popup is opened, should be messages "event onShow is fired" and "event onShown is fired"
16+
4. When user closes modal popup by click on the cross, should be messages "event onHide is fired" and "event onHidden is fired"
17+
18+
Variations:
19+
----------
20+
21+
2*. User scrolls to "Modals events"
22+
4*. When user closes modal popup by click on backdrop, should be messages "event onHide is fired, dismissed by backdrop-click"
23+
and "event onHidden is fired, dismissed by backdrop-click"
24+
4**. When user closes modal popup by click ESC, should be messages "event onHide is fired, dismissed by esc"
25+
and "event onHidden is fired, dismissed by esc"

‎docs/spec/modals/modals.directive-examples.nested-modals.use-cases.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
7.14: Modals directive examples nested modals
2+
===============================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user Child modal functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Nested modals" sub-menu
15+
3. After click on "Open parent modal" button, modal popup is opened and user sees "Open second modal" button
16+
4. When user clicks on "Open second modal" button, then second modal is opened, user sees
17+
"Open third modal button", backdrop is changed
18+
5. When user clicks on "Open third modal button" button, then second modal is opened, backdrop is changed
19+
6. When user closes third modal popup by click on the cross, then third modal popup is closed, backdrop is changed
20+
7. When user closes second modal popup by click on the cross, then second modal popup is closed, backdrop is changed
21+
8. When user closes first modal popup by click on the cross, then first modal popup is closed, backdrop is closed
22+
23+
Variations:
24+
----------
25+
26+
2*. User scrolls to "Nested modals"
27+
6*. When user closes third modal popup by backdrop click, then third modal popup is closed, backdrop is changed
28+
6**. When user closes third modal popup by click ESC , then third modal popup is closed, backdrop is changed
29+
30+
7*. When user closes second modal popup by backdrop click, then second modal popup is closed, backdrop is changed
31+
7**. When user closes second modal popup by click ESC , then second modal popup is closed, backdrop is changed
32+
33+
8*. When user closes first modal popup by backdrop click, then first modal popup is closed, backdrop is changed
34+
8**. When user closes first modal popup by click ESC , then first modal popup is closed, backdrop is changed

‎docs/spec/modals/modals.directive-examples.optional-sizes.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
7.13: Modals directive examples optional sizes
2+
===============================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user optional sizes functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Optional sizes" sub-menu
15+
3. After click on "Large modal" button, large modal popup is opened
16+
4. When user closes large modal popup by click on the cross, modal popup closed
17+
5. After click on "Small modal" button, small modal popup is opened
18+
6. When user closes modal popup by click on the cross, modal popup is closed
19+
20+
Variations:
21+
----------
22+
23+
2*. User scrolls to "Static modal"

‎docs/spec/modals/modals.directive-examples.static-modal.use-cases.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
7.12: Modals directive examples static modal
2+
============================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user static modal functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Static modal" sub-menu
15+
4. After click on "Static modal" button, modal popup is opened
16+
5. When user closes modal popup by backdrop click, modal popup is still opened
17+
6. When user closes modal popup by click on the cross, modal popup is closed
18+
19+
Variations:
20+
----------
21+
22+
2*. User scrolls to "Static modal"

‎docs/spec/modals/modals.service-examples.animation-option.use-case.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
7.8: Modals service examples animation option
2+
=================================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user animation option functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Animation option" sub-menu
15+
3. When user clicks on "Enable animation" button, title of button should change to "Disable animation"
16+
4. And after that click on "Open modal with custom css class" button, modal popup is opened with animations effects
17+
5. When user closes modal popup by click on the cross, modal popup is closed
18+
6. When user clicks on "Disable animation" button, title of button change to "Enable animation"
19+
7. And after that click on "Open modal with custom css class" button, modal popup is opened without animations effects
20+
21+
Variations:
22+
----------
23+
24+
2*. User scrolls to "Animation option"

‎docs/spec/modals/modals.service-examples.backdrop-options.use-case.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
7.11: Modals service examples backdrop options
2+
=============================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user modal window with tooltip and popover functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens "Modals" demo page
14+
2. User clicks on "Backdrop options " sub-menu
15+
3. When user clicks on "Enable backdrop" button, title of button should change to "Disable backdrop"
16+
4. And after that click on "Open modal" button, modal popup is opened, backdrop is opened
17+
5. When user clicks on "Disable backdrop" button, title of button should change to "Enable backdrop"
18+
6. And after that click on "Open modal" button, modal popup is opened, backdrop is closed
19+
7. When user clicks on "Disable backdrop click" button, title of button should change to "Enable backdrop click"
20+
8. And after that open modal popup and close by click on backdrop, modal popup is opened
21+
9. When user clicks on "Enable backdrop click" button, title of button should change to "Disable backdrop click"
22+
10. And after that open modal popup and close by click on backdrop, modal popup is closed
23+
24+
Variations:
25+
----------
26+
27+
2*. User scrolls to "Modal window with tooltip and popover"

‎docs/spec/modals/modals.service-examples.component.use-case.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
7.2: Modals service examples component
2+
===================================
3+
4+
**Primary Actor**: User
5+
6+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
7+
8+
**Goal**: Show user modal component functionality
9+
10+
Main success scenario:
11+
----------------------
12+
13+
1. User opens Modals demo page
14+
2. User clicks on Component sub-menu
15+
3. When user clicks on "Create template modal" button, modal popup is opened like a component, backdrop is enabled, "Close" button should be present
16+
5. When user closes modal popup by click on the cross, modal popup is closed and backdrop is inactive
17+
18+
Variations:
19+
----------
20+
21+
2*. User scrolls to "Component"
22+
5*. When user closes modal popup by click on backdrop, modal popup is closed and backdrop is disabled
23+
5**. When user closes modal popup by click ESC, modal popup is closed and backdrop is disabled
24+
5***. When user closes modal popup by click on Close button, modal popup is closed and backdrop is disabled

0 commit comments

Comments
 (0)