diff --git a/.all-contributorsrc b/.all-contributorsrc index 6e3ad91a49d7..aa34fd8799eb 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1268,6 +1268,15 @@ "contributions": [ "code" ] + }, + { + "login": "cesardlinx", + "name": "David Padilla", + "avatar_url": "https://avatars.githubusercontent.com/u/25573926?v=4", + "profile": "https://www.davidpadilla.dev/", + "contributions": [ + "code" + ] } ], "commitConvention": "none" diff --git a/README.md b/README.md index 2118c5c3ba11..5b66330aa343 100644 --- a/README.md +++ b/README.md @@ -254,6 +254,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
cordesmj

💻
Aziz Chebbi

💻
Michał Konopski

💻 +
David Padilla

💻 diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js index 02ff315ca1b7..c6030e0d53a0 100644 --- a/packages/react/src/components/Accordion/Accordion.stories.js +++ b/packages/react/src/components/Accordion/Accordion.stories.js @@ -7,7 +7,7 @@ /* eslint-disable no-console */ -import React from 'react'; +import React, { useState } from 'react'; import { default as Accordion, AccordionItem, @@ -108,6 +108,49 @@ export const _WithLayer = () => ( ); +export const Controlled = () => { + const [open, setOpen] = useState(false); + return ( + + setOpen(isOpen)}> +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+
+
+ ); +}; + export const Skeleton = (args) => ( ); diff --git a/packages/react/src/components/Accordion/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem.tsx index 20ed8235c428..e978d0cc7c82 100644 --- a/packages/react/src/components/Accordion/AccordionItem.tsx +++ b/packages/react/src/components/Accordion/AccordionItem.tsx @@ -117,7 +117,6 @@ function AccordionItem({ ...rest }: PropsWithChildren) { const [isOpen, setIsOpen] = useState(open); - const [prevIsOpen, setPrevIsOpen] = useState(open); const [animation, setAnimation] = useState(''); const accordionState = useContext(AccordionContext); @@ -138,17 +137,11 @@ function AccordionItem({ const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release - if (open !== prevIsOpen) { - setAnimation(isOpen ? 'collapsing' : 'expanding'); - setIsOpen(open); - setPrevIsOpen(open); - } - // When the AccordionItem heading is clicked, toggle the open state of the // panel function onClick(event) { const nextValue = !isOpen; - setAnimation(isOpen ? 'collapsing' : 'expanding'); + setAnimation(isOpen ? '' : 'expanding'); setIsOpen(nextValue); if (onHeadingClick) { // TODO: normalize signature, potentially: @@ -168,7 +161,6 @@ function AccordionItem({ if (handleAnimationEnd) { handleAnimationEnd(event); } - setAnimation(''); } return (