Merge branch 'main' into cass-gm-833

Author: dreamwasp

packages/gamut-kit/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.466](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-01-31)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
+### [0.6.465](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-01-31)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.464](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-01-29)
 
 **Note:** Version bump only for package @codecademy/gamut-kit

packages/gamut-kit/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.464",
+  "version": "0.6.466",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut": "57.7.3",
+    "@codecademy/gamut": "58.0.0",
     "@codecademy/gamut-icons": "9.37.2",
     "@codecademy/gamut-illustrations": "0.51.0",
     "@codecademy/gamut-patterns": "0.10.2",

packages/gamut/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [58.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-01-31)
+
+### ⚠ BREAKING CHANGES
+
+- **Menu:** updates menu variants and usage guidance
+
+### Features
+
+- **Menu:** updates menu variants and usage guidance ([3b3e1f6](https://github.com/Codecademy/gamut/commit/3b3e1f662f457f9200b1377b095455874d3f7123))
+
+### [57.7.4](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-01-31)
+
+### Bug Fixes
+
+- **Tip:** Fixes hover gap and click issues with ToolTips and PreviewTips ([84030ff](https://github.com/Codecademy/gamut/commit/84030ff4b4cd1f676a706e8961a4dd95b242445c))
+
 ### [57.7.3](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-01-29)
 
 ### Bug Fixes

packages/gamut/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "57.7.3",
+  "version": "58.0.0",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.37.2",

packages/gamut/src/DataList/Controls/FilterControl.tsx

@@ -74,7 +74,7 @@ export const FilterControl: React.FC<FilterProps> = ({
             maxHeight={300}
             overflowY="auto"
             width="max-content"
-            variant="action"
+            variant="popover"
           >
             {[SELECT_ALL, ...options].map((opt) => {
               const { text, value } = formatOption(opt);

packages/gamut/src/Menu/Menu.tsx

@@ -8,7 +8,7 @@ export const Menu = forwardRef<
   Omit<ComponentProps<typeof List>, 'root'>
 >(
   (
-    { children, variant = 'select', spacing = 'normal', role, ...rest },
+    { children, variant = 'popover', spacing = 'normal', role, ...rest },
     ref
   ) => {
     const currentContext = useMenu({ variant, role, spacing });

packages/gamut/src/Menu/MenuContext.tsx

@@ -4,14 +4,14 @@ import { ListProps } from '../List';
 
 export interface MenuContextProps {
   spacing: 'normal' | 'condensed';
-  variant: 'select' | 'navigation' | 'action';
+  variant: 'popover' | 'fixed';
   depth: number;
   role: ListProps['role'];
 }
 
 export const MenuContext = createContext<MenuContextProps>({
   spacing: 'normal',
-  variant: 'select',
+  variant: 'popover',
   depth: 0,
   role: undefined,
 });

packages/gamut/src/Menu/MenuItem.tsx

@@ -15,9 +15,8 @@ const getListItemType = (href: boolean, onClick: boolean) =>
   href ? 'link' : onClick ? 'button' : 'item';
 
 const activePropnames = {
-  navigation: 'active-navlink',
-  action: 'active',
-  select: 'selected',
+  fixed: 'active-navlink',
+  popover: 'active',
 };
 
 const currentItemText = {
@@ -41,7 +40,7 @@ export const MenuItem = forwardRef<
   const computed = {
     ...props,
     ...rest,
-    variant: variant === 'select' ? 'select' : 'link',
+    variant: 'link',
     role: role === 'menu' ? 'menuitem' : undefined,
     [activeProp]: active,
   } as ListItemProps;

packages/gamut/src/Menu/MenuSeparator.tsx

@@ -2,16 +2,12 @@ import * as React from 'react';
 
 import { Box, FlexBox } from '../Box';
 import { FlexBoxProps } from '../Box/props';
-import { useMenuContext } from './MenuContext';
 
 interface MenuSeperatorProps extends FlexBoxProps {
   children?: never;
 }
 
 export const MenuSeparator: React.FC<MenuSeperatorProps> = (props) => {
-  const { variant } = useMenuContext();
-  if (variant !== 'action') return null;
-
   return (
     <FlexBox as="li" role="separator" height={8} fit center {...props}>
       <Box fit height="1px" bg="text-disabled" borderRadius="sm" mx={16} />

packages/gamut/src/Menu/__tests__/Menu.test.tsx

@@ -39,17 +39,17 @@ describe('Menu', () => {
     screen.getByRole('button');
     expect(screen.queryByRole('menuitem')).toBeNull();
   });
-  it('renders menu separators when the variant is action', () => {
+  it('renders menu separators when variant is popover', () => {
     renderView({
-      variant: 'action',
+      variant: 'popover',
       children: <MenuSeparator />,
     });
 
     screen.getByRole('separator');
   });
-  it('renders deep menu separators while the parent variant is action', () => {
+  it('renders deep menu separators', () => {
     renderView({
-      variant: 'action',
+      variant: 'popover',
       children: (
         <Menu>
           <MenuSeparator />
@@ -59,20 +59,13 @@ describe('Menu', () => {
 
     screen.getByRole('separator');
   });
-  it('does not render separators when the variant is select + navigation', () => {
+  it('renders menu separators when variant is fixed', () => {
     renderView({
-      variant: 'select',
+      variant: 'fixed',
       children: <MenuSeparator />,
     });
 
-    expect(screen.queryByRole('separator')).toBeNull();
-
-    renderView({
-      variant: 'navigation',
-      children: <MenuSeparator />,
-    });
-
-    expect(screen.queryByRole('separator')).toBeNull();
+    screen.getByRole('separator');
   });
   it('renders and icon only when specified', () => {
     renderView({

packages/gamut/src/Menu/elements.tsx

@@ -32,11 +32,12 @@ export interface ListProps extends ListStyleProps, StyleStateProps {
   /** How offset spacing should be */
   spacing?: 'normal' | 'condensed';
   /** Menu variants for specific use cases and styles */
-  variant?: 'select' | 'navigation' | 'action';
+  variant?: 'popover' | 'fixed';
   /** is root menu */
   root?: boolean;
   /** bordered */
   as?: 'ul' | 'ol';
+  showBorder?: boolean;
 }
 
 const StyledList = styled('ul', styledOptions<'ul'>())<ListProps>(
@@ -54,6 +55,8 @@ const StyledList = styled('ul', styledOptions<'ul'>())<ListProps>(
       minWidth: 192,
       bg: 'background',
       p: 0,
+    },
+    showBorder: {
       border: 1,
       borderRadius: 'sm',
     },
@@ -65,8 +68,16 @@ const StyledList = styled('ul', styledOptions<'ul'>())<ListProps>(
 export const List = forwardRef<
   HTMLUListElement,
   ComponentProps<typeof StyledList>
->(({ context = true, m = 0, root = true, ...rest }, ref) => (
-  <StyledList context={context} m={m} root={root} ref={ref} {...rest} />
+>(({ context = true, m = 0, root = true, variant, ...rest }, ref) => (
+  <StyledList
+    context={context}
+    m={m}
+    root={root}
+    showBorder={variant !== 'fixed'}
+    ref={ref}
+    variant={variant}
+    {...rest}
+  />
 ));
 
 const interactiveVariants = system.variant({

packages/gamut/src/Popover/Popover.tsx

@@ -5,6 +5,7 @@ import { useWindowScroll, useWindowSize } from 'react-use';
 import { FocusTrap } from '../FocusTrap';
 import {
   Beak,
+  BeakBox,
   PatternContainer,
   PopoverContainer,
   PopoverPortal,
@@ -172,12 +173,16 @@ export const Popover: React.FC<PopoverProps> = ({
         widthRestricted={widthRestricted}
       >
         {beak && (
-          <Beak
-            outline={outline ? 'outline' : 'boxShadow'}
-            beak={`${position}-${beak}${variant === 'secondary' ? '-sml' : ''}`}
-            data-testid="popover-beak"
-            size={variant === 'secondary' ? 'sml' : 'lrg'}
-          />
+          <BeakBox variant={position}>
+            <Beak
+              beak={`${position}-${beak}${
+                variant === 'secondary' ? '-sml' : ''
+              }`}
+              data-testid="popover-beak"
+              size={variant === 'secondary' ? 'sml' : 'lrg'}
+              hasBorder={outline || variant === 'secondary'}
+            />
+          </BeakBox>
         )}
         {children}
       </RaisedDiv>

packages/gamut/src/Popover/elements.tsx

@@ -5,10 +5,12 @@ import { AnimatePresence, motion } from 'framer-motion';
 import * as React from 'react';
 
 import { BodyPortal } from '../BodyPortal';
-import { Box } from '../Box';
+import { Box, FlexBox } from '../Box';
 import { popoverToolTipBodyAlignments } from '../Tip/shared/styles';
 import { WithChildrenProp } from '../utils';
 import {
+  beakBorderStates,
+  beakBoxVariants,
   beakSize,
   beakVariants,
   outlineVariants,
@@ -39,10 +41,13 @@ export const RaisedDiv = styled.div<
 
 export const Beak = styled(Box)<
   StyleProps<typeof popoverStates> &
-    StyleProps<typeof outlineVariants> &
     StyleProps<typeof beakVariants> &
-    StyleProps<typeof beakSize>
->(beakVariants, beakSize);
+    StyleProps<typeof beakSize> &
+    StyleProps<typeof beakBorderStates>
+>(beakBorderStates, beakVariants, beakSize);
+
+export const BeakBox =
+  styled(FlexBox)<StyleProps<typeof beakBoxVariants>>(beakBoxVariants);
 
 export const PatternContainer = styled.div(
   variant({

packages/gamut/src/Popover/styles.tsx

@@ -28,6 +28,7 @@ export const raisedDivVariants = variant({
   },
 });
 
+const borderStyles = { border: 1 } as const;
 export const outlineVariants = variant({
   defaultVariant: 'boxShadow',
   prop: 'outline',
@@ -36,8 +37,7 @@ export const outlineVariants = variant({
       boxShadow: '0 0 16px rgba(0, 0, 0, 0.1), 0 0 24px rgba(0, 0, 0, 0.15)',
     },
     outline: {
-      borderColor: 'secondary',
-      border: 1,
+      ...borderStyles,
       boxShadow: 'none',
     },
   },
@@ -50,6 +50,28 @@ export const widthStates = states({
   },
 });
 
+export const beakBorderStates = states({
+  hasBorder: borderStyles,
+});
+
+export const beakBoxVariants = variant({
+  base: {
+    alignItems: 'flex-end',
+    height: '15px',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    width: '100%',
+  },
+  variants: {
+    above: {
+      bottom: -15,
+    },
+    below: {
+      top: -15,
+    },
+  },
+});
 const beakVariantsArray = [
   'below-left',
   'below-right',
@@ -72,8 +94,10 @@ const beakVariantStyles = createVariantsFromAlignments(
 
 export const beakVariants = variant({
   base: {
-    position: 'absolute',
     transform: 'rotate(45deg)',
+    background: 'transparent',
+    zIndex: 1,
+    position: 'fixed',
   },
   prop: 'beak',
   variants: beakVariantStyles,

packages/gamut/src/Popover/utils.tsx

@@ -3,14 +3,14 @@ import { theme } from '@codecademy/gamut-styles';
 import { tooltipBackgroundColor } from '../Tip/shared/styles';
 
 const popoverAbove = {
-  borderRight: 'inherit',
-  borderBottom: 'inherit',
+  borderLeft: 'none',
+  borderTop: 'none',
   top: 'calc(100% - 10px)',
 } as const;
 
 const popoverBelow = {
-  borderLeft: 'inherit',
-  borderTop: 'inherit',
+  borderRight: 'none',
+  borderBottom: 'none',
   top: '-10px',
 } as const;
 
@@ -27,14 +27,14 @@ const beakCenter = {
 };
 
 const popoverAboveSml = {
-  borderRight: 'inherit',
-  borderBottom: 'inherit',
+  borderLeft: 'none',
+  borderTop: 'none',
   top: 'calc(100% - 8px)',
 } as const;
 
 const popoverBelowSml = {
-  borderLeft: 'inherit',
-  borderTop: 'inherit',
+  borderRight: 'none',
+  borderBottom: 'none',
   top: '-8px',
 } as const;