From c8ae76572451b515a1fb9d29735b6c597b61ce8e Mon Sep 17 00:00:00 2001 From: Samarthsinh vala <143015496+samarthsinh2660@users.noreply.github.com> Date: Thu, 5 Feb 2026 16:50:57 +0530 Subject: [PATCH] fix(ui): Fix nested Accordion icon state issue (#32488) * fix(ui): Fix nested Accordion icon state issue Signed-off-by: samarthsinh2660 * Update packages/ui/src/components/Accordion/Accordion.module.css Co-authored-by: Gabriel Dugny Signed-off-by: Samarthsinh vala <143015496+samarthsinh2660@users.noreply.github.com> * Update packages/ui/src/components/Accordion/Accordion.module.css Co-authored-by: Gabriel Dugny Signed-off-by: Samarthsinh vala <143015496+samarthsinh2660@users.noreply.github.com> * chore(ui): Add affected components string to changeset. Allows the changeset sync script for the UI docs to pick the component up automatically and include the change in the changelog on the component page. Signed-off-by: Johan Persson --------- Signed-off-by: samarthsinh2660 Signed-off-by: Samarthsinh vala <143015496+samarthsinh2660@users.noreply.github.com> Signed-off-by: Johan Persson Co-authored-by: Gabriel Dugny Co-authored-by: Johan Persson --- .changeset/fix-nested-accordion-icon-state.md | 7 +++++++ packages/ui/src/components/Accordion/Accordion.module.css | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/fix-nested-accordion-icon-state.md diff --git a/.changeset/fix-nested-accordion-icon-state.md b/.changeset/fix-nested-accordion-icon-state.md new file mode 100644 index 0000000000..56ef097163 --- /dev/null +++ b/.changeset/fix-nested-accordion-icon-state.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed nested Accordion icon state issue where the inner accordion's arrow icon would incorrectly show as expanded when only the outer accordion was expanded. The CSS selector now uses a direct parent selector to ensure the icon only responds to its own accordion's expanded state. + +Affected components: Accordion diff --git a/packages/ui/src/components/Accordion/Accordion.module.css b/packages/ui/src/components/Accordion/Accordion.module.css index a86400986d..357696b0ff 100644 --- a/packages/ui/src/components/Accordion/Accordion.module.css +++ b/packages/ui/src/components/Accordion/Accordion.module.css @@ -73,13 +73,13 @@ width: 1rem; height: 1rem; - [data-expanded='true'] & { + .bui-Accordion[data-expanded='true'] > .bui-AccordionTrigger & { transform: rotate(180deg); } } .bui-AccordionPanel { - [data-expanded='true'] & { + .bui-Accordion[data-expanded='true'] > & { padding-top: var(--bui-space-1); } }