Merge branch 'main' into np-gm-1107

Author: nhivpham

packages/gamut-icons/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.45.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-10)
+
+### Features
+
+- **Icon:** added new MiniQuoteIcon ([4509029](https://github.com/Codecademy/gamut/commit/4509029deb86760157e0e1051dbf849670a95b92))
+
+## [9.44.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-04)
+
+### Features
+
+- **Icon:** added new OnlineClassStudentIcon ([66d8b51](https://github.com/Codecademy/gamut/commit/66d8b51d4d0bd101e6b08a5453ed687dbdec0d0f))
+
+## [9.43.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-03)
+
+### Features
+
+- **Icons:** add new icons for LX Studio platform ([935f58f](https://github.com/Codecademy/gamut/commit/935f58f6fefbe62b7ef1248b146bd95783873d0b))
+
 ### [9.42.4](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-30)
 
 **Note:** Version bump only for package @codecademy/gamut-icons

packages/gamut-icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-icons",
   "description": "Icon library for codecademy.com",
-  "version": "9.42.4",
+  "version": "9.45.0",
   "author": "Codecademy <[email protected]>",
   "dependencies": {
     "@codecademy/gamut-styles": "17.6.3",

packages/gamut-icons/src/svg/mini/mini-quote-icon.svg

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.513](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-10)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.512](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-10)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.511](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-04)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.510](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-04)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.509](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-03)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.508](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-30)
 
 **Note:** Version bump only for package @codecademy/gamut-kit

packages/gamut-icons/src/svg/regular/online-class-student-icon.svg

@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.508",
+  "version": "0.6.513",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut": "63.1.0",
-    "@codecademy/gamut-icons": "9.42.4",
+    "@codecademy/gamut": "64.1.0",
+    "@codecademy/gamut-icons": "9.45.0",
     "@codecademy/gamut-illustrations": "0.54.4",
     "@codecademy/gamut-patterns": "0.10.10",
     "@codecademy/gamut-styles": "17.6.3",

packages/gamut-kit/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [64.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-10)
+
+### Features
+
+- left/right tooltips ([caaba79](https://github.com/Codecademy/gamut/commit/caaba79f8d1a0de2f4a456d9c9e1609656a9880a))
+
+### [64.0.3](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-10)
+
+**Note:** Version bump only for package @codecademy/gamut
+
+### [64.0.2](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-04)
+
+**Note:** Version bump only for package @codecademy/gamut
+
+### [64.0.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-04)
+
+**Note:** Version bump only for package @codecademy/gamut
+
+## [64.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-06-03)
+
+### ⚠ BREAKING CHANGES
+
+- **Tabs:** Update Tabs to use react aria tabs
+
+### Features
+
+- **Tabs:** Update Tabs to use react aria tabs ([eb87396](https://github.com/Codecademy/gamut/commit/eb87396b21e5e696359c8fb49b3cd2b01609e14a))
+
 ## [63.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-05-30)
 
 ### Features

packages/gamut-kit/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "63.1.0",
+  "version": "64.1.0",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.42.4",
+    "@codecademy/gamut-icons": "9.45.0",
     "@codecademy/gamut-illustrations": "0.54.4",
     "@codecademy/gamut-patterns": "0.10.10",
     "@codecademy/gamut-styles": "17.6.3",
     "@codecademy/variance": "0.22.1",
-    "react-aria-components": "1.8.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",
     "classnames": "^2.2.5",
@@ -19,6 +18,7 @@
     "lodash": "^4.17.5",
     "marked": "^4.3.0",
     "polished": "^4.1.2",
+    "react-aria-components": "1.8.0",
     "react-aria-tabpanel": "^4.4.0",
     "react-focus-on": "^3.5.1",
     "react-hook-form": "^7.53.1",

packages/gamut/CHANGELOG.md

@@ -2,9 +2,14 @@ import { useRef } from 'react';
 import * as React from 'react';
 
 import { DelayedRenderWrapper } from '../DelayedRenderWrapper';
-import { Popover, PopoverBaseProps, PopoverProps } from '../Popover';
+import {
+  Popover,
+  PopoverFocusProps,
+  PopoverProps,
+  PopoverYPositionType,
+} from '../Popover';
 
-export type CoachmarkProps = PopoverBaseProps & {
+export type CoachmarkProps = PopoverFocusProps & {
   /**
    * Applied to the element to which the coachmark points.
    */
@@ -29,7 +34,9 @@ export type CoachmarkProps = PopoverBaseProps & {
   /**
    * Props to be passed into the popover component.
    */
-  popoverProps?: Partial<PopoverProps>;
+  popoverProps?: Partial<
+    Omit<PopoverProps, 'beak' | 'position'> & PopoverYPositionType
+  >;
 };
 
 export const Coachmark: React.FC<CoachmarkProps> = ({

packages/gamut/package.json

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import * as React from 'react';
 import { useWindowScroll, useWindowSize } from 'react-use';
 
 import { FocusTrap } from '../FocusTrap';
@@ -11,45 +10,20 @@ import {
   PopoverPortal,
   RaisedDiv,
 } from './elements';
+import { getBeakVariant } from './styles/beak';
 import { PopoverProps } from './types';
-
-const findScrollingParent = ({
-  parentElement,
-}: HTMLElement): HTMLElement | null => {
-  if (parentElement) {
-    const { overflow, overflowY, overflowX } = getComputedStyle(parentElement);
-    if (
-      [overflow, overflowY, overflowX].some((val) =>
-        ['scroll', 'auto'].includes(val)
-      )
-    ) {
-      return parentElement;
-    }
-    return findScrollingParent(parentElement); // parent of this parent is used via prop destructure
-  }
-  return null;
-};
-
-const findResizingParent = ({
-  parentElement,
-}: HTMLElement): HTMLElement | null => {
-  if (parentElement) {
-    const { overflow, overflowY, overflowX } = getComputedStyle(parentElement);
-    if ([overflow, overflowY, overflowX].some((val) => val === 'clip')) {
-      return parentElement;
-    }
-    return findResizingParent(parentElement); // parent of this parent is used via prop destructure
-  }
-  return null;
-};
+import {
+  findResizingParent,
+  findScrollingParent,
+  getDefaultOffset,
+} from './utils';
 
 export const Popover: React.FC<PopoverProps> = ({
   animation,
   align = 'left',
   beak,
   children,
   className,
-  horizontalOffset = 0,
   isOpen,
   onRequestClose,
   outline = false,
@@ -60,30 +34,72 @@ export const Popover: React.FC<PopoverProps> = ({
   role,
   variant,
   targetRef,
-  verticalOffset = variant === 'secondary' ? 15 : 20,
+  horizontalOffset = getDefaultOffset({
+    axis: 'horizontal',
+    position,
+    variant,
+  }),
+  verticalOffset = getDefaultOffset({ axis: 'vertical', position, variant }),
+
   widthRestricted,
 }) => {
+  const [popoverHeight, setPopoverHeight] = useState<number>(0);
+  const [popoverWidth, setPopoverWidth] = useState<number>(0);
   const [targetRect, setTargetRect] = useState<DOMRect>();
   const [isInViewport, setIsInViewport] = useState(true);
   const { width, height } = useWindowSize();
   const { x, y } = useWindowScroll();
 
+  const getRaisedDivDimsRef = (popover: HTMLDivElement) => {
+    if (popover && popoverHeight === 0 && popoverWidth === 0) {
+      const { height, width } = popover.getBoundingClientRect();
+      setPopoverHeight(height);
+      setPopoverWidth(width);
+    }
+  };
+
   const getPopoverPosition = useCallback(() => {
     if (!targetRect) return {};
 
+    const isLRCentered = position === 'center';
+
     const positions = {
       above: Math.round(targetRect.top - verticalOffset),
       below: Math.round(targetRect.top + targetRect.height + verticalOffset),
+      center: Math.round(
+        targetRect.top +
+          targetRect.height / 2 -
+          popoverHeight / 2 +
+          verticalOffset
+      ),
     };
     const alignments = {
-      right: Math.round(window.scrollX + targetRect.right + horizontalOffset),
-      left: Math.round(window.scrollX + targetRect.left - horizontalOffset),
+      right: isLRCentered
+        ? Math.round(targetRect.right + popoverWidth + horizontalOffset)
+        : Math.round(window.scrollX + targetRect.right + horizontalOffset),
+      left: isLRCentered
+        ? Math.round(targetRect.left - popoverWidth - horizontalOffset)
+        : Math.round(window.scrollX + targetRect.left - horizontalOffset),
+      center: Math.round(
+        targetRect.left +
+          targetRect.width / 2 -
+          popoverWidth / 2 +
+          horizontalOffset
+      ),
     };
     return {
       top: positions[position],
       left: alignments[align],
     };
-  }, [targetRect, verticalOffset, horizontalOffset, align, position]);
+  }, [
+    align,
+    horizontalOffset,
+    popoverHeight,
+    popoverWidth,
+    position,
+    targetRect,
+    verticalOffset,
+  ]);
 
   useEffect(() => {
     setTargetRect(targetRef?.current?.getBoundingClientRect());
@@ -149,12 +165,12 @@ export const Popover: React.FC<PopoverProps> = ({
     },
     [onRequestClose, targetRef]
   );
-
   if ((!isOpen || !targetRef) && !animation) return null;
   const alignment =
     (variant === 'primary' || beak) && beak !== 'center'
       ? 'aligned'
       : 'centered';
+
   const contents = (
     <PopoverContainer
       align={align}
@@ -169,15 +185,14 @@ export const Popover: React.FC<PopoverProps> = ({
       <RaisedDiv
         alignment={alignment}
         outline={outline ? 'outline' : 'boxShadow'}
+        ref={getRaisedDivDimsRef}
         variant={variant}
         widthRestricted={widthRestricted}
       >
         {beak && (
           <BeakBox variant={position}>
             <Beak
-              beak={`${position}-${beak}${
-                variant === 'secondary' ? '-sml' : ''
-              }`}
+              beak={getBeakVariant({ align, position, beak, variant })}
               data-testid="popover-beak"
               hasBorder={outline || variant === 'secondary'}
               size={variant === 'secondary' ? 'sml' : 'lrg'}

packages/gamut/src/Coachmark/index.tsx

@@ -2,25 +2,26 @@ import { timingValues, variant } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import { AnimatePresence, motion } from 'framer-motion';
-import * as React from 'react';
 
 import { BodyPortal } from '../BodyPortal';
 import { Box, FlexBox } from '../Box';
-import { popoverToolTipBodyAlignments } from '../Tip/shared/styles';
+import { popoverToolTipBodyAlignments } from '../Tip/shared/styles/styles';
 import { WithChildrenProp } from '../utils';
+import {
+  popoverStates,
+  raisedDivVariants,
+  transformValues,
+} from './styles/base';
+import { patternContainerBaseStyles } from './styles/pattern';
 import {
   beakBorderStates,
   beakBoxVariants,
   beakSize,
   beakVariants,
   outlineVariants,
-  patternContainerBaseStyles,
   patternVariantStyles,
-  popoverStates,
-  raisedDivVariants,
-  transformValues,
   widthStates,
-} from './styles';
+} from './styles/variants';
 import { PopoverProps } from './types';
 
 export type PopoverVariants = StyleProps<typeof raisedDivVariants> & {