feat(components): improve positioning of DataList actions [JOB-99926] (…

…#1915) * adjust size, spaing, and position of datalistactions * prefer bottom positioning for action tooltips * update Tooltip animations * change how datalistitemaction menu is positioned * adjustments * just a smidge of space * remove usage of OverflowFade from actions * remove some leftover styling * fix test * remove negative var * Fix prettier error in DataListBulkActions * use a nicer bulk test * fix import orders --------- Co-authored-by: Taylor Noj <taylor.n@getjobber.com> Co-authored-by: Taylor Noj <104797704+taylorvnoj@users.noreply.github.com>
GetJobber · Sep 20, 2024 · 68d7d77 · 68d7d77
1 parent 2d117b8
commit 68d7d77
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 17 deletions.
diff --git a/packages/components/src/DataList/components/DataListActions/DataListActions.tsx b/packages/components/src/DataList/components/DataListActions/DataListActions.tsx
@@ -1,7 +1,6 @@
 import React, { Children, ReactElement, isValidElement } from "react";
 import { Tooltip } from "@jobber/components/Tooltip";
 import { Button } from "@jobber/components/Button";
-import { DataListOverflowFade } from "../DataListOverflowFade";
 import {
   DataListActionProps,
   DataListActionsProps,
@@ -25,7 +24,7 @@ export function DataListActions<T extends DataListObject>({
   childrenArray.splice(0, exposedActions.length);
 
   return (
-    <DataListOverflowFade>
+    <>
       {exposedActions.map(({ props }) => {
         if (props.visible && !props.visible(activeItem)) return null;
         if (!props.icon) return null;
@@ -54,14 +53,14 @@ export function DataListActions<T extends DataListObject>({
                   (props.onClick as () => void)?.();
                 }
               }}
-              type="secondary"
+              type="tertiary"
               variation="subtle"
             />
           </Tooltip>
         );
       })}
 
       <DataListItemActionsOverflow actions={childrenArray} />
-    </DataListOverflowFade>
+    </>
   );
 }
diff --git a/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.test.tsx b/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.test.tsx
@@ -7,6 +7,7 @@ import {
   defaultValues,
 } from "@jobber/components/DataList/context/DataListContext";
 import { DataListBulkActions } from ".";
+import { BULK_ACTIONS_CONTAINER_TEST_ID } from "./DataListBulkActions.const";
 import { DataListAction } from "../DataListAction";
 import { DataListHeaderCheckbox } from "../DataListHeader/DataListHeaderCheckbox";
 import { BREAKPOINT_SIZES, Breakpoints } from "../../DataList.const";
@@ -48,7 +49,7 @@ describe("DataListBulkActions", () => {
   it("should render the 4 buttons", () => {
     renderComponent();
     const overflowContainer = screen.getByTestId(
-      "ATL-DataListFilters-Container",
+      BULK_ACTIONS_CONTAINER_TEST_ID,
     );
 
     expect(within(overflowContainer).getAllByRole("button")).toHaveLength(4);

diff --git a/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.tsx b/packages/components/src/DataList/components/DataListBulkActions/DataListBulkActions.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./DataListBulkActions.css";
+import { BULK_ACTIONS_CONTAINER_TEST_ID } from "./DataListBulkActions.const";
 import { DataListBulkActionsProps } from "../../DataList.types";
 import { useDataListContext } from "../../context/DataListContext";
 import { DataListActions } from "../DataListActions";
@@ -25,7 +26,10 @@ export function InternalDataListBulkActions() {
   const itemsToExpose = sm ? 3 : 0;
 
   return (
-    <div className={styles.bulkActions}>
+    <div
+      data-testid={BULK_ACTIONS_CONTAINER_TEST_ID}
+      className={styles.bulkActions}
+    >
       <DataListActions itemsToExpose={itemsToExpose}>
         {children}
       </DataListActions>

diff --git a/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.css b/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.css
@@ -1,13 +1,12 @@
 .menu {
   display: flex;
   position: absolute;
-  top: calc(var(--space-small) * -1);
+  top: -26px;
   right: 0;
   z-index: var(--elevation-menu);
   box-shadow: var(--shadow-base);
-  padding: var(--space-smaller);
   border: var(--border-base) solid var(--color-border);
   border-radius: var(--radius-base);
   background-color: var(--color-surface);
-  gap: var(--space-smaller);
+  gap: var(--space-smallest);
 }
diff --git a/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.tsx b/packages/components/src/DataList/components/DataListItemActions/DataListItemActions.tsx
@@ -21,8 +21,8 @@ export function DataListItemActions<T extends DataListObject>(
 }
 
 const variants: Variants = {
-  hidden: { opacity: 0, y: 10 },
-  visible: { opacity: 1, y: 0 },
+  hidden: { opacity: 0, y: 0 },
+  visible: { opacity: 1, y: 4 },
 };
 
 interface InternalDataListItemActionsProps<T extends DataListObject> {

diff --git a/...nents/src/DataList/components/DataListItemActionsOverflow/DataListItemActionsOverflow.tsx b/...nents/src/DataList/components/DataListItemActionsOverflow/DataListItemActionsOverflow.tsx
@@ -22,7 +22,7 @@ export function DataListItemActionsOverflow<T extends DataListObject>({
         <Button
           icon="more"
           ariaLabel="More actions"
-          type="secondary"
+          type="tertiary"
           variation="subtle"
           onClick={handleMoreClick}
         />

diff --git a/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.css b/packages/components/src/DataList/components/DataListOverflowFade/DataListOverflowFade.css
@@ -1,6 +1,5 @@
 .fadeContainer {
-  --overflow-fade--offset: var(--space-smaller);
-  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);
+  --overflow-fade--offset: 0;
 
   align-self: center;
   position: relative;
@@ -20,7 +19,7 @@
 }
 
 .overflowGrid {
-  margin: var(--overflow-fade--negative-offset);
+  margin: var(--overflow-fade--offset);
   padding: var(--overflow-fade--offset);
   overflow-x: auto;
   overflow-y: visible;
@@ -46,10 +45,10 @@
 }
 
 .overflowLeft::before {
-  left: var(--overflow-fade--negative-offset);
+  left: var(--overflow-fade--offset);
 }
 
 .overflowRight::after {
   --data-list-overflow-shadow-angle: to left;
-  right: var(--overflow-fade--negative-offset);
+  right: var(--overflow-fade--offset);
 }