single row height

mongodb-js · Mar 27, 2024 · 47f021a · 47f021a
1 parent d523d2c
commit 47f021a
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 20 deletions.
diff --git a/packages/compass-connections-navigation/src/collection-item.tsx b/packages/compass-connections-navigation/src/collection-item.tsx
@@ -9,7 +9,7 @@ import {
   cx,
 } from '@mongodb-js/compass-components';
 import type { ItemAction } from '@mongodb-js/compass-components';
-import { COLLECTION_ROW_HEIGHT } from './constants';
+import { ROW_HEIGHT } from './constants';
 import {
   ItemContainer,
   ItemLabel,
@@ -40,11 +40,11 @@ const CollectionIcon: React.FunctionComponent<{
 };
 
 const collectionItem = css({
-  height: COLLECTION_ROW_HEIGHT,
+  height: ROW_HEIGHT,
 });
 
 const itemButtonWrapper = css({
-  height: COLLECTION_ROW_HEIGHT,
+  height: ROW_HEIGHT,
   paddingRight: spacing[1],
 });
 

diff --git a/packages/compass-connections-navigation/src/connection-item.tsx b/packages/compass-connections-navigation/src/connection-item.tsx
@@ -10,7 +10,7 @@ import {
   ServerIcon,
 } from '@mongodb-js/compass-components';
 import type { ItemAction } from '@mongodb-js/compass-components';
-import { CONNECTION_ROW_HEIGHT } from './constants';
+import { ROW_HEIGHT } from './constants';
 import {
   ItemContainer,
   ItemLabel,
@@ -32,11 +32,11 @@ const iconStyles = css({
 });
 
 const connectionItem = css({
-  height: CONNECTION_ROW_HEIGHT,
+  height: ROW_HEIGHT,
 });
 
 const itemButtonWrapper = css({
-  height: CONNECTION_ROW_HEIGHT,
+  height: ROW_HEIGHT,
   paddingRight: spacing[1],
 });
 

diff --git a/packages/compass-connections-navigation/src/connections-navigation-tree.tsx b/packages/compass-connections-navigation/src/connections-navigation-tree.tsx
@@ -13,7 +13,7 @@ import { PlaceholderItem } from './placeholder-item';
 import {
   MAX_COLLECTION_PLACEHOLDER_ITEMS,
   MAX_DATABASE_PLACEHOLDER_ITEMS,
-  DATABASE_ROW_HEIGHT,
+  ROW_HEIGHT,
 } from './constants';
 import { DatabaseItem } from './database-item';
 import { CollectionItem } from './collection-item';
@@ -491,7 +491,7 @@ const ConnectionsNavigationTree: React.FunctionComponent<{
               height={height}
               itemData={itemData}
               itemCount={items.length}
-              itemSize={DATABASE_ROW_HEIGHT}
+              itemSize={ROW_HEIGHT}
               itemKey={getItemKey}
               overscanCount={__TEST_REACT_WINDOW_OVERSCAN ?? 5}
             >

diff --git a/packages/compass-connections-navigation/src/constants.tsx b/packages/compass-connections-navigation/src/constants.tsx
@@ -4,13 +4,7 @@ import { spacing } from '@mongodb-js/compass-components';
 // do we want to / need to?
 export const MAX_COLLECTION_PLACEHOLDER_ITEMS = Infinity;
 export const MAX_DATABASE_PLACEHOLDER_ITEMS = Infinity;
-export const DATABASE_ROW_HEIGHT = spacing[5];
-// export const COLLECTION_ROW_HEIGHT = spacing[4] + spacing[1];
-// TODO: Discuss with claudia, but this should make our lives much easier as
-// without this we need to manually trigger recalc/rerender on all the items in
-// the list on expand/collapse and the difference in size is not that noticeable
-export const COLLECTION_ROW_HEIGHT = DATABASE_ROW_HEIGHT;
-export const CONNECTION_ROW_HEIGHT = DATABASE_ROW_HEIGHT;
+export const ROW_HEIGHT = spacing[5];
 // export const COLLETIONS_MARGIN_BOTTOM = spacing[1];
 
 export type Actions =

diff --git a/packages/compass-connections-navigation/src/database-item.tsx b/packages/compass-connections-navigation/src/database-item.tsx
@@ -9,7 +9,7 @@ import {
   Icon,
 } from '@mongodb-js/compass-components';
 import type { ItemAction } from '@mongodb-js/compass-components';
-import { DATABASE_ROW_HEIGHT } from './constants';
+import { ROW_HEIGHT } from './constants';
 import {
   ItemContainer,
   ItemLabel,
@@ -26,11 +26,11 @@ import type { Actions } from './constants';
 import { getItemPaddingClass } from './utils';
 
 const databaseItem = css({
-  height: DATABASE_ROW_HEIGHT,
+  height: ROW_HEIGHT,
 });
 
 const itemButtonWrapper = css({
-  height: DATABASE_ROW_HEIGHT,
+  height: ROW_HEIGHT,
   paddingRight: spacing[1],
 });
 

diff --git a/packages/compass-connections-navigation/src/placeholder-item.tsx b/packages/compass-connections-navigation/src/placeholder-item.tsx
@@ -2,13 +2,13 @@
 import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import { Placeholder, css, cx } from '@mongodb-js/compass-components';
-import { COLLECTION_ROW_HEIGHT } from './constants';
+import { ROW_HEIGHT } from './constants';
 import { getItemPaddingClass } from './utils';
 
 const placeholderItem = css({
   display: 'flex',
   alignItems: 'center',
-  height: COLLECTION_ROW_HEIGHT,
+  height: ROW_HEIGHT,
 });
 
 export const PlaceholderItem: React.FunctionComponent<{