refactor(AnimateHeight): ♻️ Move styling to utils.css

#1846
digdir · May 7, 2024 · 10d52e9 · 10d52e9
1 parent efd0582
commit 10d52e9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/packages/css/utils.css b/packages/css/utils.css
@@ -24,3 +24,19 @@
     box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
   }
 }
+
+@layer fds.utils.animate-height {
+  .fds-animate-height--openingOrClosing,
+  .fds-animate-height--closed {
+    overflow: hidden;
+  }
+
+  .fds-animate-height--open .fds-animate-height__content {
+    height: auto;
+  }
+
+  .fds-animate-height--closed .fds-animate-height__content {
+    height: 0;
+    display: none;
+  }
+}
diff --git a/packages/react/src/utilities/AnimateHeight/AnimateHeight.module.css b/packages/react/src/utilities/AnimateHeight/AnimateHeight.module.css
diff --git a/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx b/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
@@ -4,8 +4,6 @@ import cl from 'clsx';
 
 import { useMediaQuery, usePrevious } from '../../hooks';
 
-import classes from './AnimateHeight.module.css';
-
 export type AnimateHeightProps = {
   open: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
@@ -59,12 +57,12 @@ export const AnimateHeight = ({
   return (
     <div
       {...rest}
-      className={cl(classes.root, classes[state], className)}
+      className={cl(`fds-animate-height--${state}`, className)}
       style={{ height, transition, ...style }}
     >
       <div
         ref={contentRef}
-        className={classes.content}
+        className='fds-animate-height__content'
       >
         {children}
       </div>