Skip to content

feat: adjust breakpoint for icons in documents tab CLOUDP-328862 #7084

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

Merged
merged 4 commits into from
Jul 3, 2025
Merged

feat: adjust breakpoint for icons in documents tab CLOUDP-328862 #7084

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a27b606
adjust breakpoint for icons in documents tab
rubydong Jul 2, 2025
3be273d
Merge branch 'main' into cloudp-328862
rubydong Jul 2, 2025
b7da39d
lowered the breakpoint and updated comment format
rubydong Jul 3, 2025
9cec050
Merge branch 'cloudp-328862' of https://github.com/mongodb-js/compass…
rubydong Jul 3, 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
23 changes: 16 additions & 7 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 @@ -11,12 +11,13 @@ import { actionTestId } from './utils';
import { ActionGlyph } from './action-glyph';
import { isSeparatorMenuAction, type MenuAction } from './item-action-menu';

const hiddenOnNarrowStyles = css({
[`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
{
display: 'none',
},
});
const getHiddenOnNarrowStyles = (narrowBreakpoint: string) =>
css({
[`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < ${narrowBreakpoint})`]:
{
display: 'none',
},
});

export type DropdownMenuButtonProps<Action extends string> = {
actions: MenuAction<Action>[];
Expand All @@ -29,6 +30,7 @@ export type DropdownMenuButtonProps<Action extends string> = {
buttonText: string;
buttonProps: ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
hideOnNarrow?: boolean;
narrowBreakpoint?: string;
};

export function DropdownMenuButton<Action extends string>({
Expand All @@ -42,6 +44,7 @@ export function DropdownMenuButton<Action extends string>({
iconSize = ItemActionButtonSize.Default,
'data-testid': dataTestId,
hideOnNarrow = true,
narrowBreakpoint = '900px',
}: DropdownMenuButtonProps<Action>) {
// This ref is used by the Menu component to calculate the height and position
// of the menu.
Expand Down Expand Up @@ -97,7 +100,13 @@ export function DropdownMenuButton<Action extends string>({
{...buttonProps}
>
{buttonText && (
<span className={hideOnNarrow ? hiddenOnNarrowStyles : undefined}>
<span
className={
hideOnNarrow
? getHiddenOnNarrowStyles(narrowBreakpoint)
: undefined
}
>
{buttonText}
</span>
)}
Expand Down
2 changes: 2 additions & 0 deletions packages/compass-crud/src/components/add-data-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
} from '@mongodb-js/compass-components';
import type { MenuAction } from '@mongodb-js/compass-components';
import { usePreference } from 'compass-preferences-model/provider';
import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';

const tooltipContainerStyles = css({
display: 'flex',
Expand Down Expand Up @@ -55,6 +56,7 @@ function AddDataMenuButton({
leftGlyph: <Icon glyph="PlusWithCircle" />,
disabled: isDisabled,
}}
narrowBreakpoint={DOCUMENT_NARROW_ICON_BREAKPOINT}
></DropdownMenuButton>
);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/compass-crud/src/components/crud-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import UpdateMenu from './update-data-menu';
import DeleteMenu from './delete-data-menu';
import { QueryBar } from '@mongodb-js/compass-query-bar';
import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';

const crudQueryBarStyles = css({
width: '100%',
Expand Down Expand Up @@ -234,6 +235,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
size: 'xsmall',
leftGlyph: <Icon glyph="Export" />,
}}
narrowBreakpoint={DOCUMENT_NARROW_ICON_BREAKPOINT}
/>
)}
{!readonly && (
Expand Down
3 changes: 2 additions & 1 deletion packages/compass-crud/src/components/delete-data-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import {
WorkspaceContainer,
css,
} from '@mongodb-js/compass-components';
import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';

type DeleteMenuButtonProps = {
isWritable: boolean;
onClick: () => void;
};

const hiddenOnNarrowStyles = css({
[`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
[`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < ${DOCUMENT_NARROW_ICON_BREAKPOINT})`]:
{
display: 'none',
},
Expand Down
3 changes: 2 additions & 1 deletion packages/compass-crud/src/components/update-data-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import {
css,
WorkspaceContainer,
} from '@mongodb-js/compass-components';
import { DOCUMENT_NARROW_ICON_BREAKPOINT } from '../constants/document-narrow-icon-breakpoint';

type UpdateMenuButtonProps = {
isWritable: boolean;
onClick: () => void;
};

const hiddenOnNarrowStyles = css({
[`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
[`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < ${DOCUMENT_NARROW_ICON_BREAKPOINT})`]:
{
display: 'none',
},
Expand Down
1 change: 1 addition & 0 deletions packages/compass-crud/src/constants/document-narrow-icon-breakpoint.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const DOCUMENT_NARROW_ICON_BREAKPOINT = '1264px'; // This is the width at which the icons switch to narrow mode in the Documents tab.
Copy link
Contributor

@kraenhansen kraenhansen Jul 3, 2025

Choose a reason for hiding this comment

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

nit: Might as use an actual doc comment here.

Suggested change
export const DOCUMENT_NARROW_ICON_BREAKPOINT = '1264px'; // This is the width at which the icons switch to narrow mode in the Documents tab.
/**
* The width at which the icons switch to narrow mode in the Documents tab
*/
export const DOCUMENT_NARROW_ICON_BREAKPOINT = '1264px';

Loading