Merge pull request #597 from homburg/master

Docs: Fix tabs animated example

website/src/pages/tabs.mdx

@@ -763,28 +763,39 @@ With a little composition we can animate the selected tab bar.
   const HORIZONTAL_PADDING = 8;
   const AnimatedContext = React.createContext();
 
-  function AnimatedTabs({ color, ...rest }) {
+  function AnimatedTabs({ color, children, ...rest }) {
     // some state to store the position we want to animate to
     const [activeRect, setActiveRect] = useState(null);
+    const ref = useRef();
+    const rect = useRect(ref);
 
     return (
       // put the function to change the styles on context so an active Tab
       // can call it, then style it up
       <AnimatedContext.Provider value={setActiveRect}>
         {/* make sure to forward props since we're wrapping Tabs */}
-        <Tabs {...rest} style={{ ...rest.style, position: "relative" }} />
-        <div
-          style={{
-            position: "absolute",
-            height: 2,
-            background: color,
-            transition: "all 300ms ease",
-            left: activeRect && activeRect.left,
-            // subtract both sides of horizontal padding to center the div
-            width: activeRect && activeRect.width - HORIZONTAL_PADDING * 2,
-            top: activeRect && activeRect.bottom - 2,
-          }}
-        />
+        <Tabs
+          {...rest}
+          ref={ref}
+          style={{ ...rest.style, position: "relative" }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              height: 2,
+              background: color,
+              transition: "all 300ms ease",
+              left:
+                (activeRect && activeRect.left) -
+                (rect && rect.left) +
+                HORIZONTAL_PADDING,
+              top: (activeRect && activeRect.bottom) - (rect && rect.top),
+              // subtract both sides of horizontal padding to center the div
+              width: activeRect && activeRect.width - HORIZONTAL_PADDING * 2,
+            }}
+          />
+          {children}
+        </Tabs>
       </AnimatedContext.Provider>
     );
   }