fix(accordion): #5593 introduce styles.root for Accordion (#5595)

.changeset/young-poems-serve.md

@@ -0,0 +1,10 @@
+---
+"@chakra-ui/accordion": patch
+"@chakra-ui/theme": patch
+---
+
+Updated style config for `Accordion` & `AccordionItem` (see
+https://github.com/chakra-ui/chakra-ui/issues/5593)
+
+This change introduces `styles.root` for styling the `Accordion`.
+`styles.container` is still used for `AccordionItem`

packages/accordion/src/accordion.tsx

@@ -66,6 +66,7 @@ export const Accordion = forwardRef<AccordionProps, "div">(
               ref={ref}
               {...htmlProps}
               className={cx("chakra-accordion", props.className)}
+              __css={styles.root}
             >
               {children}
             </chakra.div>
@@ -86,14 +87,12 @@ if (__DEV__) {
 
 type AccordionItemContext = Omit<UseAccordionItemReturn, "htmlProps">
 
-const [
-  AccordionItemProvider,
-  useAccordionItemContext,
-] = createContext<AccordionItemContext>({
-  name: "AccordionItemContext",
-  errorMessage:
-    "useAccordionItemContext: `context` is undefined. Seems you forgot to wrap the accordion item parts in `<AccordionItem />` ",
-})
+const [AccordionItemProvider, useAccordionItemContext] =
+  createContext<AccordionItemContext>({
+    name: "AccordionItemContext",
+    errorMessage:
+      "useAccordionItemContext: `context` is undefined. Seems you forgot to wrap the accordion item parts in `<AccordionItem />` ",
+  })
 
 export interface AccordionItemProps
   extends Omit<HTMLChakraProps<"div">, keyof UseAccordionItemProps>,

packages/accordion/stories/accordion.stories.tsx

@@ -9,11 +9,13 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerOverlay,
+  extendTheme,
   useDisclosure,
 } from "@chakra-ui/react"
 import { chakra } from "@chakra-ui/system"
 import * as React from "react"
 import { ChangeEvent } from "react"
+import { ChakraProvider } from "@chakra-ui/provider"
 import {
   Accordion,
   AccordionButton,
@@ -324,3 +326,31 @@ export const WithDisabledAccordionItem = () => {
     </Accordion>
   )
 }
+
+export const OverridableAccordionContainer = () => {
+  return (
+    <ChakraProvider
+      theme={extendTheme({
+        components: {
+          Accordion: {
+            baseStyle: {
+              root: {
+                backgroundColor: "red",
+              },
+              container: {
+                backgroundColor: "green",
+              },
+            },
+          },
+        },
+      })}
+    >
+      <Accordion allowToggle>
+        <AccordionItem>
+          <AccordionButton>This should be green</AccordionButton>
+          <AccordionPanel>Turns out it's red</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </ChakraProvider>
+  )
+}

packages/anatomy/src/index.ts

@@ -2,13 +2,14 @@ import { anatomy } from "@chakra-ui/theme-tools"
 
 /**
  * **Accordion anatomy**
- * - Item: the accordion item contains the button and panel
+ * - Root: the root container of the accordion
+ * - Container: the accordion item contains the button and panel
  * - Button: the button is the trigger for the panel
  * - Panel: the panel is the content of the accordion item
  * - Icon: the expanded/collapsed icon
  */
 export const accordionAnatomy = anatomy("accordion")
-  .parts("container", "item", "button", "panel")
+  .parts("root", "container", "button", "panel")
   .extend("icon")
 
 /**

packages/theme/src/components/accordion.ts

@@ -41,6 +41,7 @@ const baseStyleIcon: SystemStyleObject = {
 }
 
 const baseStyle: PartsStyleObject<typeof parts> = {
+  root: {},
   container: baseStyleContainer,
   button: baseStyleButton,
   panel: baseStylePanel,