Primitives 1344 documentation (#376)

* Add new version pages

* Remove references to `forwards` in new versions

Author: andy-hook

components/demos/Accordion.jsx

@@ -74,10 +74,10 @@ const StyledContent = styled(AccordionPrimitive.Content, {
   backgroundColor: mauve.mauve2,
 
   '&[data-state="open"]': {
-    animation: `${slideDown} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+    animation: `${slideDown} 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
   },
   '&[data-state="closed"]': {
-    animation: `${slideUp} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
+    animation: `${slideUp} 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
   },
 });
 

components/demos/AlertDialog.jsx

@@ -18,7 +18,7 @@ const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
-    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
+    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
 });
 
@@ -35,7 +35,7 @@ const StyledContent = styled(AlertDialogPrimitive.Content, {
   maxHeight: '85vh',
   padding: 25,
   '@media (prefers-reduced-motion: no-preference)': {
-    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
+    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
   '&:focus': { outline: 'none' },
 });

components/demos/Dialog.jsx

@@ -19,7 +19,7 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
-    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
+    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
 });
 
@@ -36,7 +36,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
   maxHeight: '85vh',
   padding: 25,
   '@media (prefers-reduced-motion: no-preference)': {
-    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
+    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
   '&:focus': { outline: 'none' },
 });

components/demos/DropdownMenu.jsx

@@ -39,7 +39,6 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
   '@media (prefers-reduced-motion: no-preference)': {
     animationDuration: '400ms',
     animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    animationFillMode: 'forwards',
     willChange: 'transform, opacity',
     '&[data-state="open"]': {
       '&[data-side="top"]': { animationName: slideDownAndFade },

components/demos/HoverCard.jsx

@@ -32,7 +32,6 @@ const StyledContent = styled(HoverCardPrimitive.Content, {
   '@media (prefers-reduced-motion: no-preference)': {
     animationDuration: '400ms',
     animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    animationFillMode: 'forwards',
     willChange: 'transform, opacity',
     '&[data-state="open"]': {
       '&[data-side="top"]': { animationName: slideDownAndFade },

components/demos/Popover.jsx

@@ -32,7 +32,6 @@ const StyledContent = styled(PopoverPrimitive.Content, {
   '@media (prefers-reduced-motion: no-preference)': {
     animationDuration: '400ms',
     animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    animationFillMode: 'forwards',
     willChange: 'transform, opacity',
     '&[data-state="open"]': {
       '&[data-side="top"]': { animationName: slideDownAndFade },

components/demos/Toast.jsx

@@ -52,7 +52,7 @@ const StyledToast = styled(ToastPrimitive.Root, {
       animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
     },
     '&[data-state="closed"]': {
-      animation: `${hide} 100ms ease-in forwards`,
+      animation: `${hide} 100ms ease-in`,
     },
     '&[data-swipe="move"]': {
       transform: 'translateX(var(--radix-toast-swipe-move-x))',
@@ -62,7 +62,7 @@ const StyledToast = styled(ToastPrimitive.Root, {
       transition: 'transform 200ms ease-out',
     },
     '&[data-swipe="end"]': {
-      animation: `${swipeOut} 100ms ease-out forwards`,
+      animation: `${swipeOut} 100ms ease-out`,
     },
   },
 });

components/demos/Tooltip.jsx

@@ -35,7 +35,6 @@ const StyledContent = styled(TooltipPrimitive.Content, {
   '@media (prefers-reduced-motion: no-preference)': {
     animationDuration: '400ms',
     animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    animationFillMode: 'forwards',
     willChange: 'transform, opacity',
     '&[data-state="delayed-open"]': {
       '&[data-side="top"]': { animationName: slideDownAndFade },

data/primitives/components/accordion/0.1.6.mdx renamed to data/primitives/components/accordion/0.1.7.mdx

@@ -368,8 +368,8 @@ const AccordionHeader = styled(Accordion.Header, {
 
 const AccordionContent = styled(Accordion.Content, {
   overflow: 'hidden',
-  '&[data-state="open"]': { animation: `${open} 300ms ease-out forwards` },
-  '&[data-state="closed"]': { animation: `${close} 300ms ease-out forwards` },
+  '&[data-state="open"]': { animation: `${open} 300ms ease-out` },
+  '&[data-state="closed"]': { animation: `${close} 300ms ease-out` },
 });
 
 export default () => (