Clean up components, using flex gap

Author: kraenhansen

packages/compass-components/src/components/actions/item-action-button.tsx

@@ -1,18 +1,10 @@
 import React from 'react';
-import { css, cx } from '@leafygreen-ui/emotion';
-import { spacing } from '@leafygreen-ui/tokens';
+import { cx } from '@leafygreen-ui/emotion';
 
 import { ItemActionButtonSize } from './constants';
 import type { ItemComponentProps } from './types';
 import { SmallIconButton } from './small-icon-button';
 
-// TODO: Move to a parent component - or a flex gap
-const buttonStyle = css({
-  '&:not(:first-child)': {
-    marginLeft: spacing[100],
-  },
-});
-
 export function ItemActionButton<Action extends string>({
   action,
   icon = <></>,
@@ -36,7 +28,7 @@ export function ItemActionButton<Action extends string>({
       data-action={action}
       data-testid={dataTestId}
       onClick={onClick}
-      className={cx(buttonStyle, iconClassName, className)}
+      className={cx(iconClassName, className)}
       style={iconStyle}
       disabled={isDisabled}
     />

packages/compass-components/src/components/actions/item-action-controls.tsx

@@ -12,13 +12,7 @@ const actionControlsStyle = css({
   marginLeft: 'auto',
   alignItems: 'center',
   display: 'flex',
-});
-
-// Action buttons are rendered 4px apart from each other. With this we keep the
-// same spacing also when action buttons are rendered alongside action menu
-// (happens when collapseAfter prop is specified)
-const actionMenuWithActionControlsStyles = css({
-  marginLeft: spacing[100],
+  gap: spacing[100],
 });
 
 export type ItemActionControlsProps<Action extends string> = {
@@ -79,6 +73,7 @@ export function ItemActionControls<Action extends string>({
     }),
     [menuClassName, usePortal]
   );
+
   if (actions.length === 0) {
     return null;
   }
@@ -89,19 +84,12 @@ export function ItemActionControls<Action extends string>({
     const collapsedActions = actions.slice(collapseAfter);
     return (
       <div className={actionControlsStyle}>
-        <ItemActionGroup
-          actions={visibleActions}
-          {...sharedProps}
-        ></ItemActionGroup>
+        <ItemActionGroup {...sharedProps} actions={visibleActions} />
         <ItemActionMenu
-          actions={collapsedActions}
           {...sharedProps}
           {...sharedMenuProps}
-          className={cx(
-            actionMenuWithActionControlsStyles,
-            sharedProps.className
-          )}
-        ></ItemActionMenu>
+          actions={collapsedActions}
+        />
       </div>
     );
   }
@@ -110,13 +98,9 @@ export function ItemActionControls<Action extends string>({
 
   if (shouldShowMenu) {
     return (
-      <ItemActionMenu
-        actions={actions}
-        {...sharedProps}
-        {...sharedMenuProps}
-      ></ItemActionMenu>
+      <ItemActionMenu actions={actions} {...sharedProps} {...sharedMenuProps} />
     );
   }
 
-  return <ItemActionGroup actions={actions} {...sharedProps}></ItemActionGroup>;
+  return <ItemActionGroup actions={actions} {...sharedProps} />;
 }

packages/compass-components/src/components/actions/item-action-group.tsx

@@ -19,13 +19,7 @@ const containerStyle = css({
   marginLeft: 'auto',
   alignItems: 'center',
   display: 'flex',
-});
-
-// TODO: Move to a parent component - or a flex gap
-const actionGroupButtonStyle = css({
-  '&:not(:first-child)': {
-    marginLeft: spacing[100],
-  },
+  gap: spacing[100],
 });
 
 export type ItemActionGroupProps<Action extends string> = {
@@ -80,6 +74,7 @@ export function ItemActionGroup<Action extends string>({
         const item = (
           <ItemComponent
             {...itemProps}
+            key={itemProps.action}
             iconSize={iconSize}
             iconStyle={iconStyle}
             iconClassName={iconClassName}
@@ -93,14 +88,9 @@ export function ItemActionGroup<Action extends string>({
             <Tooltip
               key={itemProps.action}
               {...tooltipProps}
-              trigger={
-                <div
-                  className={actionGroupButtonStyle}
-                  style={{ display: 'inherit' }}
-                >
-                  {item}
-                </div>
-              }
+              // Wrapping the item in a div, because the `trigger` must accept and render `children`
+              // See docs for the prop for more information
+              trigger={<div style={{ display: 'inherit' }}>{item}</div>}
             >
               {tooltip}
             </Tooltip>

packages/compass-components/src/components/actions/item-action-menu.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
-import { spacing } from '@leafygreen-ui/tokens';
 
 import { Menu, MenuItem, MenuSeparator } from '../leafygreen';
 
@@ -30,13 +29,6 @@ const containerStyle = css({
   display: 'flex',
 });
 
-// TODO: Move to a parent component - or a flex gap
-const buttonStyle = css({
-  '&:not(:first-child)': {
-    marginLeft: spacing[100],
-  },
-});
-
 export type ItemActionMenuProps<Action extends string> = {
   actions: MenuAction<Action>[];
   onAction(actionName: Action): void;
@@ -119,7 +111,7 @@ export function ItemActionMenu<Action extends string>({
                 evt.stopPropagation();
                 onClick && onClick(evt);
               }}
-              className={cx(buttonStyle, iconClassName)}
+              className={iconClassName}
               style={iconStyle}
             >
               {children}