Skip to content

Commit b87c349

Browse files
glsdowntcbegley
glsdown
and
tcbegley
authored
Add Accordion always_open property (#840)
* Bump react-bootstrap version * Add always_open prop to Accordion * Add js tests for Accordion always_open * Add always_open to Accordion docs * Add always_open callback doc test * Remove unnecessary imports * Add callback file to flake8 ignore files * Call the second callback test * Bump react-bootstrap version * Add always_open prop to Accordion * Add js tests for Accordion always_open * Add always_open to Accordion docs * Add always_open callback doc test * Remove unnecessary imports * Add callback file to flake8 ignore files * Call the second callback test * Fix some issues with tests * Remove always_open example in R * Clean up Accordion source * Fix accordion tests * Remove note about R * Revert debugging change to tests Co-authored-by: tcbegley <[email protected]>
1 parent 310ae02 commit b87c349

File tree

12 files changed

+402
-63
lines changed

12 files changed

+402
-63
lines changed

‎docs/components_page/components/__tests__/test_accordion.py‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,24 @@ def test_jl_callback(dashjl):
2424
check_callback_callbacks(dashjl)
2525

2626

27+
def test_jl_always_open_callback(dashjl):
28+
jl_app = load_jl_app(
29+
(HERE.parent / "accordion" / "always_open_callback.jl"), "accordion"
30+
)
31+
with open("app.jl", "w") as f:
32+
f.write(jl_app)
33+
dashjl.start_server(jl_app)
34+
check_always_open_callback_callbacks(dashjl)
35+
36+
2737
def check_callback_callbacks(runner):
2838
# Find the accordion object
2939
accordion_comp = runner.find_element("#accordion")
3040
accordion_text = runner.find_element("#accordion-contents")
3141

3242
# Check it has 3 accordion-items in it
3343
items = accordion_comp.find_elements_by_class_name("accordion-item")
34-
wait.until(
35-
lambda: len(items) == 3,
36-
timeout=4,
37-
)
44+
wait.until(lambda: len(items) == 3, timeout=4)
3845

3946
# Click the third section
4047
items[2].find_element_by_class_name("accordion-button").click()
@@ -51,3 +58,33 @@ def check_callback_callbacks(runner):
5158
lambda: item.text == "This is the content of the third section",
5259
timeout=4,
5360
)
61+
62+
63+
def check_always_open_callback_callbacks(runner):
64+
# Find the accordion object
65+
accordion_comp = runner.find_element("#accordion-always-open")
66+
67+
# Check it has 3 accordion-items in it
68+
wait.until(
69+
lambda: len(
70+
accordion_comp.find_elements_by_class_name("accordion-item")
71+
)
72+
== 3,
73+
timeout=4,
74+
)
75+
items = accordion_comp.find_elements_by_class_name("accordion-item")
76+
77+
# Check the text contains details that the first section is open
78+
wait.until(
79+
lambda: len(accordion_comp.find_elements_by_class_name("show")) == 1,
80+
timeout=4,
81+
)
82+
83+
# Click the third section
84+
items[2].find_element_by_class_name("accordion-button").click()
85+
86+
# Check the text in contents changes to "Item selected: item-3"
87+
wait.until(
88+
lambda: len(accordion_comp.find_elements_by_class_name("show")) == 2,
89+
timeout=4,
90+
)

‎docs/components_page/components/accordion.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,17 @@ Each item in the accordion can be assiged a specific `item_id` which is used in
2727

2828
{{example:components/accordion/callback.py:accordion}}
2929

30+
## Always Open
31+
32+
Add `always_open=True` to ensure that items remain open when another item is opened.
33+
34+
{{example:components/accordion/always_open.py:accordion}}
35+
36+
## Always Open `active_item`
37+
38+
When `always_open=True`, the `active_item` will need to be a list of the specified item IDs.
39+
40+
{{example:components/accordion/always_open_callback.py:accordion}}
41+
3042
{{apidoc:src/components/accordion/Accordion.js}}
3143
{{apidoc:src/components/accordion/AccordionItem.js}}

‎docs/components_page/components/accordion/always_open.jl‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using DashBootstrapComponents
2+
3+
accordion = html_div(
4+
dbc_accordion(
5+
[
6+
dbc_accordionitem("This is the content of the first section", title = "Item 1"),
7+
dbc_accordionitem(
8+
"This is the content of the second section",
9+
title = "Item 2",
10+
),
11+
dbc_accordionitem("This is the content of the third section", title = "Item 3"),
12+
],
13+
always_open = true,
14+
),
15+
)

‎docs/components_page/components/accordion/always_open.py‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import html
3+
4+
accordion = html.Div(
5+
dbc.Accordion(
6+
[
7+
dbc.AccordionItem(
8+
"This is the content of the first section",
9+
title="Item 1",
10+
),
11+
dbc.AccordionItem(
12+
"This is the content of the second section",
13+
title="Item 2",
14+
),
15+
dbc.AccordionItem(
16+
"This is the content of the third section",
17+
title="Item 3",
18+
),
19+
],
20+
always_open=True,
21+
)
22+
)

‎docs/components_page/components/accordion/always_open_callback.jl‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using DashBootstrapComponents
2+
3+
accordion = html_div([
4+
dbc_accordion(
5+
[
6+
dbc_accordionitem(
7+
"This is the content of the first section. It has a " *
8+
"default ID of item-0.",
9+
title = "Item 1: item-0",
10+
),
11+
dbc_accordionitem(
12+
"This is the content of the second section. It has a " *
13+
"default ID of item-1.",
14+
title = "Item 2: item-1",
15+
),
16+
dbc_accordionitem(
17+
"This is the content of the third section. It has a " *
18+
"default ID of item-2.",
19+
title = "Item 3: item-2",
20+
),
21+
],
22+
id = "accordion-always-open",
23+
always_open = true,
24+
),
25+
html_div(id = "accordion-contents-open-ids", className = "mt-3"),
26+
])
27+
28+
callback!(
29+
app,
30+
Output("accordion-contents-open-ids", "children"),
31+
Input("accordion-open-ids", "active_item"),
32+
) do item
33+
return "Item(s) selected: $item"
34+
end;

‎docs/components_page/components/accordion/always_open_callback.py‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import dash_bootstrap_components as dbc
2+
from dash import Input, Output, html
3+
4+
accordion = html.Div(
5+
[
6+
dbc.Accordion(
7+
[
8+
dbc.AccordionItem(
9+
"This is the content of the first section. It has a "
10+
"default ID of item-0.",
11+
title="Item 1: item-0",
12+
),
13+
dbc.AccordionItem(
14+
"This is the content of the second section. It has a "
15+
"default ID of item-1.",
16+
title="Item 2: item-1",
17+
),
18+
dbc.AccordionItem(
19+
"This is the content of the third section. It has a "
20+
"default ID of item-2.",
21+
title="Item 3: item-2",
22+
),
23+
],
24+
id="accordion-always-open",
25+
always_open=True,
26+
),
27+
html.Div(id="accordion-contents-open-ids", className="mt-3"),
28+
]
29+
)
30+
31+
32+
@app.callback(
33+
Output("accordion-contents-open-ids", "children"),
34+
[Input("accordion-open-ids", "active_item")],
35+
)
36+
def change_item(item):
37+
return f"Item(s) selected: {item}"

‎docs/components_page/components/accordion/callback.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import dash_bootstrap_components as dbc
2-
from dash import Input, Output, State, dcc, html
2+
from dash import Input, Output, html
33

44
accordion = html.Div(
55
[

0 commit comments

Comments
 (0)