@linzjs/step-ag-grid 7.0.0 → 7.0.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/lui/ActionButton.scss

@@ -5,6 +5,10 @@
   align-items: center;
 }
 
+.ActionButton-minimal {
+  padding-right: 38px !important;
+}
+
 .ActionButton .LuiIcon {
   margin: 0 4px !important;
 }
@@ -30,3 +34,9 @@
     fill: transparent !important;
   }
 }
+
+.ActionButton-fill {
+  width: 100%;
+  justify-content: center;
+}
+

package/src/lui/ActionButton.tsx

@@ -17,11 +17,12 @@ export interface ActionButtonProps {
   dataTestId?: string;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
   iconPosition?: "left" | "right";
-  className?: string;
+  className?: "ActionButton-fill" | string;
   onAction: () => Promise<void> | void;
   // Used for external code to get access to whether action is in progress
   externalSetInProgress?: () => void;
   level?: LuiButtonProps["level"];
+  style?: React.CSSProperties;
 }
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
@@ -32,6 +33,7 @@ export const ActionButton = ({
   name,
   inProgressName,
   dataTestId,
+  style,
   className,
   title,
   onAction,
@@ -65,9 +67,15 @@ export const ActionButton = ({
       level={level}
       title={title ?? ariaLabel ?? name}
       aria-label={ariaLabel ?? name}
-      className={clsx("lui-button-icon-right", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
+      className={clsx(
+        "lui-button-icon-right",
+        "ActionButton",
+        className,
+        localInProgress && "ActionButton-inProgress",
+        name != null && !className?.includes("ActionButton-fill") && "ActionButton-minimal",
+      )}
       size={"lg"}
-      style={name == null ? { padding: "8px 5px" } : {}}
+      style={{ ...(name == null && { padding: "8px 5px" }), ...style }}
       onClick={async () => {
         const promise = onAction();
         const isPromise = typeof promise !== "undefined";

package/src/react-menu3/components/ControlledMenu.tsx

@@ -137,7 +137,7 @@ export const ControlledMenuFr = (
       if (activeElement !== firstInputEl && activeElement !== lastInputEl) return;
 
       const isTextArea = activeElement.nodeName === "TEXTAREA";
-      const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautoSave") || isTextArea;
+      const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") || isTextArea;
       const allowTabToSave = activeElement.getAttribute("data-allowtabtoSave");
       const invokeSave = (reason: string) => {
         if (!saveButtonRef?.current) return;

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

@@ -28,6 +28,8 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
         onAction={performAction}
         iconPosition={"right"}
         level={"secondary"}
+        className={"ActionButton-fill"}
+        style={{ maxWidth: 160 }}
       />
     </>
   );

package/src/stories/grid/FormTest.tsx

@@ -99,7 +99,7 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
           </div>
           <div style={{ marginTop: 25 }}>
             <input
-              data-disableEnterAutoSave
+              data-disableenterautosave
               type="button"
               style={{ height: 48 }}
               onClick={() => setShowModal(true)}