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

* adjust breakpoint for icons in documents tab

* lowered the breakpoint and updated comment format

Author: rubydong

packages/compass-components/src/components/actions/dropdown-menu-button.tsx

@@ -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>[];
@@ -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>({
@@ -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.
@@ -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>
             )}

packages/compass-crud/src/components/add-data-menu.tsx

@@ -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',
@@ -55,6 +56,7 @@ function AddDataMenuButton({
         leftGlyph: <Icon glyph="PlusWithCircle" />,
         disabled: isDisabled,
       }}
+      narrowBreakpoint={DOCUMENT_NARROW_ICON_BREAKPOINT}
     ></DropdownMenuButton>
   );
 }

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -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%',
@@ -234,6 +235,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
                 size: 'xsmall',
                 leftGlyph: <Icon glyph="Export" />,
               }}
+              narrowBreakpoint={DOCUMENT_NARROW_ICON_BREAKPOINT}
             />
           )}
           {!readonly && (

packages/compass-crud/src/components/delete-data-menu.tsx

@@ -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',
     },

packages/compass-crud/src/components/update-data-menu.tsx

@@ -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',
     },

packages/compass-crud/src/constants/document-narrow-icon-breakpoint.ts

@@ -0,0 +1,4 @@
+/**
+ * This is the width at which the icons switch to narrow mode in the Documents tab.
+ */
+export const DOCUMENT_NARROW_ICON_BREAKPOINT = '960px';