Skip to content

fix: bump LG packages #7109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

fix: bump LG packages #7109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
29a7148
wip
paula-stacho Jul 4, 2025
6c2260a
further ts fixes
paula-stacho Jul 14, 2025
2f733f6
more ts fixes
paula-stacho Jul 14, 2025
693038a
simpler workaround
paula-stacho Jul 14, 2025
8f05251
use update dependencies script
paula-stacho Jul 14, 2025
6e574ac
update tabs & code
paula-stacho Jul 15, 2025
0832afc
.
paula-stacho Jul 15, 2025
3547eb2
prettier?
paula-stacho Jul 15, 2025
29665b0
update tests
paula-stacho Jul 15, 2025
8fba34e
import drawer and update tests again
paula-stacho Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11,898 changes: 8,287 additions & 3,611 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/compass-aggregations/src/components/pipeline-toolbar/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ describe('PipelineToolbar', function () {
const settings = within(toolbar).getByTestId('pipeline-settings');

userEvent.click(within(settings).getByTestId('save-menu-show-actions'));
const saveMenuContent = screen.getByTestId('save-menu');
const saveMenuContent = screen.getByTestId('lg-save-menu');
expect(saveMenuContent.childNodes[0].textContent).to.equal('Save');
expect(saveMenuContent.childNodes[1].textContent).to.equal('Save as');
expect(saveMenuContent.childNodes[2].textContent).to.equal('Create view');
Expand Down
2 changes: 1 addition & 1 deletion ...compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-menus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const SaveMenuComponent: React.FunctionComponent<SaveMenuProps> = ({

return (
<DropdownMenuButton<SaveMenuActions>
data-testid="save-menu"
data-lgid="lg-save-menu"
actions={menuActions}
onAction={onAction}
buttonText="Save"
Expand Down
83 changes: 42 additions & 41 deletions packages/compass-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,47 +34,48 @@
"@dnd-kit/core": "^6.0.7",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/utilities": "^3.2.1",
"@leafygreen-ui/badge": "^9.0.2",
"@leafygreen-ui/banner": "^9.0.2",
"@leafygreen-ui/button": "^22.0.2",
"@leafygreen-ui/card": "^12.0.2",
"@leafygreen-ui/checkbox": "^14.0.2",
"@leafygreen-ui/chip": "^3.0.12",
"@leafygreen-ui/code": "^16.0.2",
"@leafygreen-ui/combobox": "^11.0.2",
"@leafygreen-ui/confirmation-modal": "^6.0.2",
"@leafygreen-ui/emotion": "^4.0.9",
"@leafygreen-ui/guide-cue": "^7.0.2",
"@leafygreen-ui/hooks": "^8.3.4",
"@leafygreen-ui/icon": "^13.1.2",
"@leafygreen-ui/icon-button": "16.0.2",
"@leafygreen-ui/info-sprinkle": "^4.0.2",
"@leafygreen-ui/leafygreen-provider": "^4.0.2",
"@leafygreen-ui/logo": "^10.0.2",
"@leafygreen-ui/marketing-modal": "^5.0.2",
"@leafygreen-ui/menu": "^29.0.5",
"@leafygreen-ui/modal": "^17.0.2",
"@leafygreen-ui/palette": "^4.1.3",
"@leafygreen-ui/pipeline": "^7.0.2",
"@leafygreen-ui/polymorphic": "^2.0.5",
"@leafygreen-ui/popover": "^13.0.11",
"@leafygreen-ui/portal": "^6.0.2",
"@leafygreen-ui/radio-box-group": "^14.0.2",
"@leafygreen-ui/radio-group": "^12.0.2",
"@leafygreen-ui/search-input": "^5.0.2",
"@leafygreen-ui/segmented-control": "^10.0.2",
"@leafygreen-ui/select": "^14.0.2",
"@leafygreen-ui/skeleton-loader": "^2.0.11",
"@leafygreen-ui/split-button": "^4.1.5",
"@leafygreen-ui/table": "^13.0.1",
"@leafygreen-ui/tabs": "^14.0.2",
"@leafygreen-ui/text-area": "^10.0.2",
"@leafygreen-ui/text-input": "^14.0.2",
"@leafygreen-ui/toast": "^7.0.2",
"@leafygreen-ui/toggle": "^11.0.2",
"@leafygreen-ui/tokens": "^2.11.3",
"@leafygreen-ui/tooltip": "^13.0.13",
"@leafygreen-ui/typography": "^20.0.2",
"@leafygreen-ui/badge": "^10.0.3",
"@leafygreen-ui/banner": "^10.0.3",
"@leafygreen-ui/button": "^25.0.0",
"@leafygreen-ui/card": "^13.0.3",
"@leafygreen-ui/checkbox": "^18.0.1",
"@leafygreen-ui/chip": "^4.0.3",
"@leafygreen-ui/code": "^20.0.2",
"@leafygreen-ui/combobox": "^12.0.3",
"@leafygreen-ui/confirmation-modal": "^9.0.2",
"@leafygreen-ui/drawer": "^4.0.3",
"@leafygreen-ui/emotion": "^5.0.0",
"@leafygreen-ui/guide-cue": "^8.0.4",
"@leafygreen-ui/hooks": "^9.1.1",
"@leafygreen-ui/icon": "^14.1.0",
"@leafygreen-ui/icon-button": "^17.0.3",
"@leafygreen-ui/info-sprinkle": "^5.0.3",
"@leafygreen-ui/leafygreen-provider": "^5.0.2",
"@leafygreen-ui/logo": "^11.0.2",
"@leafygreen-ui/marketing-modal": "^6.0.4",
"@leafygreen-ui/menu": "^31.0.1",
"@leafygreen-ui/modal": "^19.0.1",
"@leafygreen-ui/palette": "^5.0.0",
"@leafygreen-ui/pipeline": "^8.0.3",
"@leafygreen-ui/polymorphic": "^3.0.3",
"@leafygreen-ui/popover": "^14.0.3",
"@leafygreen-ui/portal": "^7.0.2",
"@leafygreen-ui/radio-box-group": "^15.0.3",
"@leafygreen-ui/radio-group": "^13.0.3",
"@leafygreen-ui/search-input": "^6.0.3",
"@leafygreen-ui/segmented-control": "^11.0.3",
"@leafygreen-ui/select": "^16.0.2",
"@leafygreen-ui/skeleton-loader": "^3.0.3",
"@leafygreen-ui/split-button": "^6.1.0",
"@leafygreen-ui/table": "^15.0.1",
"@leafygreen-ui/tabs": "^17.0.0",
"@leafygreen-ui/text-area": "^12.0.1",
"@leafygreen-ui/text-input": "^16.0.1",
"@leafygreen-ui/toast": "^8.0.3",
"@leafygreen-ui/toggle": "^12.0.3",
"@leafygreen-ui/tokens": "^3.1.2",
"@leafygreen-ui/tooltip": "^14.1.1",
"@leafygreen-ui/typography": "^22.0.1",
"@mongodb-js/compass-context-menu": "^0.2.1",
"@react-aria/interactions": "^3.9.1",
"@react-aria/utils": "^3.13.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/components/actions/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ export const ItemActionButtonSize = {
} as const;

export type ItemActionButtonSize =
typeof ItemActionButtonSize[keyof typeof ItemActionButtonSize];
(typeof ItemActionButtonSize)[keyof typeof ItemActionButtonSize];
6 changes: 3 additions & 3 deletions packages/compass-components/src/components/actions/dropdown-menu-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,9 @@ export function DropdownMenuButton<Action extends string>({
<Button
ref={menuTriggerRef}
data-testid={dataTestId ? `${dataTestId}-show-actions` : undefined}
onClick={(evt) => {
evt.stopPropagation();
onClick?.(evt);
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
onClick?.(e);
}}
rightGlyph={<Icon glyph={'CaretDown'} />}
title={buttonText}
Expand Down
3 changes: 1 addition & 2 deletions packages/compass-components/src/components/actions/small-icon-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,13 @@ export const SmallIconButton = forwardRef<
) {
return (
<IconButton
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error leafygreen confuses TS a lot here
ref={ref}
className={cx(buttonSizeStyle[size], className)}
aria-label={label}
title={title}
onClick={onClick}
{...rest}
as={undefined} // HTMLButtonElement.as doesn't match the type
>
<span role="presentation" className={iconContainerStyle}>
<ActionGlyph glyph={glyph} size={size} />
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/components/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
}}
/>
<Menu
data-testid="context-menu"
data-lgid="lg-context-menu"
refEl={anchorRef}
ref={menuRef}
open={menu.isOpen}
Expand Down
3 changes: 2 additions & 1 deletion packages/compass-components/src/components/document-list/document-actions-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { spacing } from '@leafygreen-ui/tokens';
import { Button, Icon, Tooltip } from '../leafygreen';
import type { Signal } from '../signal-popover';
import { SignalPopover } from '../signal-popover';
import type { ButtonProps } from '@leafygreen-ui/button';

const actionsGroupContainer = css({
position: 'absolute',
Expand Down Expand Up @@ -83,7 +84,7 @@ function ActionButton({
tooltipText,
tooltipEnabled,
...props
}: Partial<React.ComponentProps<typeof Button>> & {
}: Partial<ButtonProps> & {
tooltipText: string;
tooltipEnabled: boolean;
}) {
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/components/guide-cue/guide-cue-groups.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ export const GROUP_STEPS_MAP = new Map<GroupName, number>(
GROUPS.map(({ id, steps }) => [id, steps])
);

export type GroupName = typeof GROUPS[number]['id'];
export type GroupName = (typeof GROUPS)[number]['id'];
4 changes: 2 additions & 2 deletions packages/compass-components/src/components/interactive-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,8 @@ function InteractivePopover<TriggerElement extends HTMLElement>({
<IconButton
className={cx(closeButtonStyles, closeButtonClassName)}
data-testid="interactive-popover-close-button"
onClick={(evt) => {
evt.stopPropagation();
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
onClose();
}}
aria-label="Close"
Expand Down
65 changes: 54 additions & 11 deletions packages/compass-components/src/components/leafygreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { default as Badge } from '@leafygreen-ui/badge';
import { default as Banner } from '@leafygreen-ui/banner';
import Checkbox from '@leafygreen-ui/checkbox';
import Card from '@leafygreen-ui/card';
import Code, { Language } from '@leafygreen-ui/code';
import Code, { Language, Panel as CodePanel } from '@leafygreen-ui/code';
import ConfirmationModal from '@leafygreen-ui/confirmation-modal';
import { default as LeafyGreenIcon } from '@leafygreen-ui/icon';
import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
Expand All @@ -18,9 +18,22 @@ import {
MongoDBLogoMark,
MongoDBLogo,
} from '@leafygreen-ui/logo';
import { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';
import {
Menu,
MenuSeparator,
MenuItem,
getLgIds as getLgIdsMenu,
} from '@leafygreen-ui/menu';
export type { MenuItemProps } from '@leafygreen-ui/menu';
import { InfoSprinkle } from '@leafygreen-ui/info-sprinkle';
import {
Drawer,
DisplayMode as DrawerDisplayMode,
DrawerLayout,
DrawerStackProvider,
useDrawerStackContext,
useDrawerToolbarContext,
} from '@leafygreen-ui/drawer';

// If a leafygreen Menu (and therefore MenuItems) makes its way into a <form>,
// clicking on a menu item will submit that form. This is because it uses a button
Expand All @@ -38,7 +51,8 @@ import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
import { Radio, RadioGroup } from '@leafygreen-ui/radio-group';
import {
SegmentedControl,
SegmentedControlOption,
SegmentedControlOption as LGSegmentedControlOption,
type SegmentedControlOptionProps,
} from '@leafygreen-ui/segmented-control';
import { Select, Option, OptionGroup } from '@leafygreen-ui/select';
import {
Expand Down Expand Up @@ -74,18 +88,39 @@ export { usePrevious, useMergeRefs } from '@leafygreen-ui/hooks';
import Toggle from '@leafygreen-ui/toggle';
import Tooltip from '@leafygreen-ui/tooltip';
import {
H1,
H2,
H3,
Subtitle,
Body,
H1 as LGH1,
H2 as LGH2,
H3 as LGH3,
Subtitle as LGSubtitle,
Body as LGBody,
InlineCode,
InlineKeyCode,
Disclaimer,
Overline,
Label,
Description,
Overline as LGOverline,
Label as LGLabel,
Description as LGDescription,
type LabelProps,
type H1Props,
type H2Props,
type H3Props,
type SubtitleProps,
type BodyProps,
type OverlineProps,
type DescriptionProps,
} from '@leafygreen-ui/typography';

// Workaround until https://jira.mongodb.org/browse/LG-5354 is resolved
const H1 = LGH1 as React.FC<H1Props>;
const H2 = LGH2 as React.FC<H2Props>;
const H3 = LGH3 as React.FC<H3Props>;
const Subtitle = LGSubtitle as React.FC<SubtitleProps>;
const Body = LGBody as React.FC<BodyProps>;
const Overline = LGOverline as React.FC<OverlineProps>;
const Description = LGDescription as React.FC<DescriptionProps>;
const Label = LGLabel as React.FC<LabelProps>;
const SegmentedControlOption =
LGSegmentedControlOption as React.FC<SegmentedControlOptionProps>;

import {
Combobox,
ComboboxOption,
Expand Down Expand Up @@ -143,6 +178,7 @@ export {
Checkbox,
Chip,
Code,
CodePanel,
ConfirmationModal,
ExpandedContent,
HeaderCell,
Expand All @@ -152,6 +188,7 @@ export {
Menu,
MenuItem,
MenuSeparator,
getLgIdsMenu,
Modal,
ModalFooter,
MarketingModal,
Expand Down Expand Up @@ -201,4 +238,10 @@ export {
Combobox,
ComboboxGroup,
ComboboxOption,
Drawer,
DrawerDisplayMode,
DrawerLayout,
DrawerStackProvider,
useDrawerStackContext,
useDrawerToolbarContext,
};
24 changes: 12 additions & 12 deletions packages/compass-components/src/components/links/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useContext, forwardRef, useMemo } from 'react';
import { Link as LGLink } from '@leafygreen-ui/typography';
import LGButton from '@leafygreen-ui/button';
import LGIconButton from '@leafygreen-ui/icon-button';
import LGButton, { type ButtonProps } from '@leafygreen-ui/button';
import LGIconButton, { type IconButtonProps } from '@leafygreen-ui/icon-button';

type RequiredURLSearchParamsContextValue = {
utmSource?: string;
Expand Down Expand Up @@ -75,20 +75,20 @@ export const Link = (({ href, children, ...rest }: LeafygreenLinkProps) => {
// eslint-disable-next-line react/display-name
export const Button = forwardRef(
(
{ href, children, ...rest }: React.ComponentProps<typeof LGButton>,
{ children, ...props }: ButtonProps,
ref: React.ForwardedRef<HTMLButtonElement>
) => {
const { utmSource, utmMedium } = useRequiredURLSearchParams();

const hrefWithParams = useMemo(() => {
if (href) {
return urlWithUtmParams(href, { utmSource, utmMedium });
if ('href' in props && props.href) {
return urlWithUtmParams(props.href, { utmSource, utmMedium });
}
return undefined;
}, [href, utmSource, utmMedium]);
}, [props, utmSource, utmMedium]);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes memo here and in other cases practically useless: the props object is being regenerated every render


return (
<LGButton href={hrefWithParams} {...rest} ref={ref}>
<LGButton {...props} href={hrefWithParams} ref={ref}>
{children}
</LGButton>
);
Expand All @@ -98,20 +98,20 @@ export const Button = forwardRef(
// eslint-disable-next-line react/display-name
export const IconButton = forwardRef(
(
{ href, children, ...rest }: React.ComponentProps<typeof LGIconButton>,
{ children, ...props }: IconButtonProps,
ref: React.ForwardedRef<HTMLAnchorElement>
) => {
const { utmSource, utmMedium } = useRequiredURLSearchParams();

const hrefWithParams = useMemo(() => {
if (href) {
return urlWithUtmParams(href, { utmSource, utmMedium });
if ('href' in props && props.href) {
return urlWithUtmParams(props.href, { utmSource, utmMedium });
}
return undefined;
}, [href, utmSource, utmMedium]);
}, [props, utmSource, utmMedium]);

return (
<LGIconButton href={hrefWithParams} {...rest} ref={ref}>
<LGIconButton href={hrefWithParams} {...props} ref={ref}>
{children}
</LGIconButton>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/components/modals/form-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const Variant = {
Danger: ButtonVariant.Danger,
} as const;

export type Variant = typeof Variant[keyof typeof Variant];
export type Variant = (typeof Variant)[keyof typeof Variant];

type FormModalProps = React.ComponentProps<typeof Modal> & {
variant?: Variant;
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/components/modals/modal-body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const Variant = {
Danger: ButtonVariant.Danger,
} as const;

export type Variant = typeof Variant[keyof typeof Variant];
export type Variant = (typeof Variant)[keyof typeof Variant];

const contentStyle = css({
padding: `0 ${spacing[800]}px`,
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/components/modals/modal-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const Variant = {
Danger: ButtonVariant.Danger,
} as const;

export type Variant = typeof Variant[keyof typeof Variant];
export type Variant = (typeof Variant)[keyof typeof Variant];

const headerStyle = css({
padding: spacing[800],
Expand Down
Loading
Loading