chore(compass-components): less document whitespace (#6439)

* Decreasing padding around icon in expand button * Decrease padding of actions group container * Remove 10px from left side of trash icon * Shave 4px off between + and ▶ * Update "show more" offset
mongodb-js · Nov 5, 2024 · a175cfb · a175cfb
1 parent d7d58d5
commit a175cfb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/packages/compass-components/src/components/document-list/document-actions-group.tsx b/packages/compass-components/src/components/document-list/document-actions-group.tsx
@@ -9,11 +9,11 @@ const actionsGroupContainer = css({
   position: 'absolute',
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
   width: '100%',
-  top: spacing[2] + spacing[1],
-  paddingLeft: spacing[3],
-  paddingRight: spacing[3],
+  top: spacing[300],
+  paddingLeft: spacing[300],
+  paddingRight: spacing[300],
   pointerEvents: 'none',
 });
 
@@ -44,6 +44,13 @@ const actionsGroupSignalPopover = css({
   display: 'block !important',
 });
 
+const expandButton = css({
+  '& > div:has(svg)': {
+    paddingLeft: 3,
+    paddingRight: 3,
+  },
+});
+
 function useElementParentHoverState<T extends HTMLElement>(
   ref: React.RefObject<T>
 ): boolean {
@@ -159,7 +166,7 @@ const DocumentActionsGroup: React.FunctionComponent<
           aria-pressed={expanded}
           data-testid="expand-document-button"
           onClick={onExpand}
-          className={actionsGroupItem}
+          className={cx(actionsGroupItem, expandButton)}
           tooltipText={expanded ? 'Collapse all' : 'Expand all'}
         />
       )}

diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
@@ -192,8 +192,8 @@ const expandButton = css({
 
 const hadronElement = css({
   display: 'flex',
-  paddingLeft: spacing[2],
-  paddingRight: spacing[2],
+  paddingLeft: spacing[50],
+  paddingRight: spacing[50],
   marginTop: 1,
 });
 
@@ -239,7 +239,7 @@ const elementRemovedDarkMode = css({
 
 const elementActions = css({
   flex: 'none',
-  width: spacing[3],
+  width: spacing[300],
   position: 'relative',
 });
 
@@ -364,7 +364,7 @@ const elementKeyDarkMode = css({
 });
 
 const calculateElementSpacerWidth = (editable: boolean, level: number) => {
-  return (editable ? spacing[200] : 0) + spacing[400] * level;
+  return (editable ? spacing[100] : 0) + spacing[400] * level;
 };
 
 export const calculateShowMoreToggleOffset = ({
@@ -377,10 +377,10 @@ export const calculateShowMoreToggleOffset = ({
   alignWithNestedExpandIcon: boolean;
 }) => {
   // the base padding that we have on all elements rendered in the document
-  const BASE_PADDING_LEFT = spacing[200];
+  const BASE_PADDING_LEFT = spacing[50];
   const OFFSET_WHEN_EDITABLE = editable
     ? // space taken by element actions
-      spacing[400] +
+      spacing[300] +
       // space and margin taken by line number element
       spacing[400] +
       spacing[100] +