diff --git a/.changeset/young-poems-serve.md b/.changeset/young-poems-serve.md new file mode 100644 index 00000000000..0e1ddf2d795 --- /dev/null +++ b/.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` diff --git a/packages/accordion/src/accordion.tsx b/packages/accordion/src/accordion.tsx index 47aa7ba3a46..0b94c845306 100644 --- a/packages/accordion/src/accordion.tsx +++ b/packages/accordion/src/accordion.tsx @@ -66,6 +66,7 @@ export const Accordion = forwardRef( ref={ref} {...htmlProps} className={cx("chakra-accordion", props.className)} + __css={styles.root} > {children} @@ -86,14 +87,12 @@ if (__DEV__) { type AccordionItemContext = Omit -const [ - AccordionItemProvider, - useAccordionItemContext, -] = createContext({ - name: "AccordionItemContext", - errorMessage: - "useAccordionItemContext: `context` is undefined. Seems you forgot to wrap the accordion item parts in `` ", -}) +const [AccordionItemProvider, useAccordionItemContext] = + createContext({ + name: "AccordionItemContext", + errorMessage: + "useAccordionItemContext: `context` is undefined. Seems you forgot to wrap the accordion item parts in `` ", + }) export interface AccordionItemProps extends Omit, keyof UseAccordionItemProps>, diff --git a/packages/accordion/stories/accordion.stories.tsx b/packages/accordion/stories/accordion.stories.tsx index 8382203dd9f..8c9c9789967 100644 --- a/packages/accordion/stories/accordion.stories.tsx +++ b/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 = () => { ) } + +export const OverridableAccordionContainer = () => { + return ( + + + + This should be green + Turns out it's red + + + + ) +} diff --git a/packages/anatomy/src/index.ts b/packages/anatomy/src/index.ts index 83f53f6ef1d..bc46d148911 100644 --- a/packages/anatomy/src/index.ts +++ b/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") /** diff --git a/packages/theme/src/components/accordion.ts b/packages/theme/src/components/accordion.ts index e4b2022965d..33a295cce5a 100644 --- a/packages/theme/src/components/accordion.ts +++ b/packages/theme/src/components/accordion.ts @@ -41,6 +41,7 @@ const baseStyleIcon: SystemStyleObject = { } const baseStyle: PartsStyleObject = { + root: {}, container: baseStyleContainer, button: baseStyleButton, panel: baseStylePanel,