Replace active class with active param

mckinsey · Oct 2, 2023 · 9fecf3c · 9fecf3c
1 parent e6307aa
commit 9fecf3c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/...elog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md b/...elog.d/20230928_143738_nadija_ratkusic_graca_highlight_active_accordion_item.md
@@ -31,7 +31,7 @@ Uncomment the section that is right (remove the HTML comment wrapper).
 
 ### Fixed
 
-- Fixed highlighting for active accordion item and arranged a setup to maintain the expanded state of the parent accordion item when page is active. ([#74](https://github.com/mckinsey/vizro/pull/74))
+- Add highlighting to selected page accordion button and change the collapsible default behavior of accordion ([#74](https://github.com/mckinsey/vizro/pull/74))
 
 <!--
 ### Security

diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py
@@ -38,7 +38,8 @@ def _create_accordion_buttons(self, pages, page_id):
             dbc.Button(
                 children=[page["name"]],
                 key=page["relative_path"],
-                className="accordion-item-button-active" if page_id == page["name"] else "accordion-item-button",
+                className="accordion-item-button",
+                active=True if page_id == page["name"] else False,
                 href=page["relative_path"],
             )
             for page in dash.page_registry.values()

diff --git a/vizro-core/src/vizro/static/css/accordion.css b/vizro-core/src/vizro/static/css/accordion.css
@@ -101,8 +101,7 @@
   gap: var(--spacing-01);
 }
 
-div.page_container .accordion-item-button,
-.accordion-item-button-active {
+div.page_container .accordion-item-button {
   background-color: inherit;
   width: 100%;
   display: flex;
@@ -113,7 +112,7 @@ div.page_container .accordion-item-button,
   line-height: var(--text-size-03);
 }
 
-.accordion-item-button-active {
+.accordion-item-button.btn.btn-primary.active {
   background-color: var(--state-overlays-selected);
   color: var(--text-primary);
 }

diff --git a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py
@@ -22,13 +22,15 @@ def accordion_from_page_as_list():
     accordion_buttons = [
         dbc.Button(
             children=["Page 1"],
-            className="accordion-item-button-active",
+            className="accordion-item-button",
+            active=True,
             key="/",
             href="/",
         ),
         dbc.Button(
             children=["Page 2"],
             className="accordion-item-button",
+            active=False,
             key="/page-2",
             href="/page-2",
         ),
@@ -62,13 +64,17 @@ def accordion_from_page_as_list():
 def accordion_from_pages_as_dict():
     accordion_items = [
         dbc.AccordionItem(
-            children=[dbc.Button(children=["Page 1"], className="accordion-item-button-active", key="/", href="/")],
+            children=[
+                dbc.Button(children=["Page 1"], className="accordion-item-button", active=True, key="/", href="/")
+            ],
             title="PAGE 1",
             class_name="accordion_item",
         ),
         dbc.AccordionItem(
             children=[
-                dbc.Button(children=["Page 2"], className="accordion-item-button", key="/page-2", href="/page-2")
+                dbc.Button(
+                    children=["Page 2"], className="accordion-item-button", active=False, key="/page-2", href="/page-2"
+                )
             ],
             title="PAGE 2",
             class_name="accordion_item",