Fix clipped text when Accordion animates

pluralsh · Sep 19, 2023 · 5679497 · 5679497
1 parent 5557c5b
commit 5679497
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react'
 import React from 'react'
 import { animated, useSpring } from 'react-spring'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import useResizeObserver from '../hooks/useResizeObserver'
 import { type UseDisclosureProps, useDisclosure } from '../hooks/useDisclosure'
@@ -39,25 +39,16 @@ function AccordionTriggerUnstyled({
   )
 }
 
-const AccordionTrigger = styled(AccordionTriggerUnstyled)(({
-  theme,
-  unstyled,
-}) => {
+const AccordionTrigger = styled(AccordionTriggerUnstyled)(({ theme }) => {
   const focusInset = theme.spacing.xsmall
   const padding = theme.spacing.medium
-  const bottomPadOpen = unstyled ? padding : theme.spacing.small
-  const bottomPadClosed = padding
-  const bottomPadDiff = bottomPadClosed - bottomPadOpen
 
   return {
     display: 'flex',
     gap: theme.spacing.medium,
     padding,
     ...theme.partials.text.body2Bold,
     color: theme.colors.text,
-    '&[aria-expanded="true"]': {
-      paddingBottom: bottomPadOpen,
-    },
     '.label': {
       flexGrow: 1,
     },
@@ -76,9 +67,6 @@ const AccordionTrigger = styled(AccordionTriggerUnstyled)(({
         left: focusInset,
         right: focusInset,
       },
-      '&[aria-expanded="true"]::after': {
-        bottom: focusInset - bottomPadDiff,
-      },
     },
     '&:hover': {
       '.icon > *:first-child': {
@@ -119,6 +107,7 @@ function AccordionContentUnstyled({
       setContentHeight(eltRef.current?.offsetHeight)
     }
   }, [])
+  const theme = useTheme()
 
   useEffect(() => {
     onResize()
@@ -141,11 +130,18 @@ function AccordionContentUnstyled({
           velocity: 0.02,
         },
   })
+  const mOffset = theme.spacing.medium - theme.spacing.small
 
   return (
     <animated.div
       style={{
         overflow: 'hidden',
+        ...(!_unstyled
+          ? {
+              marginTop: -mOffset,
+              marginBottom: isOpen ? 0 : mOffset,
+            }
+          : {}),
         ...springs,
       }}
     >
@@ -160,12 +156,11 @@ function AccordionContentUnstyled({
   )
 }
 const AccordionContent = styled(AccordionContentUnstyled)(
-  ({ theme, pad, unstyled, isOpen }) =>
+  ({ theme, pad, unstyled }) =>
     unstyled
       ? {}
       : {
           transition: `marginTop ${paddingTransition}`,
-          marginTop: isOpen ? 0 : -(theme.spacing.medium - theme.spacing.small),
           ...(pad
             ? {
                 paddingLeft: theme.spacing.medium,
@@ -231,7 +226,7 @@ export default function Accordion({
 
   const Wrapper = useMemo(() => {
     if (unstyled) {
-      return function Div(props) {
+      return function Div(props: ComponentProps<'div'>) {
         return <div {...props} />
       }
     }

diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
@@ -1,4 +1,4 @@
-import { type Dispatch, useCallback, useEffect, useState } from 'react'
+import { type Dispatch, useEffect, useState } from 'react'
 import { Button, Flex, P } from 'honorable'
 import { useTheme } from 'styled-components'
 

diff --git a/src/stories/Accordion.stories.tsx b/src/stories/Accordion.stories.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { Accordion, Button, Card } from '..'
+import { Accordion, Button } from '..'
 
 export default {
   title: 'Accordion',