Fix Accordion background

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/blue-moons-crash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Made Accordion a bg provider so nested components like Button auto-increment their background level. Updated `useDefinition` to resolve bg propDef defaults for provider components.

packages/ui/report.api.md

@@ -72,8 +72,13 @@ export const AccordionDefinition: {
   readonly classNames: {
     readonly root: 'bui-Accordion';
   };
-  readonly bg: 'consumer';
+  readonly bg: 'provider';
   readonly propDefs: {
+    readonly bg: {
+      readonly dataAttribute: true;
+      readonly default: 'neutral-auto';
+    };
+    readonly children: {};
     readonly className: {};
   };
 };
@@ -112,6 +117,8 @@ export interface AccordionGroupProps
 
 // @public
 export type AccordionOwnProps = {
+  bg?: ProviderBg;
+  children?: ReactNode;
   className?: string;
 };
 
@@ -145,7 +152,7 @@ export interface AccordionPanelProps
 
 // @public
 export interface AccordionProps
-  extends Omit<DisclosureProps, 'className'>,
+  extends Omit<DisclosureProps, 'children' | 'className'>,
     AccordionOwnProps {}
 
 // @public (undocumented)

packages/ui/src/components/Accordion/Accordion.module.css

@@ -19,21 +19,20 @@
 @layer components {
   .bui-Accordion {
     width: 100%;
-    background-color: var(--bui-bg-neutral-1);
     border-radius: var(--bui-radius-3);
     padding: var(--bui-space-3);
 
-    &[data-on-bg='neutral-1'] {
+    &[data-bg='neutral-1'] {
+      background-color: var(--bui-bg-neutral-1);
+    }
+
+    &[data-bg='neutral-2'] {
       background-color: var(--bui-bg-neutral-2);
     }
 
-    &[data-on-bg='neutral-2'] {
+    &[data-bg='neutral-3'] {
       background-color: var(--bui-bg-neutral-3);
     }
-
-    &[data-on-bg='neutral-3'] {
-      background-color: var(--bui-bg-neutral-4);
-    }
   }
 
   .bui-AccordionTrigger {

packages/ui/src/components/Accordion/Accordion.stories.tsx

@@ -21,6 +21,7 @@ import {
   AccordionGroup,
 } from './Accordion';
 import { Box } from '../Box';
+import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 
@@ -187,6 +188,10 @@ export const AutoBg = meta.story({
           <AccordionTrigger title="Toggle Panel" />
           <AccordionPanel>
             <Content />
+            <Flex mt="3" gap="2">
+              <Button>Action</Button>
+              <Button variant="secondary">Cancel</Button>
+            </Flex>
           </AccordionPanel>
         </Accordion>
       </Flex>
@@ -197,6 +202,10 @@ export const AutoBg = meta.story({
             <AccordionTrigger title="Auto (neutral-2)" />
             <AccordionPanel>
               <Content />
+              <Flex mt="3" gap="2">
+                <Button>Action</Button>
+                <Button variant="secondary">Cancel</Button>
+              </Flex>
             </AccordionPanel>
           </Accordion>
         </Flex>
@@ -208,6 +217,10 @@ export const AutoBg = meta.story({
             <AccordionTrigger title="Auto (neutral-3)" />
             <AccordionPanel>
               <Content />
+              <Flex mt="3" gap="2">
+                <Button>Action</Button>
+                <Button variant="secondary">Cancel</Button>
+              </Flex>
             </AccordionPanel>
           </Accordion>
         </Flex>
@@ -216,9 +229,13 @@ export const AutoBg = meta.story({
         <Text>Neutral 3 container</Text>
         <Flex mt="2">
           <Accordion defaultExpanded>
-            <AccordionTrigger title="Auto (neutral-4)" />
+            <AccordionTrigger title="Auto (neutral-3)" />
             <AccordionPanel>
               <Content />
+              <Flex mt="3" gap="2">
+                <Button>Action</Button>
+                <Button variant="secondary">Cancel</Button>
+              </Flex>
             </AccordionPanel>
           </Accordion>
         </Flex>

packages/ui/src/components/Accordion/Accordion.tsx

@@ -45,7 +45,7 @@ export const Accordion = forwardRef(
       AccordionDefinition,
       props,
     );
-    const { classes } = ownProps;
+    const { classes, childrenWithBgProvider } = ownProps;
 
     return (
       <RADisclosure
@@ -53,7 +53,9 @@ export const Accordion = forwardRef(
         className={classes.root}
         {...dataAttributes}
         {...restProps}
-      />
+      >
+        {childrenWithBgProvider}
+      </RADisclosure>
     );
   },
 );

packages/ui/src/components/Accordion/definition.ts

@@ -32,8 +32,10 @@ export const AccordionDefinition = defineComponent<AccordionOwnProps>()({
   classNames: {
     root: 'bui-Accordion',
   },
-  bg: 'consumer',
+  bg: 'provider',
   propDefs: {
+    bg: { dataAttribute: true, default: 'neutral-auto' },
+    children: {},
     className: {},
   },
 });

packages/ui/src/components/Accordion/types.ts

@@ -21,12 +21,15 @@ import type {
   DisclosurePanelProps as RADisclosurePanelProps,
   DisclosureGroupProps as RADisclosureGroupProps,
 } from 'react-aria-components';
+import type { ProviderBg } from '../../types';
 
 /**
  * Own props for the Accordion component.
  * @public
  */
 export type AccordionOwnProps = {
+  bg?: ProviderBg;
+  children?: ReactNode;
   className?: string;
 };
 
@@ -35,7 +38,7 @@ export type AccordionOwnProps = {
  * @public
  */
 export interface AccordionProps
-  extends Omit<RADisclosureProps, 'className'>,
+  extends Omit<RADisclosureProps, 'children' | 'className'>,
     AccordionOwnProps {}
 
 /**

packages/ui/src/hooks/useDefinition/useDefinition.tsx

@@ -38,7 +38,9 @@ export function useDefinition<
 
   // Provider: resolve bg and provide context for children
   const providerBg = useBgProvider(
-    definition.bg === 'provider' ? props.bg : undefined,
+    definition.bg === 'provider'
+      ? props.bg ?? (definition.propDefs as any).bg?.default
+      : undefined,
   );
 
   // Consumer: read parent context bg