fix: consider only direct parent for radio accordion's state

traefik · Oct 27, 2023 · 85e17a6 · 85e17a6
1 parent 220e12b
commit 85e17a6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/components/RadioAccordion/RadioAccordion.stories.tsx b/components/RadioAccordion/RadioAccordion.stories.tsx
@@ -8,6 +8,8 @@ import {
   RadioAccordionTrigger,
 } from './RadioAccordion';
 import { Box } from '../Box';
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from '../Accordion';
+import { Text } from '../Text';
 
 export default {
   title: 'Components/RadioAccordion',
@@ -33,6 +35,32 @@ export const Basic: ComponentStory<typeof RadioAccordionRoot> = (args) => (
   </Box>
 );
 
+export const UnderAccordion: ComponentStory<typeof RadioAccordionRoot> = (args) => (
+  <AccordionRoot type="single" collapsible>
+    <AccordionItem value="default" css={{ boxShadow: 'none' }}>
+      <AccordionTrigger>
+        <Text>Open the accordion</Text>
+      </AccordionTrigger>
+      <AccordionContent>
+        <RadioAccordionRoot {...args}>
+          <RadioAccordionItem value="item-1">
+            <RadioAccordionTrigger>Item1 Trigger</RadioAccordionTrigger>
+            <RadioAccordionContent>Item1 Content</RadioAccordionContent>
+          </RadioAccordionItem>
+          <RadioAccordionItem value="item-2">
+            <RadioAccordionTrigger>Item2 Trigger</RadioAccordionTrigger>
+            <RadioAccordionContent>Item2 Content</RadioAccordionContent>
+          </RadioAccordionItem>
+          <RadioAccordionItem value="item-3">
+            <RadioAccordionTrigger>Item3 Trigger</RadioAccordionTrigger>
+            <RadioAccordionContent>Item3 Content</RadioAccordionContent>
+          </RadioAccordionItem>
+        </RadioAccordionRoot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+);
+
 const Customize: ComponentStory<typeof RadioAccordionRoot> = (args) => (
   <Box css={{ width: 300 }}>
     <RadioAccordionRoot {...args} css={{ bc: '$red9' }}>

diff --git a/components/RadioAccordion/RadioAccordion.tsx b/components/RadioAccordion/RadioAccordion.tsx
@@ -46,7 +46,7 @@ const StyledRadio = styled('div', RADIO_BASE_STYLES, {
   width: 18,
   height: 18,
   mr: '$2',
-  '[data-state=open] &': {
+  '[data-state=open] > &': {
     backgroundColor: '$radioIndicator',
   },
 });