@codecademy/styleguide 79.0.1-alpha.2b3284.0 → 79.0.1-alpha.b3f84e.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.0.1-alpha.2b3284.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.2b3284.0) (2026-01-29)
+### [79.0.1-alpha.b3f84e.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.b3f84e.0) (2026-01-29)
 
 **Note:** Version bump only for package @codecademy/styleguide
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.0.1-alpha.2b3284.0",
+  "version": "79.0.1-alpha.b3f84e.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "2bd3d11c403cc6a30e8b861e343f08b7c87e100f"
+  "gitHead": "3d98d84d938c1cc17ecb832b2ac9310c4b0e9188"
 }

package/src/lib/Molecules/Popover/Popover.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from '@codecademy/gamut';
 import * as patterns from '@codecademy/gamut-patterns';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 const meta: Meta<typeof Popover> = {
   component: Popover,
@@ -27,91 +27,10 @@ type Story = StoryObj<typeof Popover>;
 
 type PopoverExampleProps = PopoverProps & Pick<FlexBoxProps, 'p'>;
 
-const POPOVER_HEIGHT_ESTIMATE = 200; // Estimate for flip calculation
-const VIEWPORT_PADDING = 16; // Padding from viewport edge
-
-const PopoverExample = ({
-  p = 16,
-  position: preferredPosition = 'below',
-  ...rest
-}: PopoverExampleProps) => {
+const PopoverExample = ({ p = 16, ...rest }: PopoverExampleProps) => {
   const [open, setOpen] = useState(false);
-  const [computedPosition, setComputedPosition] = useState<
-    'above' | 'below' | 'center'
-  >(preferredPosition === 'center' ? 'center' : preferredPosition);
-  const [availableHeight, setAvailableHeight] = useState<number | undefined>(
-    undefined
-  );
   const activeElRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const [popoverHeight, setPopoverHeight] = useState(POPOVER_HEIGHT_ESTIMATE);
-
-  const calculatePosition = useCallback(() => {
-    const target = activeElRef.current;
-    if (!target || preferredPosition === 'center') return;
-
-    const targetRect = target.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-
-    const spaceBelow = viewportHeight - targetRect.bottom - VIEWPORT_PADDING;
-    const spaceAbove = targetRect.top - VIEWPORT_PADDING;
-
-    // Use measured height if available, otherwise estimate
-    const heightToFit = popoverHeight;
-
-    let newPosition: 'above' | 'below' =
-      preferredPosition === 'above' ? 'above' : 'below';
-
-    if (preferredPosition === 'below') {
-      // Prefer below, but flip to above if not enough space below and more space above
-      if (spaceBelow < heightToFit && spaceAbove > spaceBelow) {
-        newPosition = 'above';
-      } else {
-        newPosition = 'below';
-      }
-    } else if (preferredPosition === 'above') {
-      // Prefer above, but flip to below if not enough space above and more space below
-      if (spaceAbove < heightToFit && spaceBelow > spaceAbove) {
-        newPosition = 'below';
-      } else {
-        newPosition = 'above';
-      }
-    }
-
-    setComputedPosition(newPosition);
-
-    // Set max height based on the available space in the computed direction
-    const maxAvailableHeight = newPosition === 'below' ? spaceBelow : spaceAbove;
-    setAvailableHeight(Math.max(maxAvailableHeight, 100)); // Minimum 100px
-  }, [preferredPosition, popoverHeight]);
-
-  // Measure popover height when it opens
-  useEffect(() => {
-    if (open && popoverRef.current) {
-      const { height } = popoverRef.current.getBoundingClientRect();
-      if (height > 0) {
-        setPopoverHeight(height);
-      }
-    }
-  }, [open]);
-
-  // Recalculate position on open, scroll, or resize
-  useEffect(() => {
-    if (!open) return;
-
-    calculatePosition();
-
-    window.addEventListener('scroll', calculatePosition, true);
-    window.addEventListener('resize', calculatePosition);
-
-    return () => {
-      window.removeEventListener('scroll', calculatePosition, true);
-      window.removeEventListener('resize', calculatePosition);
-    };
-  }, [open, calculatePosition]);
-
   const toggleOpen = () => setOpen(!open);
-
   return (
     <>
       <Box ref={activeElRef} width="fit-content">
@@ -121,53 +40,11 @@ const PopoverExample = ({
         <Popover
           {...(rest as any)}
           isOpen={open}
-          popoverContainerRef={popoverRef}
-          position={computedPosition}
           targetRef={activeElRef}
           onRequestClose={() => setOpen(false)}
         >
-          {/*
-            Apply maxHeight and overflow to the content wrapper.
-            This makes the popover contents scrollable when they exceed
-            the available viewport space.
-          */}
-          <FlexBox
-            alignItems="flex-start"
-            flexDirection="column"
-            p={p}
-            maxHeight={availableHeight ? `${availableHeight}px` as any : undefined}
-            overflowY="auto"
-          >
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8} opacity={0.7}>
-              Position: {computedPosition}
-              {computedPosition !== preferredPosition && ' (flipped!)'}
-              {' | '}
-              Max height: {availableHeight ? `${Math.round(availableHeight)}px` : 'auto'}
-            </Box>
+          <FlexBox alignItems="flex-start" flexDirection="column" p={p}>
+            <Box mb={8}>Hooray!</Box>
             <FillButton size="small" onClick={() => setOpen(false)}>
               Close Popover
             </FillButton>
@@ -203,6 +80,7 @@ export const Above: Story = {
 export const Below: Story = {
   render: (args) => <PopoverExample {...args} beak="center" position="below" />,
 };
+
 export const CenterLeft: Story = {
   render: (args) => (
     <PopoverExample
@@ -236,6 +114,7 @@ export const PopoverCheckerDense: Story = {
     />
   ),
 };
+
 export const PopoverCheckerLoose: Story = {
   render: (args) => (
     <PopoverExample
@@ -245,6 +124,7 @@ export const PopoverCheckerLoose: Story = {
     />
   ),
 };
+
 export const PopoverCheckerRegular: Story = {
   render: (args) => (
     <PopoverExample
@@ -254,6 +134,7 @@ export const PopoverCheckerRegular: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalADense: Story = {
   render: (args) => (
     <PopoverExample
@@ -263,6 +144,7 @@ export const PopoverDiagonalADense: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalALoose: Story = {
   render: (args) => (
     <PopoverExample
@@ -272,6 +154,7 @@ export const PopoverDiagonalALoose: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalARegular: Story = {
   render: (args) => (
     <PopoverExample