fix: Respect prefers-reduced-motion setting in examples (#8945)

Author: devongovett

packages/@react-spectrum/s2/src/Disclosure.tsx

@@ -299,7 +299,10 @@ const panelStyles = style({
   font: 'body',
   height: '--disclosure-panel-height',
   overflow: 'clip',
-  transition: '[height]'
+  transition: {
+    default: '[height]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  }
 });
 
 const panelInner = style({

packages/dev/s2-docs/pages/react-aria/SegmentedControl.css

@@ -17,6 +17,10 @@
     border-radius: 8px;
     background: var(--gray-50);
     outline: 2px solid var(--gray-600);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   .segmented-control-item {

packages/react-aria-components/docs/Disclosure.mdx

@@ -99,6 +99,10 @@ import {ChevronRight} from 'lucide-react';
   height: var(--disclosure-panel-height);
   transition: height 250ms;
   overflow: clip;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 ```
 

packages/react-aria-components/docs/Tabs.mdx

@@ -123,6 +123,10 @@ import {Tabs, TabList, Tab, TabPanel, SelectionIndicator} from 'react-aria-compo
     position: absolute;
     transition-property: translate, width, height;
     transition-duration: 200ms;
+    
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-hovered],

packages/react-aria-components/docs/ToggleButtonGroup.mdx

@@ -242,6 +242,10 @@ import {ToggleButtonGroup, ToggleButton, SelectionIndicator} from 'react-aria-co
     border-radius: 8px;
     background: var(--gray-50);
     outline: 2px solid var(--gray-600);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   .react-aria-ToggleButton {

starters/docs/src/Disclosure.css

@@ -38,4 +38,8 @@
   height: var(--disclosure-panel-height);
   transition: height 250ms;
   overflow: clip;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }

starters/docs/src/Tabs.css

@@ -59,6 +59,10 @@
     position: absolute;
     transition-property: translate, width, height;
     transition-duration: 200ms;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &[data-selected] {

starters/tailwind/src/Disclosure.tsx

@@ -97,7 +97,7 @@ export interface DisclosurePanelProps extends AriaDisclosurePanelProps {
 
 export function DisclosurePanel({ children, ...props }: DisclosurePanelProps) {
   return (
-    <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'h-(--disclosure-panel-height) transition-[height] overflow-clip')}>
+    <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'h-(--disclosure-panel-height) motion-safe:transition-[height] overflow-clip')}>
       <div className="px-4 py-2">{children}</div>
     </AriaDisclosurePanel>
   );

starters/tailwind/src/Tabs.tsx

@@ -77,7 +77,7 @@ export function Tab(props: TabProps) {
       )}>
       {composeRenderProps(props.children, children => (<>
         {children}
-        <SelectionIndicator className="absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference transition-[translate,width,height]" />
+        <SelectionIndicator className="absolute top-0 left-0 w-full h-full z-10 bg-white rounded-full mix-blend-difference motion-safe:transition-[translate,width,height] " />
       </>))}
     </RACTab>
   );