@linzjs/step-ag-grid 7.5.0 → 7.5.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.5.0",
+  "version": "7.5.2",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -34,7 +34,7 @@
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@linzjs/lui": ">=17",
+    "@linzjs/lui": "^17.23.2",
     "ag-grid-community": ">=27",
     "ag-grid-react": ">=27",
     "debounce-promise": "^3.1.2",

package/src/components/Grid.tsx

@@ -17,7 +17,7 @@ export interface GridBaseRow {
 
 export interface GridProps {
   selectable?: boolean;
-  dataTestId?: string;
+  ["data-testid"]?: string;
   quickFilter?: boolean;
   quickFilterPlaceholder?: string;
   quickFilterValue?: string;
@@ -230,7 +230,7 @@ export const Grid = (params: GridProps): JSX.Element => {
 
   return (
     <div
-      data-testid={params.dataTestId}
+      data-testid={params["data-testid"]}
       className={clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale")}
     >
       {params.quickFilter && (

package/src/components/gridForm/GridFormDropDown.tsx

@@ -300,8 +300,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                     }
                   }}
                 >
-                  {(item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)) +
-                    (item.subComponent ? "..." : "")}
+                  {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                  {item.subComponent ? "..." : ""}
                 </MenuItem>
 
                 {item.subComponent && selectedSubComponent === item && (

package/src/lui/ActionButton.scss

@@ -5,12 +5,24 @@
   align-items: center;
 }
 
-.ActionButton-minimal {
-  padding-right: 38px !important;
+.ActionButton-minimal.lui-button-lg.lui-button-icon-right {
+  padding-right: 38px;
 }
 
-.ActionButton .LuiIcon {
-  margin: 0 4px !important;
+.ActionButton.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight) .LuiIcon {
+  margin: 0 4px;
+}
+
+.ActionButton.ActionButton-tight.lui-button-lg.lui-button-icon-right .LuiIcon {
+  margin: 0;
+}
+
+.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight) {
+  padding: 8px 5px;
+}
+
+.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right.ActionButton-tight {
+  padding: 0;
 }
 
 .ActionButton-minimalArea {
@@ -25,13 +37,13 @@
   visibility: hidden;
 }
 
-.ActionButton-inProgress {
+.ActionButton-inProgress.lui-button-lg.lui-button-icon-right {
   cursor: progress;
-  color: #007198 !important;
-  background-color: colors.$polar !important;
+  color: #007198;
+  background-color: colors.$polar;
 
   svg * {
-    fill: transparent !important;
+    fill: transparent;
   }
 }
 

package/src/lui/ActionButton.tsx

@@ -1,7 +1,7 @@
 import "./ActionButton.scss";
 
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { useEffect, useState, CSSProperties } from "react";
 import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 import { usePrevious } from "./reactUtils";
@@ -17,10 +17,10 @@ export interface ActionButtonProps {
   dataTestId?: string;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
   iconPosition?: "left" | "right";
-  className?: "ActionButton-fill" | string;
+  className?: "ActionButton-fill" | "ActionButton-tight" | string;
   onClick: () => Promise<void> | void;
   level?: LuiButtonProps["level"];
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
@@ -70,9 +70,10 @@ export const ActionButton = ({
         className,
         localInProgress && "ActionButton-inProgress",
         name != null && !className?.includes("ActionButton-fill") && "ActionButton-minimal",
+        name == null && "ActionButton-iconOnly",
       )}
       size={"lg"}
-      style={{ ...(name == null && { padding: "8px 5px" }), ...style }}
+      style={style}
       onClick={async () => {
         const promise = onClick();
         const isPromise = typeof promise !== "undefined";
@@ -102,12 +103,7 @@ export const ActionButton = ({
           }}
         />
       ) : (
-        <LuiIcon
-          name={icon}
-          alt={ariaLabel ?? name ?? ""}
-          size={size}
-          spanProps={{ style: iconPosition === "right" ? { transform: "scaleX(-1)" } : {} }}
-        />
+        <LuiIcon name={icon} alt={ariaLabel ?? name ?? ""} size={size} />
       )}
       {iconPosition === "left" && buttonText}
     </LuiButton>

package/src/stories/components/ActionButton.stories.tsx

@@ -23,7 +23,15 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
       <ActionButton icon={"ic_add"} aria-label={"Add new row"} onClick={performAction} level={"primary"} />
       <br />
       <ActionButton
-        icon={"ic_arrow_back"}
+        icon={"ic_add"}
+        aria-label={"Add new row"}
+        onClick={performAction}
+        level={"primary"}
+        className={"ActionButton-tight"}
+      />
+      <br />
+      <ActionButton
+        icon={"ic_arrow_forward_right"}
         name={"Continue"}
         onClick={performAction}
         iconPosition={"right"}

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -92,6 +92,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
 
   return (
     <Grid
+      data-testid={"bearingsTestTable"}
       {...props}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}