Skip to content

Commit 1342b24

Browse files
ludmilanesvitiyvalorkin
ludmilanesvitiy
authored and
valorkin
committed
feat(docs): add use-cases for dropdowns component (#4733)
1 parent a74d815 commit 1342b24

19 files changed

+411
-0
lines changed

‎docs/spec/dropdowns/dropdowns.examples.accessibility.use-case.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
6.18: Dropdowns Accessibility example
2+
=====================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user information about dropdown accessibility
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Accessibility sub-menu
13+
3. User see info about role="menu" widget and role and aria- attributes
14+

‎docs/spec/dropdowns/dropdowns.examples.append-to-body.use-case.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
6.10: Dropdowns Append to body example
2+
======================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to append dropdown to body
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Append to body sub-menu
13+
3. User see clickable button "Dropdown on Body"
14+
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
15+
5. When user clicks on any item, then dropdown closes
16+
6. Template src should be implemented with dropdown container="body"
17+
18+
Variations:
19+
-----------
20+
2*. User scroll to Append to body sub-menu

‎docs/spec/dropdowns/dropdowns.examples.auto-close.use-case.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
6.17: Dropdowns Auto close example
2+
==================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to use autoClose property for dropdown behaviour
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Auto close sub-menu
13+
3. User see 2 clickable buttons "Button dropdown"
14+
4. When user clicks on the first "Button dropdown", then dropdown opened and there are 3 items inside
15+
5. When user press "ESC", then this dropdown closes
16+
6. When user clicks on the first "Button dropdown" again, then dropdown opened and there are 3 items inside
17+
7. When user clicks outside dropdown, then this dropdown closes
18+
8. When user clicks on the second "Button dropdown", then dropdown opened and there are 3 items inside
19+
9. When user press "ESC", nothing happens
20+
10. When user clicks outside dropdown, nothing happens
21+
11. When user clicks on the second "Button dropdown" again, then dropdown closed
22+
23+
Variations:
24+
-----------
25+
2*. User scroll to Auto close sub-menu

‎docs/spec/dropdowns/dropdowns.examples.basic.use-case.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
6.1: Dropdowns basic example
2+
============================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user basic dropdowns functionality
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Basic sub-menu
13+
3. User see "Button dropdown" and able to click on it
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 4 items, 1 of them is separated
15+
5. When user clicks on any item, then dropdown closes
16+
17+
Variations:
18+
-----------
19+
2*. User scroll to Basic sub-menu

‎docs/spec/dropdowns/dropdowns.examples.config-defaults.use-case.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
6.14: Dropdowns Configuring defaults example
2+
============================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to override default dropdown parameters
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Configuring defaults sub-menu
13+
3. User see clickable button "Button dropdown"
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
15+
5. When user clicks on any item, nothing happens.
16+
6. When user click on button "Button dropdown" again, then dropdown closes
17+
7. Component src should be written with BsDropdownConfig as a provider and autoClose: false as a value object
18+
19+
Variations:
20+
-----------
21+
2*. User scroll to Configuring defaults sub-menu

‎docs/spec/dropdowns/dropdowns.examples.custom-html.use-case.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
6.13: Dropdowns Custom html example
2+
============================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to add custom html to the dropdown items
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Custom html sub-menu
13+
3. User see clickable button "Button dropdown"
14+
4. When user clicks on this button, then dropdown opened and there are 3 items
15+
5. Latest item in dropdown should have specific class
16+
17+
Variations:
18+
-----------
19+
2*. User scroll to Custom html sub-menu

‎docs/spec/dropdowns/dropdowns.examples.disabled-menu.use-case.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
6.6: Dropdowns Disabled menu example
2+
====================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to use isDisabled property in dropdown
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Disabled menu sub-menu
13+
3. User see 2 clickable buttons "Button dropdown" and "Enable/Disable"
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 4 items, 1 of them is separated
15+
5. When user clicks on any item, dropdown closes
16+
6. When user clicks on "Enable/Disable", then "Button dropdown" disabled and user can't click on it
17+
7. When user clicks on "Enable/Disable" again, then "Button dropdown" active again
18+
8. When user clicks on "Button dropdown" again, then dropdown opened and there are 4 items
19+
9. When user clicks on any item, dropdown closes
20+
21+
Variations:
22+
-----------
23+
2*. User scroll to Disabled menu sub-menu

‎docs/spec/dropdowns/dropdowns.examples.dropup-variation.use-case.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
6.11: Dropdowns Dropup variation example
2+
========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to make dropdown which opens to top
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Dropup variation sub-menu
13+
3. User see clickable button "Dropup"
14+
4. When user clicks on this button, then dropdown opened to top and there are 4 items, one of them is separated
15+
5. When user clicks on any item, then dropdown closes
16+
6. Component src should be implemented with isDropup = true param
17+
18+
Variations:
19+
-----------
20+
2*. User scroll to Dropup variation sub-menu

‎docs/spec/dropdowns/dropdowns.examples.manual-trigger.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
6.4: Dropdowns Manual triggering example
2+
========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to trigger dropdown with show, hide and toggle methods
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Manual triggering sub-menu
13+
3. User see 4 clickable buttons: "Button dropdown", "Toggle", "Show", "Hide"
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
15+
5. When user clicks on any item, then dropdown closes
16+
6. When user clicks on "Toggle", then dropdown opened and there are 3 items
17+
7. When user clicks on "Toggle" again, then dropdown closes
18+
8. When user clicks on "Show", then dropdown opened and there are 3 items
19+
9. When user clicks on "Show" again, nothing happens
20+
10. When user clicks on any item, nothing happens
21+
11. When user clicks on "Hide", then dropdown closes
22+
12. Template src should be implemented with dropdown.show, dropdown.hide and dropdown.toggle
23+
24+
Variations:
25+
-----------
26+
2*. User scroll to Manual triggering sub-menu

‎docs/spec/dropdowns/dropdowns.examples.mark-item-disabled.use-case.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
6.7: Dropdowns Mark item as disabled example
2+
=================================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to mark dropdown item as disabled
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Mark item as disabled sub-menu
13+
3. User see clickable button "Button dropdown"
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items, first is disabled and other is enabled
15+
5. When user clicks on the first item, nothing happens
16+
6. When user clicks on the second item, then dropdown closes
17+
7. When user clicks on "Button dropdown" again, then dropdown opened and there are 3 items in the same state as previous
18+
8. When user clicks on the third item, then dropdown closes
19+
20+
Variations:
21+
-----------
22+
2*. User scroll to Mark item as disabled sub-menu

‎docs/spec/dropdowns/dropdowns.examples.menu-alignment.use-case.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
6.8: Dropdowns Menu alignment example
2+
=====================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to align dropdown items
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Menu alignment sub-menu
13+
3. User see clickable button with long text "This dropdown's menu is right-aligned"
14+
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
15+
5. Opened dropdown should be aligned to the right
16+
6. When user clicks on any item, then dropdown closes
17+
18+
Variations:
19+
-----------
20+
2*. User scroll to Menu alignment sub-menu

‎docs/spec/dropdowns/dropdowns.examples.menu-dividers.use-case.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
6.12: Dropdowns Menu dividers example
2+
=====================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to separate dropdown items with divider
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Menu dividers sub-menu
13+
3. User see clickable button "Button dropdown"
14+
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
15+
5. When user clicks on any item, then dropdown closes
16+
6. Template src should be implemented with divider class
17+
18+
Variations:
19+
-----------
20+
2*. User scroll to Menu dividers sub-menu

‎docs/spec/dropdowns/dropdowns.examples.nested-dropdowns.use-case.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
6.9: Dropdowns Nested dropdowns example
2+
=====================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example with nested dropdowns
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Nested dropdowns sub-menu
13+
3. User see clickable button "dropdown has nested submenu"
14+
4. When user clicks on this button, then dropdown opened and there are 4 items, one of them is separated
15+
5. When user move mouse to the first item with caret, then nested dropdown opened and there are 3 items in the sub-menu
16+
6. When user move mouse to the second item with caret, then nested dropdown opened and there are 3 items in the sub-menu
17+
7. When user clicks on any item, then dropdown closes //TODO need to change link href from #/dropdowns#nested to #/dropdowns#nested-dropdowns
18+
19+
Variations:
20+
-----------
21+
2*. User scroll to Nested dropdowns sub-menu

‎docs/spec/dropdowns/dropdowns.examples.split-button.use-case.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
6.3: Dropdowns Split button example
2+
===================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user dropdown example with splitted button and caret
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Split button dropdowns sub-menu
13+
3. User see dropdown, which consist of 2 buttons: with text and with caret
14+
4. When user clicks on text, nothing happens
15+
5. When user clicks on caret, then dropdown opened and there are 4 items, 1 of them is separated
16+
6. When user clicks on any item, then dropdown closes
17+
18+
Variations:
19+
-----------
20+
2*. User scroll to Split button dropdowns sub-menu

‎docs/spec/dropdowns/dropdowns.examples.state-change-event.use-case.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
6.16: Dropdowns State change event example
2+
==========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to subscribe to dropdown state changing events
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on State change event sub-menu
13+
3. User see clickable button "Button dropdown"
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items and card "The dropdown is opened" shown
15+
5. When user clicks on any item, then dropdown closed and card "The dropdown is closed" is shown
16+
6. When user clicks on "Button dropdown" again, then dropdown opened and card "The dropdown is opened" is shown
17+
7. When user clicks on "Button dropdown" again, then dropdown closed and card "The dropdown is closed" is shown
18+
19+
Variations:
20+
-----------
21+
2*. User scroll to State change event sub-menu

‎docs/spec/dropdowns/dropdowns.examples.trigger-by-a.use-case.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
6.2: Dropdowns Trigger by tag \<a> example
2+
==========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example with link dropdowns
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Trigger by tag \<a> sub-menu
13+
3. User see clickable link
14+
4. When user clicks on it, then dropdown opened and there are 3 items
15+
5. When user clicks on any item, then dropdown closes
16+
17+
Variations:
18+
-----------
19+
2*. User scroll to Trigger by tag \<a> sub-menu

‎docs/spec/dropdowns/dropdowns.examples.trigger-by-isopen.use-case.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
6.5: Dropdowns Trigger by isOpen property example
2+
==========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to trigger dropdown by changing isOpen property
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Trigger by isOpen property sub-menu
13+
3. User see 2 clickable buttons "Button dropdown" and "Toggle"
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items
15+
5. When user clicks on any item, nothing happens
16+
6. When user clicks on "Toggle", then dropdown closed
17+
7. When user clicks on "Toggle" again, then dropdown opened and there are 3 items
18+
8. When user clicks on "Toggle" again, then dropdown closed again
19+
9. Template src should be implemented with dropdown.isOpen
20+
21+
Variations:
22+
-----------
23+
2*. User scroll to Trigger by isOpen property sub-menu

‎docs/spec/dropdowns/dropdowns.examples.visibility-events.use-case.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
6.15: Dropdowns Visibility Events example
2+
=========================================
3+
**Primary Actor**: User
4+
5+
**Scope**: Ngx-bootstrap DEMO / BS version 3&4
6+
7+
**Goal**: Show user example how to subscribe to dropdown visibility events
8+
9+
Main success scenario:
10+
----------------------
11+
1. User opens Dropdowns demo page
12+
2. User clicks on Visibility Events sub-menu
13+
3. User see clickable button "Button dropdown"
14+
4. When user clicks on "Button dropdown", then dropdown opened and there are 3 items and card "Event onShown is fired" should be shown
15+
5. When user clicks on any item, then dropdown closed and card "Event onHidden is fired" is shown
16+
6. When user clicks on "Button dropdown" again, then dropdown opened and card "Event onHidden is fired" is hidden
17+
7. When user clicks on any item, then dropdown closed and card "Event onHidden is fired" is shown again
18+
19+
Variations:
20+
-----------
21+
2*. User scroll to Visibility Events sub-menu

0 commit comments

Comments
 (0)